/* AuCRA INSIGHT content layer: page content, status vocabulary, panels, tabs,
   fields, buttons, focus and motion. Tokens come from brand.css. */

/* Quasar's own tooltip is 10px on a grey ground, which reads as a browser
   default beside the page. Themed once here, so every tooltip on every page
   is the same small card in the page's own ink. */
.q-tooltip {
  font-size: 12px;
  line-height: 1.45;
  padding: 6px 9px;
  max-width: 260px;
  border-radius: 4px;
  background: var(--ink);
  color: #ffffff;
}

/* A select's option list is a floating menu outside the field, so Quasar's own
   card shows through: a square corner, a material shadow and its own caption
   ink. Themed once here, for every select the kit draws. */
.q-menu.aucra-select-menu {
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(28, 33, 38, 0.08);
  background: var(--panel);
}
.q-menu.aucra-select-menu .q-item__label {
  font-size: 12.5px;
  color: var(--text);
}
.q-menu.aucra-select-menu .q-item__label--caption {
  font-size: 11.5px;
  color: var(--muted);
}

.aucra-eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
/* The head's first row: the eyebrow wraps inside its own box rather than
   pushing the prev and next pair onto a line of its own. */
.aucra-clause-top {
  flex-wrap: nowrap;
}
/* Basis zero, so the eyebrow asks for none of the row's width and takes what
   the pair leaves: the pair keeps its titles whole and the eyebrow wraps. */
.aucra-clause-top .aucra-eyebrow {
  flex: 1 1 0;
  min-width: 0;
}
.aucra-clause-top .aucra-prevnext {
  flex: 0 1 auto;
  flex-wrap: nowrap;
}
/* The cap is on the title, not on the step: a clause title under it is drawn
   whole, and only a longer one is cut. */
.aucra-clause-top .aucra-step {
  min-width: 0;
  max-width: none;
}
.aucra-clause-top .aucra-step-title {
  max-width: 240px;
}
/* The head's block is a container, so the rule below follows the content
   column rather than the viewport: the assistant drawer narrows the column
   without the viewport changing (step 10, C2, 1024px with the drawer open). */
.aucra-clause-head {
  container: aucra-clause-head / inline-size;
}
/* Below 760px of column the eyebrow and the pair cannot share a line: the
   widest pair (7.5's, 573px) and the 8px gap leave the eyebrow under 180px, and
   narrower still the pair drew over it. The eyebrow gets its own line and the
   pair the next one, each step taking half and cutting its title. A phone's
   column is always under 760px, so this is its rule too. */
