/* ---- formatted text: the rich text control and its read-only render ---- */

.aucra-editor.q-editor {
  border: 1px solid var(--line-control);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}
.aucra-editor .q-editor__toolbar {
  border-bottom: 1px solid var(--line);
  min-height: 34px;
  padding: 3px 4px;
  gap: 6px;
}
.aucra-editor .q-editor__toolbar-group {
  margin-right: 6px;
  gap: 6px;
}
.aucra-editor .q-editor__toolbar .q-btn {
  min-width: 26px;
  min-height: 26px;
  padding: 0 4px;
  border-radius: 5px;
  color: var(--muted);
}
.aucra-editor .q-editor__toolbar .q-btn .q-icon {
  font-size: 17px;
}
.aucra-editor .q-editor__toolbar .q-btn:hover {
  color: var(--ink);
  background: var(--gold-wash);
}
/* Quasar marks the active command with its primary colour; the kit's is gold. */
.aucra-editor .q-editor__toolbar .q-btn.text-primary {
  color: var(--gold-deep);
  background: var(--gold-wash);
}
.aucra-editor .q-editor__toolbar .q-focus-helper {
  display: none !important;
}
.aucra-editor .q-editor__content {
  font-size: 13.5px;
  line-height: 1.55;
  padding: 10px 12px;
}
.aucra-editor .q-editor__content ul,
.aucra-editor .q-editor__content ol {
  margin: 0 0 10px;
  padding-left: 18px;
}
.aucra-editor .q-editor__content ul {
  list-style: disc;
}
.aucra-editor .q-editor__content ol {
  list-style: decimal;
}
.aucra-editor .q-editor__content li {
  margin-bottom: 6px;
}
.aucra-editor .q-editor__content strong {
  font-weight: var(--weight-bold);
}
/* The field's hint, drawn inside the empty box the way an input placeholder is.
   Quasar passes the editor's placeholder attribute down to the editable area;
   the empty mark comes from the script in kit/formatted.py. */
.aucra-editor .q-editor__content[data-empty="true"]::before {
  content: attr(placeholder);
  color: var(--placeholder);
  pointer-events: none;
  display: block;
}
/* The tooltip sits under the button, so it never covers the text being edited. */
.aucra-editor .q-tooltip {
  font-size: 0.75rem;
  padding: 4px 8px;
}
/* kit/formatted_bind.py: the editor's refusal, at the size a dense field's own
   error line takes (Quasar's `.q-field--dense .q-field__bottom`). */
.aucra-editor-notice {
  font-size: 12px;
}

.aucra-formatted {
  font-size: 14px;
  line-height: 1.55;
  /* Narrow columns justify into rivers of white space, so the measure has to
     be wide enough before the text is justified at all. */
  text-align: start;
  hyphens: auto;
}
@media (min-width: 700px) {
  .aucra-formatted {
    text-align: justify;
  }
}
.aucra-formatted p {
  margin: 0 0 10px;
}
.aucra-formatted p:last-child {
  margin-bottom: 0;
}
.aucra-formatted strong {
  font-weight: var(--weight-bold);
}
.aucra-formatted em {
  font-style: italic;
}
.aucra-formatted ul,
.aucra-formatted ol {
  margin: 0 0 10px;
  padding-left: 18px;
}
.aucra-formatted ul {
  list-style: disc;
}
.aucra-formatted ol {
  list-style: decimal;
}
.aucra-formatted li {
  margin-bottom: 6px;
}

/* ---- clause page: input rows, criteria, attestation ---- */

/* Region A's line under its head: the rows are read, never steps to finish
   first (#75). 7.10's own line draws the same. */
.aucra-inputs-lead {
  padding: 12px 18px;
  font-size: 12.5px;
  color: var(--muted);
}
/* The value takes 1.5 parts to the label's one and never under 240px (#259),
   so a reference wraps less: at an 896px panel the label is 245px wide and
   the value 367px. */
.aucra-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px minmax(240px, 1.5fr) 96px;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
}
.aucra-input-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.aucra-input-source {
  font-size: 0.75rem;
  color: var(--muted);
}
.aucra-input-field {
  min-width: 0;
}
/* The reference box grows with what is typed, and Chrome counts a wrapped
   placeholder in that height, which left an empty box three or four lines
   tall. The placeholder stays on one line and is cut, so an empty box is one
   line high at every width. */
.aucra-input-field textarea::placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The last cell holds either the dot or, for an input the standard asks for
   only "if available", the words that say a blank one is no gap. */
