/* Server-rendered account pages (login, logout, denied, admin). Uses the same tokens as the chat UI
   so these look like part of Satoru, but carries no dependency on MudBlazor — these pages render
   before any of that exists. */

/* The accent these pages have always reached for. Every interactive element below asks for
   var(--cas-accent, #1f7ae0) — and nothing in the codebase ever defined it, so all of them were
   quietly falling back to a blue that appears nowhere else in Satoru. Given the brand navy instead,
   so the button and the gradient behind it are the same colour family.

   Defined here rather than in tokens.css: that file is a synced copy of CAS_NX_BLAZOR's and says to
   edit the original first, the original is not in this repo, and nothing outside this stylesheet
   uses the token. */
:root {
    --cas-accent: #1E3A5F;
    --cas-accent-hover: #16304E;
    /* The soft halo on a focused input. Same hue, low alpha — it reads as a glow rather than as a
       second border competing with the one it sits outside. */
    --cas-accent-ring: rgba(30, 58, 95, 0.16);
}

/* The shell owns the whole viewport now, so the body is only the ground beneath it — each pane
   paints its own background. White rather than the hero gradient, because on a page taller than the
   screen it is the right-hand pane that carries on past the fold. No flex centring either: the panes
   centre their own contents, and centring the shell as a whole is what used to risk clipping a tall
   card off the top. */
.acct-body {
    margin: 0;
    font-family: Roboto, "Segoe UI", system-ui, sans-serif;
    background: #fff;
    color: #0f172a;
}

/* Full-bleed split: brand down the left, form down the right, each running the full height of the
   page. Stacked into two bands by default — a phone has no width to divide — and side by side from
   880px, which is where a 400px form column and a brand panel that still reads both fit.

   min-height, not height: a card taller than the viewport grows the row rather than overflowing it,
   and because grid items stretch by default both panes grow together. That is what keeps the seam
   running edge to edge however tall the content gets. */
.acct-shell {
    display: grid;
    grid-template-columns: 1fr;
    /* Stacked, the brand hugs its content and the form pane takes everything left over. Without
       this both rows would be auto and share the spare height evenly, handing half a phone screen
       to a logo. */
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
}

/* The left pane: artwork, and nothing else.

   The colour underneath is the brand navy, so the pane is never a white flash while the image loads,
   and still reads as itself if the file is ever missing. cover, because the pane is a tall column on
   a desktop and a short band on a phone, and the render has to fill both without distorting.

   min-height is for the stacked layout only: .acct-shell gives row one `auto`, and an element whose
   whole content is a background image measures zero. Above 880px the row is 1fr and this is ignored. */
.acct-art {
    position: relative;
    /* The image eases down from slightly oversized, so it has to be clipped to the pane. */
    overflow: hidden;
    min-height: 200px;
    /* The navy stays on THIS element, not on the layer that fades. Fade the whole pane and the navy
       goes with it, and what shows through is the body's white — a flash of the wrong colour every
       time the page loads. Keeping it here means the image arrives over a pane that is already the
       right colour, which is the same reason it sat here as a fallback before. */
    background-color: var(--cas-navy-900, #0F2027);

    /* Bottom-left, for the tagline. The ::before carrying the image is absolutely positioned, so it
       is out of flow and never becomes a flex item — the copy is the only thing being laid out. */
    display: flex;
    align-items: flex-end;
    padding: 44px 40px;
}

/* The image, on its own layer purely so it can arrive without taking the navy with it.

   scale runs 1.04 down to 1, never below: at rest it fills the pane exactly, and anything under 1
   would pull its edges inside the frame and show the navy around them. */
.acct-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../branding/login-hero.jpeg");
    background-size: cover;
    /* Not centred, and only the second value matters. This chooses which slice of the photograph
       survives. The hero is 768x1408 — far taller than the pane in proportion — so cover
       fills the width exactly and the overflow is all vertical: the horizontal value has no slack to
       move in, and only the second number does anything. 70% favours the lit streets and the river,
       which also puts the darkest part of the photograph behind the tagline in the corner. */
    background-position: center 70%;
    background-repeat: no-repeat;
    animation: acct-art-in 900ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* A scrim under the copy. The render is dark in that corner today, but a background image is content
   somebody will swap — twice already — and text whose legibility depends on what the picture happens
   to be doing is text that will become unreadable without warning. Weighted to the bottom so it does
   nothing to the upper two-thirds of the image. */
.acct-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(6, 18, 34, 0.74) 0%,
        rgba(6, 18, 34, 0.30) 26%,
        transparent 52%);
    pointer-events: none;
}

/* Hidden by default: stacked, this pane is a 200px band and a line of display copy in it reads as a
   caption crushed against the fold. It appears with the split — see the 880px block. */
.acct-art-tagline {
    display: none;
    /* Above the image and its scrim, both of which are positioned. */
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 20ch;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01em;
    animation: acct-rise 520ms cubic-bezier(0.2, 0.7, 0.3, 1) 360ms both;
}

/* The artwork settles rather than rises: it fills the pane, so a translate would drag a strip of
   bare navy in behind it. Its own keyframe rather than a variant of acct-rise below — a rule cannot
   override a transform its own animation is setting, so "same fade, different move" has to be two
   sets of keyframes. */

