/* AuCRA INSIGHT kit layer, the small fields: the rules of kit/picked_list.py,
   kit/tip.py, kit/committed_flag.py, kit/committed_states.py,
   kit/select_groups.py, kit/clause_mentions.py and kit/clause_preview.py.
   Split from kit.css by concern and linked last of the kit's sheets
   (ui/styles.py), so the cascade runs in the order it was written. */

/* ---- 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;
}

/* ---- kit/committed_flag.py ---- */

/* The flag sits at its label's left, as the mockup's pair (tool_inspector). */
.aucra-flag {
  align-self: flex-start;
}
/* Read only, for a viewer or on a row another person holds (P2-7): the picked
   side grey rather than ink, the other on the mist fill, no hover. */
.aucra-flag-readonly .aucra-toggle-option,
.aucra-flag-readonly .aucra-toggle-option:not(.on):hover,
.aucra-flag-readonly .aucra-toggle-option:not(.on):hover .q-btn__content {
  background: var(--mist);
  color: var(--muted) !important;
  cursor: default;
}
/* The chosen side of a flag that reads only: the mark says which, on the
   mist and inside the control's own edge rather than the gold of a choice
   the reader can still change. The ink reads 12.8:1 on the mist. */
.aucra-flag-readonly .aucra-toggle-option.on {
  background: var(--mist);
  box-shadow: inset 0 0 0 1.5px var(--line-control);
}
.aucra-flag-readonly .aucra-toggle-option.on,
.aucra-flag-readonly .aucra-toggle-option.on .q-btn__content,
.aucra-flag-readonly .aucra-toggle-option.on .q-btn__content > span {
  color: var(--text) !important;
}

/* ---- kit/committed_states.py ---- */

/* Three states in a 340 px panel (the threat model's review, artboard 15).
   With the chosen mark in front of each they no longer fit one line, so they
   stack, as the verdict pair does in a narrow track, and each keeps its words
   whole on a line of its own. */
.aucra-states {
  flex-direction: column;
  align-items: stretch;
}
.aucra-states .aucra-toggle-option + .aucra-toggle-option {
  border-left: 0;
  border-top: 1px solid var(--line-control);
}
.aucra-states .aucra-toggle-option .q-btn__content {
  justify-content: flex-start;
}
.aucra-states .aucra-toggle-option {
  white-space: nowrap;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 12.5px;
}
.aucra-states .aucra-toggle-option .q-btn__content {
  flex-wrap: nowrap;
}

/* ---- kit/select_groups.py ---- */

/* A group's heading above its first option (the threat model's Category,
   artboard 15), drawn as the panel's own headings are, on a line of its own
   with the options' left edge, so every option keeps the same height. */
.q-menu .aucra-select-group {
  padding: 10px 16px 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: default;
}

/* ---- kit/clause_mentions.py ---- */

/* A clause number in running text (2026-09-29, the user's request): the line's
   own size and font, gold-deep (5.8:1 on the panel, 5.5:1 on the head's wash)
   with a dotted underline that turns solid under the pointer or the focus. */
a.aucra-mention {
  color: var(--gold-deep);
  font: inherit;
  text-decoration: underline dotted currentColor;
  text-underline-offset: 2px;
  cursor: pointer;
}
/* NiceGUI fades a hovered link to 0.8, which would take it under 4.5:1. */
a.aucra-mention:hover,
a.aucra-mention:active,
a.aucra-mention:focus-visible {
  text-decoration-style: solid;
  opacity: 1;
}
a.aucra-mention:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}
/* An attestation whose sentence links: the box keeps the sentence as its
   name, its empty label is not drawn, and the words beside it read as the
   label did and tick the box. */
.aucra-check-head {
  align-items: center;
}
.aucra-check-bare .q-checkbox__label {
  display: none;
}
.aucra-check-sentence {
  min-width: 0;
  font-size: 0.84rem;
  line-height: 1.5;
}
.aucra-mention-tick {
  cursor: pointer;
}
.aucra-check-bare.disabled + .aucra-check-sentence .aucra-mention-tick {
  cursor: default;
}
/* The card a clause link opens (kit/clause_preview.py, 2026-09-29): a light
   card rather than the dark one line tooltip of content.css, which the two
   classes outrank. It keeps the hover card's pointer rule (kit/tip.py). */
.q-tooltip.aucra-preview {
  max-width: 360px;
  padding: 12px 14px;
  border: 1px solid rgba(185, 194, 203, 0.55);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--soft-float-shadow);
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aucra-preview-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.aucra-preview-id {
  flex: none;
  color: var(--gold-deep);
  font-weight: 500;
}
.aucra-preview-title {
  font-weight: 600;
}
.aucra-preview-output {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aucra-preview-lead,
.aucra-preview-context-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
/* What this page reads from the page the number names, under a hairline. A
   long methodology scrolls inside the card, which the pointer may enter. */
.aucra-preview-context {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.aucra-preview-context-text {
  max-height: 180px;
  overflow-y: auto;
}
.aucra-preview-context-gap {
  color: var(--gold-deep);
}
.aucra-preview-context-note,
.aucra-preview-foot {
  font-size: 11.5px;
  color: var(--muted);
}
/* A context's rich text (6.3's methodology) at the card's own size, never
   justified: the page's formatted text rule is for a full column. */
.aucra-preview .aucra-formatted {
  font-size: inherit;
  line-height: inherit;
  text-align: start;
}