/* =========================================================================
   account.css — house skin for the Identity Account area.

   These pages are STATIC SSR (no interactivity → no App*Ant wrappers), so they
   keep the plain EditForm/Bootstrap idiom. Everything visual is pulled back to
   the house language HERE: nothing in Components/Account carries its own colour.

   Two scopes, one token set:
     .zg-account       — the Manage shell (follows the app theme, light + dark)
     .zg-ceremony-card — login/2FA/invite card, which is a deliberately FIXED
                         light "field" on the gold gradient (CeremonyLayout).
                         It carries .zg-account too and just pins the tokens.

   Loaded after app.css + theme-polish.css so it wins over both, and after
   bootstrap so the --bs-* remap below re-skins .form-control/.table/.list-group
   /kbd/.text-muted in one shot instead of rule-by-rule.
   ========================================================================= */

/* ---- token bridge ------------------------------------------------------- */
.zg-account {
    --zga-surface:       var(--zg-surface);
    --zga-surface-soft:  var(--zg-surface-soft);
    --zga-border:        var(--zg-border);
    --zga-border-strong: var(--zg-border-strong);
    --zga-fg:            var(--mud-palette-text-primary);
    --zga-muted:         var(--zg-muted);
    --zga-link:          var(--zg-text-link);
    --zga-accent:        var(--ziggis-espresso);
    --zga-on-accent:     var(--ziggis-cream);
    --zga-mix:           #000;   /* notice text mixes toward this — see .zg-note */

    /* Bootstrap 5.3 reads these for form-control / table / list-group / kbd /
       .text-muted / .text-danger. Bootstrap itself never flips (nothing stamps
       data-bs-theme), so the remap IS the dark-mode fix for those components. */
    --bs-body-color:            var(--zga-fg);
    --bs-body-bg:               var(--zga-surface);
    --bs-emphasis-color:        var(--zga-fg);
    --bs-emphasis-color-rgb:    var(--mud-palette-text-primary-rgb);
    --bs-secondary-color:       var(--zga-muted);
    --bs-border-color:          var(--zga-border);
    --bs-border-radius:         var(--zg-radius-sm);
    --bs-danger-rgb:            var(--mud-palette-error-rgb);
    --bs-link-color:            var(--zga-link);
    --bs-link-hover-color:      var(--zga-link);
    --bs-list-group-bg:         var(--zga-surface);
    --bs-list-group-color:      var(--zga-fg);
    --bs-list-group-border-color: var(--zga-border);

    color: var(--zga-fg);
    font-size: .9rem;
}

/* Dark: espresso can't be the action colour on an espresso page — tan is. */
:root[data-theme="dark"] .zg-account {
    --zga-accent:    var(--ziggis-tan);
    --zga-on-accent: var(--ziggis-espresso-dark);
    --zga-mix:       #fff;
}

/* The ceremony card never follows the app theme (cream card on the gold-swirl
   field), so pin the tokens to the palette CeremonyLayout already paints with. */
.zg-ceremony-card.zg-account,
:root[data-theme="dark"] .zg-ceremony-card.zg-account {
    --zga-surface:       #fffdf8;
    --zga-surface-soft:  #f7f1e4;
    --zga-border:        #e5d9c2;
    --zga-border-strong: #ddd0b8;
    --zga-fg:            #3d3325;
    --zga-muted:         #8a7d6a;
    --zga-link:          #8a6d3b;
    --zga-accent:        #5b4a33;
    --zga-on-accent:     #fff;
    --zga-mix:           #000;
    /* pins every rgba(--mud-palette-primary-rgb,…) tint/ring below to the card's own accent */
    --mud-palette-primary-rgb: 91, 74, 51;
    color-scheme: light;   /* native checkboxes/selects stay light on the cream card */
    font-size: inherit;
}

/* Left-justify the Manage pages. app.css gives .ziggis-content `max-width:1280px; margin:0 auto`, which
   centres it and opens a big gutter on wide monitors (210px a side at 2000px wide). Cancel only the auto
   margins — the 1280px reading cap stays. Same :has() opt-out idiom as dashboard.css / kiosk.css.
   Scoped to .zg-account-manage, NOT .zg-account: the login ceremony cards carry .zg-account too and should
   stay centred. */