.aucra-input-state {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aucra-input-optional {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}
.aucra-input-go {
  font-size: 13px;
  color: var(--gold-deep);
}
/* The way to another clause: in an input row, and on its own from a page that
   points at one (the 6.4.3 empty state). */
.aucra-input-link,
.aucra-open-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* WCAG 2.5.8's 24 px target, on every page that draws one (7.7 D1). */
  min-height: 24px;
  white-space: nowrap;
  font-size: 0.78rem;
  color: var(--gold-deep);
  text-decoration: none;
}
.aucra-input-link:hover,
.aucra-open-link:hover {
  text-decoration: underline;
}
.aucra-input-link:active,
.aucra-open-link:active {
  background: var(--gold-wash);
}
/* The status of a linked clause sits where a reference field would be. */
.aucra-input-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--muted);
}
/* The rows follow the box that holds them, not the viewport: the assistant
   drawer narrows the column while the viewport stays put, and at 1024px with
   the drawer open a viewport rule left the label 6px wide (6.6 acceptance
   walk, 2026-09-24). The widths below are that box's width at the old
   viewport breaks, so every layout without the drawer draws as before. The
   box is a region's panel or one of its section cards, or whatever holds
   input rows; its region head (`content.css`), its criteria (below) and its
   attestation inset (`content_scheme.css`) switch on the same width
   (2026-09-27). */
:where(*):has(> .aucra-input-row, > .aucra-region-head, > .aucra-criterion),
.aucra-section-card {
  container: aucra-region / inline-size;
}
/* Under 739px of row the label would fall under 182px, so the source column
   gives way and the field narrows. */
@container aucra-region (max-width: 738px) {
  /* The state cell keeps room for the words "if available"; a 24px cell put
     them under the reference field. */
  .aucra-input-row {
    grid-template-columns: minmax(0, 1fr) 172px 80px;
  }
  .aucra-input-source {
    display: none;
  }
}
/* One column under 635px of row, a phone's width and the drawer's: the 172px
   field and the 80px state beside a label squeezed to a few letters cannot be
   read. */
@container aucra-region (max-width: 634px) {
  .aucra-input-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 8px;
  }
  .aucra-input-label {
    grid-area: 1 / 1;
  }
  /* The dot reads as the label's state, so it stays on the label's line. */
  .aucra-input-state {
    grid-area: 1 / 2;
    align-self: center;
  }
  /* The mid rule above hides the source and also matches here, so it comes
     back on its own line. */
  .aucra-input-source {
    display: block;
    grid-area: 2 / 1;
  }
  .aucra-input-field {
    grid-area: 3 / 1 / auto / -1;
  }
}

/* The quoted requirement of a region B, on 6.2, 6.3, 6.4.2 and 6.4.3: the
   18px inset every other region's content sits at, and the mockups draw. */
.aucra-requirement {
  padding: 14px 18px;
}
/* A quoted item over its answer: 7.6's activities, and 7.7.2's and 7.7.3's
   items (#259). 24px on each side of the hairline between two items (under
   it, 12px here and the column's 12px gap), 12px from the quote to its answer. */
.aucra-vv-item,
.aucra-prod-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) 0 var(--space-3);
  border-top: 1px solid var(--line);
}
.aucra-soft :is(.aucra-vv-item, .aucra-prod-item) {
  border-top-color: var(--soft-line);
}
/* The answer (its label, the pair, the reason and the results line) as one
   group: a light inset, no border, so no card nests in the panel. On --page
   the muted ink reads 4.68:1, the gold links 5.27:1, the gap red 5.98:1 and a
   box's edge (--line-control) 3.04:1; the pair's white chips keep their own
   ground, where their rings read 3.32:1. */
.aucra-item-answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: 8px;
  background: var(--page);
}

.aucra-criterion {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 250px;
  gap: 14px;
  align-items: start;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
/* Round, so the derived and attested marks are not read as checkboxes the
   manufacturer could tick. The attestation's own checkbox stays square. */
.aucra-criterion-mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--panel);
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.aucra-criterion-met {
  border: none;
  background: var(--pass);
}
.aucra-criterion-tick {
  font-size: 13px;
  color: var(--on-ink);
}
.aucra-criterion-text {
  font-size: 0.875rem;
  line-height: 1.45;
}
.aucra-criterion-note {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}
/* Below 637px of panel (a 700px viewport without the assistant, 1024px with
   it open) the note goes under its criterion, so neither is squeezed to a word
   a line and they never overlap. */
@container aucra-region (max-width: 636px) {
  .aucra-criterion {
    grid-template-columns: 18px minmax(0, 1fr);
  }
  .aucra-criterion-note {
    grid-column: 2;
  }
}

/* The sign button from its press until the save and redraw are done (#225):
   no second press, and a turning ring after its words. */
.aucra-btn.aucra-busy {
  pointer-events: none;
  opacity: 0.7;
}
.aucra-btn.aucra-busy::after {
  content: "";
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: aucra-sign-turn 0.8s linear infinite;
}
@keyframes aucra-sign-turn {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aucra-btn.aucra-busy::after { animation: none; }
}
/* Right under its criterion it takes no margin: the criterion row ends in
   12px, the gap the artboards draw (#124, DM13). After a line of its own
   inset (6.6's Read it in C1, a not assessed notice) it keeps 10px. */
