/* AndroAccess on the Andro design kit 2.0.0-rc.5. App only layout glue: unlayered, so it wins over the kit
   without specificity fights. Tokens only (no hex, no px type), same rules as the kit (CONVENTIONS.md).
   Prefix aa- so nothing here can be mistaken for a kit class. Anything a second app would need belongs in the kit. */

/* Shells */
.aa-auth-page { display: flex; flex-direction: column; min-height: 100dvh; }
.aa-auth-page > .a-auth__wrap { flex: 1 0 auto; min-height: 0; }
.aa-main { flex: 1 0 auto; }
.aa-flashes { display: grid; gap: var(--andro-space-2); margin: 0 0 var(--andro-space-5); }
.a-auth__card .aa-flashes, .a-auth__card > .a-alert { margin-bottom: var(--andro-space-4); }
.aa-console-exit { white-space: nowrap; }
@media (max-width: 599px) { .aa-console-exit span { display: none; } }

/* Layout helpers used instead of inline style attributes (the CSP may drop 'unsafe-inline' for styles later) */
.aa-stack { display: grid; gap: var(--andro-space-4); }
.aa-stack--sm { gap: var(--andro-space-2); }
.aa-stack--lg { gap: var(--andro-space-6); }
.aa-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--andro-space-2); }
.aa-row--end { justify-content: flex-end; }
.aa-row--between { justify-content: space-between; }
.aa-row--top { align-items: flex-start; }
.aa-grow { flex: 1 1 14rem; min-width: 0; }
.aa-grid-2 { display: grid; gap: var(--andro-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .aa-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aa-inline { display: inline; margin: 0; }
.aa-inline-flex { display: inline-flex; gap: var(--andro-space-2); align-items: center; margin: 0; }
.aa-muted { color: var(--andro-on-surface-variant); }
.aa-small { font: var(--andro-type-body-sm); }
.aa-mono { font-family: var(--andro-font-mono); overflow-wrap: anywhere; }
.aa-nowrap { white-space: nowrap; }
.aa-mt { margin-top: var(--andro-space-4); }
.aa-mb { margin-bottom: var(--andro-space-4); }
.aa-m0 { margin: 0; }
.aa-section { margin: 0 0 var(--andro-space-6); }


/* == Hosted sign in screens (base.html children) == */
.aa-qr { display: flex; justify-content: center; margin: 0 0 var(--andro-space-4); }
.aa-qr img { padding: var(--andro-space-2); border: var(--andro-border-width) solid var(--andro-outline-variant); border-radius: var(--andro-radius-button);
  background: var(--andro-white); }
.aa-cover { object-fit: cover; }
.aa-photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--andro-space-4); margin-top: var(--andro-space-3); }
.aa-photo-row > .a-field { flex: 1 1 14rem; min-width: 0; margin: 0; }
.aa-photo { flex: none; width: var(--andro-space-9); height: var(--andro-space-9); border-radius: var(--andro-radius-card); object-fit: cover;
  border: var(--andro-border-width) solid var(--andro-outline-variant); background: var(--andro-surface-2); }
.aa-file { padding-top: var(--andro-space-2); }
.a-auth__card .a-fieldset { margin: 0; }
.a-auth__card .a-fieldset > legend { font: var(--andro-type-title-sm); margin-bottom: var(--andro-space-2); }
.aa-auth-h2 { margin: var(--andro-space-6) 0 var(--andro-space-2); font: var(--andro-type-title-sm); }
.aa-settings dd { display: flex; align-items: center; gap: var(--andro-space-2); justify-content: space-between; min-width: 0; }
.aa-settings dd .aa-mono { min-width: 0; }
.a-auth__card .a-reveal { margin: 0; }