.ziggis-content:has(.zg-account-manage) {
    margin-left: 0;
    margin-right: 0;
}

/* ---- Manage shell: compact nav rail + full-width content ---------------- */
.zg-account-manage {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    width: 100%;
    padding-bottom: 2rem;
}

@media (max-width: 767.98px) {
    .zg-account-manage { grid-template-columns: minmax(0, 1fr); }
}

.zg-acct-body { min-width: 0; }

.zg-acct-nav-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--zga-muted);
    padding: 0 .6rem .45rem;
}

.zg-acct-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zg-acct-navlink {
    display: block;
    padding: .38rem .6rem;
    border-left: 2px solid transparent;
    border-radius: var(--zg-radius-sm);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--zga-muted);
    text-decoration: none;
}

.zg-acct-navlink:hover {
    background: rgba(var(--mud-palette-primary-rgb), .06);
    color: var(--zga-fg);
    text-decoration: none;
}

.zg-acct-navlink.active {
    background: rgba(var(--mud-palette-primary-rgb), .12);
    border-left-color: var(--zga-accent);
    color: var(--zga-accent);
    font-weight: 600;
}

/* ---- headings ----------------------------------------------------------- */
.zg-acct-head { margin: 0 0 .85rem; }

.zg-acct-title {
    font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
    font-size: 1.1rem;          /* house page title — matches AppPage's Typo.h5 */
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    margin: 0;
}

.zg-acct-lede {
    margin: .3rem 0 0;
    font-size: .85rem;
    color: var(--zga-muted);
    max-width: 62ch;
}

/* ---- section card ------------------------------------------------------- */
.zg-acct-card {
    background: var(--zga-surface);
    border: 1px solid var(--zga-border);
    border-radius: var(--zg-radius);
    box-shadow: var(--zg-shadow-sm);
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}

.zg-acct-card--narrow { max-width: 34rem; }   /* forms stay readable in a 100w column */
.zg-acct-card--plain { background: none; border: 0; box-shadow: none; padding: 0; }
.zg-acct-card > :last-child { margin-bottom: 0; }

.zg-acct-card-title {
    font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
    font-size: .95rem;
    font-weight: 600;
    margin: 0 0 .7rem;
}

.zg-acct-sub {
    font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
    font-size: .85rem;
    font-weight: 600;
    margin: 1.25rem 0 .5rem;
}

.zg-acct-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: 1rem;
}

/* ---- notices (replaces .alert-*) ---------------------------------------- */
/* Mirrors the house .zg-alert geometry; the --zga-mix hop is what keeps the
   text legible on dark, which .zg-alert (light-only, mixes toward #000) isn't. */
.zg-note {
    --tone: var(--mud-palette-info);
    padding: .625rem .875rem;
    border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--tone) 11%, transparent);
    color: color-mix(in srgb, var(--tone) 78%, var(--zga-mix, #000));
    font-size: .875rem;
    margin-bottom: 1rem;
}

.zg-note--info    { --tone: var(--mud-palette-info); }
.zg-note--success { --tone: var(--mud-palette-success); }
.zg-note--warning { --tone: var(--mud-palette-warning); }
.zg-note--danger  { --tone: var(--mud-palette-error); }
.zg-note p { margin-bottom: .35rem; }
.zg-note > :last-child { margin-bottom: 0; }
.zg-note a { color: inherit; text-decoration: underline; }

/* ---- method chooser / option cards -------------------------------------- */
.zg-acct-choices {
    display: grid;
    gap: .5rem;
    margin-bottom: 1rem;
}

.zg-acct-choice {
    display: block;
    padding: .75rem .9rem;
    background: var(--zga-surface);
    border: 1px solid var(--zga-border);
    border-radius: var(--zg-radius);
    color: var(--zga-fg);
    text-decoration: none;
}

.zg-acct-choice:hover {
    background: rgba(var(--mud-palette-primary-rgb), .05);
    border-color: var(--zga-accent);
    color: var(--zga-fg);
    text-decoration: none;
}

.zg-acct-choice-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 600;
}

