/* The Suggest control, the card it opens, the source chips and the passage
   they show, and the provenance line under a field's box. The mockup is the
   Documents and suggestions canvas (Main and States artboards). */

.aucra-suggest-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.aucra-suggest-button:hover:not([disabled]) {
  color: var(--text);
  border-color: var(--line-strong);
}
.aucra-suggest-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.aucra-suggest-button[disabled] {
  background: var(--mist);
  color: var(--placeholder);
  cursor: not-allowed;
}
.aucra-suggest-glyph {
  font-size: 13px;
}
/* The ring of States.dc.html: it stands in for the sparkle while the call is
   out, so the reader sees the click land before the model answers. */
.aucra-suggest-ring {
  display: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--gold);
  animation: aucra-suggest-spin 0.8s linear infinite;
}
.aucra-suggest-button.is-running {
  background: var(--mist);
  color: var(--placeholder);
  cursor: progress;
}
.aucra-suggest-button.is-running .aucra-suggest-glyph {
  display: none;
}
.aucra-suggest-button.is-running .aucra-suggest-ring {
  display: inline-block;
}
@keyframes aucra-suggest-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .aucra-suggest-ring {
    animation: none;
  }
}

.aucra-suggest-card {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--wash-band);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.aucra-suggest-card.aucra-suggest-warn {
  border-color: var(--warn);
  background: var(--warn-wash);
}
.aucra-suggest-running {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.aucra-suggest-spinner {
  color: var(--gold);
}
.aucra-suggest-value {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 9px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.aucra-suggest-plain {
  white-space: pre-wrap;
}
/* A formatted field's own style is a justified quotation; a proposed value is
   read against what is in the box, so it stays left aligned and unhyphenated. */
.aucra-suggest-value .aucra-formatted {
  font-size: 13.5px;
  text-align: start;
  hyphens: none;
}
.aucra-suggest-line {
  font-size: 13.5px;
}
.aucra-suggest-note {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.aucra-suggest-question {
  font-size: 13.5px;
  font-weight: 500;
}
.aucra-suggest-confidence {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
}
.aucra-suggest-confidence .aucra-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: currentColor;
}
.aucra-confidence-stated {
  color: var(--pass);
}
.aucra-confidence-suggests {
  color: var(--gold-deep);
}
.aucra-confidence-guess {
  color: var(--warn);
}
.aucra-suggest-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.aucra-suggest-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.aucra-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--text);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
  cursor: pointer;
}
.aucra-source-chip:hover {
  border-color: var(--line-strong);
}
.aucra-source-chip:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* ui/kit/suggest_chips.py: a card or a proposed row opens its passage in a
   slot under the chips, as the drawer does (ui/kit/suggest_cards.py). */
.aucra-suggest-chip-block {
  display: flex;
  flex-direction: column;
}
.aucra-suggest-card-slot:empty {
  display: none;
}
.aucra-suggest-chip-block .aucra-source-chip[aria-expanded="true"] {
  border-color: var(--gold-deep);
  background: var(--gold-wash);
}
/* ui/kit/suggest_card.py: the way out of an empty library. */
.aucra-suggest-link {
  font-size: 13px;
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.aucra-suggest-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.aucra-chip-glyph {
  font-size: 13px;
  color: var(--muted);
}
.aucra-suggest-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* The passage a source chip opens (States.dc.html). A menu, so a click opens
   it and Escape or a click outside shuts it. */
.aucra-passage.q-menu {
  max-width: 420px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(35, 42, 49, 0.14);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aucra-passage-source {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--muted);
}
.aucra-passage-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}
/* The passage is a quotation from the document, justified as the artboard
   draws it, unlike the card's value box, which is read against what is in the
   field and stays left aligned. */
.aucra-passage-line {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  white-space: normal;
  text-align: justify;
  hyphens: auto;
}

