/* AuCRA INSIGHT content layer: page content, status vocabulary, panels, tabs,
   fields, buttons, focus and motion. Tokens come from brand.css. */

/* Quasar's own tooltip is 10px on a grey ground, which reads as a browser
   default beside the page. Themed once here, so every tooltip on every page
   is the same small card in the page's own ink. */
.q-tooltip {
  font-size: 12px;
  line-height: 1.45;
  padding: 6px 9px;
  max-width: 260px;
  /* A control's corner on the soft scale (the user, 2026-09-29). */
  border-radius: 8px;
  background: var(--ink);
  color: #ffffff;
}
/* The kit's tooltip option for an icon button (`kit/tip.button_tip`): the
   pointer may move onto it and it stays (WCAG 1.4.13). Quasar's
   `no-pointer-events` is `!important` in its own layer, hence `base`. */
@layer base {
  .q-tooltip.aucra-tip-hover.no-pointer-events {
    pointer-events: auto !important;
  }
}

/* Every menu is portaled to the body, outside the soft column, so Quasar's
   own card would show: a 4px corner and a material shadow. Themed once here,
   for a select's option list, the header's account menu and a passage alike:
   the floating scale of the softer look, 12px, the soft line, and the clause
   preview card's shadow (kit_fields.css). */
.q-menu {
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  box-shadow: var(--soft-float-shadow);
}
/* A select's option list: the page's own item size and caption ink, for
   every select the kit draws. */
.q-menu.aucra-select-menu {
  background: var(--panel);
  /* A picker's list grows with its longest option, which ran 40px past the
     panel on 7.3 (DM8): past 520px an option wraps. A select's own list is at
     least its field's width, which the min-width Quasar sets keeps. */
  max-width: min(520px, calc(100vw - 32px));
}
.q-menu.aucra-select-menu .q-item__label {
  font-size: 12.5px;
  color: var(--text);
}
.q-menu.aucra-select-menu .q-item__label--caption {
  font-size: 11.5px;
  color: var(--muted);
}

.aucra-eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
/* The head's first row: the eyebrow keeps one line, and when the prev and
   next pair does not fit beside it the pair takes its own row under it, as
   the 7.3 artboard draws (M4). */
