/* ---- risk scheme: the level ramp, the scales, the matrix, the threshold ---- */

/* Six steps, least to most severe. The rank picks the class, never the
   manufacturer, so two schemes of different sizes read the same way. */
.aucra-level-0 {
  --level-wash: var(--pass-wash);
  /* The same green as the PASS chip's ink: one token for one pairing, dark
     enough that both read 4.77:1 on this wash. */
  --level-ink: var(--pass);
}
.aucra-level-1 {
  /* Darkened from #4d7a1e, which sat at 4.45:1 on this wash and was the one
     pairing Lighthouse still flagged on the register; this reads 5.10:1. */
  --level-wash: var(--risk-1-wash);
  --level-ink: var(--risk-1-ink);
}
.aucra-level-2 {
  --level-wash: var(--gold-wash);
  --level-ink: var(--gold-deep);
}
.aucra-level-3 {
  --level-wash: var(--warn-wash);
  --level-ink: var(--warn);
}
.aucra-level-4 {
  --level-wash: var(--risk-4-wash);
  --level-ink: var(--gap);
}
.aucra-level-5 {
  --level-wash: var(--risk-5-wash);
  --level-ink: var(--risk-5-ink);
}
.aucra-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--level-ink);
  flex: 0 0 10px;
}

.aucra-scale-row {
  display: grid;
  grid-template-columns: 18px 120px minmax(0, 1fr) 32px;
  gap: 8px;
  /* The index and the label at the top beside a description that wraps to
     three lines, as the mockup draws it (three readers, 2026-10-09, L2). */
  align-items: start;
}
.aucra-scale-index {
  font-size: 0.75rem;
  color: var(--muted);
}
/* In a narrow panel (a phone, or the assistant drawer open at 1024) the
   description drops under the label rather than squeezing both. The panel
   is the container, as for the criteria below. */
@container aucra-region (max-width: 636px) {
  .aucra-scale-row {
    grid-template-columns: 18px minmax(0, 1fr) auto;
  }
  .aucra-scale-row > .aucra-field:last-of-type {
    grid-area: 2 / 2 / auto / -1;
  }
}

.aucra-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.aucra-level-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  padding: 5px 10px 5px 12px;
  border: 1px solid var(--line-control);
  border-radius: 6px;
  background: var(--panel);
}
/* The name field is as wide as the name in it, set in `ch` by kit/fields.py, so
   a row of chips and the Add button after them stay on one line. A name longer
   than the panel is wide gives way inside its chip rather than pushing the
   scheme editor sideways. */
.aucra-level-chip .aucra-field {
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
}
.aucra-level-chip .aucra-control {
  max-width: 100%;
}
/* The chip is the frame, so the name field inside it draws none of its own. */
.aucra-level-chip .aucra-control .q-field__control {
  min-height: 22px;
  height: 22px;
  padding: 0;
}
.aucra-level-chip .aucra-control .q-field__control:before,
.aucra-level-chip .aucra-control .q-field__control:after {
  border: none;
}
.aucra-level-chip .q-field__marginal {
  height: 22px;
}
.aucra-level-chip .q-btn.aucra-icon-btn {
  width: 22px;
  height: 22px;
  /* Quasar's own min-width on a dense round button is 31px, so the chip sets
     both ends of the box. */
  min-width: 22px;
  min-height: 22px;
}

/* A wide matrix is wider than the content column on a phone, so the grid
   scrolls inside its own box rather than pushing the page sideways; each cell
   keeps 96px for its level and arrow (`kit/matrix.py`), the side column
   narrows in a phone wide panel, and the kit's scroll cue says when the grid
   is wider than its card. */
.aucra-matrix-scroll {
  overflow-x: auto;
}
.aucra-matrix {
  --aucra-matrix-side: 110px;
  display: grid;
  gap: 6px;
  align-items: center;
}
@container aucra-region (max-width: 636px) {
  .aucra-matrix {
    --aucra-matrix-side: 72px;
  }
}
/* The band is already inset, so the cue line starts at its left edge. */
.aucra-matrix-band .aucra-scroll-cue {
  margin: 0 0 6px;
}
.aucra-matrix-head,
.aucra-matrix-side {
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  color: var(--text);
  overflow-wrap: anywhere;
}
.aucra-matrix-head {
  text-align: center;
}
.aucra-matrix-cell .q-field__control {
  min-height: 34px;
  height: 34px;
  background: var(--level-wash);
  color: var(--level-ink);
  font-size: 12.5px;
  font-weight: var(--weight-bold);
  border-radius: 6px;
}
.aucra-matrix-cell .q-field__control:before {
  border: 1px solid var(--line-control);
  border-radius: 6px;
}
.aucra-matrix-cell .q-field__native {
  color: var(--level-ink);
  font-size: 12.5px;
  font-weight: var(--weight-bold);
}
.aucra-matrix-cell .q-field__marginal {
  height: 34px;
}
.aucra-matrix-cell .q-field__append .q-icon {
  font-size: 16px;
  color: var(--muted);
}

