/* AuCRA INSIGHT kit layer: the rules owned by one ui/kit module each. They live
   here rather than in the module because a stylesheet linked in the page head
   reaches a browser tab that is already open; CSS injected while a page is
   built only reaches pages loaded after the injection. The last block, the
   mark every choice control draws before its label, spans several modules
   and sits here so they share one rule. */

/* ---- kit/text.py ---- */

.aucra-empty {
  color: var(--muted);
}

/* ---- kit/standard_text.py ---- */

/* The standard's own prose. Justified with hyphenation because the quoted text
   is long; `lang` is what tells the browser which hyphenation dictionary to
   use, so the attribute is not decoration. Below 700 px the column is too
   narrow for justification: the word gaps grow into rivers, so the text runs
   start-aligned there and hyphenation carries the ragged edge. */
.aucra-para {
  width: 100%;
  font-size: 14px;
  line-height: 1.55;
  text-align: start;
  hyphens: auto;
  text-wrap: pretty;
}
.aucra-list {
  width: 100%;
  font-size: 14px;
  line-height: 1.55;
  text-align: start;
  hyphens: auto;
  text-wrap: pretty;
  list-style: disc outside;
  padding-left: 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aucra-list > li {
  display: list-item;
}
@media (min-width: 700px) {
  .aucra-para,
  .aucra-list {
    text-align: justify;
  }
}
/* A NOTE or an EXAMPLE is the standard's aside, so it reads quieter than the
   requirement it hangs off. The words are the standard's own, unchanged. */
.aucra-para-note {
  color: var(--muted);
}

/* ---- kit/guidance.py ---- */

/* The fold's chrome: a ruled row with a small chevron on the left, the way the
   mockup draws a piece of the standard tucked under the block it explains. */
.aucra-guidance {
  border-top: 1px solid var(--line);
  background: none;
}
.aucra-guidance .q-item {
  min-height: 0;
  padding: 10px 18px;
}
.aucra-guidance .q-item__label {
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 12px;
  color: var(--muted);
}
/* Quasar puts the toggle in a side section with its own 16px inset; the
   mockup has the chevron 10px from the label and two sizes smaller. */
.aucra-guidance .q-item__section--side {
  padding-right: 10px;
  min-width: 0;
}
.aucra-guidance .q-expansion-item__toggle-icon {
  font-size: 14px;
  color: var(--muted);
}
.aucra-guidance .q-expansion-item__content {
  padding: 0 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* The boxed variant: a card of its own, the way the canvas draws a piece of the
   standard tucked under the block it explains. The ruled row above stays for
   the folds that sit inside a panel already. */
.aucra-guidance.aucra-boxed {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--wash-head);
  width: auto;
  margin: 0 18px 14px;
}
/* A fold under a lettered block belongs to that block, so it spans the block
   body rather than shrinking to its own title. */
.aucra-block-body > .aucra-guidance.aucra-boxed {
  width: 100%;
  margin: 0;
}
.aucra-boxed .q-item {
  padding: 9px 12px;
}
.aucra-boxed .q-item__label {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 13px;
  color: var(--muted);
}
.aucra-boxed .q-expansion-item__content {
  padding: 0 12px 12px;
}
.aucra-guidance .q-item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- kit/choice.py ---- */

.aucra-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
@media (max-width: 700px) {
  .aucra-choice {
    grid-template-columns: minmax(0, 1fr);
  }
}
.aucra-choice-card {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.aucra-choice-card:hover {
  border-color: var(--line-strong);
  background: var(--mist);
}
/* Picked is a state, not an action: the gold wash inside a 1.5px gold edge
   (the border and half a pixel inset), the title's ink 13.11:1 on it and the
   caption's muted 4.62:1. */
.aucra-choice-on,
.aucra-choice-on:hover {
  border-color: var(--gold);
  background: var(--gold-wash);
  box-shadow: inset 0 0 0 0.5px var(--gold);
}
.aucra-choice-on .aucra-choice-title {
  font-weight: 600;
}
.aucra-choice-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.aucra-choice-ring {
  margin-top: 3px;
}
.aucra-choice-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.aucra-choice-title {
  font-size: 14px;
  font-weight: 500;
}
.aucra-choice-caption {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* ---- kit/rows.py ---- */

a.aucra-setting {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  color: var(--text);
  text-decoration-line: none;
}
/* The panel head draws the line above the first row. */
.aucra-panel-head + a.aucra-setting {
  border-top: 0;
}
a.aucra-setting:hover {
  background: var(--mist);
}
a.aucra-setting:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.aucra-setting-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.aucra-setting-label {
  font-size: 14px;
  font-weight: 500;
}
.aucra-setting-desc {
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-setting-go {
  font-size: 16px;
  color: var(--muted);
}

/* ---- kit/nav.py ---- */

/* A gap line that is also the way to fill it: the words read as the line they
   replace, and the pointer, the underline and the ring say they can be
   clicked. The size and the colour come from the class the caller adds. */
.aucra-gap-button {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.aucra-gap-button:hover,
.aucra-gap-button:focus-visible {
  text-decoration: underline;
}
.aucra-gap-button:active {
  background: var(--gold-wash);
}
.aucra-gap-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* The same gap line where filling it means going to another clause page. An
   anchor rather than a button, so ui.sub_pages follows it client side; it takes
   the size of the line it replaces and the gold every gap wears, as the
   mockups draw it, so the caller's muted class cannot leave it reading as
   plain text. */
a.aucra-gap-link {
  color: var(--gold-deep);
  text-decoration: none;
  cursor: pointer;
}
.aucra-gap-link:hover,
.aucra-gap-link:focus-visible {
  text-decoration: underline;
}
.aucra-gap-link:active {
  background: var(--gold-wash);
}
.aucra-gap-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- kit/confirm.py ---- */

/* The one line Clear asks before it clears anything. It reads as a band read
   out, so it takes the read outs' muted 12.5px rather than the body size the
   two answers beside it wear. */
.aucra-confirm-question {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}
/* The gap the drawing measures between the question and its two answers. */
.aucra-confirm-row {
  gap: 12px;
}
/* Every button of the control is at least as tall as Keep, the resting one
   included, so the row is the same height at rest and asking. */
.aucra-confirm-row .q-btn {
  min-height: 24px;
}
/* Keep is as tall as the gap buttons it answers beside, so the row keeps the
   height it had at rest instead of growing to a 32px button box. */
.q-btn.aucra-confirm-keep {
  height: 24px;
  min-height: 24px;
  padding: 0 10px;
  font-size: 12.5px;
}

/* register_row.py: the resting Remove fits the last 28px track. When it asks,
   give the question and its answers a full row under the fields, so they do
   not cover the name, select or neighboring rows. */
.aucra-register-remove {
  justify-content: flex-end;
}
.aucra-register-line > .aucra-register-remove.aucra-confirm-open {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}
.aucra-register-remove.aucra-confirm-open .aucra-confirm-asking {
  justify-content: flex-end;
  width: 100%;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.aucra-register-remove.aucra-confirm-open .aucra-confirm-question {
  flex: 1 1 180px;
}

/* ---- kit/register.py ---- */

/* The grid is the page's: the register sets the track list on every line
   (chevron, id, the page's own columns, Remove) and nothing else inline. */
.aucra-register-head {
  display: grid;
  gap: 10px;
  padding: 8px 18px;
  border-top: 1px solid var(--line);
  background: var(--wash-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.aucra-register-row {
  border-top: 1px solid var(--line);
}
/* Two selects a row and a dozen rows: the row under the pointer reads as one
   band, so a pick lands where the reader is looking. No transition: the wash
   is a pointer position, not a change of state. */
.aucra-register-row:hover {
  background: var(--wash-band);
}
.aucra-register-line {
  display: grid;
  gap: 10px;
  align-items: center;
  padding: 10px 18px 0;
}
.aucra-register-under {
  display: grid;
  gap: 10px;
  align-items: center;
  padding: 8px 18px 10px;
}
/* Line two runs under the page's own columns: from the track after the id to
   the one before Remove, whatever the page's column count is. */
.aucra-register-under-cell {
  grid-column: 3 / -2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.aucra-register-id {
  font-size: 12px;
  color: var(--muted);
}
/* A 24px target (WCAG 2.5.8) that takes the 20px it always took: the margin
   gives back the two pixels on each side, so the row's columns do not move. */
.aucra-register-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: -2px;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}
.aucra-register-chevron:hover {
  color: var(--ink);
}
/* The chevron's hover has already taken the ink as far as it goes, so the
   press answers behind the glyph instead. */
.aucra-register-chevron:active {
  background: var(--mist);
  border-radius: 4px;
}
.aucra-register-chevron:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* The open row: a band under the row, indented to the page's columns, so it
   reads as part of the row rather than as a panel of its own. */
.aucra-register-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 18px 12px 78px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--wash-band);
}
/* The band an open row draws is already a wash, so a field on it needs its own
   ground to read as a box the reader can type in. */
.aucra-register-detail .aucra-control .q-field__control {
  background: var(--panel);
}
/* Below 1200px a register's line loses its side padding, so the band under it
   follows the row rather than the wide margins it keeps at full width: 74px on
   the left, where the narrow row's id column starts, and 12px on the right.
   Kit wide, so 6.4.2 to 6.5 all line up. */
@media (max-width: 1200px) {
  .aucra-register-detail {
    margin-left: 74px;
    margin-right: 12px;
  }
}
/* The band slides, the way the folded standard does, and only the band is drawn
   or undrawn: the rest of the register stays where it is. Three levels are
   needed for that. The slot is the one that animates, from no row to one row.
   The clip carries no padding, border or margin of its own, or the box could
   not reach zero height. The band inside keeps the spacing the reader sees.
   Both transitions stop under the reduced motion block at the end of this
   file, beside the verdict pair's. */
.aucra-band-slot {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 180ms ease-out, opacity 180ms ease-out;
}
/* The band mounts already open, so the slide in needs a start the browser can
   read on the first frame. */
@starting-style {
  .aucra-band-slot {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
/* Set on the click, and the band leaves the tree when the slide has run. */
.aucra-band-slot.aucra-band-closing {
  grid-template-rows: 0fr;
  opacity: 0;
}
.aucra-band-clip {
  min-height: 0;
  overflow: hidden;
}
/* One icon turned a quarter anticlockwise while the row is shut, rather than
   two icons swapped, so the chevron turns in place both ways. */
.aucra-register-chevron .q-icon {
  transition: transform 180ms ease-out;
}
.aucra-register-chevron[aria-expanded="false"] .q-icon {
  transform: rotate(-90deg);
}
.aucra-register-empty {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--muted);
}
/* Below 640px a register keeps its columns and scrolls sideways inside its
   own box, so the page never does and every button in a row stays reachable
   with the captions still over their cells. The rows take a floor wide enough
   for the widest register (the Documents library's narrow tracks); a page can
   set --aucra-register-min for its own. The band an open row draws stays the
   box's width and sticks to its left edge, so its text is read without
   scrolling. */
@media (max-width: 639px) {
  .aucra-register {
    overflow-x: auto;
    container-type: inline-size;
  }
  .aucra-register > .aucra-register-head,
  .aucra-register > .aucra-register-row {
    min-width: var(--aucra-register-min, 660px);
  }
  .aucra-register .aucra-band-slot {
    position: sticky;
    left: 0;
    width: 100cqw;
  }
  .aucra-register .aucra-register-detail {
    margin: 0 12px 12px;
  }
}

/* ---- the choice controls: one chosen state for all of them ----

   An action is ink filled; a chosen option never is, or a picked state reads
   as a button still to press (the user, 2026-09-29). Every choice control
   draws the same mark before its label: a hollow 14px ring while it is not
   chosen (--line-control, 3.32:1 on the panel; --muted under the pointer,
   4.51:1 on the mist hover, where the ring alone would read 2.93:1), and a
   --gold-deep disc with a white tick once it is (5.20:1 on the gold wash, the
   tick 5.76:1 on the disc). Round for a single choice (the verdict pair, the
   applicability toggle, the 6.3 threshold, the layout cards), a 4px square
   for a set that holds several picks (the chip toggles), as a radio and a
   checkbox are told apart. The mark is a pseudo element or an empty span, so
   no text reaches a screen reader: aria-pressed carries the state. On a
   Quasar button the mark goes on the content box, because Quasar draws the
   button's own ::before. */
.aucra-verdict-option::before,
.aucra-toggle-option .q-btn__content::before,
.aucra-threshold-chip::before,
.aucra-chip-toggle::before,
.aucra-choice-ring {
  content: "";
  display: block;
  flex: none;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--line-control);
  border-radius: 50%;
  background: var(--panel);
}
.aucra-toggle-option .q-btn__content::before {
  margin-right: 6px;
}
.aucra-chip-toggle::before {
  border-radius: 4px;
}
.aucra-verdict-option:hover:not(.aucra-verdict-on)::before,
.aucra-toggle-option:not(.on):hover .q-btn__content::before,
.aucra-threshold-chip:not(.aucra-threshold-on):hover::before,
.aucra-chip-toggle:not(.aucra-chip-toggle-on):hover::before,
.aucra-choice-card:not(.aucra-choice-on):hover .aucra-choice-ring {
  border-color: var(--muted);
}
.aucra-verdict-on::before,
.aucra-toggle-option.on .q-btn__content::before,
.aucra-threshold-on::before,
.aucra-chip-toggle-on::before,
.aucra-choice-on .aucra-choice-ring {
  border-color: var(--gold-deep);
  background: var(--gold-deep) var(--choice-tick) center / 100% no-repeat;
}