@container aucra-clause-head (max-width: 759px) {
  .aucra-clause-top {
    flex-wrap: wrap;
  }
  .aucra-clause-top .aucra-eyebrow {
    flex: 1 1 100%;
  }
  .aucra-clause-top .aucra-prevnext {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .aucra-clause-top .aucra-step {
    flex: 0 1 50%;
  }
  .aucra-clause-top .aucra-step-title {
    max-width: none;
    min-width: 0;
  }
}
.aucra-title {
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.aucra-sub {
  font-size: 0.95rem;
  color: var(--muted);
}
.aucra-content {
  min-width: 0;
}
/* The Dashboard's own measure: its register row draws a 300px name, an 84px
   id chip, a 160px bar with 256px of counts, the date, the chevron and the
   Remove, which is 1117px of row. The other pages keep the 896px measure. */
.aucra-content-dashboard {
  max-width: 1120px;
}

.aucra-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.aucra-panel-title {
  font-weight: 600;
  font-size: 1rem;
}
.aucra-count {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.aucra-empty {
  padding: 4px 18px 18px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---- register rows ---- */

.aucra-row {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--line);
  transition: background 0.15s, box-shadow 0.15s;
}
.aucra-row:hover {
  background: #fdf8ec;
  box-shadow: inset 3px 0 0 var(--gold);
}
/* The Dashboard row is a wrapper holding a link plus a delete button; /debug
   still uses the plain anchor form, so both carry the row's inner geometry. */
a.aucra-row,
a.aucra-row-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
  color: inherit;
  text-decoration-line: none;
}
a.aucra-row-link {
  flex: 1 1 auto;
  min-width: 0;
}
a.aucra-row:hover,
a.aucra-row-link:hover {
  opacity: 1;
}
/* ---- the press state ----

   Every family below answers a press, not only a hover: the rule is one token
   deeper than the hover in the same family, and a control whose hover is only
   an underline takes the gold wash behind its words. No transform and no new
   transition, so the reduced motion contract in kit.css still holds and no
   colour outside the token set is introduced. */
a.aucra-row:active,
a.aucra-row-link:active {
  background: var(--gold-wash);
}
.aucra-row-name {
  font-weight: 500;
  /* The drawing gives the name a flat 300px track. It is the only cell that
     gives way, so below 1200px it shrinks before the bar and its counts do,
     and the ellipsis and the tooltip carry the rest of a long name. */
  flex: 0 1 300px;
  /* Never below 140px: at 1024px the name vanished entirely once the bar had
     taken the row, and a row with only its id chip names no workspace. */
  min-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The status track of the Dashboard row: the bar and its counts, 256px of
   words as the drawing measures them, and the row's spare width. It grows and
   never shrinks, so the name is what gives way. */
.aucra-row .aucra-bar-row {
  flex: 1 0 auto;
}
.aucra-row .aucra-bar-text {
  flex: 0 0 256px;
}
/* Below 1200px the name has given its 160px; from there the counts give way
   too, with an ellipsis, so the name keeps its 140px floor at 1024px. */
@media (max-width: 1200px) {
  .aucra-row .aucra-bar-row {
    flex: 1 1 auto;
    /* The bar's 120px, its 10px gap and the counts' 80px floor, so the track
       never shrinks under its own content and spills over the cells beside it. */
    min-width: 210px;
  }
  .aucra-row .aucra-bar {
    flex-basis: 120px;
  }
  .aucra-row .aucra-bar-text {
    flex: 0 1 256px;
    min-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.aucra-row-date {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--muted);
}
.aucra-row-go {
  color: var(--muted);
}
.aucra-row-delete.q-btn {
  flex: 0 0 auto;
  margin-right: 10px;
  color: var(--muted);
}
.aucra-row-delete.q-btn:hover {
  color: var(--warn);
}
/* The Dashboard's create row: the name box and Create side by side, and on a
   phone one above the other, so the button keeps its label on one line. */
.aucra-create-row {
  flex-wrap: nowrap;
}
/* Below 640px the Dashboard row is three lines on a grid: the id and the name;
   the bar with its counts and the date; the document count. The chevron goes,
   because the whole row is the link and the name needs its width. The Remove
   stays the row's sibling at the right, clear of the bar. */
@media (max-width: 639px) {
  .aucra-create-row {
    flex-wrap: wrap;
  }
  .aucra-create-row > * {
    flex: 1 1 100%;
  }
  a.aucra-row-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding: 12px 8px 12px 14px;
  }
  .aucra-row-link > .aucra-id {
    grid-area: 1 / 1;
    justify-self: start;
  }
  .aucra-row-name {
    grid-area: 1 / 2 / auto / -1;
    min-width: 0;
  }
  .aucra-row-link > .aucra-row-go {
    display: none;
  }
  .aucra-row .aucra-bar-row {
    grid-area: 2 / 1 / auto / 3;
    min-width: 0;
  }
  .aucra-row .aucra-bar {
    flex: 0 1 120px;
    min-width: 60px;
  }
  .aucra-row .aucra-bar-text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .aucra-row-date {
    grid-area: 2 / 3;
    justify-self: end;
  }
  .aucra-row-documents {
    grid-area: 3 / 1 / auto / -1;
  }
  .aucra-row-delete.q-btn {
    margin-right: 4px;
  }
}

.aucra-id {
  flex: 0 0 auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  color: var(--muted);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}
.aucra-id-gold {
  color: var(--gold-deep);
  background: var(--gold-wash);
}

a.aucra-back {
  color: var(--gold-deep);
  font-weight: 500;
}

/* ---- status vocabulary ---- */

.aucra-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.aucra-dot-pass {
  background: var(--pass);
  border: 1.5px solid var(--pass);
}
.aucra-dot-in_progress {
  background: var(--gold);
  border: 1.5px solid var(--gold);
}
.aucra-dot-not_started {
  background: #c3cbd3;
  border: 1.5px solid var(--placeholder);
}
.aucra-dot-not_applicable {
  width: 7px;
  height: 2px;
  border-radius: 1px;
  background: var(--muted);
}

.aucra-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
  letter-spacing: 0.01em;
  font-weight: 500;
}
.aucra-chip-sm {
  padding: 2px 9px;
  font-size: 0.72rem;
}
.aucra-chip-md {
  padding: 4px 12px;
  font-size: 0.78rem;
}
.aucra-chip-pass {
  color: var(--pass);
  background: var(--pass-wash);
  border-color: var(--pass);
}
.aucra-chip-in_progress {
  color: var(--gold-deep);
  background: var(--gold-wash);
}
.aucra-chip-not_started,
.aucra-chip-not_applicable {
  color: var(--muted);
  background: var(--mist);
}

.aucra-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.aucra-tag-norm {
  color: var(--gold-deep);
  border: 1px solid var(--gold-deep);
}
.aucra-tag-info {
  color: var(--muted);
  border: 1px solid var(--line-strong);
}

/* ---- progress bar (one segment per clause) ---- */

.aucra-bar-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Never shrunk: the bar is a fixed track and the counts after it read in
     full, so the row's spare width comes off the name instead. */
  flex: 0 0 auto;
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-bar {
  display: inline-flex;
  /* Fixed track: 20 segments and their gaps share it, so a segment is never
     squeezed to zero however narrow the row gets. */
  flex: 0 0 160px;
  width: 160px;
  height: 6px;
  gap: 1px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--line);
}
.aucra-bar-seg {
  flex: 1 1 0;
  min-width: 0;
  height: 6px;
}
.aucra-bar-seg-pass {
  background: var(--pass);
}
.aucra-bar-seg-in_progress {
  background: var(--gold);
}
.aucra-bar-seg-not_started {
  background: #c3cbd3;
}
.aucra-bar-seg-not_applicable {
  background: #e2e7ec;
}
.aucra-bar-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- panels, heads, tabs ---- */

.aucra-panel-head,
.aucra-region-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.aucra-panel-head > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.aucra-panel-note {
  font-size: 0.8rem;
  color: var(--muted);
}
.aucra-region-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gold-deep);
  background: var(--gold-wash);
}
.aucra-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
/* Only a head that draws the Suggest control: there the title gives way and
   wraps, as Rows.dc.html has it, and the pair stays on one line at the right.
   A head without the control keeps the wrap it has always had. */
