/* 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. */

/* ---- 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: 8px;
  background: var(--panel);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.aucra-choice-card:hover {
  border-color: var(--line-strong);
}
.aucra-choice-on {
  border-color: var(--ink);
}
.aucra-choice-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.aucra-choice-ring {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--placeholder);
  background: #ffffff;
  margin-top: 2px;
}
.aucra-choice-on .aucra-choice-ring {
  border: 5px solid var(--ink);
  background: var(--panel);
}
.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;
}
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);
}
.aucra-register-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  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;
  }
}

/* ---- kit/chips.py ---- */

.aucra-chip-set {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.aucra-chip-toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.aucra-chip-toggle:hover {
  border-color: var(--line-strong);
}
.aucra-chip-toggle:active {
  border-color: var(--ink);
}
.aucra-chip-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.aucra-chip-toggle-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
  font-weight: 500;
}
/* The hover above carries a pseudo class, so it outranks the plain on rule and
   would otherwise grey a picked chip's border under the pointer. */
.aucra-chip-toggle-on:hover {
  border-color: var(--ink);
}
.aucra-chip-toggle-on:active {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
}
/* A row that carries nothing yet says so where the chips are, not in a panel
   somewhere else. */
.aucra-chip-missing {
  font-size: 12px;
  color: var(--gold-deep);
  padding-left: 6px;
}
/* ---- kit/name_chips.py ---- */

.aucra-name-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.aucra-name-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  font-size: 13px;
}
/* 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. */
.aucra-name-chip .aucra-field {
  width: auto;
  min-width: 0;
}
/* The chip is the frame, so the name field inside it draws none of its own. */
.aucra-name-chip .aucra-control .q-field__control {
  min-height: 22px;
  height: 22px;
  padding: 0;
}
.aucra-name-chip .aucra-control .q-field__control:before,
.aucra-name-chip .aucra-control .q-field__control:after {
  border: none;
}
.aucra-name-chip .q-field__marginal {
  height: 22px;
}
.aucra-name-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;
}

/* ---- kit/fields_select.py ---- */

.aucra-select .q-field__control {
  min-height: 34px;
  height: 34px;
  border-radius: 6px;
  background: var(--panel);
}
.aucra-select .q-field__control:before {
  border: 1px solid var(--line);
  border-radius: 6px;
}
.aucra-select .q-field__native,
.aucra-select .q-field__native > span {
  font-size: 12.5px;
  color: var(--text);
}
.aucra-select-empty .q-field__native,
.aucra-select-empty .q-field__native > span {
  color: var(--placeholder);
}
/* Quasar paints a placeholder in the field's own colour at 0.7 opacity, which
   reads as faded text rather than the grey the drawings give it. One rule for
   every box the kit draws: the input and the textarea here, the editor's empty
   mark in content.css, all three on the one token (4.69:1 on the panel). The
   bare Quasar selectors reach a box drawn outside the kit; the header search
   keeps its own, stronger rule for the dark ground. */
.q-field__native::placeholder,
.q-field__input::placeholder,
.aucra-control .q-field__native::placeholder,
.aucra-control .q-field__input::placeholder,
.aucra-control textarea::placeholder {
  color: var(--placeholder);
  opacity: 1;
}
.aucra-select .q-field__marginal {
  height: 34px;
}
.aucra-select .q-field__append .q-icon {
  font-size: 16px;
  color: var(--muted);
}

/* ---- kit/pick_chips.py ---- */

.aucra-pick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}
/* The same height as a toggle chip from kit/chips.py, so a row that carries
   both reads as one line. */
.aucra-pick-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px 3px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  font-size: 12.5px;
  line-height: 18px;
}
.aucra-pick-tag {
  font-size: 11px;
  color: var(--muted);
}
.aucra-pick-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.aucra-pick-remove:hover {
  color: var(--text);
}
.aucra-pick-remove:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.aucra-pick-remove .q-icon {
  font-size: 14px;
}
/* The picker is a prompt, not a filled field: a dashed border in the gold the
   page's other prompts use, a plus before its words and a chevron after them. */
.aucra-pick-add {
  display: inline-flex;
  align-items: center;
  /* 3px against the control's 18px floor is the pick chip's 26px, so the
     picker and the chips beside it are one line of equal height. */
  padding: 3px 8px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: none;
}
.aucra-pick-add:hover {
  border-color: var(--gold);
}
/* The focus ring its siblings get on :focus-visible. The focus lands on the
   select's own hidden input inside the field, so the ring is drawn from
   :focus-within on the field. */
.aucra-pick-add:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.aucra-pick-add .q-field__control {
  min-height: 18px;
  height: 18px;
  padding: 0;
}
.aucra-pick-add .q-field__native,
.aucra-pick-add .q-field__native > span {
  font-size: 12.5px;
  line-height: 18px;
  color: var(--gold-deep);
}
/* A select with a display value and no label is still an auto-height field to
   Quasar: it gives the native line a 40px floor and a top pad for the floating
   label that is not there, which dropped the words below the dashed border. */
.aucra-pick-add .q-field__native {
  min-height: 18px;
  padding: 0;
}
.aucra-pick-add .q-field__control-container {
  padding-top: 0;
}
.aucra-pick-add .q-field__inner {
  align-self: center;
}
.aucra-pick-add .q-field__marginal {
  height: 18px;
  padding: 0;
  color: var(--gold-deep);
}
.aucra-pick-add .q-field__prepend {
  padding-right: 4px;
}
.aucra-pick-add .q-icon {
  font-size: 13px;
  color: var(--gold-deep);
}
.aucra-pick-empty {
  font-size: 12px;
  color: var(--muted);
}

