/* ---- 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 {
  --level-wash: #eaf3d9;
  /* 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-ink: #467019;
}
.aucra-level-2 {
  --level-wash: #fdf3d6;
  --level-ink: #7c630f;
}
.aucra-level-3 {
  --level-wash: #fdf1e3;
  --level-ink: #b45309;
}
.aucra-level-4 {
  --level-wash: #fbe4e1;
  --level-ink: #b3261e;
}
.aucra-level-5 {
  --level-wash: #f3d9d9;
  --level-ink: #7f1d1d;
}
.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;
  align-items: center;
}
.aucra-scale-index {
  font-size: 0.72rem;
  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);
  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 six column matrix is wider than the content column on a phone, so the grid
   scrolls inside its own box rather than pushing the page sideways. */
.aucra-matrix-scroll {
  overflow-x: auto;
}
.aucra-matrix {
  display: grid;
  gap: 6px;
  align-items: center;
  min-width: 420px;
}
.aucra-matrix-head,
.aucra-matrix-side {
  font-size: 0.75rem;
  font-weight: 500;
  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: 500;
  border-radius: 6px;
}
.aucra-matrix-cell .q-field__control:before {
  border: 1px solid var(--line);
  border-radius: 6px;
}
.aucra-matrix-cell .q-field__native {
  color: var(--level-ink);
  font-size: 12.5px;
  font-weight: 500;
}
.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: 600;
}
/* 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;
}
/* 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);
}
.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: 500;
}
.aucra-clause-tabs .q-tab--active {
  font-weight: 600;
}
/* 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: 600;
}
.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;
}
.aucra-band-title {
  font-size: 0.84rem;
  font-weight: 500;
  flex: 1;
}
.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);
  }
}