.aa-auth-subtext { margin: 0 0 var(--andro-space-4); font: var(--andro-type-body-sm); color: var(--andro-on-surface-variant); }
.a-auth__divider + .aa-auth-h2, .a-auth__text + .aa-auth-h2 { margin-top: 0; }
.aa-auth-h2 + .aa-auth-subtext { margin-top: 0; }
.aa-auth-rule { margin: var(--andro-space-6) 0 0; border: 0; border-top: var(--andro-border-width) solid var(--andro-outline-variant); }
.aa-auth-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--andro-space-2); margin: 0; }
.a-auth__result + .a-auth__account, .a-auth__result + .aa-auth-actions, .a-auth__result + form.aa-auth-actions { margin-top: var(--andro-space-2); }
/* Balanced headings: no one word orphan lines ("cannot / use") */
.a-auth__title, .a-auth__text { text-wrap: balance; }
/* Short sign in forms mark nothing as required; the few optional fields say Optional (kit marks required with *) */
.a-auth--hosted .a-field__req { display: none; }
/* Long secrets and keys wrap inside the card instead of widening the page at 390 */
.a-auth__card .a-codeblock { min-width: 0; max-width: 100%; }
.a-auth__card .a-codeblock pre { white-space: pre-wrap; word-break: break-all; }
.a-auth__card code.a-code { white-space: nowrap; }
/* Welcome: each fieldset is a section, with a rule and room above */
.a-auth__card .a-fieldset + .a-fieldset { padding-top: var(--andro-space-5); border-top: var(--andro-border-width) solid var(--andro-outline-variant); }
.a-auth__card .a-fieldset > legend { float: left; width: 100%; padding: 0; font: var(--andro-type-title-md); margin-bottom: var(--andro-space-3); }
.a-auth__card .a-fieldset > legend + * { clear: both; }
/* Approval: once signed in place, the other ways to approve go away */
[data-approved] [data-approve-fallback] { display: none; }

/* == Member ID card and verify page == */
.aa-card-notes { display: grid; gap: var(--andro-space-5); max-width: calc(var(--andro-layout-list-pane) + var(--andro-space-8)); margin: var(--andro-space-6) auto 0; }
.aa-card-notes > p { margin: 0; text-align: center; overflow-wrap: anywhere; }
/* Verdicts as outlines: the kit's dark containers are a saturated red block and a heavy green one. */
.a-verify__verdict--invalid { background: var(--andro-surface-1); color: var(--andro-error); box-shadow: inset 0 0 0 var(--andro-border-width) var(--andro-error); }
.a-verify__verdict--valid { background: var(--andro-surface-1); color: var(--andro-success); box-shadow: inset 0 0 0 var(--andro-border-width) var(--andro-success); }
.a-member-card__photo.a-avatar { font: var(--andro-type-headline-lg); }

@media print {
  body:has(.a-member-card) .a-header, body:has(.a-member-card) .a-skip, .aa-noprint { display: none; }
  body:has(.a-member-card) { background: var(--andro-white); }
}