.aucra-region-head:has(.aucra-head-right .aucra-suggest-button) {
  flex-wrap: nowrap;
}
.aucra-region-head:has(.aucra-head-right .aucra-suggest-button) .aucra-region-name {
  min-width: 0;
}
/* Below 640px the right hand group gives way too: it wraps under the region's
   name and its own note and buttons wrap inside the panel, so no head pushes
   the page sideways. */
@media (max-width: 639px) {
  .aucra-region-head:has(.aucra-head-right .aucra-suggest-button) {
    flex-wrap: wrap;
  }
  .aucra-head-right {
    flex-shrink: 1;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }
}
.aucra-region-name {
  font-weight: 600;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.aucra-tabs {
  /* Same inset as every panel cell, so the first label never hugs the edge. */
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
}
/* Tabs split onto a second row rather than being clipped or hidden behind
   Quasar's scroll arrows: the style guide's rule, and the only way the last
   tab stays reachable at 390 px. */
.aucra-tabs .q-tabs__content {
  flex-wrap: wrap;
}
/* Quasar dims an inactive tab to 0.85, which takes --muted from 4.98:1 to
   3.74:1 on the panel. The token is already the quiet one, so the label keeps
   its own strength and the active tab is untouched. */
.aucra-tabs .q-tab--inactive {
  opacity: 1;
}
.aucra-tabs .q-tab {
  padding: 0 2px;
  margin-right: 22px;
  min-height: 44px;
  /* Quasar stretches tabs to fill the row; a wrapped second row would then
     start in the middle of the bar instead of at the left edge. */
  flex: 0 0 auto;
}
.aucra-tabs .q-tab--active {
  color: var(--text);
}
.aucra-tabs .q-tab__indicator {
  background: var(--gold);
  height: 2px;
}
.aucra-tab-label {
  font-size: 0.88rem;
  font-weight: 500;
}
.aucra-tabs .q-tab--active .aucra-tab-label {
  font-weight: 600;
}
.aucra-tab-count {
  margin-left: 8px;
  font-size: 0.72rem;
  line-height: 18px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--mist);
}
.aucra-tabs .q-tab--active .aucra-tab-count {
  color: var(--gold-deep);
  background: var(--gold-wash);
}
/* Quasar leaves this helper at opacity .15 after a click, which reads as a
   grey slab stuck on the tab; focus is drawn by the ring below instead. */
