/* 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 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: 500;
}
.aucra-settings-body {
  padding: 4px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aucra-settings-help {
  font-size: 12px;
  color: var(--muted);
}

/* ---- 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/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;
}
@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: 500;
  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-tab-panels .q-tab-panel {
  padding: 0;
}
.aucra-annex {
  cursor: pointer;
}

/* ---- 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.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  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: 0.78rem;
  color: var(--gold-deep);
}
.aucra-cmatrix-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.aucra-cmatrix-title {
  font-weight: 500;
}
.aucra-cmatrix-output {
  font-size: 0.76rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aucra-cmatrix-blank {
  /* Its own padding, not `aucra-empty`'s: the panel padding that class carries
     pushed the dot 18px out of its column and made the row taller than the
     rows whose cell holds a count. */
  padding: 0;
  font-size: 0.78rem;
  color: var(--muted);
}
@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;
}
.aucra-pane {
  padding: 14px 18px;
}
.aucra-cond-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-top: 1px solid #d8dee4;
  background: var(--wash-head);
  font-size: 13px;
  color: var(--muted);
}
.aucra-cond-head b {
  font-weight: 500;
  color: #232a31;
}
.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 #d8dee4;
  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: 500;
  color: var(--pass);
}
.aucra-cond-answer.off {
  font-weight: 400;
  color: var(--muted);
}
.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 #d8dee4;
  flex-wrap: wrap;
}
.aucra-quotel-title {
  font-weight: 600;
  font-size: 15px;
}
.aucra-quote {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aucra-divided {
  border-top: 1px solid #d8dee4;
}
.aucra-principle-id {
  font-size: 14px;
  color: #7c630f;
}
.aucra-sub-head {
  font-size: 11.5px;
  color: #7c630f;
}
/* 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;
}
.aucra-el-desc {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  white-space: normal;
  hyphens: auto;
  text-wrap: pretty;
}
@media (min-width: 700px) {
  .aucra-el-desc {
    text-align: justify;
  }
}
.aucra-realised {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-top: 1px solid #d8dee4;
  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: #232a31;
}
.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);
  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);
}
.aucra-session-row,
.aucra-account-row {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  width: 100%;
}
.aucra-session-facts,
.aucra-account-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  flex: 1 1 18rem;
}
.aucra-session-fact,
.aucra-account-fact {
  display: flex;
  flex-direction: column;
  min-width: 7rem;
}
.aucra-session-label,
.aucra-account-label {
  color: var(--muted);
  font-size: 12px;
}
.aucra-session-value,
.aucra-account-value {
  color: var(--text);
  font-size: 14px;
}
.aucra-session-mine {
  color: var(--gold-deep);
  font-size: 13px;
  align-self: center;
}
.aucra-session-act,
.aucra-account-acts,
.aucra-account-member {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}
.aucra-account-form,
.aucra-account-chip {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.aucra-account-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
}
.aucra-account-space {
  font-size: 13px;
}
/* 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 {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  min-width: 9rem;
  padding: 6px 8px;
}
.aucra-reset-token {
  overflow-wrap: anywhere;
  user-select: all;
}

/* ---- pages/clauses/shared.py: the head's output line ---- */

/* One sentence, as every canvas draws it: the lead and the clause number keep
   the line's muted ink, what the clause produces reads in the text's
   own ink at 500. The parts are labels, so they run on inline. */
.aucra-clause-output > * {
  display: inline;
}
.aucra-clause-output-item {
  color: var(--text);
  font-weight: 500;
}