.aucra-clause-top {
  flex-wrap: wrap;
  gap: 8px;
}
.aucra-clause-top .aucra-eyebrow {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.aucra-clause-top .aucra-prevnext {
  flex: 0 1 auto;
  flex-wrap: nowrap;
}
/* The cap is on the title, not on the step: a clause title under it is drawn
   whole, and only a longer one is cut. */
.aucra-clause-top .aucra-step {
  min-width: 0;
  max-width: none;
}
.aucra-clause-top .aucra-step-title {
  max-width: 240px;
}
/* The head's block is a container, so the rule below follows the content
   column rather than the viewport: the assistant drawer narrows the column
   without the viewport changing (step 10, C2, 1024px with the drawer open). */
.aucra-clause-head {
  container: aucra-clause-head / inline-size;
}
/* Below 760px of column the eyebrow and the pair cannot share a line: the
   widest pair (7.5's, 573px) and the 8px gap leave the eyebrow under 180px, and
   narrower still the pair drew over it. The eyebrow gets its own line and the
   pair the next one, each step taking half and cutting its title. A phone's
   column is always under 760px, so this is its rule too. */
@container aucra-clause-head (max-width: 759px) {
  .aucra-clause-top {
    flex-wrap: wrap;
  }
  .aucra-clause-top .aucra-eyebrow {
    flex: 1 1 100%;
    white-space: normal;
  }
  .aucra-clause-top .aucra-prevnext {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .aucra-clause-top .aucra-step {
    flex: 0 1 50%;
  }
  .aucra-clause-top .aucra-step-title {
    max-width: none;
    min-width: 0;
  }
}
.aucra-title {
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.aucra-sub {
  font-size: 0.95rem;
  color: var(--muted);
}
.aucra-content {
  min-width: 0;
}
/* The Dashboard's own measure: its register row draws a 300px name, an 84px
   id chip, a 160px bar with 256px of counts, the date, the chevron and the
   Remove, which is 1117px of row. The other pages keep the 896px measure. */
.aucra-content-dashboard {
  max-width: 1120px;
}

.aucra-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}
/* A panel drawn as a dialog's card (the Dashboard's delete question) is
   portaled to the body, outside the soft column, so the softer look is given
   here: 16px, the soft line and the soft shadow. The ground stays solid
   --panel, not the see through one: under the dialog's dimmed backdrop a
   translucent card would go grey and take its words' contrast down. */
.q-dialog__inner > .aucra-panel {
  border-color: var(--soft-line);
  border-radius: var(--soft-radius);
  box-shadow: var(--soft-shadow);
}
/* A region drawn as a stack of cards (`kit/panel.region_cards`): the region
   head's card, then one card per later part, 10px apart with nothing drawn
   between them. Regions stay 16px apart, so the stack reads as one region. */
.aucra-region-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* A later card's edge is the line above what opens it, so its first row
   draws no top line of its own: a block, a criterion, a band, and a
   register's head, directly or through its page's box. A boxed fold keeps
   its whole border. */
.aucra-section-card > :first-child:not(.aucra-boxed),
.aucra-section-card > .aucra-register:first-child > .aucra-register-head:first-child,
.aucra-section-card > :first-child > .aucra-register:first-child
  > .aucra-register-head:first-child {
  border-top: 0;
}
.aucra-panel-title {
  font-weight: 600;
  font-size: 1rem;
}
.aucra-count {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.aucra-empty {
  padding: 4px 18px 18px;
  color: var(--muted);
  font-size: 0.95rem;
}
/* Under a head band the empty line takes the band's own 14px, not the 4px
   it had under a plain title (the Dashboard's register). */
.aucra-soft .aucra-section-card > .aucra-panel-head + .aucra-empty {
  padding-top: 14px;
}

/* ---- register rows ---- */

.aucra-row {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--line);
  transition: background 0.15s, box-shadow 0.15s;
}
.aucra-row:hover {
  background: #fdf8ec;
  box-shadow: inset 3px 0 0 var(--gold);
}
/* The Dashboard row is a wrapper holding a link plus a delete button; /debug
   still uses the plain anchor form, so both carry the row's inner geometry. */
/* A head draws the line above the first row: the /debug workspace list, and
   the Dashboard's register card, whose rows are its head's siblings (the
   refreshable between them draws no element). */
.aucra-panel-head + .aucra-row {
  border-top: 0;
}
a.aucra-row,
a.aucra-row-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
  color: inherit;
  text-decoration-line: none;
}
a.aucra-row-link {
  flex: 1 1 auto;
  min-width: 0;
}
a.aucra-row:hover,
a.aucra-row-link:hover {
  opacity: 1;
}
/* ---- the press state ----

   Every family below answers a press, not only a hover: the rule is one token
   deeper than the hover in the same family, and a control whose hover is only
   an underline takes the gold wash behind its words. No transform and no new
   transition, so the reduced motion contract in kit_views.css still holds and no
   colour outside the token set is introduced. */
a.aucra-row:active,
a.aucra-row-link:active {
  background: var(--gold-wash);
}
.aucra-row-name {
  font-weight: 500;
  /* The drawing gives the name a flat 300px track. It is the only cell that
     gives way, so below 1200px it shrinks before the bar and its counts do,
     and the ellipsis and the tooltip carry the rest of a long name. */
  flex: 0 1 300px;
  /* Never below 140px: at 1024px the name vanished entirely once the bar had
     taken the row, and a row with only its id chip names no workspace. */
  min-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The status track of the Dashboard row: the bar and its counts, 256px of
   words as the drawing measures them, and the row's spare width. It grows and
   never shrinks, so the name is what gives way. */
.aucra-row .aucra-bar-row {
  flex: 1 0 auto;
}
.aucra-row .aucra-bar-text {
  flex: 0 0 256px;
}
/* Below 1200px the name has given its 160px; from there the counts give way
   too, with an ellipsis, so the name keeps its 140px floor at 1024px. */
@media (max-width: 1200px) {
  .aucra-row .aucra-bar-row {
    flex: 1 1 auto;
    /* The bar's 120px, its 10px gap and the counts' 80px floor, so the track
       never shrinks under its own content and spills over the cells beside it. */
    min-width: 210px;
  }
  .aucra-row .aucra-bar {
    flex-basis: 120px;
  }
  .aucra-row .aucra-bar-text {
    flex: 0 1 256px;
    min-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.aucra-row-date {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--muted);
}
.aucra-row-go {
  color: var(--muted);
}
.aucra-row-delete.q-btn {
  flex: 0 0 auto;
  margin-right: 10px;
  color: var(--muted);
}
.aucra-row-delete.q-btn:hover {
  color: var(--warn);
}
/* The Dashboard's create row: the name box and Create side by side, and on a
   phone one above the other, so the button keeps its label on one line. */
.aucra-create-row {
  flex-wrap: nowrap;
}
/* Below 640px the Dashboard row is three lines on a grid: the id and the name;
   the bar with its counts and the date; the document count. The chevron goes,
   because the whole row is the link and the name needs its width. The Remove
   stays the row's sibling at the right, clear of the bar. */
@media (max-width: 639px) {
  .aucra-create-row {
    flex-wrap: wrap;
  }
  .aucra-create-row > * {
    flex: 1 1 100%;
  }
  a.aucra-row-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding: 12px 8px 12px 14px;
  }
  .aucra-row-link > .aucra-id {
    grid-area: 1 / 1;
    justify-self: start;
  }
  .aucra-row-name {
    grid-area: 1 / 2 / auto / -1;
    min-width: 0;
  }
  .aucra-row-link > .aucra-row-go {
    display: none;
  }
  .aucra-row .aucra-bar-row {
    grid-area: 2 / 1 / auto / 3;
    min-width: 0;
  }
  .aucra-row .aucra-bar {
    flex: 0 1 120px;
    min-width: 60px;
  }
  .aucra-row .aucra-bar-text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .aucra-row-date {
    grid-area: 2 / 3;
    justify-self: end;
  }
  .aucra-row-documents {
    grid-area: 3 / 1 / auto / -1;
  }
  .aucra-row-delete.q-btn {
    margin-right: 4px;
  }
}

.aucra-id {
  flex: 0 0 auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  color: var(--muted);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}
.aucra-id-gold {
  color: var(--gold-deep);
  background: var(--gold-wash);
}

a.aucra-back {
  color: var(--gold-deep);
  font-weight: 500;
}

/* ---- status vocabulary ---- */

.aucra-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.aucra-dot-pass {
  background: var(--pass);
  border: 1.5px solid var(--pass);
}
.aucra-dot-in_progress {
  background: var(--gold);
  border: 1.5px solid var(--gold);
}
.aucra-dot-not_started {
  background: #c3cbd3;
  border: 1.5px solid var(--placeholder);
}
.aucra-dot-not_applicable {
  width: 7px;
  height: 2px;
  border-radius: 1px;
  background: var(--muted);
}

.aucra-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
  letter-spacing: 0.01em;
  font-weight: 500;
}
.aucra-chip-sm {
  padding: 2px 9px;
  font-size: 0.72rem;
}
.aucra-chip-md {
  padding: 4px 12px;
  font-size: 0.78rem;
}
.aucra-chip-pass {
  color: var(--pass);
  background: var(--pass-wash);
  border-color: var(--pass);
}
.aucra-chip-in_progress {
  color: var(--gold-deep);
  background: var(--gold-wash);
}
.aucra-chip-not_started,
.aucra-chip-not_applicable {
  color: var(--muted);
  background: var(--mist);
}

.aucra-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.aucra-tag-norm {
  color: var(--gold-deep);
  border: 1px solid var(--gold-deep);
}
.aucra-tag-info {
  color: var(--muted);
  border: 1px solid var(--line-strong);
}

/* ---- progress bar (one segment per clause) ---- */

.aucra-bar-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Never shrunk: the bar is a fixed track and the counts after it read in
     full, so the row's spare width comes off the name instead. */
  flex: 0 0 auto;
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-bar {
  display: inline-flex;
  /* Fixed track: 20 segments and their gaps share it, so a segment is never
     squeezed to zero however narrow the row gets. */
  flex: 0 0 160px;
  width: 160px;
  height: 6px;
  gap: 1px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--line);
}
.aucra-bar-seg {
  flex: 1 1 0;
  min-width: 0;
  height: 6px;
}
.aucra-bar-seg-pass {
  background: var(--pass);
}
.aucra-bar-seg-in_progress {
  background: var(--gold);
}
.aucra-bar-seg-not_started {
  background: #c3cbd3;
}
.aucra-bar-seg-not_applicable {
  background: #e2e7ec;
}
.aucra-bar-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- panels, heads, tabs ---- */