.aucra-tabs .q-focus-helper,
.aucra-toggle-option .q-focus-helper {
  display: none !important;
}

/* ---- fields ---- */

.aucra-field {
  gap: 6px;
}
.aucra-field-label {
  font-size: 0.82rem;
  font-weight: 500;
}
/* The state lines that stay in the flow: empty state notes, the tool's own
   readings. A control's own help is behind the (i) below. */
.aucra-field-help {
  font-size: 0.75rem;
  color: var(--muted);
}
.aucra-field-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
}
/* The artboard puts the free space before the Suggest button, so it sits at the
   field's right edge rather than against the label. */
.aucra-field-head .aucra-suggest-button {
  margin-left: auto;
}
.aucra-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
}
.aucra-info:hover {
  color: var(--text);
}
.aucra-info:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.aucra-info-glyph {
  font-size: 18px;
}
/* Quasar's tooltip is a black pill by default; this is the page's own card.
   A help of one line per answer (6.6's kinds) is joined with newlines. */
.aucra-info-card {
  white-space: pre-line;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  padding: 10px 12px;
  box-shadow: 0 6px 18px rgba(35, 42, 49, 0.14);
}
.aucra-check .q-checkbox__label {
  font-size: 0.84rem;
}
.aucra-readback {
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.aucra-readback-empty {
  color: var(--muted);
  font-style: italic;
}

.aucra-control .q-field__control {
  font-size: 13.5px;
  border-radius: 6px;
}
.aucra-control .q-field__control:before {
  border: 1px solid var(--line);
  border-radius: 6px;
}
/* Quasar darkens the border to currentColor on hover, which reads as a second
   focus state; the field keeps its line colour and only the ring moves. */
.aucra-control .q-field__control:hover:before {
  border-color: var(--line);
}
.aucra-control .q-field__native,
.aucra-control textarea {
  font-size: 13.5px;
  color: var(--text);
}
/* A box that starts at one line and grows: Quasar floors an auto-height field
   at 36px, three short of the 40px every single-line control has, so the two
   read as different boxes side by side in a register row. */
.aucra-control.q-textarea--autogrow .q-field__control {
  min-height: 40px;
}
/* Quasar draws the arrow in its own ink, which is darker than any text on the
   page and reads as the loudest thing in a form. */
.q-field__append .q-icon,
.aucra-control .q-field__append .q-icon {
  color: var(--muted);
}
/* The field's own focus state, so a ring is not the only thing that moves.
   The focus class lands on the field root, which is the element that carries
   aucra-control, so this is one compound selector and not a descendant. */
.aucra-control.q-field--focused .q-field__control:before,
.aucra-matrix-cell.q-field--focused .q-field__control:before {
  border: 2px solid var(--gold-deep);
}

.aucra-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.aucra-toggle-question {
  font-size: 0.84rem;
  font-weight: 500;
}
.aucra-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
/* Quasar's own text-primary on .q-btn__content would repaint the label ink on
   ink, so the option's colours are stated on the inner nodes too. */
.aucra-toggle-option,
.aucra-toggle-option .q-btn__content {
  padding: 5px 14px;
  color: var(--muted) !important;
  background: var(--panel);
  border-radius: 0;
}
.aucra-toggle-option .q-btn__content {
  padding: 0;
  background: none;
}
.aucra-toggle-option.on,
.aucra-toggle-option.on .q-btn__content,
.aucra-toggle-option.on .q-btn__content > span {
  color: #ffffff !important;
  font-weight: 500;
}
.aucra-toggle-option.on {
  background: var(--ink);
}
/* The option not chosen lights up on hover, so both halves read as buttons. */
.aucra-toggle-option:not(.on):hover,
.aucra-toggle-option:not(.on):hover .q-btn__content {
  background: var(--mist);
  color: var(--ink) !important;
}