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

.aucra-editor.q-editor {
  border: 1px solid var(--line);
  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: 600;
}
/* 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;
}

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

.aucra-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 240px 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;
}
/* What the region's two tags mean, under the last row: the words used to live
   in a tooltip, where a reader who never hovers could not find them. */
.aucra-input-foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 18px 10px;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--muted);
}
.aucra-input-optional {
  font-size: 0.69rem;
  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;
  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. */
:where(*):has(> .aucra-input-row) {
  container: aucra-inputs / inline-size;
}
/* Under 739px of row the three fixed cells leave the label under 215px, so
   the source column gives way and the field narrows. */
@container aucra-inputs (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-inputs (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;
}

.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: #ffffff;
}
.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;
}
@media (max-width: 700px) {
  .aucra-criterion {
    grid-template-columns: 18px minmax(0, 1fr);
  }
  .aucra-criterion-note {
    grid-column: 2;
  }
}

.aucra-attest {
  display: flex;
  flex-direction: column;
  gap: 10px;
  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;
}
.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: #ffffff;
}
.aucra-attest-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 700px) {
  .aucra-attest-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- 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. Under 1360px the
   margin is too narrow for a 112px column, so the outline is not drawn. */
.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: 1064px) {
  .aucra-outline-slot {
    display: block;
    margin-left: 12px;
  }
}
@container aucra-workspace (min-width: 1144px) {
  .aucra-outline-slot {
    margin-left: 46px;
  }
}
.aucra-outline-caption {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 8px 6px;
}
.aucra-outline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 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.69rem;
  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). */
.aucra-outline-name {
  min-width: 0;
  line-height: 1.3;
  overflow-wrap: break-word;
}

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