.aucra-panel-head,
.aucra-region-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.aucra-panel-head > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* The head's bottom line is the line above what follows it, so the first row
   under a region head draws no top line of its own (the user, 2026-09-24).
   One selector per first row kind the clause pages draw; a register wrapped
   in its page's box is matched through that box. Rows further down keep
   their line. */
.aucra-region-head + .aucra-input-row,
.aucra-region-head + .aucra-block,
.aucra-region-head + .aucra-criterion,
.aucra-region-head + .aucra-threshold-band,
.aucra-region-head + .aucra-scheme-band,
.aucra-region-head + .aucra-objectives-band,
.aucra-region-head + .aucra-register > .aucra-register-head:first-child,
.aucra-region-head + * > .aucra-register:first-child > .aucra-register-head:first-child {
  border-top: 0;
}
.aucra-panel-note {
  font-size: 0.8rem;
  color: var(--muted);
}
/* The body under a panel head, on the head's own 18px edge, so the head and
   what it heads start on one line. An empty line inside it takes the pane's
   padding, not the panel padding `aucra-empty` carries on its own. */
.aucra-pane {
  padding: 14px 18px;
}
.aucra-pane > .aucra-empty {
  padding: 0;
}
.aucra-region-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gold-deep);
  background: var(--gold-wash);
}
.aucra-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
/* Only a head that draws the Suggest control: there the title gives way and
   wraps, as Rows.dc.html has it, and the pair stays on one line at the right.
   A head without the control keeps the wrap it has always had. */