/* == Admin console == */
.a-console__main > * + * { margin-top: var(--andro-space-5); }
.a-console__main > .aa-flashes + * , .a-console__main > .aa-crumb + .a-console__head { margin-top: 0; }
.aa-crumb { margin: 0 0 var(--andro-space-2); font: var(--andro-type-body-sm); }
.aa-crumb .a-link { display: inline-flex; align-items: center; gap: var(--andro-space-1); }
.aa-panel { overflow: clip; }
.aa-panel > .a-card__body { color: var(--andro-on-surface); font: var(--andro-type-body-md); }
.aa-panel .a-table-wrap { margin-inline: calc(var(--andro-card-padding) * -1); width: auto; max-width: none; border-left: 0; border-right: 0; border-radius: 0; }
.aa-panel .a-card__body > .a-table-wrap:last-child { margin-bottom: calc(var(--andro-card-padding) * -1); border-bottom: 0; }
.aa-cell-main { display: block; font-weight: var(--andro-font-weight-semibold); overflow-wrap: anywhere; }
.aa-cell-sub { display: block; font: var(--andro-type-body-sm); font-weight: normal; color: var(--andro-on-surface-variant); overflow-wrap: anywhere; }
.aa-subrow > td { padding-top: 0; }
.aa-row--bottom { align-items: flex-end; }
.aa-row--nowrap { flex-wrap: nowrap; }
.aa-break { overflow-wrap: anywhere; word-break: break-all; }
.aa-tags { display: inline-flex; flex-wrap: wrap; gap: var(--andro-space-1); }
.aa-stats { display: grid; gap: var(--andro-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.aa-branding { display: flex; flex-wrap: wrap; gap: var(--andro-space-5); align-items: flex-start; }
.aa-org-logo { width: auto; max-width: 12.5rem; height: auto; max-height: var(--andro-space-8); padding: var(--andro-space-3); object-fit: contain;
  border: var(--andro-border-width) solid var(--andro-outline-variant); border-radius: var(--andro-radius-button); background: var(--andro-surface-0); }
.aa-file { padding-block: var(--andro-space-2); }
.aa-group { padding: var(--andro-space-4); border: var(--andro-border-width) solid var(--andro-outline-variant); border-radius: var(--andro-radius-button); background: var(--andro-surface-0); display: grid; gap: var(--andro-space-3); }
.aa-group__title { margin: 0; font: var(--andro-type-title-sm); }
.aa-chips { display: flex; flex-wrap: wrap; gap: var(--andro-space-2); margin: 0; padding: 0; list-style: none; }
.aa-chip-kind { color: var(--andro-on-surface-variant); font: var(--andro-type-label-sm); }
.aa-scopes { gap: var(--andro-space-2) var(--andro-space-4); }
.aa-mt-sm { margin-top: var(--andro-space-2); }
.aa-panel-danger { margin-top: var(--andro-space-5); }
.aa-danger-row .a-field__label { color: var(--andro-error); }
.a-table__actions .aa-row { flex-wrap: nowrap; }
@media (max-width: 599px) {
  .aa-row--bottom > .a-btn, .aa-row--bottom > .aa-inline { flex: 1 1 100%; }
  .aa-row--nowrap { flex-wrap: wrap; }
  .a-table__actions .aa-row--end { justify-content: flex-start; }
}

/* Round 2 (visual review). */
/* The sidebar is sticky at viewport height, so on long pages its column ends; paint the column itself. */
@media (min-width: 840px) {
  .a-console { --_nav-w: calc(var(--andro-nav-rail-expanded-width) - var(--andro-space-7));
    background: linear-gradient(to right, var(--andro-nav-container) 0 calc(var(--_nav-w) - var(--andro-border-width)),
      var(--andro-outline-variant) calc(var(--_nav-w) - var(--andro-border-width)) var(--_nav-w), transparent var(--_nav-w)); }
}
/* Title, then what it is, then actions (the kit puts the meta line after wrapped actions on phones). */
@media (max-width: 599px) {
  .a-console__head > .a-console__meta { order: 1; margin-top: 0; }
  .a-console__head > .aa-row { order: 2; }
}
/* Stacked rows on phones: every value in the value column, labels top aligned, a narrower label column. */
@media (max-width: 599px) {
  .a-console__main .a-table--stack tbody :is(th, td)[data-label] { grid-template-columns: minmax(5.5rem, 30%) minmax(0, 1fr); align-items: baseline; }
  .a-console__main .a-table--stack tbody :is(th, td)[data-label] > * { grid-column: 2; }
}
.a-console__main .aa-cell-main { overflow-wrap: break-word; }
.a-console__main .a-table:not(.a-table--stack) .aa-cell-main + :is(.a-tag, .a-status),
.a-console__main .aa-cell-main + :is(.a-tag, .a-status) { margin-top: var(--andro-space-1); }
/* Rows holding a select get room for it (the compact row is shorter than a field). */
.a-console__main .a-table:not(.a-table--stack) :is(td, th):has(.a-select), .a-console__main .a-table :is(td, th):has(.a-select) { padding-block: var(--andro-space-2); }
/* Status pills hug their words; tags too. */
.a-console__main .a-table :is(td, th) > :is(.a-status, .a-tag), .a-console__main .a-table .aa-stack > .a-status { width: fit-content; max-width: 100%; }
.a-console__main .a-table .aa-stack { justify-items: start; }
/* Row actions start at the same edge on every row (rows without one of the buttons no longer ragged). */
.a-console__main .a-table__actions .aa-row--end { justify-content: flex-start; }
/* Text buttons that start a line sit on the text edge, not one padding in. */
.aa-flush { margin-inline-start: calc(var(--andro-space-3) * -1); }
@media (max-width: 599px) {
  .a-table--stack tbody td.a-table__actions .aa-row > .aa-inline:first-child > .a-btn:is(.a-btn--tertiary, .a-btn--danger-text),
  .a-table--stack tbody td.a-table__actions .aa-row > .a-btn:first-child:is(.a-btn--tertiary, .a-btn--danger-text) { margin-inline-start: calc(var(--andro-space-3) * -1); }
}
/* Field plus button rows: the button lines up with the input, a helper line sits under both. */
/* Field plus button rows: the button lines up with the input even when the field has a helper line under it. */
@media (min-width: 600px) {
  .a-console__main .aa-row--bottom:has(> .a-field > .a-field__label:not(.a-sr-only)) { align-items: flex-start; }
  .a-console__main .aa-row--bottom:has(> .a-field > .a-field__label:not(.a-sr-only)) > .a-btn,
  .a-console__main .aa-row--bottom:has(> .a-field > .a-field__label:not(.a-sr-only)) > .aa-inline > .a-btn {
    margin-top: calc(var(--andro-type-label-md-size) * var(--andro-type-label-md-line-height) + var(--andro-space-2)); }
}
.aa-row-help { margin: calc(var(--andro-space-2) * -1) 0 0; font: var(--andro-type-body-sm); color: var(--andro-on-surface-variant); }
/* Long one line commands wrap, so the copy button never sits on top of text. */
.a-console__main .a-codeblock > pre { white-space: pre-wrap; word-break: break-all; }
/* Checkbox sets (scopes, events) in even columns. */
.a-console__main .a-checks.aa-scopes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--andro-space-2) var(--andro-space-4); }
/* Lists in panels wrap instead of cutting words off. */
.a-console__main .a-list__title, .a-console__main .a-list__sub { white-space: normal; }
.aa-note { margin: 0 0 var(--andro-space-4); color: var(--andro-on-surface-variant); }
.a-console__main .a-card__body .a-disclosure > summary { padding-inline: 0; }
@media (max-width: 599px) {
  .a-console__main .a-setting__control > :is(.a-btn--danger-text, .a-btn--tertiary):first-child,
  .a-console__main .a-setting__control > .aa-inline:first-child > :is(.a-btn--danger-text, .a-btn--tertiary),
  .a-console__main .a-card__subtitle > .aa-inline > .a-btn--tertiary,
  .a-console__main .aa-row--bottom > .a-btn--danger-text { margin-inline-start: calc(var(--andro-space-3) * -1); }
}
.aa-reveal { display: grid; gap: var(--andro-space-3); }

