/* AuCRA INSIGHT page layer: the rules owned by one ui/pages module each. They
   live here rather than in the module because a stylesheet linked in the page
   head reaches a browser tab that is already open; CSS injected while a page is
   built only reaches pages loaded after the injection. */

/* ---- pages/clauses/product_context/rdps.py: the RDPS map and the third party band of 6.2 ---- */

.aucra-rdps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--wash-band);
}
.aucra-rdps-note {
  font-size: 0.78rem;
  color: var(--muted);
}
.aucra-rdps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 12px;
  align-items: start;
  width: 100%;
}
.aucra-rdps-grid .aucra-field {
  min-width: 0;
}
@media (max-width: 700px) {
  .aucra-rdps-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- pages/settings.py ---- */

.aucra-settings-label {
  padding: 14px 18px 4px;
  font-size: 13px;
  font-weight: var(--weight-bold);
}
.aucra-settings-body {
  padding: 4px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* A body with no label row above it (the Language tab). */
.aucra-settings-body.aucra-settings-lone {
  padding-top: 14px;
}

/* ---- pages/not_found.py ---- */

.aucra-404 {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aucra-404-address {
  font-size: 14px;
}
.aucra-404-line {
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-404-buttons {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

/* ---- pages/terms.py and terms_own.py ---- */

.aucra-terms-own-lead {
  padding: 0 18px 10px;
  font-size: 13px;
  color: var(--muted);
}
.aucra-terms-draft {
  font-size: 13px;
  color: var(--muted);
}
.aucra-term {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-margin-top: 72px;
}
.aucra-term + .aucra-term {
  border-top: 1px solid var(--line);
}
.aucra-term-number {
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-term-name {
  font-weight: var(--weight-bold);
}
.aucra-term-note,
.aucra-term-source {
  font-size: 12.5px;
  color: var(--muted);
}

/* ---- pages/progress_report.py ---- */

.aucra-progress-lead,
.aucra-progress-answer,
.aucra-progress-none {
  font-size: 13px;
  color: var(--muted);
}
.aucra-progress-clause {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aucra-progress-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: var(--weight-bold);
}
.aucra-progress-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aucra-progress-criterion {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.aucra-progress-criterion > .q-icon {
  align-self: center;
  font-size: 16px;
  color: var(--muted);
}
.aucra-progress-met > .q-icon,
.aucra-progress-met > .aucra-progress-state {
  color: var(--pass);
}
.aucra-progress-state {
  flex: 0 0 auto;
  font-weight: var(--weight-bold);
}
.aucra-progress-label {
  font-weight: var(--weight-bold);
  font-size: 13px;
}
.aucra-progress-gap {
  padding-left: 16px;
  position: relative;
}
.aucra-progress-gap::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
}

/* ---- pages/annex_c.py ---- */

.aucra-annex-lead {
  font-size: 13px;
  color: var(--muted);
}
.aucra-annex-row {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aucra-annex-row + .aucra-annex-row {
  border-top: 1px solid var(--line);
}
.aucra-annex-name {
  font-weight: var(--weight-bold);
}
.aucra-annex-lines {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* A line is the standard's words with its links and pills in the flow. */
.aucra-annex-line > *,
.aucra-annex-ref > * {
  display: inline;
  vertical-align: baseline;
}
.aucra-annex-ref > .aucra-chip {
  display: inline-flex;
  margin: 0 4px;
  vertical-align: middle;
}
.aucra-annex-said,
.aucra-annex-remarks {
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-annex-remarks-label {
  font-weight: var(--weight-bold);
}

/* ---- pages/overview.py ---- */

/* The head row: the product's name, then Assessor view and Product details. On
   a phone the two buttons left the name about 150px, so below 640px they drop
   under it and the name takes the full width. */
.aucra-overview-head {
  flex-wrap: nowrap;
}
.aucra-overview-head > .aucra-btn {
  flex-shrink: 0;
}
@media (max-width: 639px) {
  .aucra-overview-head {
    flex-wrap: wrap;
  }
  .aucra-overview-head > .aucra-title {
    flex: 1 1 100%;
    min-width: 0;
  }
  .aucra-overview-head > .q-space {
    display: none;
  }
}

.aucra-summary {
  font-size: 0.82rem;
  color: var(--muted);
  padding: 2px 0;
}
.aucra-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.aucra-summary-sep {
  color: var(--line);
}
.aucra-setup {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 2px 0 6px;
}
.aucra-setup-label {
  font-weight: var(--weight-bold);
  color: var(--text);
}
.aucra-setup-part {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.aucra-setup-part:hover {
  color: var(--text);
  border-bottom-color: var(--line);
}
.aucra-setup-done {
  color: var(--pass);
}
.aucra-setup-part:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* In the softer look each part of the set-up line is a pill of its own on the
   page's ground, so the four read as four links. On --soft-panel over the
   ground (#fcfdfd, #fcfcfa under the gold wash): muted 4.98:1, the pass green
   5.38:1, the focus ring 5.60:1. */
.aucra-soft .aucra-setup-part {
  padding: 3px 10px;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: var(--soft-panel);
}
.aucra-soft .aucra-setup-part:hover {
  border-color: var(--line-strong);
}
.aucra-tab-panels .q-tab-panel {
  padding: 0;
}
.aucra-annex {
  position: relative;
  cursor: pointer;
}
/* The name's link covers the card, so a press anywhere opens Table C.1; the
   (i) sits above it and opens only its own card. */
.aucra-annex-link {
  color: inherit;
  text-decoration: none;
}
.aucra-annex-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.aucra-annex .aucra-info {
  position: relative;
  z-index: 1;
}
.aucra-annex-link:focus-visible {
  outline: none;
}
.aucra-annex:has(.aucra-annex-link:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}
.aucra-soft .aucra-annex:hover {
  background: var(--wash-head);
}
/* The name keeps its line; the note beside it is what wraps. */
.aucra-soft .aucra-annex > .aucra-panel-title {
  flex-shrink: 0;
}
/* On a phone the note under the name and its tag, not a column of one word
   per line beside them. */
@media (max-width: 639px) {
  .aucra-soft .aucra-annex {
    flex-wrap: wrap;
  }
  /* A zero basis, so the name, its tag and the chevron share one line
     before anything wraps; the name takes the room the spacer had. */
  .aucra-soft .aucra-annex > .aucra-panel-title {
    flex: 1 1 0;
    min-width: 0;
  }
  .aucra-soft .aucra-annex > .q-space {
    display: none;
  }
  .aucra-soft .aucra-annex > .aucra-panel-note {
    order: 1;
    flex: 1 1 100%;
  }
}

/* ---- pages/overview_matrix.py: the conformity matrix ---- */

/* The grid columns are the mockup's 70px, 1fr, 180px, 78px, 200px. The grid
   keeps a min-width and scrolls inside its own box, so the page body never
   scrolls sideways. Named cmatrix, not matrix: the risk matrix of 6.3 owns the
   aucra-matrix names in content.css. */
.aucra-cmatrix-scroll {
  width: 100%;
  overflow-x: auto;
}
.aucra-cmatrix-head,
.aucra-cmatrix-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 180px 78px 200px;
  gap: 12px;
  align-items: center;
  padding: 8px 18px;
  min-width: 760px;
}
.aucra-cmatrix-head {
  background: var(--wash-head);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}
.aucra-cmatrix-head > * {
  white-space: normal;
  line-height: 1.3;
}
.aucra-cmatrix-row {
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  color: var(--text);
  text-decoration: none;
}
.aucra-cmatrix-row:hover {
  background: var(--gold-wash);
  text-decoration: none;
}
.aucra-cmatrix-id {
  font-size: 13px;
  color: var(--gold-deep);
}
.aucra-cmatrix-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.aucra-cmatrix-title {
  font-weight: var(--weight-bold);
}
.aucra-cmatrix-output {
  font-size: 0.76rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  /* The output document keeps its own column heading, so the row's sub-line is
     redundant once the grid has to give ground. */
  .aucra-cmatrix-output {
    display: none;
  }
  .aucra-cmatrix-head,
  .aucra-cmatrix-row {
    grid-template-columns: 58px minmax(0, 1fr) 148px 62px 86px;
    gap: 10px;
    padding: 8px 12px;
    min-width: 560px;
  }
}

/* ---- pages/product_details.py ---- */

.aucra-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  padding: 14px 18px;
}
.aucra-grid2 > .aucra-wide {
  grid-column: 1 / -1;
}
/* product_details_revisions.py (#38): the history under the document's boxes. */
.aucra-revisions-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: var(--wash-head);
  font-size: 13px;
}
.aucra-revisions-title {
  flex: 1;
  font-weight: var(--weight-bold);
  color: var(--text);
}
.aucra-revisions-none {
  padding: 10px 18px;
  color: var(--muted);
}
.aucra-revision {
  border-top: 1px solid var(--line);
}
.aucra-revision-head {
  padding: 10px 18px 0;
  font-weight: var(--weight-bold);
}
/* A row never approved carries Remove at its head's end (#217). */
.aucra-revision-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 18px 0;
}
.aucra-revision-head-row .aucra-revision-head {
  flex: 1 0 auto;
  padding: 0;
}
.aucra-revision .aucra-grid2 {
  padding-top: 6px;
}
.aucra-cond-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: var(--wash-head);
  font-size: 13px;
  color: var(--muted);
}
.aucra-cond-head b {
  font-weight: var(--weight-bold);
  color: var(--text);
}
.aucra-cond-row {
  display: grid;
  grid-template-columns: 70px 300px 110px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 9px 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: inherit;
  text-decoration: none;
}
.aucra-cond-row:hover {
  background: var(--wash-head);
}
@media (max-width: 700px) {
  .aucra-grid2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .aucra-cond-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  .aucra-cond-answer {
    grid-column: 2;
  }
  .aucra-cond-reason {
    grid-column: 1 / -1;
  }
}
.aucra-cond-answer {
  font-weight: var(--weight-bold);
  color: var(--pass);
}
.aucra-cond-answer.off {
  font-weight: 400;
  color: var(--muted);
}
/* An unanswered row has no reason: the kit's empty mark, with the panel's
   padding, read as a stray dot in the cell (bug hunt 2026-10-09, M7). */
.aucra-cond-reason.aucra-empty {
  display: none;
}
.aucra-cond-reason {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- pages/clauses/principles/page.py and panels.py ---- */

.aucra-quotel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.aucra-quotel-title {
  font-size: 17px;
}
.aucra-quote {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aucra-divided {
  border-top: 1px solid var(--line);
}
.aucra-principle-id {
  font-size: 14px;
  color: var(--gold-deep);
}
.aucra-sub-head {
  font-size: 12px;
  color: var(--gold-deep);
}
/* The tick box belongs on the element's name line, not centred against the
   name and its description together. Quasar's 40px hit area carries the 20px
   box in its middle, so the box lands 9px below the name line until the hit
   area is lifted by that much. */
.aucra-elements .q-checkbox {
  align-items: flex-start;
}
.aucra-elements .q-checkbox__inner {
  margin-top: -9px;
}
.aucra-elements {
  display: flex;
  flex-direction: column;
}
/* 5.3.2's own words for each element: ragged, with no automatic hyphens, as
   every quote of the standard (#259). */
.aucra-el-desc {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  white-space: normal;
  text-align: left;
  hyphens: manual;
  text-wrap: pretty;
}
.aucra-realised {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-realised-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  max-width: 100%;
  white-space: normal;
}
.aucra-realised-chip:hover {
  color: var(--text);
}
.aucra-realised-chip > * {
  min-width: 0;
}
.aucra-principles-tabs .aucra-tab-panels {
  padding: 0;
  background: transparent;
}
.aucra-principles-tabs .q-tab-panel {
  padding: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* The one long page keeps the spacing the tab panels have. */
.aucra-principles-long,
.aucra-principles-group {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

/* The sign in and first administrator pages: one narrow column, centred, with
   the rail, the account menu and the assistant hidden by the shell. */
.aucra-content.aucra-bare {
  max-width: 26rem;
  padding-top: 64px;
}
.aucra-bare .aucra-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aucra-login-error:empty {
  display: none;
}
.aucra-login-error {
  border-left: 3px solid var(--warn);
  /* An inner box of the softer look. */
  border-radius: var(--soft-radius-inner);
  background: var(--warn-wash);
  color: var(--text);
  padding: 8px 12px;
  width: 100%;
}
.aucra-menu-form {
  margin: 0;
}
.aucra-menu-signout {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
/* Said once per page, above the content a viewer may read but not change. */
.aucra-read-only {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ui/pages/account.py, account_sessions.py, accounts.py, accounts_rows.py:
   the two pages of the login gate that a signed in reader sees. A reading is
   one labelled value; a session and an account row are a band of those with
   their native forms beside them. */
.aucra-reading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  width: 100%;
}
.aucra-reading-label {
  color: var(--muted);
  font-size: 13px;
  min-width: 8rem;
}
.aucra-reading-value {
  color: var(--text);
}
/* The native select of `kit/form.py` only: the kit's Quasar select carries
   the same class, and this border and padding drew a box inside its box. */
select.aucra-select {
  appearance: none;
  /* The kit select's arrow_drop_down at 16px (brand.css --select-arrow). */
  background: var(--panel) no-repeat right 12px center / 16px var(--select-arrow);
  border: 1px solid var(--line-control);
  /* A control's 8px, as the kit's fields have in the softer look. */
  border-radius: 8px;
  color: var(--text);
  font-size: 12.5px;
  height: 34px;
  min-width: 9rem;
  padding: 0 32px 0 12px;
}
/* Required and still on its placeholder: grey, as the kit's empty select. */
select.aucra-select:invalid {
  color: var(--placeholder);
}
select.aucra-select option {
  color: var(--text);
}
/* A drawn arrow keeps its grey on a high contrast theme; the browser's own
   follows the system colours. */
@media (forced-colors: active) {
  select.aucra-select {
    appearance: auto;
    background-image: none;
  }
}
.aucra-reset-token {
  overflow-wrap: anywhere;
  user-select: all;
}

/* ---- pages/clauses/shared_output.py: the head's output card ---- */

/* The Chinese reference translation's marker and its way back to the
   English (#255), once in a head: quiet, one line that wraps on a phone. */
.aucra-translation-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 13px;
  color: var(--muted);
}
.aucra-translation-icon {
  font-size: 18px;
}
.aucra-translation-words {
  flex: 1 1 16rem;
}
/* A card of its own under the title, in the gold wash, so what the clause
   produces reads apart from the head (the user, 2026-09-29). One line per
   part of the output; the parts under a colon (6.4.4's estimates) step in. */
.aucra-clause-output {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding: 12px 18px 14px;
  border: 1px solid var(--output-line);
  border-radius: 14px;
  background: var(--output-wash);
}
.aucra-clause-output-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aucra-clause-output-icon {
  font-size: 18px;
  color: var(--gold-deep);
}
.aucra-clause-output-lead {
  flex: 1 1 auto;
  font-size: 0.8rem;
  font-weight: var(--weight-bold);
  color: var(--gold-deep);
}
.aucra-clause-output-ref {
  font-size: 0.75rem;
  color: var(--muted);
}
.aucra-clause-output-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 26px;
}
.aucra-clause-output-item {
  color: var(--text);
  font-weight: var(--weight-bold);
  line-height: 1.5;
}
/* The mark and whatever follows the slip stay on the line they belong to. */
.aucra-clause-output-item > * {
  display: inline;
}
.aucra-clause-output-part,
.aucra-clause-output-under {
  position: relative;
  padding-left: 16px;
}
.aucra-clause-output-under {
  margin-left: 16px;
  font-weight: 400;
}
.aucra-clause-output-part::before,
.aucra-clause-output-under::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
@media (max-width: 639px) {
  .aucra-clause-output-body {
    padding-left: 0;
  }
}

/* ui/document_health.py: the line under a workspace page's head while a
   document needs attention (docs/plans/document-reading.md H2). The login
   error's warn box, so a missing file reads as something to act on. */
.aucra-document-health {
  border-left: 3px solid var(--warn);
  border-radius: var(--soft-radius-inner);
  background: var(--warn-wash);
  color: var(--text);
  font-size: 13.5px;
  padding: 8px 12px;
  width: 100%;
}

/* ---- pages/settings_ai.py: the Connection card's outcome under its head ---- */
.aucra-settings-outcome {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
.aucra-settings-outcome:empty {
  display: none;
}
/* product_details_picture.py (#245): the cover picture, a card of its own (#267). */
.aucra-picture {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 18px 14px;
}
.aucra-picture-help {
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-picture-preview {
  width: min(100%, 320px);
  height: 200px;
  border: 1px solid var(--soft-line);
  border-radius: 6px;
  background: #fff;
}
/* No picture yet: an empty box where it will show, so the card reads at a glance. */
.aucra-picture-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-style: dashed;
  color: var(--muted);
  font-size: 13px;
}
.aucra-picture-empty .q-icon {
  font-size: 36px;
}
.aucra-picture-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}