/* AuCRA INSIGHT kit layer, the read only views: the rules of
   kit/scheme_view.py, kit/verdict.py and kit/document_view.py, with the
   reduced motion block the verdict pair and the register share. Split from
   kit.css by concern and linked after kit_chips.css (ui/styles.py), so the
   cascade runs in the order it was written. */

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