.zg-acct-choice-desc {
    margin: .15rem 0 0;
    font-size: .8rem;
    color: var(--zga-muted);
}

.zg-acct-tag {
    padding: .1rem .4rem;
    border-radius: 999px;
    background: rgba(var(--mud-palette-primary-rgb), .16);
    color: var(--zga-accent);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.zg-acct-tag--on {
    background: rgba(var(--mud-palette-success-rgb), .16);
    color: var(--mud-palette-success);
}

/* ---- 2FA method summary (Primary / Backup) ------------------------------ */
.zg-acct-methods {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem .75rem;
    margin: 0 0 1rem;
    font-size: .875rem;
}

.zg-acct-methods dt { font-weight: 600; }
.zg-acct-methods dd { margin: 0; color: var(--zga-muted); }

/* ---- authenticator: QR + shared key ------------------------------------- */
.zg-acct-qr {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: .5rem;
}

.zg-acct-qr img {
    /* the plate must stay white or the code stops scanning on a dark card */
    background: #fff;
    padding: .5rem;
    border: 1px solid var(--zga-border);
    border-radius: var(--zg-radius);
}

.zg-acct-keyline {
    flex: 1 1 14rem;
    min-width: 0;
    font-size: .85rem;
    color: var(--zga-muted);
}

.zg-account kbd,
.zg-acct-code {
    display: inline-block;
    padding: .22rem .45rem;
    background: var(--zga-surface-soft);
    border: 1px solid var(--zga-border-strong);
    border-radius: var(--zg-radius-sm);
    color: var(--zga-fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    letter-spacing: .06em;
    word-break: break-all;
}

.zg-acct-steps { margin: 0; padding-left: 1.25rem; }
.zg-acct-steps > li { margin-bottom: 1rem; }
.zg-acct-steps > li::marker { color: var(--zga-muted); font-weight: 600; }

/* ---- recovery codes ----------------------------------------------------- */
.zg-acct-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .4rem;
}

.zg-acct-codes .zg-acct-code { text-align: center; }

/* ---- forms -------------------------------------------------------------- */
.zg-account .form-control {
    background: var(--zga-surface);
    border-color: var(--zga-border-strong);
    border-radius: var(--zg-radius-sm);
    color: var(--zga-fg);
    font-size: .875rem;
}

.zg-account .form-control:disabled {
    background: var(--zga-surface-soft);
    color: var(--zga-muted);
}

.zg-account .form-control:focus {
    border-color: var(--zga-accent);
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), .18);
}

.zg-account .form-floating > label,
.zg-account .form-label {
    color: var(--zga-muted);
    font-size: .875rem;
}

.zg-account .form-check-label { font-size: .875rem; }
.zg-account .form-check { padding-left: 1.6em; }

/* checkbox nested INSIDE its label (the 2FA "remember this machine" idiom) */
.zg-acct-check { text-align: left; }
.zg-acct-check label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--zga-fg);
    font-size: .875rem;
}
.zg-acct-check input[type=checkbox] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--zga-accent);
}

.zg-account .form-check-input {
    border-color: var(--zga-border-strong);
    background-color: var(--zga-surface);
}

.zg-account .form-check-input:checked {
    background-color: var(--zga-accent);
    border-color: var(--zga-accent);
}

.zg-account .form-check-input:focus {
    border-color: var(--zga-accent);
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), .18);
}

/* Blazor's field states: a hard 1px outline is the template tell — use the border. */
.zg-account .invalid,
.zg-account .valid.modified:not([type=checkbox]) { outline: none; }
.zg-account .invalid { border-color: var(--mud-palette-error); }
.zg-account .valid.modified:not([type=checkbox]) { border-color: var(--mud-palette-success); }

.zg-account .validation-message,
.zg-account .text-danger {
    color: var(--mud-palette-error) !important;
    font-size: .8rem;
}

.zg-account .validation-errors { padding-left: 1.1rem; margin-bottom: .75rem; }

/* ---- buttons ------------------------------------------------------------ */
.zg-account .btn {
    border-radius: var(--zg-radius-sm);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    padding: .5rem .95rem;
}