.aucra-region-head:has(.aucra-head-right .aucra-suggest-button) {
  flex-wrap: nowrap;
}
.aucra-region-head:has(.aucra-head-right .aucra-suggest-button) .aucra-region-name {
  min-width: 0;
}
/* Below 576px of panel (a 640px viewport without the assistant, or 1024px
   with it open) the right hand group gives way too: it wraps under the
   region's name and its own note and buttons wrap inside the panel, so no
   head pushes the page sideways. The panel is the container
   (`content_text.css`, aucra-region), so the drawer narrowing the column
   switches it as a narrow viewport does. */
@container aucra-region (max-width: 575px) {
  .aucra-region-head:has(.aucra-head-right .aucra-suggest-button) {
    flex-wrap: wrap;
  }
  .aucra-head-right {
    flex-shrink: 1;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }
}
.aucra-region-name {
  font-weight: 600;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.aucra-tabs {
  /* Same inset as every panel cell, so the first label never hugs the edge. */
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
}
/* Tabs split onto a second row rather than being clipped or hidden behind
   Quasar's scroll arrows: the style guide's rule, and the only way the last
   tab stays reachable at 390 px. */
.aucra-tabs .q-tabs__content {
  flex-wrap: wrap;
}
/* Quasar dims an inactive tab to 0.85, which takes --muted from 4.98:1 to
   3.74:1 on the panel. The token is already the quiet one, so the label keeps
   its own strength and the active tab is untouched. */
.aucra-tabs .q-tab--inactive {
  opacity: 1;
}
.aucra-tabs .q-tab {
  padding: 0 2px;
  margin-right: 22px;
  min-height: 44px;
  /* Quasar stretches tabs to fill the row; a wrapped second row would then
     start in the middle of the bar instead of at the left edge. */
  flex: 0 0 auto;
}
.aucra-tabs .q-tab--active {
  color: var(--text);
}
.aucra-tabs .q-tab__indicator {
  background: var(--gold);
  height: 2px;
}
.aucra-tab-label {
  font-size: 0.88rem;
  font-weight: 500;
}
.aucra-tabs .q-tab--active .aucra-tab-label {
  font-weight: 600;
}
.aucra-tab-count {
  margin-left: 8px;
  font-size: 0.72rem;
  line-height: 18px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--mist);
}
.aucra-tabs .q-tab--active .aucra-tab-count {
  color: var(--gold-deep);
  background: var(--gold-wash);
}
/* Quasar leaves this helper at opacity .15 after a click, which reads as a
   grey slab stuck on the tab; focus is drawn by the ring below instead. */
.aucra-tabs .q-focus-helper,
.aucra-toggle-option .q-focus-helper {
  display: none !important;
}

/* ---- fields ---- */