/* == Account and signed in pages == */
.a-settings__content > .a-settings-group, .a-settings__content > .aa-anchor { scroll-margin-top: calc(var(--andro-layout-top-bar) + var(--andro-space-4)); }
.aa-row--bottom { align-items: flex-end; }
.aa-mt-sm { margin-top: var(--andro-space-2); }
.aa-avatar-xl { --_size: 5rem; border-radius: var(--andro-radius-card); }
.aa-avatar-xl img { border-radius: inherit; object-fit: cover; }
.aa-file { font: var(--andro-type-body-sm); color: var(--andro-on-surface-variant); max-width: 100%; }
.aa-file::file-selector-button { margin-right: var(--andro-space-3); padding: var(--andro-space-2) var(--andro-space-4); border: var(--andro-border-width) solid var(--andro-outline);
  border-radius: var(--andro-radius-button); background: var(--andro-surface-1); color: var(--andro-on-surface); font: var(--andro-type-label-lg); cursor: pointer; }
.aa-pk-foot .a-passkey-status { margin-right: auto; flex: 1 1 14rem; }
.aa-table-flush { margin: var(--andro-space-2) 0 0; border: 0; border-top: var(--andro-border-width) solid var(--andro-outline-variant); border-radius: 0; }
.a-settings-group__head.aa-row { padding-right: var(--andro-space-5); }
.a-settings-group > form > .a-setting:first-of-type { border-top: var(--andro-border-width) solid var(--andro-outline-variant); }
.aa-codeblock-list { display: grid; gap: var(--andro-space-2); }
.aa-color { width: var(--andro-space-9); height: var(--andro-space-7); padding: var(--andro-space-1); border: var(--andro-border-width) solid var(--andro-outline);
  border-radius: var(--andro-radius-field); background: var(--andro-surface-1); }
.aa-org-logo { width: var(--andro-space-8); height: var(--andro-space-8); border-radius: var(--andro-radius-control); object-fit: cover;
  border: var(--andro-border-width) solid var(--andro-outline-variant); background: var(--andro-surface-1); flex: none; }