/* ---- kit/scheme_view.py: the 6.3 scheme read only ---- */

.aucra-scheme-view {
  gap: 16px;
}
/* The two scales side by side, one under the other once the column is narrow. */
.aucra-scheme-scales {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 700px) {
  .aucra-scheme-scales {
    grid-template-columns: minmax(0, 1fr);
  }
}
.aucra-scheme-scale {
  gap: 6px;
}
.aucra-scale-read {
  display: grid;
  grid-template-columns: 18px 110px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: 12.5px;
}
.aucra-scale-read-label {
  font-weight: 500;
}
.aucra-scale-read-help {
  color: var(--muted);
}
/* Not a description: the words that stand in for the one nobody has written. */
.aucra-scale-read-none {
  color: var(--placeholder);
  font-style: italic;
}
.aucra-level-read-name {
  font-size: 13px;
  min-width: 60px;
}
/* The matrix cell with no picker in it: the same wash, ink and box the editor's
   cell wears, drawn on a plain label. */
.aucra-matrix-read {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--level-wash);
  color: var(--level-ink);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
}

/* ---- kit/verdict.py ---- */

.aucra-verdict {
  display: inline-flex;
  /* The pair sits in a fixed track. Its border and the options' padding took
     it 1.3px past that track on each side, so the padding below gives 2px per
     option back and this line stops it overhanging again. */
  max-width: 100%;
  /* The pair's edge is all that marks it as a control while neither option
     is picked, so it reads 3:1 on the panel (--line read 1.36:1). */
  border: 1px solid var(--line-control);
  border-radius: 6px;
  overflow: hidden;
  font-size: 12.5px;
  white-space: nowrap;
}
.aucra-verdict-option {
  padding: 6px 9px;
  border: 0;
  background: var(--panel);
  font: inherit;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
/* A hairline between the options, so an unevaluated pair reads as two controls
   rather than one wide pill. It disappears under the picked one's ink. */
.aucra-verdict-option + .aucra-verdict-option {
  border-left: 1px solid var(--line-control);
}
.aucra-verdict-option:hover:not(.aucra-verdict-on) {
  background: var(--mist);
  color: var(--text);
}
.aucra-verdict-option:active:not(.aucra-verdict-on) {
  background: var(--line);
}
.aucra-verdict-on:active {
  background: var(--ink-soft);
}
.aucra-verdict-on {
  background: var(--ink);
  color: #ffffff;
  font-weight: 500;
}
/* The group clips an outward ring, so the focus ring is drawn inside the
   option's own box; the colour and width are the page's. */
.aucra-verdict-option:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
/* The picked option is ink, where the gold text colour reads 2.82:1; the ring
   inside it takes the bright gold the chrome uses (9.69:1). */
.aucra-verdict-on:focus-visible {
  outline-color: var(--gold);
}
@media (prefers-reduced-motion: reduce) {
  .aucra-verdict-option {
    transition: none;
  }
  /* The band's slide and the chevron's turn, beside the rules that set them.
     Important, because the slot's start state comes from `@starting-style` and
     the row is drawn again on every open. */
  .aucra-band-slot,
  .aucra-register-chevron .q-icon {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- kit/document_view.py ---- */

/* A document assembled from the rows, read only: the mockup's card, a head
   bar over a column of lines. */
.aucra-doc {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}
.aucra-doc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--wash-head);
}
.aucra-doc-title { font-size: 13.5px; font-weight: 600; }
.aucra-doc-spacer { flex: 1; }
.aucra-doc-body,
.aucra-doc-sub {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.aucra-doc-body { padding: 12px 14px; }
.aucra-doc-sub { padding-top: 10px; border-top: 1px solid var(--line); }
.aucra-doc-subtitle { font-weight: 500; }
.aucra-doc-brief { font-size: 12px; color: var(--muted); font-style: italic; }
.aucra-doc-how { font-size: 12px; color: var(--muted); }
.aucra-doc-lead { font-size: 12px; font-weight: 600; color: var(--muted); }
.aucra-doc-line { overflow-wrap: anywhere; }
.aucra-doc-strong { font-weight: 500; }
.aucra-doc-inline-lead { color: var(--muted); }
/* The parts of a line run on as one sentence; a label is a block otherwise. */
.aucra-doc-how > *,
.aucra-doc-line > * { display: inline; }
.aucra-doc-line > * + *,
.aucra-doc-how > .aucra-doc-inline-lead + * { margin-left: 0.3em; }
.aucra-doc-gap { color: var(--gold-deep); }
/* Formatted text keeps its paragraphs and lists. */
.aucra-doc-assumptions > .aucra-formatted { display: block; }

/* ---- kit/picked_list.py ---- */

.aucra-picked {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aucra-picked-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aucra-picked-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.aucra-picked-empty { font-size: 12.5px; color: var(--muted); }
.aucra-picked-gap { font-size: 12.5px; color: var(--gold-deep); }

/* ---- kit/tip.py ---- */

/* A tag that takes the caret so the keyboard opens its tooltip. */
.aucra-tip {
  cursor: help;
}
.aucra-tip:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}