.aucra-field {
  gap: 6px;
}
.aucra-field-label {
  font-size: 0.82rem;
  font-weight: 500;
}
/* The state lines that stay in the flow: empty state notes, the tool's own
   readings. A control's own help is behind the (i) below. */
.aucra-field-help {
  font-size: 0.75rem;
  color: var(--muted);
}
.aucra-field-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
}
/* The artboard puts the free space before the Suggest button, so it sits at the
   field's right edge rather than against the label. */
.aucra-field-head .aucra-suggest-button {
  margin-left: auto;
}
.aucra-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
}
.aucra-info:hover {
  color: var(--text);
}
.aucra-info:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.aucra-info-glyph {
  font-size: 18px;
}
/* Quasar's tooltip is a black pill by default; this is the page's own card.
   A help of one line per answer (6.6's kinds) is joined with newlines. */
.aucra-info-card {
  white-space: pre-line;
  background: var(--panel);
  color: var(--text);
  /* A light card that floats, so the floating scale: 12px, the soft line and
     the clause preview card's shadow (kit_fields.css). */
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.45;
  padding: 10px 12px;
  box-shadow: var(--soft-float-shadow);
}
.aucra-check .q-checkbox__label {
  font-size: 0.84rem;
}
.aucra-readback {
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.aucra-readback-empty {
  color: var(--muted);
  font-style: italic;
}

.aucra-control .q-field__control {
  font-size: 13.5px;
  border-radius: 6px;
}
.aucra-control .q-field__control:before {
  border: 1px solid var(--line);
  border-radius: 6px;
}
/* Quasar darkens the border to currentColor on hover, which reads as a second
   focus state; the field keeps its line colour and only the ring moves. */
.aucra-control .q-field__control:hover:before {
  border-color: var(--line);
}
.aucra-control .q-field__native,
.aucra-control textarea {
  font-size: 13.5px;
  color: var(--text);
}
/* A box that starts at one line and grows: Quasar floors an auto-height field
   at 36px, three short of the 40px every single-line control has, so the two
   read as different boxes side by side in a register row. */
.aucra-control.q-textarea--autogrow .q-field__control {
  min-height: 40px;
}
/* Quasar draws the arrow in its own ink, which is darker than any text on the
   page and reads as the loudest thing in a form. */
.q-field__append .q-icon,
.aucra-control .q-field__append .q-icon {
  color: var(--muted);
}
/* The field's own focus state, so a ring is not the only thing that moves.
   The focus class lands on the field root, which is the element that carries
   aucra-control, so this is one compound selector and not a descendant. */
.aucra-control.q-field--focused .q-field__control:before,
.aucra-matrix-cell.q-field--focused .q-field__control:before {
  border: 2px solid var(--gold-deep);
}

.aucra-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.aucra-toggle-question {
  font-size: 0.84rem;
  font-weight: 500;
}
.aucra-toggle {
  display: inline-flex;
  /* The group's edge reads 3.32:1 on the panel, the 3:1 a control's boundary
     needs, as the verdict pair's does. */
  border: 1px solid var(--line-control);
  border-radius: 10px;
  overflow: hidden;
}
/* Quasar's own text-primary on .q-btn__content would repaint the label, so
   the option's colours are stated on the inner nodes too. Each option leads
   with the round mark of the choice controls (`kit.css`). */
.aucra-toggle-option,
.aucra-toggle-option .q-btn__content {
  padding: 5px 14px 5px 11px;
  color: var(--muted) !important;
  background: var(--panel);
  border-radius: 0;
}
.aucra-toggle-option .q-btn__content {
  padding: 0;
  background: none;
}
.aucra-toggle-option + .aucra-toggle-option {
  border-left: 1px solid var(--line-control);
}
/* Picked is a state, not an action: the gold wash inside a gold edge, never
   the ink of a button to press. The ink reads 13.11:1 on the wash. */
.aucra-toggle-option.on,
.aucra-toggle-option.on .q-btn__content,
.aucra-toggle-option.on .q-btn__content > span {
  color: var(--text) !important;
  font-weight: 600;
}
.aucra-toggle-option.on {
  background: var(--gold-wash);
  box-shadow: inset 0 0 0 1.5px var(--gold);
}
/* The option not chosen lights up on hover, so both halves read as buttons. */
.aucra-toggle-option:not(.on):hover,
.aucra-toggle-option:not(.on):hover .q-btn__content {
  background: var(--mist);
  color: var(--text) !important;
}