.aa-avatar-xl:not(:has(img)) { font: var(--andro-type-headline-lg); }
.aa-org-logo--initials { display: inline-grid; place-items: center; font: var(--andro-type-title-lg); }
.aa-cell-two { display: inline-grid; gap: var(--andro-space-1); min-width: 0; overflow-wrap: anywhere; }
.aa-copy-inline { width: 100%; min-width: 0; }
@media (min-width: 600px) { .aa-copy-inline { min-width: 14rem; } }
.aa-copy-inline .a-input { font: var(--andro-type-body-sm); font-family: var(--andro-font-mono); text-overflow: ellipsis; }
/* JetBrains Mono ligatures turn "-<" and "->" into arrows inside identifiers; code shows what you type. */
code, kbd, samp, pre, .a-code, .aa-mono, .a-input--mono, .a-textarea--mono { font-variant-ligatures: none; }
/* The code block's copy button sits over the end of a long line (kit issue); keep text clear of it. */
.a-codeblock pre { padding-right: calc(var(--andro-space-7) + var(--andro-space-2)); }
.a-setting .a-disclosure > summary { margin-inline-start: calc(var(--andro-space-2) * -1); }
/* Rows with a leading icon: when the control wraps under the text on phones, keep it in the text column. */
@media (max-width: 599px) {
  .a-setting:has(> .a-list__lead) > .a-setting__control { margin-left: calc(var(--andro-icon-default) + var(--andro-space-5)); }
  /* A text button that wraps to its own line sits flush with the text above it, not indented by its padding. */
  .a-setting__control > form:first-child > .a-btn--danger-text:first-of-type,
  .a-setting__control > .a-btn--danger-text:first-child { margin-left: calc(var(--andro-space-3) * -1); }
  .aa-pk-foot > .a-btn, .aa-pk-foot > form > .a-btn { flex: 1 1 100%; }
  .a-table--stack .a-table__actions form:first-child > .a-btn--danger-text:first-of-type { margin-left: calc(var(--andro-space-3) * -1); }
}

/* == Landing page == */
/* The product page has its own stylesheet, static/landing.css, loaded by landing.html only. */

/* == Error pages (interim, until the CSP safe Crew pages land) == */
.aa-error-page { display: flex; flex-direction: column; min-height: 100dvh; }
.aa-error { flex: 1 0 auto; display: grid; justify-items: center; align-content: center; gap: var(--andro-space-3);
  padding: var(--andro-space-8) var(--andro-layout-margin-compact); text-align: center; }
.aa-error__crew { width: calc(var(--andro-space-9) * 2); height: auto; aspect-ratio: 1; border-radius: var(--andro-radius-xl); margin-bottom: var(--andro-space-3); }
.aa-error__code { margin: 0; padding: var(--andro-space-1) var(--andro-space-3); border-radius: var(--andro-radius-full);
  background: var(--andro-primary-container); color: var(--andro-on-primary-container); font: var(--andro-type-label-lg); }
.aa-error__title { margin: 0; font: var(--andro-type-display-sm); letter-spacing: var(--andro-type-display-sm-tracking, normal); }
.aa-error__lead { margin: 0; font: var(--andro-type-body-lg); max-width: 34rem; }
.aa-error__help { margin: 0; color: var(--andro-on-surface-variant); max-width: 34rem; }
.aa-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--andro-space-3); margin-top: var(--andro-space-4); }

.a-prose--legal .meta { color: var(--andro-on-surface-variant); font: var(--andro-type-body-sm); margin-bottom: var(--andro-space-6); }

/* == aa-tenant: organization console and org signup == */
.aa-steps { margin: 0; padding-left: var(--andro-space-5); display: grid; gap: var(--andro-space-2); }
.aa-steps > li.is-done > .a-icon { color: var(--andro-success); margin-right: var(--andro-space-1); vertical-align: -0.15em; }
.aa-org-logo--lg { width: 5.5rem; height: 5.5rem; max-height: none; padding: 0; border-radius: var(--andro-radius-lg); object-fit: contain; }
.aa-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* == aa-risk: number matching and sign in protection == */
.aa-match { display: grid; justify-items: center; gap: var(--andro-space-2); margin: var(--andro-space-4) 0; }
.aa-match__number { margin: 0; padding: var(--andro-space-3) var(--andro-space-6); border-radius: var(--andro-radius-lg);
  background: var(--andro-primary-container); color: var(--andro-on-primary-container);
  font: var(--andro-type-display-md); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.aa-match__status { margin: 0; color: var(--andro-on-surface-variant); font: var(--andro-type-body-sm); }
/* == aa-governance: access reviews == */
.aa-cell-two > .a-status { justify-self: start; }