.zg-account .btn-lg { font-size: .875rem; padding: .6rem 1.1rem; }

.zg-account .btn-primary,
.zg-account .btn-primary:active {
    background-color: var(--zga-accent);
    border-color: var(--zga-accent);
    color: var(--zga-on-accent);
}

.zg-account .btn-primary:hover {
    background-color: color-mix(in srgb, var(--zga-accent) 85%, var(--zga-mix));
    border-color: color-mix(in srgb, var(--zga-accent) 85%, var(--zga-mix));
    color: var(--zga-on-accent);
}

/* Destructive actions read better outlined than as a red slab, in both themes. */
.zg-account .btn-danger,
.zg-account .btn-danger:active {
    background-color: transparent;
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

.zg-account .btn-danger:hover {
    background-color: var(--mud-palette-error);
    border-color: var(--mud-palette-error);
    color: #fff;
}

.zg-account .btn-outline-dark,
.zg-account .btn-outline-secondary {
    background-color: transparent;
    border-color: var(--zga-border-strong);
    color: var(--zga-fg);
}

.zg-account .btn-outline-dark:hover,
.zg-account .btn-outline-secondary:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), .08);
    border-color: var(--zga-accent);
    color: var(--zga-fg);
}

.zg-account .btn-link {
    padding-left: 0;
    padding-right: 0;
    color: var(--zga-link);
    text-decoration: none;
}

.zg-account .btn-link:hover { color: var(--zga-link); text-decoration: underline; }

/* app.css rings every .btn in cream+tan, which disappears on the dark page. */
.zg-account .btn:focus,
.zg-account .btn:active:focus,
.zg-account .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), .30);
}

/* ---- links, text, tables ------------------------------------------------ */
.zg-account a {
    color: var(--zga-link);
    text-decoration: none;
    text-underline-offset: 3px;
}

.zg-account a:hover { text-decoration: underline; }
.zg-account p { margin-bottom: .6rem; }
.zg-account hr { border-color: var(--zga-border); opacity: 1; margin: 1.1rem 0; }
.zg-account .text-muted { color: var(--zga-muted) !important; }

.zg-account .table {
    --bs-table-color: var(--zga-fg);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--zga-border);
    font-size: .85rem;
    margin-bottom: 0;
}

.zg-account .table > thead th {
    color: var(--zga-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom-color: var(--zga-border-strong);
}

.zg-account .table > tbody td { vertical-align: middle; }

/* ---- ceremony-only tweaks ----------------------------------------------- */
/* The card's own <style> (CeremonyLayout, in-body so it wins ties) owns buttons,
   inputs and links there; these only fill the gaps it doesn't cover. */
.zg-ceremony-card .zg-acct-head { text-align: center; }
.zg-ceremony-card .zg-acct-lede { margin-left: auto; margin-right: auto; }
.zg-ceremony-card .zg-note { text-align: left; }
.zg-ceremony-card .form-check { text-align: left; }
.zg-ceremony-card .zg-acct-card { text-align: left; }
/* 2123: sign-up choices (ExternalLogin) - two tappable cards; the open one holds its form. */
.zg-signup-choices { text-align: left; margin-top: 1rem; }
.zg-signup-choices .zg-accordion-panel {
    border: 1px solid var(--zga-border-strong); border-radius: 12px; background: var(--zga-surface);
}
.zg-signup-choices .zg-accordion-panel[open] {
    border-color: var(--zga-accent); box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), .12);
}
.zg-signup-choices .zg-accordion-summary { padding: 12px 16px; min-height: 56px; color: var(--zga-fg); border-radius: 12px; }
.zg-signup-choices .zg-accordion-summary:hover { color: var(--zga-fg); background: var(--zga-surface-soft); }
.zg-signup-choices .zg-accordion-panel[open] > .zg-accordion-summary { border-radius: 12px 12px 0 0; }
.zg-signup-choices .zg-accordion-chevron { color: var(--zga-muted); }
.zg-signup-choice-title { display: block; font-size: 1rem; font-weight: 600; }
.zg-signup-choice-hint { display: block; margin-top: 2px; font-size: .82rem; font-weight: 400; color: var(--zga-muted); }
.zg-signup-choices .zg-accordion-body { padding: 6px 16px 16px; }
.zg-signup-choices .zg-ceremony-divider { margin: 10px 0; }
.zg-signup-name-row { display: flex; gap: 8px; }
.zg-signup-name-row > .form-floating { flex: 1 1 0; min-width: 0; }