.aucra-threshold {
  gap: 12px;
}
.aucra-threshold-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.aucra-threshold-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
/* One line is picked, so each chip leads with the round mark of the choice
   controls (`kit.css`), before its level's swatch. */
.aucra-threshold-chip:hover {
  border-color: var(--line-strong);
  background: var(--mist);
  color: var(--text);
}
.aucra-threshold-chip:active {
  border-color: var(--ink);
}
/* Picked is a state, not an action: the gold wash inside a 1.5px gold edge
   (the border and half a pixel inset), the ink 13.11:1 on it. */
.aucra-threshold-on,
.aucra-threshold-on:hover {
  background: var(--gold-wash);
  border-color: var(--gold);
  box-shadow: inset 0 0 0 0.5px var(--gold);
  color: var(--text);
  font-weight: var(--weight-bold);
}
/* After the hover, which it must outrank under the pointer. */
/* The picked chip presses one step down the gold ramp (the ink 11.27:1),
   keeping its gold edge. */
.aucra-threshold-on:active {
  background: var(--output-line);
  border-color: var(--gold);
}
.aucra-threshold-line {
  font-size: 12.5px;
  color: var(--muted);
}

/* ---- clause pages: the shared chrome of 6.2 and 6.3 ---- */

.aucra-block {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 18px 0;
  border-top: 1px solid var(--line);
}
.aucra-block-letter {
  font-size: 0.75rem;
  color: var(--gold-deep);
  padding-top: 3px;
}
.aucra-block-body {
  width: 100%;
  min-width: 0;
  gap: 8px;
  padding-bottom: 14px;
}
/* In a narrow panel the letter goes above the body, so the editor takes the
   width the gutter held (bug hunt 2026-10-09, M3). */
@container aucra-region (max-width: 599px) {
  .aucra-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}
/* While the criterion rows keep their note column, the attestation sits in the
   criterion's own text column: 18px gutter, the 250px note column and its 14px
   gap on the right. Under 637px of panel the note goes under its criterion
   (`content_text.css`), and so does this, the full width of the panel. The
   panel is the container, so the assistant drawer switches it too. */
.aucra-attest-inset {
  padding: 0 282px 14px 50px;
}
@container aucra-region (max-width: 636px) {
  .aucra-attest-inset {
    padding: 0 18px 14px;
  }
}
.aucra-result {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--muted);
}
.aucra-result-pass {
  font-size: 13px;
  color: var(--pass);
  /* "PASS · recorded 2026-10-14" is short: never broken inside its date (7.7 D15). */
  white-space: nowrap;
}
.aucra-result-tick {
  font-size: 15px;
}
.aucra-gap {
  font-size: 0.78rem;
  color: var(--muted);
}
/* A link to a region head on the same page: it reads as the text around it
   until it is hovered or reached by the keyboard. */
.aucra-jump {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.aucra-jump:hover {
  text-decoration: underline;
}
.aucra-jump:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}
.aucra-footnote {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--wash-head);
  color: var(--muted);
}
.aucra-footnote .aucra-para,
.aucra-footnote .aucra-list {
  font-size: 0.8rem;
}
.aucra-clause-tabs .q-tab {
  font-weight: var(--weight-bold);
}
.aucra-clause-tabs .q-tab--active {
  font-weight: var(--weight-bold);
}
/* The label is the kit's own element inside the tab, so the weight is set on it. */
.aucra-clause-tabs .q-tab--active .aucra-tab-label {
  font-weight: var(--weight-bold);
}
.aucra-clause-tabs .aucra-tab-panels {
  padding: 0;
  background: transparent;
}
.aucra-clause-tabs .q-tab-panel {
  padding: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* The two bands of the 6.3 output regions: the risk scheme and the acceptance
   threshold, each a ruled strip inside its panel. */
.aucra-scheme-band,
.aucra-threshold-band {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--wash-band);
}
.aucra-band-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* The head face comes from `content.css`; a size up so the light stroke reads.
   Its (i) sits beside it, as a field's does (the 6.3 canvas). */
.aucra-band-title {
  font-size: 1rem;
}
.aucra-band-note {
  font-size: 0.78rem;
  color: var(--muted);
}
.aucra-scheme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 12px;
  align-items: start;
}
@container aucra-region (max-width: 636px) {
  .aucra-scheme-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}