/* 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. */
/* Quasar's buttons ask for weight 500, which is not loaded: a button is
   emphasis, the bold style (platform polish plan D1). */
.q-btn {
  font-weight: var(--weight-bold);
}
.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: var(--on-ink);
}
/* 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;
  }
  /* A press on the card is handed to the box under it (`tip._through`). */
  .q-tooltip.aucra-tip-hover.no-pointer-events.aucra-tip-through {
    pointer-events: none !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));
}
/* A picker's menu opens at the pill's left edge, which may sit well into
   the page: the margin leaves the page gutter on the right at 390, since
   Quasar sizes the menu to the room left beside it. */
.q-menu.aucra-pick-menu {
  margin-right: 16px;
}
.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: 12px;
  color: var(--muted);
}

/* The small line over a title: the text face, Bold, caps, open tracking. */
.aucra-eyebrow {
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  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, its title on two lines before
   it is cut (a phone read "5 Cybersecurity p", 2026-10-11) and the two
   steps one height. 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;
    align-items: stretch;
  }
  .aucra-clause-top .aucra-step {
    flex: 0 1 50%;
  }
  .aucra-clause-top .aucra-step-title {
    max-width: none;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    line-height: 1.25;
  }
}
/* Half of a phone's column leaves a title under 100px, which cuts every
   longer clause name even on two lines. Under 520px the two steps take a
   line each, so the longest name (6.3's, 56 letters) reads whole. */
@container aucra-clause-head (max-width: 519px) {
  .aucra-clause-top .aucra-prevnext {
    flex-direction: column;
  }
  .aucra-clause-top .aucra-step {
    flex: 0 0 auto;
  }
}
.aucra-title {
  font-family: var(--font-head);
  font-weight: var(--weight-light);
  letter-spacing: 0;
  font-size: 2rem;
  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;
}
/* A panel's title and a region's name are headers: the head face, Light,
   a size up so the light stroke still leads the card. Every other panel,
   band and tool panel head takes the same face here, by name, and sets
   only its size where it is drawn. */
.aucra-panel-title,
.aucra-chat-title,
.aucra-quotel-title,
.aucra-share-caption,
.aucra-band-title,
.aucra-tool-checks-head,
.aucra-tool-panel-role {
  font-family: var(--font-head);
  font-weight: var(--weight-light);
  letter-spacing: 0;
}
.aucra-panel-title {
  font-size: 1.2rem;
}
.aucra-count {
  font-size: 0.75rem;
  letter-spacing: var(--tracking-caps);
  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 var(--motion-quick) var(--ease-out), box-shadow var(--motion-quick) var(--ease-out);
}
.aucra-row:hover {
  background: var(--gold-tint);
  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: var(--weight-bold);
  /* A 300px track (the /debug list widens it, pages_debug.css); the
     Dashboard's table gives the name its own
     (pages_accounts.css). The ellipsis and the tooltip carry a long name. */
  flex: 0 1 300px;
  min-width: 140px;
  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;
}
@media (max-width: 639px) {
  /* Create and Search share the row and grow to fill it. */
  .aucra-create-row {
    flex-wrap: wrap;
  }
  .aucra-create-row > * {
    flex: 1 1 auto;
  }
}
/* Where the content region is under 860px (a phone, or 1024px with the rail
   open) the Dashboard row is a card, lines on a grid: the id and the name;
   the bar with its counts and the date; then the owner and the access, and
   the document count (`pages_accounts.css`, which holds the table drawn from
   860px, a 1280px window with the rail open). The chevron goes, because the
   whole row is the link and the name needs its width. Share and Remove stay
   the row's siblings at the right, clear of the bar. */
@container aucra-workspace (width < 860px) {
  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: var(--font-text);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  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: var(--weight-bold);
}

/* ---- 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: var(--idle);
  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: var(--weight-bold);
}
.aucra-chip-sm {
  padding: 2px 9px;
  font-size: 13px;
}
.aucra-chip-md {
  padding: 4px 12px;
  font-size: 13px;
}
.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: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  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: var(--idle);
}
.aucra-bar-seg-not_applicable {
  background: var(--idle-soft);
}
.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,
.aucra-region-head + .aucra-scroll-cue + .aucra-scroll-wrap > .aucra-register:first-child > .aucra-register-head:first-child,
.aucra-region-head + * > .aucra-scroll-cue + .aucra-scroll-wrap > .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: var(--weight-bold);
  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;
}
/* The right hand group (Suggest, Add) wraps onto a line of its own before the
   region's name breaks: the name never shrinks below its one line (7.6
   persona round, D1). Below 576px of panel (a 640px viewport without the
   assistant, or 1024px with it open) the group's own note and buttons wrap
   inside the panel too, 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-head-right {
    flex-shrink: 1;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }
}
.aucra-region-name {
  font-family: var(--font-head);
  font-weight: var(--weight-light);
  letter-spacing: 0;
  font-size: 1.15rem;
  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;
}
/* The tabs wrap, so nothing is ever scrolled to; Quasar still measured the
   row as wider than its box and laid its arrows over a tab's count. */
.aucra-tabs .q-tabs__arrow {
  display: none;
}
/* 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: var(--weight-bold);
}
.aucra-tabs .q-tab--active .aucra-tab-label {
  font-weight: var(--weight-bold);
}
.aucra-tab-count {
  margin-left: 8px;
  font-size: 0.75rem;
  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;
}
/* 14px, the body's size (#259; was 13.12px). */
.aucra-field-label {
  font-size: 14px;
  font-weight: var(--weight-bold);
}
/* 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: 13px;
  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;
}
/* On a phone the label keeps its row with the (i) beside it and Suggest
   drops under, at the right: sharing one row with both, a long label (6.6 a,
   6.3 b to k) wrapped one word per line. */
@media (max-width: 639px) {
  .aucra-field-head {
    flex-wrap: wrap;
  }
  .aucra-field-head > .aucra-field-label:has(+ .aucra-info) {
    max-width: calc(100% - 28px);
  }
}
.aucra-info {
  display: inline-flex;
  /* Never squeezed by a long label beside it (7.2 at 1024 with the drawer). */
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
}
/* A card title's (i) sits in the title's own line, after its last word. */
.aucra-panel-title > .aucra-info {
  min-width: 24px;
  min-height: 24px;
  margin-left: 4px;
  vertical-align: -5px;
}
.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-control .q-field__control {
  font-size: 13.5px;
  border-radius: 6px;
}
.aucra-control .q-field__control:before {
  border: 1px solid var(--line-control);
  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-control);
}
.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: var(--weight-bold);
}
/* A long question wraps inside its own box, so its (i) stays beside it and
   the pair at the right (6.2's third party question); a phone drops the
   pair under, the (i) still beside the words. */
.aucra-toggle-question:has(+ .aucra-info) {
  max-width: calc(100% - 200px);
}
@media (max-width: 639px) {
  .aucra-toggle-question:has(+ .aucra-info) {
    max-width: calc(100% - 36px);
  }
}
.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: var(--weight-bold);
}
.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;
}
/* The (i) of a Yes/No question sits beside its words, not a full gap away. */
.aucra-toggle-question + .aucra-info {
  margin-left: -8px;
}