/* 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 runs ragged at every width, with no automatic
   hyphens (#259): justified, the browser split words the standard never splits
   ("se-cure"), and the quoted words are the standard's, unchanged. */
.aucra-para {
  width: 100%;
  font-size: 14px;
  line-height: 1.55;
  text-align: left;
  hyphens: manual;
  text-wrap: pretty;
}
.aucra-list {
  width: 100%;
  font-size: 14px;
  line-height: 1.55;
  text-align: left;
  hyphens: manual;
  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;
}
/* A run the standard indents under the item above it, as 7.11.1's checks:
   drawn inside that item, so the parent list's own indent adds to this one. */
.aucra-list-nested {
  margin-top: 6px;
  list-style-type: circle;
}
/* 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: var(--font-text);
  font-variant-numeric: tabular-nums;
  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: var(--font-text);
  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-control);
  border-radius: 10px;
  background: var(--panel);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.aucra-choice-card:hover {
  background: var(--mist);
}
/* Picked is a state, not an action: the gold wash inside a --gold-deep edge
   (5.08:1 on the mist, where --gold read 1.48:1) with half a pixel of gold
   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-deep);
  background: var(--gold-wash);
  box-shadow: inset 0 0 0 0.5px var(--gold);
}
.aucra-choice-on .aucra-choice-title {
  font-weight: var(--weight-bold);
}
.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: var(--weight-bold);
}
.aucra-choice-caption {
  font-size: 13px;
  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: var(--weight-bold);
}
.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 comes from the class the caller adds; the colour is the
   gap red with an asterisk in front, the mark of a required field (platform
   polish plan D4). The asterisk is drawn by CSS with empty alternative text,
   so a screen reader hears the words and the tip alone. */