.aucra-provenance {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.aucra-provenance-glyph {
  font-size: 13px;
}

/* The proposed rows a register's Suggest control opens (plan D10): the list
   sits under the region head and above the register itself. */
.aucra-proposals {
  margin: 14px 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--wash-band);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* The per asset list of 6.4.3: it hangs under the asset's own line, indented
   past the id column so it reads as belonging to that line (section 13, D5). */
.aucra-proposals.aucra-proposals-asset {
  margin: 6px 0 10px 58px;
}
.aucra-proposals-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.aucra-proposal-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.aucra-proposal-blank {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: var(--mist);
}
.aucra-proposal-box {
  margin-top: -4px;
}
.aucra-proposal-box .q-checkbox__inner {
  width: 18px;
  height: 18px;
  min-width: 18px;
  color: var(--line-strong);
}
.aucra-proposal-box .q-checkbox__bg {
  width: 18px;
  height: 18px;
  border-width: 1.5px;
  border-radius: 4px;
}
.aucra-proposal-box .q-checkbox__inner--truthy {
  color: var(--pass);
}
.aucra-proposal-box .q-checkbox__inner--truthy .q-checkbox__bg {
  background: var(--pass);
  border-color: var(--pass);
}
/* The tick takes the gold ring every kit button takes (content_controls.css).
   Quasar marks the checkbox `no-outline`, so the ring is a shadow on its box. */
.aucra-proposal-box:focus-visible .q-checkbox__bg {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--focus-ring);
}
.aucra-proposal-box:focus-visible .q-checkbox__inner::before {
  opacity: 0;
}
.aucra-proposal-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.aucra-proposal-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.aucra-proposal-name {
  font-size: 13.5px;
  font-weight: 500;
}
.aucra-proposal-listed .aucra-proposal-name {
  color: var(--muted);
}
.aucra-proposal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.aucra-proposal-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
}
.aucra-provenance-row {
  padding: 0 0 8px 68px;
}

/* The configurator on the Settings page: a label and a line of description on
   the left, the control on the right. */
.aucra-ai-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 18px 6px;
  border-top: 1px solid var(--line);
}
.aucra-ai-group-name {
  font-size: 13px;
  font-weight: 600;
}
.aucra-ai-group-note {
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-ai-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  width: 100%;
}
.aucra-ai-labels {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.aucra-ai-name {
  font-size: 14px;
  font-weight: 500;
}
.aucra-ai-description {
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-ai-control {
  width: 360px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aucra-ai-key {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aucra-ai-key .aucra-control {
  flex: 1;
  min-width: 0;
}
.aucra-ai-hint,
.aucra-ai-outcome {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
/* "Set, ends in 7f2a" stands in for the box that is not drawn, so it is drawn
   as a box, in the slot the box would have filled (Settings.dc.html). */
.aucra-ai-key .aucra-ai-hint {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aucra-ai-control .aucra-btn.q-btn {
  min-height: 32px;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}
@media (max-width: 720px) {
  .aucra-ai-row {
    flex-direction: column;
  }
  .aucra-ai-control {
    width: 100%;
  }
}

/* The clause chip an answer carries (the assistant canvas, Answer artboard),
   and the card it opens: the source chip's shape with the standard's own words
   inside it, so both chips read as one row. */
.aucra-clause-chip .aucra-chip-glyph {
  color: var(--gold-deep);
}
.aucra-passage.q-menu.aucra-clause-card {
  max-width: 460px;
}
/* The card's head is the clause id with its heading, in the mono the drawings
   give it (section 13, D12). */
.aucra-clause-card .aucra-passage-source {
  color: var(--gold-deep);
  font-size: 12px;
}
.aucra-clause-card .aucra-para {
  margin: 0;
}
/* A container carries no words of its own, so its card lists the subclauses
   written under it, each one a way to the page they are drawn on
   (section 13, D11). */
.aucra-clause-child {
  font-size: 13px;
  line-height: 1.5;
}
/* The foot link of the card: the place link's line, with no rule above it, so
   the card ends in a link rather than a second band (section 13, D14). */
.aucra-clause-open {
  font-size: 12px;
  padding-top: 2px;
}

/* The link to one row on one clause page, "Open T-03 on 6.5". It is the gap
   link's line, so it takes the gold and the underline from `kit.css`; the size
   it reads at in a transcript and the glyph in front of it are set here. */
.aucra-place-link {
  font-size: 12px;
  line-height: 1.5;
}
.aucra-place-link,
.aucra-clause-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
/* NiceGUI paints every link at opacity 0.8, which takes the gold on the panel
   to 3.77:1. These two are read as words, so they stand at full strength, 5.9:1
   as the gap links do (section 13, D16). */
a.nicegui-link.aucra-place-link,
a.nicegui-link.aucra-clause-open,
a.nicegui-link.aucra-clause-child {
  opacity: 1;
}
/* The glyph is a child of the anchor, after its words, so the anchor keeps its
   own text and is read out as one name; the order puts it in front. */
.aucra-open-glyph {
  order: -1;
  font-size: 14px;
}