/* =============================================================
   add-account.css  ·  faces/add-account/mobile/ui/  ·  standalone
   Overlay face — same canvas geometry (10/80/10) as home, with its
   own header layout and the × close button on the rlogo header chip.
   Step chips are blank placeholders for now (future design).
   Depends on: shared/tokens.css, shared/canvas.css, shared/components/chips.css.
   ============================================================= */

/* ---------- overlay container ---------- */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
}
.overlay[hidden] {
    display: none;
}

/* ---------- header (10%) ---------- */
.overlay-header {
    display: grid;
    place-items: center;
    padding: 0 16px;
}

.overlay-title {
    font-size: 14px;
    color: var(--on-brand);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}

/* the × close circle — matches .chip-avatar sizing exactly so it sits in
   the same 10%-of-chip-width square the rlogo right column reserves.
   Sizing (width 50% + aspect-ratio 1) is identical to chip-avatar; the
   icon inside is 50% of this circle via the global .icon rule. */
.chip-close {
    width: 50%;
    aspect-ratio: 1;
    justify-self: center;
    align-self: center;
    margin: auto;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--brand-active);
    color: var(--brand-active);
    display: grid;
    place-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: 0;
    line-height: 1;
}
.chip-close:active {
    transform: scale(0.94);
}

/* ---------- subheader (7% of main) — empty placeholder ---------- */
.overlay-subheader {
    background: var(--header-bg);
    border-bottom: 1px solid var(--brand-active);
}

/* ---------- main band layout: header chip + scrolling list ---------- */
.add-account-content {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    height: 100%;
}

.overlay-content-header {
    padding: 12px 2.5% 8px 2.5%;
}