/* THE ACCOUNT SCREENS, IN ARCHEX'S OWN CLOTHES.

   Adam Deane, 29 September 2026, looking at the authenticator page: "this screen looks shit and is
   shouldnt show the app on the side, the need fixing before sending to anyone or going live."

   These pages are Microsoft's Identity scaffolding. They arrived wrapped in the full application
   shell - navigation rail and all - and marked up with Bootstrap classes (row, col-lg-3, nav-pills,
   form-control, btn btn-primary) that ArchEx has never styled. The result was a bulleted list of
   links, a bare input and a grey button, inside a product that looks nothing like that.

   NOT SCOPED, AND THAT IS THE POINT. A .razor.css file is scoped to the component it sits beside
   and cannot reach @Body, so styling the layout would leave every page inside it untouched. This
   is a plain stylesheet so one file dresses all seventeen Identity pages without editing any of
   them - and without touching anything outside .ax-account. */

.ax-account {
    min-height: 100vh;
    background: var(--color-canvas, #f6f5f1);
    padding: 28px 20px 56px;
}

.ax-account-shell {
    max-width: 960px;
    margin: 0 auto;
}

/* ---- the header, standing in for the app chrome this page deliberately does not have ---- */
.ax-account-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.ax-account-head img { height: 34px; }

.ax-account-head h1 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
}

.ax-account-head .ax-account-back { margin-left: auto; }

/* ---- the two columns ---- */
.ax-account-body {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 22px;
    align-items: start;
}

@media (max-width: 720px) {
    .ax-account-body { grid-template-columns: 1fr; }
}

.ax-account-nav {
    display: grid;
    gap: 2px;
    padding: 8px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-divider, #e2e0da);
    border-radius: 12px;
}

/* A list row, not a button that shouts. aria-current marks the page, never a .active class. */
.ax-account-nav a {
    display: block;
    padding: 8px 11px;
    border-radius: 8px;
    font-size: .88rem;
    text-decoration: none;
    color: var(--color-ink, #1d1d1d);
}

.ax-account-nav a:hover { background: var(--color-hairline, #eceeed); }

.ax-account-nav a[aria-current="page"] {
    background: var(--archex-accent, #F18F3C);
    color: #fff;
    font-weight: 600;
}

.ax-account-panel {
    padding: 22px 24px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-divider, #e2e0da);
    border-radius: 12px;
}

/* ---- dressing the scaffolding ------------------------------------------------------------
   Everything below maps Bootstrap's class names onto ArchEx's look, scoped inside .ax-account so
   it cannot reach any other page. Cheaper and far safer than rewriting seventeen Microsoft pages,
   and it keeps working when they are regenerated. */

.ax-account-panel h2,
.ax-account-panel h3 {
    margin: 0 0 14px;
    font-size: 1.05rem;
}

.ax-account-panel h4 { font-size: .95rem; margin: 18px 0 8px; }

.ax-account-panel p { line-height: 1.55; }

.ax-account-panel ol,
.ax-account-panel ul { line-height: 1.6; padding-left: 20px; }

.ax-account-panel li { margin-bottom: 10px; }

.ax-account-panel hr {
    border: 0;
    border-top: 1px solid var(--color-divider, #e2e0da);
    margin: 18px 0;
}

.ax-account .form-control,
.ax-account input[type="text"],
.ax-account input[type="email"],
.ax-account input[type="password"] {
    width: 100%;
    max-width: 360px;
    padding: 9px 11px;
    font: inherit;
    border: 1px solid var(--color-divider, #cfccc4);
    border-radius: 8px;
    background: #fff;
}

.ax-account .form-control:focus {
    outline: 2px solid var(--archex-accent, #F18F3C);
    outline-offset: 1px;
    border-color: var(--archex-accent, #F18F3C);
}

/* Bootstrap floats the label over the input; without its stylesheet the label lands on top of the
   text. Unstacked into a plain label above the field. */
.ax-account .form-floating { display: grid; gap: 5px; margin-bottom: 14px; }
.ax-account .form-floating > label { order: -1; font-size: .82rem; font-weight: 600; }

.ax-account .btn {
    display: inline-block;
    padding: 9px 18px;
    font: inherit;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--color-divider, #cfccc4);
    background: var(--color-surface, #fff);
    color: var(--color-ink, #1d1d1d);
    cursor: pointer;
}

.ax-account .btn:hover { background: var(--color-hairline, #eceeed); }

.ax-account .btn-primary,
.ax-account .btn-lg.btn-primary {
    background: var(--archex-accent, #F18F3C);
    border-color: var(--archex-accent, #F18F3C);
    color: #fff;
}

.ax-account .btn-primary:hover { filter: brightness(.94); }
.ax-account .btn-danger { background: #b42318; border-color: #b42318; color: #fff; }
.ax-account .btn:disabled { opacity: .6; cursor: default; }

/* Bootstrap's w-100 makes Verify span the panel; on a 360 px field that looks broken. */
.ax-account .w-100 { width: auto !important; min-width: 180px; }

.ax-account .text-danger { color: #b42318; font-size: .85rem; }

.ax-account .alert {
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid var(--color-divider, #e2e0da);
    background: var(--color-hairline, #f2f1ec);
    margin-bottom: 14px;
}

.ax-account .alert-success { border-color: #2e7d5b; background: rgba(46, 125, 91, .10); }
.ax-account .alert-danger { border-color: #b42318; background: rgba(180, 35, 24, .08); }

/* Bootstrap's grid, which ArchEx does not carry. Left as a plain block so nothing collapses. */
.ax-account .row { display: block; }
.ax-account [class^="col-"], .ax-account [class*=" col-"] { width: auto; max-width: none; }

.ax-account kbd {
    display: inline-block;
    padding: 3px 7px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: .92rem;
    letter-spacing: .05em;
    background: var(--color-hairline, #eceeed);
    border-radius: 6px;
}