button.aucra-gap-button {
  padding: 0;
  border: none;
  background: none;
  color: var(--gap);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.aucra-gap-button::before,
a.aucra-gap-link::before {
  /* A margin, not a space: a flex line (7.3's gaps) drops the space. */
  content: "*" / "";
  margin-right: 0.3em;
  font-weight: var(--weight-bold);
}
.aucra-gap-button:hover,
.aucra-gap-button:focus-visible {
  text-decoration: underline;
}
.aucra-gap-button:active {
  background: var(--gap-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 red every gap wears, so the
   caller's muted class cannot leave it reading as plain text. A link that
   is a way somewhere and no gap (a place link, a clause card's foot) adds
   `aucra-way`, which keeps the gold and drops the asterisk. */
a.aucra-gap-link {
  color: var(--gap);
  text-decoration: none;
  cursor: pointer;
}
a.aucra-gap-link.aucra-way {
  color: var(--gold-deep);
}
a.aucra-gap-link.aucra-way::before {
  content: none;
}
.aucra-gap-link:hover,
.aucra-gap-link:focus-visible {
  text-decoration: underline;
}
.aucra-gap-link:active {
  background: var(--gap-wash);
}
.aucra-gap-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* A row just added holds its gaps muted until its band is shut once
   (`register_fresh.py`, #77): it reads as a form to fill, not a scolding.
   `:where` keeps a page's own colour for a link that is no gap (6.5's verdict).
   --muted reads 5.11:1 on the panel, 4.98:1 on the band and 4.51:1 on the
   row's hover wash. */
:where(.aucra-row-fresh) button.aucra-gap-button,
:where(.aucra-row-fresh) a.aucra-gap-link:not(.aucra-way) {
  color: var(--muted);
}

/* ---- 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: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  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. --mist, as --wash-band was too
   faint to see (#100): text reads 12.8:1 on it and muted text 4.51:1. */
.aucra-register-row:hover {
  background: var(--mist);
}
/* A click on the free parts of a line that opens presses its chevron
   (`register_open.line_opens`); fields keep their own cursors. */
.aucra-register-opens {
  cursor: pointer;
}
.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;
}
/* An id never breaks at its hyphen: a three letter one (TRM-01) runs past the
   48px track into the 10px gap, a few pixels more at 13px (#259; was 12px). */
.aucra-register-id {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
/* 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. On the row's line it keeps a
   placeholder at 4.69:1 under the hover band, where it would read 4.13:1. */
.aucra-register-detail .aucra-control .q-field__control,
.aucra-register-line .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 var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--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;
  }
  /* Remembered-open mounts and in-place redraws start at their full height. */
  .aucra-band-slot.aucra-band-redrawn {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}
/* 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 var(--motion-base) var(--ease-in-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 480px wide or more 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 (narrower,
   it draws cards: the block below). 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;
  }
  .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;
  }
}

/* #122: a register whose own box is narrower than 480px (a phone, or 1024
   with the assistant open) draws each row as a card, so nothing scrolls
   sideways. The query is on the register's box, not the screen, so the
   drawer narrowing the column counts as much as the screen does. The first
   line holds the chevron, the id, the first cell and Remove; every other
   cell runs under it after its caption (`register_card.py`), and the caption
   row goes. The line is a wrapping flex box here, so the grid tracks a page
   sets (--aucra-cols-narrow) do not apply, and the floor a page gives its
   rows for scrolling (--aucra-register-min, --aucra-reg-min) is set to
   nothing on the rows themselves, which wins over the page's own value. */
.aucra-register {
  container: aucra-register / inline-size;
}
.aucra-register-label {
  display: none;
}
@container aucra-register (width < 480px) {
  /* The caption row keeps only its top line, which the page's rules already
     drop under a region head; the first card gives up its own, so the line
     over the cards is the one the caption row had. */
  .aucra-register > .aucra-register-head {
    padding-top: 0;
    padding-bottom: 0;
  }
  .aucra-register > .aucra-register-head > :not(.aucra-register-caption) {
    display: none;
  }
  .aucra-register > .aucra-register-head + .aucra-register-row {
    border-top: 0;
  }
  /* A caption with an (i) stays, so its column's help still opens over the
     cards (#175): one line at the register's head, ruled off from the first
     card so it is not read as part of that row. */
  .aucra-register > .aucra-register-head:has(> .aucra-register-caption) {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 8px 18px;
  }
  .aucra-register > .aucra-register-head:has(> .aucra-register-caption) + .aucra-register-row {
    border-top: 1px solid var(--line);
  }
  /* Inline, so a caption that wraps keeps its (i) after its last word. */
  .aucra-register > .aucra-register-head > .aucra-register-caption {
    display: block;
  }
  .aucra-register > .aucra-register-head > .aucra-register-caption > :first-child {
    display: inline;
  }
  .aucra-register > .aucra-register-head > .aucra-register-caption > .aucra-info {
    margin-left: 4px;
    vertical-align: middle;
  }
  .aucra-register > .aucra-register-head,
  .aucra-register > .aucra-register-row {
    --aucra-register-min: 0px;
    --aucra-reg-min: 0px;
  }
  .aucra-register-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding-bottom: 10px;
  }
  /* The chevron's track and its gap: every line under the first starts at
     the id. */
  .aucra-register-line > * {
    order: 2;
    flex: 0 0 calc(100% - 30px);
    min-width: 0;
    margin-left: 30px;
  }
  .aucra-register-line > :first-child,
  .aucra-register-line > .aucra-register-id {
    order: 0;
    flex: none;
    margin-left: 0;
  }
  .aucra-register-line > :first-child {
    width: 20px;
  }
  .aucra-register-line > .aucra-register-lead {
    order: 0;
    flex: 1 1 0;
    margin-left: 0;
  }
  .aucra-register-line > .aucra-register-remove {
    order: 1;
    flex: none;
    margin-left: 0;
  }
  .aucra-register-line > .aucra-register-remove.aucra-confirm-open {
    order: 3;
    flex: 0 0 100%;
  }
  .aucra-register-label {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--muted);
  }
  /* The first cell's caption is read with it but not drawn: the cell sits
     on the card's first line, after the id. */
  .aucra-register-label.aucra-register-label-lead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .aucra-register-under {
    display: flex;
  }
  .aucra-register-under .aucra-register-under-cell {
    flex: 1 1 0;
    margin-left: 30px;
  }
  .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;
}