@keyframes acct-art-in {
    from {
        opacity: 0;
        transform: scale(1.04);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* The page arrives, once, on load and quickly — this is somewhere people sign in every morning, and
   an entrance that makes them wait is one they will come to resent. Nothing here repeats: a second
   after the page settles it is completely still, which is the whole point of choosing an entrance
   over a perpetual effect.

   Shared by the mark and the form; the artwork has its own above, because it scales instead of
   rising.

   `both` on every user, so nothing is briefly visible in its final position before its turn comes. */
@keyframes acct-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.acct-brand > img {
    animation: acct-rise 520ms cubic-bezier(0.2, 0.7, 0.3, 1) 60ms both;
}

.acct-brand > div {
    animation: acct-rise 520ms cubic-bezier(0.2, 0.7, 0.3, 1) 160ms both;
}

/* Last in, just behind the wordmark. The form is what the page is for, so it arrives on the beat
   after the identity rather than with it. */
.acct-shell .acct-card {
    animation: acct-rise 520ms cubic-bezier(0.2, 0.7, 0.3, 1) 260ms both;
}

/* The right pane. A plain white half rather than a card floating on colour — that is the whole point
   of a full split, and it is why .acct-shell .acct-card strips its own chrome further down. The
   wrapper exists so the form can be centred in the pane while staying a readable column: without it
   the card would stretch to half the screen and take its input fields with it. */
/* The right pane. A plain white half rather than a card floating on colour — that is the whole point
   of a full split, and it is why .acct-shell .acct-card strips its own chrome further down.

   A column now, because it holds two things: the form, which belongs in the middle, and the footer,
   which belongs at the bottom. */
.acct-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px 26px;
    background: #fff;
}

/* Brand and form as one centred column. Without it they would be two separate flex items on the
   pane's cross axis and the card would stretch to the full half, taking its input fields with it. */
.acct-pane-inner {
    width: 100%;
    max-width: 400px;
    /* Auto margins top and bottom, not justify-content: center on the parent. The form is then
       centred in whatever space the footer leaves — and when the two together are taller than the
       pane, auto margins collapse to zero and it simply stacks, where centring would have pushed
       the top of the form out of reach. */
    margin: auto 0;
}

@media (min-width: 880px) {
    /* Only in the split, where the pane is a full-height column with room for it. */
    .acct-art-tagline {
        display: block;
    }

    .acct-shell {
        /* The brand takes the room, the form takes what it needs. Was an even 1fr 1fr, which on a
           wide monitor spent half the screen framing a 400px card in whitespace.

           min() rather than a plain cap, so the form column is a share of the page while the page is
           small — 46% at the 880px breakpoint, where a fixed 560 would have made the form the WIDER
           of the two — and stops growing once it reaches 560, past which it would only be adding
           margin around a card that is capped at 400 anyway. minmax(0, …) on the first track so a
           long wordmark can never push the grid wider than the viewport. */
        grid-template-columns: minmax(0, 1fr) min(560px, 46%);
        /* Back to a single row, or the auto row above would size to its content and leave the panes
           short of the fold with an empty 1fr row underneath them. */
        grid-template-rows: 1fr;
    }

    .acct-shell > .acct-brand,
    .acct-pane {
        padding: 48px;
    }

    /* Room to be a mark rather than a favicon, now that it owns a whole pane. */
    .acct-shell > .acct-brand img {
        width: 128px;
        height: 128px;
    }
}

/* Was a cap on the whole centred column. Now that the shell is full-bleed, the only thing "wide" can
   sensibly mean is a roomier content column in the right-hand pane. Still unreachable in practice —
   every page that sets ViewData["Wide"] also sets RailNav and takes the rail layout instead. */
.acct-shell.acct-shell--wide .acct-card {
    max-width: 720px;
}

/* Centred over the card, logo above the name. Only the signed-out pages use this — the rail has its
   own .acct-rail-brand, which stays a horizontal row because a 232px column has no height to spend
   on a stacked mark. The two share .acct-brand-title/.acct-brand-tagline, so the centring lives
   here on the container rather than on those. */
.acct-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin-bottom: 30px;
    /* Ink, not white: the mark sits on the white pane above the form now, not on the dark half.
       .acct-brand-title inherits this; the tagline overrides it just below, and neither touches the
       rail's copies, which are still white on the drawer gradient. */
    color: var(--cas-ink, #1B2430);
}

/* The signed-out pages lead with the mark, not with the task: the brand outweighs the "Sign in"
   heading below it (1.375rem), so the eye lands on Satoru first and the heading reads as the label
   for the form rather than as the title of the page. Scoped to .acct-brand — the rail shares these
   two classes and has no room for a 30px title. */
.acct-brand .acct-brand-title {
    font-size: 2rem;
    /* Positive tracking, where a sans wordmark wanted negative. A mincho's strokes are already
       high-contrast and its counters open, so tightening it makes the letters collide rather than
       cohere. */
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

/* Two lines, stacked: what it is, then who makes it. Scoped to .acct-brand so the rail keeps its
   single-line tagline — that one is a ternary that swaps in "Administration Settings", which has no
   second line to stack. */
.acct-brand .acct-brand-tagline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.875rem;
    color: var(--cas-muted, #5D6B7A);
    line-height: 1.35;
}

/* The admin rail's wordmark. Matched to .askme-title in the chat rail — same face, size, weight and
   tracking — so the two sidebars read as the same product rather than as two apps that happen to
   share a name. The signed-out pages override all of this below; they set the mark much larger over
   the form.

   0.06em rather than the untracked default, for the same reason the chat rail carries it: capitals
   have flat sides and no descenders to separate them, so SATORU sets tighter than it measures. */
.acct-brand-title {
    font-family: var(--cas-font-brand);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.25;
}

.acct-brand-tagline {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.3;
}

.acct-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 18px 48px rgba(6, 18, 34, 0.28);
}

/* Inside the split the card stops being a card. The right-hand pane is already a white surface, so
   a second white sheet with a shadow on top of it would be a card floating on nothing — all the
   chrome from .acct-card above is stripped back off here, leaving just a measured content column.

   400px, not the pane's full half: text inputs stretched across half a monitor are harder to aim at
   and harder to read back. The pane centres it. */
.acct-shell .acct-card {
    width: 100%;
    max-width: 400px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* Heading on the left, the way back on the right. Wraps rather than crushes on a narrow screen: the
   link drops under the heading instead of squeezing it to two words a line. */
.acct-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.acct-heading {
    margin: 0 0 6px;
    font-size: 1.45rem;
    font-weight: 500;
}

/* Smaller on the signed-out pages than in the admin area, and scoped so it stays that way there:
   over in /admin this is the page title with nothing above it, while here the SATORU mark sits
   directly on top of it, so the heading is a prompt rather than a title and should not compete with
   the brand for the same job. */
.acct-shell .acct-heading {
    font-size: 1.125rem;
}

/* A heading for a screen reader and nobody else. Sign-in shows no visible title — the SATORU mark
   above the form says where you are — but a page with no <h1> gives assistive technology nothing to
   announce and nothing to navigate to by heading. clip-path rather than display:none, which would
   hide it from assistive technology too; the whole point is that it stays readable there. */
.acct-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Quiet by design. It is the exit, not the point of the page — the same weight as the row actions in
   the table, so it reads as chrome rather than as another thing to do. */
.acct-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 7px 12px;
    border-radius: 8px;
    background: #eef2f7;
    color: #1e2b3d;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.acct-back:hover {
    background: #e1e8f1;
}

/* Nudges left on hover, in the direction it takes you. */
.acct-back svg {
    transition: transform 0.15s ease;
}

.acct-back:hover svg {
    transform: translateX(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .acct-rail-mesh circle,
    .acct-mesh-signals path {
        animation: none;
    }

    /* Not merely paused: with the animation gone the dash pattern freezes as a stray bright segment
       lying across the mesh, which looks like a rendering fault rather than a still frame. */
    .acct-mesh-signals {
        display: none;
    }

    /* The label already says "Signing in…", so the spinner is decoration on top of a message that
       stands on its own — the one part of the busy state that can go. */
    .acct-button--busy .acct-button-label::before {
        display: none;
    }

    /* Everything lands where it was going to land: animation:none with fill-mode `both` leaves each
       element at its natural state, which for every one of these is exactly the resting frame. */
    .acct-art-tagline,
    .acct-art::before,
    .acct-brand > img,
    .acct-brand > div,
    .acct-shell .acct-card {
        animation: none;
    }

    .acct-field input[type="text"],
    .acct-field input[type="email"],
    .acct-field input[type="password"],
    .acct-button {
        transition: none;
    }

    /* The colour and the ring still change — only the movement goes. */
    .acct-shell .acct-button:hover,
    .acct-shell .acct-button:active,
    .acct-button:active {
        transform: none;
    }

    .acct-back svg {
        transition: none;
    }

    .acct-back:hover svg {
        transform: none;
    }
}

.acct-sub {
    margin: 0 0 22px;
    font-size: 0.875rem;
    color: #4a5568;
}

.acct-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.acct-field label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #33415c;
}

.acct-field input[type="text"],
.acct-field input[type="email"],
.acct-field input[type="password"] {
    font: inherit;
    padding: 12px 14px;
    border: 1px solid var(--cas-line-input, #B9C6D4);
    border-radius: 10px;
    background: #fff;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.acct-field input::placeholder {
    color: var(--cas-faint, #9AA7B4);
}

/* A field answers the pointer before it is clicked. Cheap, and the single clearest signal that the
   form is live rather than a picture of one. */
.acct-field input[type="text"]:hover,
.acct-field input[type="email"]:hover,
.acct-field input[type="password"]:hover {
    border-color: var(--cas-muted, #5D6B7A);
}

/* Focus is the accent border plus a soft ring, not the shared 2px outline further down — a text
   field always deserves a visible focus state, so :focus rather than :focus-visible, and the ring
   is the indicator so the two do not stack into a double border. */
.acct-field input[type="text"]:focus,
.acct-field input[type="email"]:focus,
.acct-field input[type="password"]:focus {
    outline: none;
    border-color: var(--cas-accent, #1E3A5F);
    box-shadow: 0 0 0 3px var(--cas-accent-ring, rgba(30, 58, 95, 0.16));
}

/* Chrome paints autofilled fields its own pale yellow, straight through the radius and the palette.
   An inset shadow the size of the field is the only way to override it. */
.acct-field input:-webkit-autofill,
.acct-field input:-webkit-autofill:hover,
.acct-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #0f172a;
    -webkit-box-shadow: 0 0 0 100px #fff inset;
    caret-color: #0f172a;
}

/* Native controls, tinted. One line, and the checkbox stops being the last piece of default
   browser chrome on the page. */
.acct-check input[type="checkbox"] {
    accent-color: var(--cas-accent, #1E3A5F);
    width: 16px;
    height: 16px;
}

/* The six digits from the sign-in email. Spaced and oversized because this is transcribed by hand
   from another screen, where a misread 8 for a 6 costs a whole round trip. */
.acct-field input.acct-code-input {
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.32em;
    text-align: center;
    padding: 13px;
}

/* Sits under the primary button as an afterthought, which is what it is: most people never need it. */
.acct-resend {
    margin: -6px 0 18px;
    text-align: center;
}

/* One cell of the admin table: the username on top, the address it signs in with underneath. Stacked
   rather than side by side so each input can be wide enough to show a whole address at once. */
.acct-account {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* The account's name. Bold, because it is what identifies the row and the eye works down this column
   looking for one — the address beneath it is supporting detail. Padding matches the address row so
   the two sit as an evenly spaced stack. */
.acct-account-name {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 1px;
}

/* The address, which is read-only. Quieter than the name above it: it is a fact about the account
   rather than the thing being scanned for. */
.acct-account-email {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 1px;
    font-size: 0.8125rem;
    color: #4a5568;
}

/* A field and its Save button side by side, so working down a column of them is a straight run
   rather than a dialog per account. */
.acct-cell-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.acct-cell-form input[type="email"],
.acct-cell-form input[type="text"] {
    font: inherit;
    font-size: 0.8125rem;
    min-width: 0;
    width: 26ch;
    padding: 6px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: inherit;
}

.acct-cell-form input:placeholder-shown {
    /* An account with no address cannot sign in, so it should not look settled. */
    border-color: #e0a4a4;
    background: #fffafa;
}

/* Everything that is NOT a text field on the account form. Those took their own :focus ring above;
   these are buttons and links, where an outline should only appear for a keyboard user. */
.acct-cell-form input:focus-visible,
.acct-button:focus-visible,
.acct-back:focus-visible,
.acct-check input:focus-visible {
    outline: 2px solid var(--cas-accent, #1f7ae0);
    outline-offset: 2px;
}

.acct-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    font-size: 0.8125rem;
    color: #33415c;
    cursor: pointer;
}

.acct-button {
    display: inline-block;
    width: 100%;
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 13px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--cas-accent, #1E3A5F);
    color: #fff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 32, 39, 0.18);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

/* Was filter: brightness(1.08), which on a fill this dark is very nearly invisible. An explicit
   darker step and a shadow that grows read as a button that can be pressed. */
.acct-button:hover {
    background: var(--cas-accent-hover, #16304E);
    box-shadow: 0 4px 14px rgba(15, 32, 39, 0.28);
}

.acct-button:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(15, 32, 39, 0.22);
}

/* The lift is for the one big primary button on a sign-in card. The admin tables are full of quiet
   buttons, and a row of them rising under the pointer is fidgety rather than responsive. */
.acct-shell .acct-button:hover {
    transform: translateY(-1px);
}

/* .acct-shell .acct-button:hover outranks .acct-button:active, so without this the button on a
   sign-in card would stay lifted while being pressed instead of going down. */
.acct-shell .acct-button:active {
    transform: translateY(1px);
}

/* The variants set their own background, so they need their own hover — the rule above would
   otherwise drag both of them to the primary accent. */
.acct-button--quiet:hover {
    background: #e1e8f1;
    box-shadow: none;
}

.acct-button--danger:hover {
    background: #8F1E17;
}

.acct-button--link {
    box-sizing: border-box;
}

/* Secondary actions in the admin table: same shape, far less shout. */
.acct-button--quiet {
    width: auto;
    background: #eef2f7;
    color: #1e2b3d;
    padding: 7px 12px;
    font-size: 0.8125rem;
    /* Flat by intent — the base button's contact shadow would make a table full of these look
       like a field of chiclets. */
    box-shadow: none;
}

.acct-button--danger {
    width: auto;
    background: #b3261e;
    padding: 7px 12px;
    font-size: 0.8125rem;
}

.acct-link {
    display: inline-block;
    margin-top: 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cas-accent, #1E3A5F);
    text-decoration: none;
}

.acct-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The ways off this page, under a rule. They are alternatives to signing in rather than more of it,
   so they get separated from the form instead of trailing after the button. Replaces two stacked
   <p class="acct-sub"> with inline margin overrides, which double-counted .acct-link's own 16px and
   spaced the two links differently depending on which of them the install had switched on. */
.acct-foot {
    display: flex;
    /* Stacked, forgot-password first. They are alternatives to each other rather than a pair to be
       compared, so one under the other reads as a short list of ways out — and the second is a
       sentence rather than a link, which sat awkwardly opposite a bare link on one line. */
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--cas-line-soft, #E9EEF3);
    text-align: center;
    font-size: 0.8125rem;
    color: #4a5568;
}


.acct-foot p {
    margin: 0;
}

.acct-foot .acct-link {
    margin-top: 0;
}

.acct-alert,
.acct-notice {
    border-radius: 8px;
    padding: 11px 13px;
    margin-bottom: 20px;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.acct-alert {
    background: #fdecea;
    border: 1px solid #f3c2bd;
    color: #8c1d18;
}

.acct-notice {
    background: #e7f4ec;
    border: 1px solid #b7dfc6;
    color: #1b5e34;
}

.acct-error {
    font-size: 0.75rem;
    color: #b3261e;
}

/* ---- admin table ---- */
.acct-table-wrap {
    overflow-x: auto; /* the table must scroll inside itself, never the page */
}

.acct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.acct-table th,
.acct-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #e3e8ef;
    vertical-align: middle;
    white-space: nowrap;
}

.acct-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    vertical-align: bottom;
}

/* Second line of a header, naming the second line of the cells under it. */
.acct-th-sub {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #94a3b8;
}

.acct-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.acct-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 500;
}

.acct-tag--admin {
    background: #e3edfb;
    color: #14498f;
}

.acct-tag--disabled {
    background: #f1f2f4;
    color: #63707f;
}

.acct-tag--you {
    background: #fff3d6;
    color: #7a5300;
}

/* Centred columns. Overrides the left-aligned default on both the header and its cells, so the
   heading sits over its own content rather than off to one side of it — a centred column with a
   left-aligned heading reads as two separate columns. */
.acct-table .acct-center,
.acct-table th.acct-center {
    text-align: center;
}

/* Right-aligned and tabular, for columns of numbers that have to line up digit over digit. Only in
   tables — see .acct-stat-value, which deliberately does not do this. */
.acct-table .acct-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.acct-table .acct-muted {
    color: #94a3b8;
}

/* The totals line. Sits on a heavier rule than the rows so the eye stops at it. */
.acct-table-total th,
.acct-table-total td {
    border-top: 2px solid #cbd5e1;
    border-bottom: 0;
    font-weight: 500;
}

/* ---- admin tabs ---- */
/* ---- Admin area: a rail down the left, the page beside it -------------------------------------
   Only pages that set ViewData["AdminTab"] get this; sign-in and /account keep the centred card, so
   .acct-body keeps its own centring and this undoes it for the one layout that is a full app screen
   rather than a single card on a dark ground. */
.acct-body--app {
    display: block;
    background: var(--cas-canvas, #f4f6f9);
}

/* The card's own shadow is a heavy one, sized to lift white off the dark gradient the sign-in page
   sits on. Against this light canvas it reads as a smudge, so the app layout takes the suite's
   ordinary card elevation and a hairline instead. */
.acct-body--app .acct-card {
    border: 1px solid var(--cas-line, #dee4eb);
    border-radius: var(--cas-radius-card, 8px);
    box-shadow: var(--cas-shadow-card, 0 2px 8px rgba(15, 32, 39, 0.08));
}

.acct-app {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

/* The drawer gradient, matching the chat's own rail — it is the vertical member of the family, where
   the hero gradient's 135deg was drawn for a wide bar and bands down a narrow column. */
.acct-rail {
    flex: 0 0 232px;
    /* The mesh is positioned against this, and clipped by it — the SVG is sized to cover, so it
       overhangs whatever shape the rail takes, including the horizontal bar it becomes under 860px. */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 22px 16px;
    background: var(--cas-gradient-drawer, #0f2027);
    color: #fff;
}

/* ---- The node mesh behind the rail --------------------------------------------------------------
   The same artwork and the same two animations as the chat rail — see _BrandMesh.cshtml for why the
   SVG itself is duplicated rather than shared, and chatbot.css for the other copy of these rules.
   The keyframes are repeated there because account.css and chatbot.css are never loaded together:
   these pages carry no Blazor, and the app never renders this layout. */
.acct-rail-mesh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* The shapes ask for currentColor; this is where it is decided. */
    color: var(--cas-signal-cyan, #8BD0FF);
    /* Quiet enough to sit behind navigation that has to stay easy to read. */
    opacity: 0.55;
    pointer-events: none;
}

/* Everything else in the rail sits above it. The mesh is out of flow, so the column and its gap
   still see only the brand, the back link, the sections and the theme toggle. */
.acct-rail > :not(.acct-rail-mesh) {
    position: relative;
    z-index: 1;
}

@keyframes acct-mesh-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.acct-rail-mesh circle {
    animation: acct-mesh-pulse 7s ease-in-out infinite;
}

/* Five buckets of delay and two of duration, so eighteen nodes never visibly beat together — an even
   stagger would read as a wave, which is a different and much louder effect. Negative delays so the
   mesh is already mid-cycle on the first paint rather than starting from dark. */
.acct-rail-mesh circle:nth-child(5n+1) { animation-delay: -0.4s; }
.acct-rail-mesh circle:nth-child(5n+2) { animation-delay: -2.1s; animation-duration: 8.5s; }
.acct-rail-mesh circle:nth-child(5n+3) { animation-delay: -3.7s; }
.acct-rail-mesh circle:nth-child(5n+4) { animation-delay: -5.2s; animation-duration: 6.2s; }
.acct-rail-mesh circle:nth-child(5n) { animation-delay: -6.4s; }

@keyframes acct-mesh-signal {
    from { stroke-dashoffset: 1000; }
    to { stroke-dashoffset: 0; }
}

.acct-mesh-signals path {
    stroke-dasharray: 42 958;
    stroke-dashoffset: 1000;
    animation: acct-mesh-signal 9s linear infinite;
}

/* Durations that do not divide into one another, so the three never fall into step. */
.acct-mesh-signals path:nth-child(2) { animation-duration: 12s; animation-delay: -4s; }
.acct-mesh-signals path:nth-child(3) { animation-duration: 10.5s; animation-delay: -7s; }

.acct-rail-brand {
    display: flex;
    align-items: center;
    /* 14px, matching .askme-brand in the chat rail. */
    gap: 14px;
    min-width: 0;
}

.acct-app-main {
    flex: 1;
    /* Without this the tables refuse to shrink below their content width and squeeze the rail. */
    min-width: 0;
    padding: 24px;
}

.acct-app-inner {
    max-width: 1180px;
    margin: 0 auto;
}

/* ---- Section links, down the rail ---- */
.acct-tabs {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Heads the administration group. Quiet and small — it names a set of links rather than being one,
   and should not be mistaken for something to press. */
.acct-rail-group {
    padding: 0 12px 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
}

/* Full-width rows rather than underlined tabs: down a column an underline reads as a rule between
   items instead of as the selected one, so a filled plate carries the state instead. */
.acct-tab {
    display: block;
    padding: 9px 12px;
    border-radius: var(--cas-radius-control, 4px);
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acct-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.acct-tab--on {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

.acct-tab:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: -2px;
}

/* The back link sits on the dark rail now, not on a white card, so it borrows the rail's palette
   rather than the light chip styling further up this file. */
.acct-rail .acct-back {
    /* width:100% is the CONTENT box unless told otherwise — this stylesheet has no global reset, so
       the 12px of horizontal padding would be added on top and push the link 24px past the rail.
       Same fix, and same reason, as .acct-button--link further up. */
    box-sizing: border-box;
    width: 100%;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.9);
}

.acct-rail .acct-back:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.acct-rail .acct-brand-tagline {
    color: rgba(255, 255, 255, 0.6);
}

/* Under 860px the rail lies down as a bar: a fixed 232px column would take a third of a phone and
   leave the tables unreadable. */
@media (max-width: 860px) {
    .acct-app {
        flex-direction: column;
    }

    .acct-rail {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 10px 16px;
        overflow-x: auto;
    }

    .acct-tabs {
        flex-direction: row;
        align-items: center;
    }

    /* The group heading costs a whole slot in a horizontal bar, and the links beneath it are
       self-explanatory once they are side by side. */
    .acct-rail-group {
        display: none;
    }

    .acct-rail .acct-back {
        width: auto;
    }

    .acct-app-main {
        padding: 16px 12px;
    }
}

/* ---- filter chips (the costs page's time window) ---- */
.acct-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 20px;
}

.acct-chip {
    padding: 5px 12px;
    border-radius: 999px;
    background: #eef2f7;
    color: #1e2b3d;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
}

.acct-chip:hover {
    background: #e1e8f1;
}

.acct-chip--on {
    background: var(--cas-accent, #1f7ae0);
    color: #fff;
}

.acct-chip:focus-visible {
    outline: 2px solid var(--cas-accent, #1f7ae0);
    outline-offset: 2px;
}

/* ---- KPI row ---- */
.acct-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 22px;
}

.acct-stat {
    flex: 1 1 190px;
    padding: 13px 15px;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    background: #f9fbfd;
}

.acct-stat-label {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

/* Proportional figures on purpose: tabular-nums gives every digit the width of a zero, which at this
   size makes a value read loose and gappy. Alignment only matters in a column, and these are tiles. */
.acct-stat-value {
    margin-top: 3px;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.15;
    color: #0f172a;
}

.acct-stat-note {
    margin-top: 3px;
    font-size: 0.75rem;
    color: #64748b;
}

/* The caveats under the costs table. Prose, not data — narrower measure than the table above it. */
.acct-notes {
    margin: 0;
    padding-left: 18px;
    max-width: 76ch;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #4a5568;
}

.acct-notes li {
    margin-bottom: 8px;
}

.acct-divider {
    margin: 28px 0 22px;
    border: 0;
    border-top: 1px solid #e3e8ef;
}

.acct-inline-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.acct-inline-form .acct-field {
    margin-bottom: 0;
    min-width: 180px;
    flex: 1;
}

/* The checkbox on the row of fields. Unlike its neighbours it has no label line above it, so
   flex-end leaves it sitting on the form's baseline while the inputs tower over it. Given the
   inputs' own height instead — 1.2rem of text plus their 22px padding and 2px border — and centred
   within it, so it lines up with the middle of the boxes beside it. The global 22px bottom margin
   goes for the same reason .acct-field's does: inside this form the gap comes from the flex gap. */
.acct-inline-form .acct-check {
    margin-bottom: 0;
    min-height: calc(1.2rem + 24px);
}

.acct-inline-form .acct-button {
    width: auto;
}

/* =====================================================
   DARK MODE — the rail layout only
   Scoped to .acct-body--app, which is the flag the layout already sets for pages that get the rail:
   /account and the three admin sections. Sign-in, registration, the code prompt and /denied share
   this stylesheet but not that class, so they keep their white card on the dark hero gradient — a
   page reached before anyone is signed in has no preference to honour yet, and its whole visual
   identity is that gradient.

   Written as overrides rather than by tokenising the file above: those rules are almost entirely
   hardcoded, and rewriting ~60 of them to introduce variables would put every light-mode colour at
   risk to add a feature that touches none of them. This block is additive, so light mode cannot
   regress.

   The rail itself is absent here on purpose. It is the drawer gradient and was already dark; so are
   its white text and its translucent hover plates.
   ===================================================== */
:root[data-theme="dark"] .acct-body--app {
    background: #0C1319;
    color: #E6EDF3;
}

/* Surfaces. The card lifts off the ground rather than the reverse, which is what lets it read as a
   distinct sheet without needing a heavy border. */
:root[data-theme="dark"] .acct-body--app .acct-card {
    background: #141D26;
    border-color: #253340;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    color: #E6EDF3;
}

:root[data-theme="dark"] .acct-body--app .acct-sub,
:root[data-theme="dark"] .acct-body--app .acct-notes {
    color: #A9B7C4;
}

:root[data-theme="dark"] .acct-body--app .acct-field label,
:root[data-theme="dark"] .acct-body--app .acct-check {
    color: #C3CFDA;
}

/* Inputs. Lightened FROM the surface rather than darkened from white: a dark UI separates by adding
   light, and the light palette's borders would vanish outright. */
:root[data-theme="dark"] .acct-body--app .acct-field input[type="text"],
:root[data-theme="dark"] .acct-body--app .acct-field input[type="email"],
:root[data-theme="dark"] .acct-body--app .acct-field input[type="password"],
:root[data-theme="dark"] .acct-body--app .acct-cell-form input[type="text"],
:root[data-theme="dark"] .acct-body--app .acct-cell-form input[type="email"] {
    background: #0F1720;
    border-color: #35485A;
    color: #E6EDF3;
}

:root[data-theme="dark"] .acct-body--app .acct-field input:disabled {
    background: #121A22;
    color: #8FA0B0;
}

/* An account with no address still must not look settled — the same signal as in light mode, re-cut
   so the red reads as a warning wash rather than a pale patch. */
:root[data-theme="dark"] .acct-body--app .acct-cell-form input:placeholder-shown {
    border-color: #7E4B4B;
    background: rgba(198, 40, 40, 0.12);
}

/* Secondary buttons and filter chips: same "quiet" role, re-cut for a dark surface. */
:root[data-theme="dark"] .acct-body--app .acct-button--quiet,
:root[data-theme="dark"] .acct-body--app .acct-chip {
    background: #24313D;
    color: #D5DFE9;
}

:root[data-theme="dark"] .acct-body--app .acct-button--quiet:hover,
:root[data-theme="dark"] .acct-body--app .acct-chip:hover {
    background: #2E3D4B;
}

/* Tables. Every rule border comes up from the surface; the header ink stays quieter than the data,
   which is the point of the distinction. */
:root[data-theme="dark"] .acct-body--app .acct-table th,
:root[data-theme="dark"] .acct-body--app .acct-table td {
    border-bottom-color: #253340;
}

:root[data-theme="dark"] .acct-body--app .acct-table th {
    color: #8FA0B0;
}

:root[data-theme="dark"] .acct-body--app .acct-th-sub,
:root[data-theme="dark"] .acct-body--app .acct-table .acct-muted,
:root[data-theme="dark"] .acct-body--app .acct-account-email,
:root[data-theme="dark"] .acct-body--app .acct-stat-label,
:root[data-theme="dark"] .acct-body--app .acct-stat-note {
    color: #8FA0B0;
}

:root[data-theme="dark"] .acct-body--app .acct-table-total th,
:root[data-theme="dark"] .acct-body--app .acct-table-total td {
    border-top-color: #35485A;
}

:root[data-theme="dark"] .acct-body--app .acct-divider {
    border-top-color: #253340;
}

/* The KPI tiles sit one step above the card, the same way the card sits above the ground. */
:root[data-theme="dark"] .acct-body--app .acct-stat {
    background: #1A242E;
    border-color: #253340;
}

:root[data-theme="dark"] .acct-body--app .acct-stat-value {
    color: #E6EDF3;
}

/* Status colours become translucent washes of their own hue. Pale tints designed for white would
   read as light patches punched into a dark card. */
:root[data-theme="dark"] .acct-body--app .acct-alert {
    background: rgba(198, 40, 40, 0.16);
    border-color: rgba(239, 83, 80, 0.4);
    color: #F3A9A6;
}

:root[data-theme="dark"] .acct-body--app .acct-notice {
    background: rgba(46, 125, 50, 0.16);
    border-color: rgba(102, 187, 106, 0.4);
    color: #A5D6A7;
}

:root[data-theme="dark"] .acct-body--app .acct-error {
    color: #EF9A9A;
}

:root[data-theme="dark"] .acct-body--app .acct-tag--admin {
    background: rgba(86, 174, 234, 0.18);
    color: #8ECBF5;
}

:root[data-theme="dark"] .acct-body--app .acct-tag--disabled {
    background: #24313D;
    color: #98A6B4;
}

:root[data-theme="dark"] .acct-body--app .acct-tag--you {
    background: rgba(237, 108, 2, 0.18);
    color: #F0B27A;
}

/* Links and the primary action keep their accent, brightened enough to hold contrast on the darker
   ground they now sit on. */
:root[data-theme="dark"] .acct-body--app .acct-link {
    color: #56AEEA;
}

:root[data-theme="dark"] .acct-body--app .acct-button {
    background: #2F6FBF;
}

:root[data-theme="dark"] .acct-body--app .acct-button--danger {
    background: #C0392F;
}

/* The accent, re-cut for the dark admin surface. Scoped to .acct-body--app like everything else in
   this block, and that scoping is load-bearing here: the signed-out pages keep their white card even
   when data-theme is dark, so redefining the token at :root would put pale-blue-on-white text into
   the sign-in button for anyone whose OS is set to dark.

   Custom properties inherit, so declaring them on the body reaches every rule below that asks for
   them — the focus ring, the links, the button. */
:root[data-theme="dark"] .acct-body--app {
    --cas-accent: #56AEEA;
    --cas-accent-hover: #7CC1F0;
    --cas-accent-ring: rgba(86, 174, 234, 0.24);
}

/* The button keeps its own darker fill from further up rather than the token, so its hover has to
   be stated too — and it goes lighter here, not darker. */
:root[data-theme="dark"] .acct-body--app .acct-button:hover {
    background: #3F82D6;
}

/* Same autofill override, over the dark field colour. */
:root[data-theme="dark"] .acct-body--app .acct-field input:-webkit-autofill,
:root[data-theme="dark"] .acct-body--app .acct-field input:-webkit-autofill:hover,
:root[data-theme="dark"] .acct-body--app .acct-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #E6EDF3;
    -webkit-box-shadow: 0 0 0 100px #0F1720 inset;
    caret-color: #E6EDF3;
}

:root[data-theme="dark"] .acct-body--app .acct-foot {
    border-top-color: #253340;
    color: #A9B7C4;
}

/* ---- The scheme toggle, a row in the rail ---- */
.acct-theme {
    display: flex;
    align-items: center;
    gap: 8px;
    /* As above: without this the padding is added outside the 100% and the button overhangs. */
    box-sizing: border-box;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--cas-radius-control, 4px);
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.acct-theme:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.acct-theme:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: -2px;
}

/* Which label shows is decided by the attribute, not by script: the button is server-rendered and
   carries both, so it is never briefly wrong while JavaScript catches up. */
.acct-theme-light {
    display: none;
}

:root[data-theme="dark"] .acct-theme-light {
    display: inline;
}

:root[data-theme="dark"] .acct-theme-dark {
    display: none;
}

@media (max-width: 860px) {
    .acct-theme {
        width: auto;
    }
}

/* ---- The company footer, at the foot of the form pane -------------------------------------------
   Slightly wider than the 400px form column it sits under: the logo and the copyright are a row of
   two, and squeezed to the form's width they wrap onto separate lines for no reason. */
.acct-footer {
    flex: none;
    width: 100%;
    max-width: 460px;
    margin-top: 36px;
    font-size: 0.8125rem;
    color: var(--cas-muted, #5D6B7A);
}

.acct-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Wraps rather than crushes: on a narrow phone the copyright drops under the logo instead of the
       two of them squeezing each other. */
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 16px 0;
    border-top: 1px solid var(--cas-line-soft, #E9EEF3);
    border-bottom: 1px solid var(--cas-line-soft, #E9EEF3);
}

/* Height rather than width, so the logo's own proportions decide the rest. */
.acct-footer-logo {
    height: 38px;
    width: auto;
}

.acct-copy {
    margin: 0;
}

.acct-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-top: 14px;
}

.acct-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--cas-body, #2E3A47);
    font-weight: 500;
    text-decoration: none;
}

.acct-footer-link:hover {
    color: var(--cas-accent, #1E3A5F);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.acct-footer-link:focus-visible {
    outline: 2px solid var(--cas-accent, #1E3A5F);
    outline-offset: 3px;
    border-radius: 3px;
}

/* The icon takes the link's colour, so it brightens with the label on hover rather than staying
   behind as a dark mark next to lit text. */
.acct-footer-link svg {
    flex: none;
}

/* Decorative, and hidden from screen readers in the markup — the gap and the link roles already say
   these are separate items. */
.acct-footer-sep {
    color: var(--cas-line, #DEE4EB);
}

/* ---- Password reveal ----------------------------------------------------------------------------
   The button sits inside the field rather than beside it, so the field keeps its full width and the
   form keeps its rhythm. */
.acct-password {
    position: relative;
    display: flex;
}

/* Room for the button, so a long password never runs underneath it. Later in the file than the
   .acct-field input rules it is overriding, which is what lets it win at equal specificity. */
.acct-field .acct-password input {
    width: 100%;
    padding-right: 42px;
}

.acct-reveal {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--cas-faint, #9AA7B4);
    cursor: pointer;
}

/* display:inline-flex above beats the [hidden] attribute's own display:none, so the button would be
   on screen before script un-hides it — the one thing the markup is careful to avoid. */
.acct-reveal[hidden] {
    display: none;
}

.acct-reveal:hover {
    color: var(--cas-ink, #1B2430);
}

.acct-reveal:focus-visible {
    outline: 2px solid var(--cas-accent, #1E3A5F);
    outline-offset: 2px;
}

/* Which glyph shows is read straight off aria-pressed, so the accessible state and the visible state
   cannot drift apart — there is no second flag for script to forget to update. */
.acct-reveal .acct-reveal-hide,
.acct-reveal[aria-pressed="true"] .acct-reveal-show {
    display: none;
}

.acct-reveal[aria-pressed="true"] .acct-reveal-hide {
    display: inline;
}

/* ---- Caps Lock notice ---------------------------------------------------------------------------
   Warning ink, not error ink: nothing has gone wrong yet, and this is the message that stops it. */
.acct-caps {
    margin: 4px 0 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cas-warning-deep, #9A4A00);
}

/* ---- The button, submitting ---------------------------------------------------------------------
   The spinner rides on the label's ::before rather than the button's, so .acct-button keeps its
   display:inline-block and the admin variants that share the class are untouched. */
@keyframes acct-spin {
    to {
        transform: rotate(360deg);
    }
}

.acct-button--busy .acct-button-label::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 9px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: acct-spin 700ms linear infinite;
}

/* progress, not not-allowed: the button is working, not refusing. */
.acct-button:disabled {
    cursor: progress;
}

/* Busy is a state, not an invitation — it should not lift or brighten under the pointer. */
.acct-button--busy:hover,
.acct-shell .acct-button--busy:hover {
    background: var(--cas-accent, #1E3A5F);
    box-shadow: 0 1px 2px rgba(15, 32, 39, 0.18);
    transform: none;
}


/* =====================================================================================================
   SOFT SIGNAL — the signed-in settings pages in the app's look
   The same chrome and surface as the chat (see the SOFT SIGNAL, CONTRAST, TOP BAR and NAVY HEADER
   blocks at the end of chatbot.css): a navy bar across the top — Home, Wiki, Settings and an
   Administration dropdown — and the page below on the tinted canvas in rounded white cards, set in
   Manrope.

   Scoped to .acct-body--app, like the dark block above, so the signed-out pages — sign-in,
   registration, the code prompt, /denied — keep their own look. The token values repeat chatbot.css's
   on purpose: the two stylesheets are never loaded together. Change them in step.
   ===================================================================================================== */
.acct-body--app {
    --cas-font: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --cas-canvas: #DCE6F2;
    --cas-surface: #FFFFFF;
    --ss-soft: #F2F6FB;
    --cas-ink: #10213A;
    --cas-body: #2F3E52;
    --cas-muted: #4B5A6D;
    --cas-faint: #5F6F83;
    --cas-line: #C9D6E4;
    --cas-line-soft: #DDE6F0;
    --cas-line-input: #768DA8;
    --ss-edge: #BFCDDD;
    --ss-navy: #1E3A5F;
    --cas-accent: #2B78C2;
    --cas-accent-hover: #1F63A6;
    --cas-accent-ring: rgba(43, 120, 194, 0.18);
    --cas-radius-control: 10px;
    --cas-radius-card: 20px;
    --cas-shadow-card: 0 1px 2px rgba(16, 33, 58, 0.05), 0 8px 24px rgba(16, 33, 58, 0.07);

    font-family: var(--cas-font);
    background: var(--cas-canvas);
    color: var(--cas-body);
}

:root[data-theme="dark"] .acct-body--app {
    --cas-canvas: #0A111C;
    --cas-surface: #152033;
    --ss-soft: #1A273C;
    --cas-ink: #E8EEF6;
    --cas-body: #D0DAE6;
    --cas-muted: #A7B5C6;
    --cas-faint: #8B9CB2;
    --cas-line: #2E3F58;
    --cas-line-soft: #223149;
    --cas-line-input: #56708F;
    --ss-edge: #2E3F58;
    --cas-accent: #6CB4F0;
    --cas-accent-hover: #A5D2F7;
    --cas-accent-ring: rgba(108, 180, 240, 0.24);
    --cas-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);

    background: var(--cas-canvas);
    color: var(--cas-body);
}

/* The shell is a column now: bar, strip, page. */
.acct-body--app .acct-app {
    flex-direction: column;
}

/* ---- The bar ----
   Lives in css/topbar.css, shared with the app, so the two are the same bar. */

/* The page scrolls inside itself, under the bar, the way the app does — so no window scrollbar ever
   appears on one side of the crossing and not the other, narrowing the bar as you arrive. */
.acct-body--app .acct-app {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.acct-body--app .acct-app-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ---- The page ---- */
.acct-body--app .acct-app-main {
    padding: 32px 24px 40px;
}

.acct-body--app .acct-heading {
    color: var(--cas-ink);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.acct-body--app .acct-sub {
    color: var(--cas-muted);
}

.acct-body--app .acct-card,
:root[data-theme="dark"] .acct-body--app .acct-card {
    border: 1px solid var(--ss-edge);
    border-radius: 20px;
    background: var(--cas-surface);
    box-shadow: var(--cas-shadow-card);
    color: var(--cas-body);
}

.acct-body--app .acct-button {
    border-radius: 12px;
    background: var(--cas-accent);
    font-family: var(--cas-font);
    font-weight: 700;
}

.acct-body--app .acct-button:hover {
    background: var(--cas-accent-hover);
}

:root[data-theme="dark"] .acct-body--app .acct-button {
    background: #2F74B8;
    color: #fff;
}

:root[data-theme="dark"] .acct-body--app .acct-button:hover {
    background: #2A62A8;
}

.acct-body--app .acct-field input[type="text"],
.acct-body--app .acct-field input[type="email"],
.acct-body--app .acct-field input[type="password"] {
    border-radius: 12px;
    background: var(--cas-surface);
    font-family: var(--cas-font);
}

.acct-body--app .acct-table th {
    background: var(--ss-soft);
    color: var(--cas-ink);
}

.acct-body--app .acct-table th,
.acct-body--app .acct-table td {
    border-color: var(--cas-line-soft);
}

@media (max-width: 860px) {
    .acct-body--app .acct-app-main {
        padding: 20px 12px 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .acct-body--app .acct-app-main {
        animation: none;
    }
}

/* =====================================================================================================
   PHOTO GROUND — the same photograph as the app's, behind the settings and admin pages
   A copy of chatbot.css's PHOTO GROUND block, so crossing between the chat and its settings keeps the
   same ground; the two stylesheets are never loaded together, so change them in step. Scoped to
   .acct-body--app, so the signed-out pages keep their own split layout.

   Safe for the same reason as the app's: everything on these pages sits in a card or in the settings
   sheet, so nothing reads directly off the photograph.
   ===================================================================================================== */
.acct-body--app {
    background: url("../branding/bg.jpeg") center / cover no-repeat, #3D7CC4;
}

/* Dark mode has its own photograph: the same city at night, so the ground darkens with the cards
   instead of a daytime sky glaring round them. Only a light wash over it — the picture is dark
   already, and a heavier one would put out the lit tower. */
:root[data-theme="dark"] .acct-body--app {
    background:
        linear-gradient(rgba(6, 14, 28, 0.25), rgba(6, 14, 28, 0.25)),
        url("../branding/bgdark.jpeg") center / cover no-repeat,
        #0A1424;
}