/* AuCRA INSIGHT, one's own account (docs/plans/accounts-area.md AA3, AA9,
   AA16): Your account's cards (ui/pages/account*.py), the dialog its forms
   open in (account_own_dialog.py), the two-step steps and recovery codes
   that the forced setup draws bare (account_two_step_parts.py,
   two_step_setup.py), and Settings' User settings row. Linked after
   pages_accounts_table.css by ui/styles.py. Every class takes the
   aucra-acct- prefix; the brand tokens only. */

/* ---- the cards ---- */
.aucra-acct-own {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.aucra-acct-rows {
  display: flex;
  flex-direction: column;
}
/* A row: the name and its help on the left, the value or control on the
   right, right aligned. Rows after the first carry the line between them. */
.aucra-acct-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 14px 18px;
  min-width: 0;
}
.aucra-acct-row + .aucra-acct-row,
.aucra-acct-profile-top + .aucra-acct-rows > .aucra-acct-row:first-child {
  border-top: 1px solid var(--soft-line);
}
.aucra-acct-row-words {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 16rem;
  min-width: 0;
}
.aucra-acct-row-name {
  font-size: 14px;
  font-weight: 500;
}
.aucra-acct-row-help {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
.aucra-acct-row-alone {
  font-size: 13.5px;
  line-height: 1.5;
}
/* A card's one line when it has no rows ("Not signed in anywhere."), at the
   rows' own inset. */
.aucra-acct-rows-none {
  padding: 14px 18px;
  font-size: 13.5px;
  line-height: 1.5;
}
.aucra-acct-row-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}
.aucra-acct-row-value {
  font-size: 13.5px;
  text-align: right;
  overflow-wrap: anywhere;
}

/* ---- the profile ---- */
.aucra-acct-profile-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  min-width: 0;
}
.aucra-acct-initials {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.aucra-acct-profile-who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.aucra-acct-profile-name {
  font-size: 17px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.aucra-acct-profile-email {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ---- where you are signed in ---- */
.aucra-acct-session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px 190px 132px;
  gap: 6px 14px;
  align-items: center;
  padding: 12px 18px;
  font-size: 13px;
}
.aucra-acct-session + .aucra-acct-session {
  border-top: 1px solid var(--soft-line);
}
.aucra-acct-session-browser {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.aucra-acct-session-when {
  color: var(--muted);
}
.aucra-acct-session-end {
  display: flex;
  justify-content: flex-end;
}
/* Laid out by the card's own width: the assistant drawer narrows the column
   while the window stays wide (docs/handoff/rules.md). */
.aucra-acct-sessions {
  container: aucra-acct-sessions / inline-size;
}
@container aucra-acct-sessions (max-width: 719px) {
  .aucra-acct-session {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .aucra-acct-session-browser {
    grid-column: 1 / 2;
  }
  .aucra-acct-session-when {
    grid-column: 1 / 2;
  }
  .aucra-acct-session-end {
    grid-column: 2 / 3;
    grid-row: 1 / span 3;
  }
}
/* Each Sign out is a native form of its own, as wide as its content. */
.aucra-form.aucra-acct-inline-form {
  width: auto;
}

/* ---- Settings' User settings row ---- */
a.aucra-acct-open-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gold-deep);
  text-decoration: none;
  white-space: nowrap;
}
a.aucra-acct-open-link:hover {
  text-decoration: underline;
}
a.aucra-acct-open-link .q-icon {
  font-size: 18px;
}

/* ---- the dialog (account_own_dialog.py): the kit dialog's band ---- */
.aucra-panel.aucra-acct-dialog {
  width: 560px;
  max-width: calc(100vw - 32px);
  padding: 0;
  overflow: hidden;
  border-radius: var(--soft-radius);
}
.aucra-acct-dialog-title {
  padding: 14px 18px;
  background: var(--wash-head);
  border-bottom: 1px solid var(--soft-line);
  font-size: 15px;
  font-weight: 600;
}
.aucra-acct-dialog-content > .aucra-form {
  display: flex;
  flex-direction: column;
}
/* The content is a NiceGUI column, which starts its children at the left:
   the body and the foot take the dialog's whole width, so the foot's line
   runs edge to edge and its buttons sit at the right, the primary last. */
.aucra-acct-dialog-content > .aucra-form,
.aucra-acct-dialog-content > .aucra-acct-dialog-body,
.aucra-acct-dialog-content > .aucra-acct-dialog-foot {
  align-self: stretch;
}
.aucra-acct-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  min-width: 0;
}
.aucra-acct-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
.aucra-acct-dialog-line {
  font-size: 13.5px;
  line-height: 1.5;
}
.aucra-acct-said {
  border-left: 3px solid var(--warn);
  border-radius: var(--soft-radius-inner);
  background: var(--warn-wash);
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
}
.aucra-acct-said:empty {
  display: none;
}
/* At phone width a dialog fills the screen (AA16, E16): Quasar's minimized
   inner box keeps a 24px inset and caps the height, both let go here. */
@media (max-width: 599px) {
  .q-dialog__inner--minimized:has(> .aucra-acct-dialog) {
    padding: 0;
  }
  .q-dialog__inner--minimized > .aucra-panel.aucra-acct-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  /* The foot sits at the bottom of the screen, as the company modals' does:
     the content and a form in it take the height left, and the foot is
     pushed down inside them. One rule for every dialog in this band. */
  .aucra-acct-dialog > .aucra-acct-dialog-content,
  .aucra-acct-dialog-content > .aucra-form {
    flex: 1 0 auto;
  }
  .aucra-acct-dialog-content .aucra-acct-dialog-foot {
    margin-top: auto;
  }
}

/* ---- the two-step steps, the key and the recovery codes ---- */
.aucra-acct-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.aucra-acct-step-mark {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: var(--gold-wash);
  color: var(--gold-deep);
  border: 1px solid rgba(124, 99, 15, 0.3);
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.aucra-acct-step-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.aucra-acct-step-words {
  font-size: 13.5px;
  line-height: 1.5;
  padding-top: 2px;
}
.aucra-acct-qr svg {
  display: block;
  width: 160px;
  height: 160px;
  border: 1px solid var(--line);
  border-radius: var(--soft-radius-inner);
}
.aucra-acct-key {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aucra-acct-key-caption {
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-acct-key-text,
.aucra-acct-code {
  border: 1px solid var(--line);
  border-radius: var(--soft-radius-inner);
  background: var(--wash-head);
  font-family: "IBM Plex Mono", monospace;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}
.aucra-acct-key-text {
  padding: 8px 10px;
}
.aucra-acct-codes-why {
  font-size: 13.5px;
  line-height: 1.5;
}
.aucra-acct-codes-once {
  font-size: 13.5px;
  font-weight: 500;
}
.aucra-acct-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.aucra-acct-code {
  padding: 6px 8px;
  text-align: center;
}

/* ---- the bare pages: the forced setup and its codes (AA9) ---- */
.aucra-acct-bare-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
}
.aucra-acct-setup-help {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.aucra-acct-bare-acts {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- a disabled button reads disabled (AA16) ----
   Quasar fades a disabled button to 60%, which leaves the ink face of a
   primary one looking live. Its important sheet sits in a cascade layer, so
   this rule does too, as the ghost one in content_controls.css. */
@layer base {
  .q-btn.aucra-btn-primary.disabled,
  .q-btn.aucra-btn-primary[disabled] {
    background: var(--mist) !important;
    color: var(--placeholder) !important;
    border: 1px solid var(--line) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
  }
}