.aucra-attest {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aucra-attest-inset > * + .aucra-attest {
  margin-top: 10px;
}
/* Quasar sizes the box off the inner element's font size: 36px gives the 18px
   box the canvas draws. Ticked, it is the pass colour, like every other thing
   on the page that says a criterion is met. */
.aucra-attest .q-checkbox__inner {
  font-size: 36px;
}
/* The drafts and the sign press, folded as one behind "Sign again" while a
   current sign-off is held: spaced as the block's own children are. */
.aucra-attest-drafts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aucra-attest .q-checkbox__bg {
  border-radius: 4px;
}
.aucra-attest .q-checkbox__inner--truthy {
  color: var(--pass);
}
.aucra-attest .q-checkbox__inner--truthy .q-checkbox__bg {
  background: var(--pass);
  border-color: var(--pass);
}
.aucra-attest .q-checkbox__inner--truthy .q-checkbox__svg {
  color: var(--on-ink);
}

/* ---- on this page ---- */

/* The outline lives in the page's right margin, so the panels keep the 832px
   content column every other page uses. The slot is positioned against that
   column and the nav inside it sticks while the page scrolls. Where the margin
   is too narrow for a 112px column, the letters alone are drawn (below). */
.aucra-with-outline {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}
.aucra-outline-slot {
  display: none;
  position: absolute;
  left: 100%;
  top: -12px;
  bottom: 0;
  width: 112px;
}
.aucra-outline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* The header is 56px tall and the content keeps a 16px breathing space. */
  position: sticky;
  top: 72px;
}
/* Measure the available workspace: an open assistant or collapsed rail
   changes its width without changing the browser's viewport. */
@container aucra-workspace (min-width: 960px) {
  .aucra-outline-slot {
    display: block;
    margin-left: 12px;
  }
}
@container aucra-workspace (min-width: 1144px) {
  .aucra-outline-slot {
    margin-left: 46px;
  }
}
/* While the assistant's handle shows, the outline keeps 6px clear of it
   rather than sitting at the artboard's x: its rows ran 16px under the
   handle at 1440px, over 6.3's "C1 Methodology" (C4 of the 2026-10-13 state
   check). In the region's own width W the outline ends at W / 2 + 528px
   plus its margin, and the handle starts 14px short of W. Under a 1120px
   region not even a 12px margin fits, and the outline is not drawn. */
body:has(button.aucra-ai-tab:not(.aucra-ai-tab-open)) .aucra-outline-slot {
  margin-left: min(46px, calc((100cqw - 896px) / 2 - 100px));
}
/* Where the 112px column does not fit (at 1280px the open rail leaves a 984px
   region, #194), the outline keeps its letters in a 32px column, from a 960px
   region up: 12px of margin, and 6px clear of the handle there. Each link keeps
   its name for a screen reader, and the region heads say it on the page. */
@container aucra-workspace (max-width: 1063.98px) {
  .aucra-outline-slot {
    width: 32px;
  }
  .aucra-outline-caption,
  .aucra-outline-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@container aucra-workspace (max-width: 1119.98px) {
  body:has(button.aucra-ai-tab:not(.aucra-ai-tab-open)) .aucra-outline-slot {
    width: 32px;
    margin-left: 12px;
  }
  body:has(button.aucra-ai-tab:not(.aucra-ai-tab-open)) :is(.aucra-outline-caption, .aucra-outline-name) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* A caption is the text face, Bold (page template section 13). */
.aucra-outline-caption {
  font-weight: var(--weight-bold);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 8px 6px;
}
/* 4px on the right, where nothing is drawn: 7.3's "C1 Requirements" is one
   word about 75px wide, which the 8px would break before its last letter. */
.aucra-outline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px 5px 8px;
  border-radius: 5px;
  border-left: 2px solid transparent;
  font-size: 0.75rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
}
.aucra-outline-row:hover {
  background: var(--mist);
  color: var(--ink);
}
.aucra-outline-row:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.aucra-outline-on {
  color: var(--text);
  background: var(--panel);
  border-left-color: var(--gold);
}
.aucra-outline-letter {
  font-size: 0.75rem;
  color: var(--muted);
}
.aucra-outline-on .aucra-outline-letter {
  color: var(--gold-deep);
}
/* A long name wraps onto a second line inside the 112px column rather than
   being cut, as the canvases draw "For the stakeholder" (ruling 19), and only
   at a space: "Transparency" never splits into "Transparenc / y" (7.4 P9). */
.aucra-outline-name {
  min-width: 0;
  line-height: 1.3;
  overflow-wrap: normal;
  word-break: normal;
}

@keyframes aucra-bounce {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}
.aucra-bounce {
  animation: aucra-bounce var(--motion-slow) var(--ease-in-out);
}
@media (prefers-reduced-motion: reduce) {
  .aucra-bounce {
    animation: none;
  }
}