/* ---- 2FA setup steps (items 2181/2183) ----------------------------------- */
.zg-acct-setup { max-width: 25rem; }
.zg-acct-stepno {
    margin-bottom: .3rem;
    color: var(--zga-link);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.zg-acct-choices--pair { grid-template-columns: 1fr 1fr; margin-bottom: .5rem; }
.zg-acct-choices--pair .zg-acct-choice { margin: 0; }
.zg-acct-setup > .zg-acct-choice { margin-bottom: 1rem; }
.zg-acct-choice-hint {
    margin-top: .3rem;
    font-size: .75rem;
    color: color-mix(in srgb, var(--mud-palette-warning) 70%, var(--zga-mix));
}
.zg-acct-choice--dim { background: var(--zga-surface-soft); }
.zg-acct-choice--off { opacity: .6; }
div.zg-acct-choice:hover { background: var(--zga-surface); border-color: var(--zga-border); }
div.zg-acct-choice--dim:hover { background: var(--zga-surface-soft); }
.zg-acct-ic { flex: none; color: var(--zga-accent); }

/* ---- recovery-code sheet ------------------------------------------------- */
.zg-acct-codes--pair {
    grid-template-columns: 1fr 1fr;
    gap: .35rem 1.1rem;
    padding: .85rem 1.1rem;
    margin-bottom: .6rem;
    background: var(--zga-surface);
    border: 1px solid var(--zga-border);
    border-radius: var(--zg-radius);
}
.zg-acct-codes--pair .zg-acct-code {
    padding: 0;
    background: none;
    border: 0;
    font-size: .95rem;
    text-align: left;
}
.zg-acct-codes-tools { display: flex; gap: .5rem; margin-bottom: .9rem; }
.zg-acct-codes-tools .btn { flex: 1; }
.zg-acct-saved { margin-bottom: .9rem; }
.zg-acct-saved label { align-items: flex-start; }
.zg-acct-saved input[type=checkbox] { margin-top: .2rem; }
.zg-acct-saved small { display: block; color: var(--zga-muted); font-size: .78rem; }
/* no JS needed: Finish reads as disabled until the tick (the server still refuses an unticked post) */
.zg-acct-finish:has(#rc-saved:not(:checked)) .zg-acct-finish-btn { opacity: .42; pointer-events: none; }

@media print {
    html.zg-print-codes body * { visibility: hidden; }
    html.zg-print-codes [data-rc-sheet],
    html.zg-print-codes [data-rc-sheet] * { visibility: visible; }
    html.zg-print-codes [data-rc-sheet] { position: absolute; top: 0; left: 0; width: 100%; }
}

/* ---- 2FA sign-in lanes (item 2184) --------------------------------------- */
.zg-acct-lanes { display: grid; gap: .5rem; margin: 0 0 .75rem; }
.zg-acct-lane {
    display: flex;
    gap: .75rem;
    align-items: center;
    width: 100%;
    padding: .7rem .8rem;
    background: var(--zga-surface);
    border: 1px solid var(--zga-border-strong);
    border-radius: 10px;
    color: var(--zga-fg);
    font: inherit;
    text-align: left;
    text-decoration: none;
}
.zg-account .zg-acct-lane { color: var(--zga-fg); }
.zg-account .zg-acct-lane:hover { border-color: var(--zga-accent); color: var(--zga-fg); text-decoration: none; }
.zg-acct-lane-ic {
    flex: 0 0 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--mud-palette-primary-rgb), .09);
}
.zg-acct-lane-tx strong { display: block; font-size: .9rem; }
.zg-acct-lane-tx span { color: var(--zga-muted); font-size: .8rem; }
.zg-acct-lane-go { margin-left: auto; color: var(--zga-link); font-size: 1.1rem; }
.zg-acct-lanes-form { margin: 0; }