/* ═══════════════════════════════════════════════════════════════════════════
   SIGN UP · SIGN IN — the account pages, and how a product restyles them.

   ── WHY THIS FILE EXISTS SEPARATELY ────────────────────────────────────────
   Ten products sign in through these pages, and each has a public website with
   its own look. A visitor who has just read exafleet.ai and clicked through
   should not arrive somewhere that looks like a different company. So the page
   is written entirely in terms of --auth-* custom properties, and a product
   restyles it by setting them.

   ── THE DEFAULTS ARE TODAY'S APPEARANCE ────────────────────────────────────
   Every token below falls back to the MudBlazor palette the pages already used.
   A product that does nothing looks exactly as it did — which is the point:
   this shipped to nine products that have not written a palette yet, and none
   of them changed.

   ── HOW A PRODUCT OPTS IN ──────────────────────────────────────────────────
   Supply a LoginStyleComponent in its own assembly, under
   Patents.Shared.Home.<ComponentSetName> — resolved by DynamicLoaderComponent
   the same way LoginHeaderComponent is — and set the tokens on .auth-page:

       <style>
           .auth-page {
               --auth-bg: #0a0a0f;
               --auth-accent: #6366f1;
               --auth-font-sans: 'Inter', sans-serif;
           }
       </style>

   That component is also where a product puts its font <link>, so a typeface is
   fetched by the products that use it and by no others. See
   ClawdFleet/Site/Home/LoginStyleComponent.razor for a worked example.

   ── WHAT A PRODUCT MUST NOT DO ─────────────────────────────────────────────
   Restyle by selector. The class names here are structure and will change; the
   tokens are the contract. A product reaching past them into .auth-tab or
   .auth-card is a product whose sign-in page breaks the next time this file is
   tidied, in a way nobody sees until somebody cannot sign in.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
    The page is the whole page.

    MudMainContent reserves the app bar's height and its own horizontal padding,
    which on these pages left a band of the framework's background above and
    beside a surface painted in the product's own — the app bar is hidden here,
    so the space it was holding is space nothing is going to fill.

    :has() rather than a class on <body>: the layout is shared by ten products
    and none of them should have to remember to set one. Supported everywhere
    this runs, and where it is not the page simply keeps its old margins.
*/
.mud-main-content:has(.auth-page) {
    padding: 0 !important;

    /* Margin is NOT zeroed, and that is load-bearing: MudBlazor offsets the
       main content from an open drawer with margin-left (measured in its own
       stylesheet — .mud-drawer-open-* .mud-main-content). Anonymous visitors
       have no drawer, so `margin: 0` here changed nothing for them — which is
       who this rule was tested with. Signed-in visitors DO have the product's
       drawer on these pages, and zeroing the margin slid the whole content
       area underneath it: the email-confirmation banner and the page both
       started behind the menu. */
}

/* And the MudContainer inside it, which is where the 48px actually came from —
   a maxwidth-lg container with its own gutters. Measured rather than assumed:
   zeroing the main content alone left the page inset by exactly that much, and
   the first attempt at this fix was declared working on the strength of the
   rule existing rather than the box moving. */
.mud-container:has(> .auth-page) {
    max-width: none !important;
    padding: 0 !important;
}

.auth-page {
    /* Surfaces. Default: whatever MudBlazor is painting, so nothing moves. */
    --auth-bg: var(--mud-palette-background);
    --auth-surface: var(--mud-palette-surface);
    --auth-surface-2: var(--mud-palette-background-grey);
    --auth-border: var(--mud-palette-divider);

    /* Ink. */
    --auth-text: var(--mud-palette-text-primary);
    --auth-text-dim: var(--mud-palette-text-secondary);

    /* The one colour that says which tab you are on. */
    --auth-accent: var(--mud-palette-primary);

    /* Type. Inherits the app's faces unless a product names its own. */
    --auth-font-sans: inherit;
    --auth-font-mono: var(--mud-typography-body1-family, monospace);

    /* Shape. */
    --auth-radius: var(--mud-default-borderradius);

    /* A decorative wash behind the card. `none` by default, so a product that
       has one gets it and a product that does not is not given a gradient
       somebody has to explain. */
    --auth-glow: none;

    background: var(--auth-bg);
    background-image: var(--auth-glow);
    background-repeat: no-repeat;
    color: var(--auth-text);
    font-family: var(--auth-font-sans);

    /*
        ANCHORED TO THE TOP, NOT CENTRED — and that is the fix for a real fault
        rather than a preference.

        Centring made the page's whole position a function of the card's height,
        and the two tabs are different heights: sign-up carries a confirm field
        and five password rules, sign-in does not. Measured, the card was 554px
        against 374px, so switching tabs slid the product name, the tabs and the
        first field 39px up the screen — a page that jumps under the cursor at
        the moment somebody is deciding whether they trust it.

        Top-anchored, the header sits at the same y on both and only the card's
        bottom edge moves, which nobody is looking at.

        clamp so it is proportional on a tall screen and does not waste half a
        short one, and identical between the two tabs either way — which is the
        property that matters.
    */
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(2rem, 7vh, 5rem) 0 3rem;
}

/* ─── SIGN UP · SIGN IN ─────────────────────────────────────────────────────
   The two ways into every product on this platform. See
   SharedUI/Account/Shared/AuthTabs.razor for why they are two pages sharing a
   tab strip rather than two panes on one URL.

   Everything here is scoped under .auth-shell, which only the account pages
   render — nothing else on any product can pick these up by accident.

   EVERY account page must render a shell, not just sign-in. .auth-page above
   is a flex ROW that strips the framework's padding, so a shell-less page lays
   its heading and form out side by side, full-bleed, starting under the
   product's own nav drawer where it has one — which is exactly how the resend-
   confirmation page shipped. AuthTabs carries the shell for Login/Register,
   ManageLayout for the Manage pages, and every other page under AccountLayout
   wraps its own markup in one. A new account page starts with
   <div class="auth-shell"> for the same reason. */
/*
    The bridge: MudBlazor components paint from --mud-palette-*, so a token the
    page sets is invisible to a MudButton or a MudList until it is handed over.

    ON THE SHELL, NOT ON .auth-page — and that is load-bearing rather than
    arbitrary. The defaults above read --auth-accent FROM --mud-palette-primary;
    assigning the reverse on the same element is a custom-property cycle, which
    CSS resolves by making BOTH invalid, and the page renders with no colours at
    all. One level down the values are already inherited and resolved, so the
    handover is safe.

    Only the tokens are bridged. Everything else inside the card keeps the
    framework's own palette, because the alternative is this file quietly
    becoming a second theme for ten products.
*/
.auth-page .auth-shell {
  --mud-palette-primary: var(--auth-accent);
  --mud-palette-text-primary: var(--auth-text);
  --mud-palette-text-secondary: var(--auth-text-dim);
  --mud-palette-surface: var(--auth-surface);
  --mud-palette-divider: var(--auth-border);
  --mud-palette-lines-inputs: var(--auth-border);
}

.auth-shell {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Wider only when there is a second column to hold. Sign-in has nothing to put
   beside four fields, and a wide shell around a narrow form is worse than a
   narrow one. */
.auth-shell.is-wide { max-width: 62rem; }
.auth-shell.is-wide .login-header { max-width: none; }

/* Wider only where there is room for it. The card is a form and a form is
   easier to read narrow; the header above it can breathe. */
.auth-shell .login-header { max-width: 46rem; margin: 0 auto 1.75rem; }

.auth-card {
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius);
  background: var(--auth-surface);
  overflow: hidden;
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--auth-border);
}

/* Half each, so neither reads as the primary and the other as an afterthought.
   That symmetry is the point: which one you want depends on whether you have an
   account, which the page cannot know. */
.auth-tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--auth-text-dim);
  background: var(--auth-surface-2);
  border-bottom: 3px solid transparent;
  transition: background 120ms ease-out, color 120ms ease-out;
}

.auth-tab:hover {
  color: var(--auth-text);
  background: color-mix(in srgb, var(--auth-accent) 10%, transparent);
  text-decoration: none;
}

/* Coloured, raised out of the strip, and underlined in the brand's primary.
   Three signals rather than one, because a single one — colour alone — is the
   one a reader with low vision or a bad monitor does not get. */
.auth-tab.is-active {
  color: var(--auth-accent);
  background: var(--auth-surface);
  border-bottom-color: var(--auth-accent);
  font-weight: 600;
}

.auth-tab .mud-icon-root { font-size: 1.125rem; }

.auth-pane { padding: 1.5rem; }

/* The form keeps its comfortable measure and the rules take the rest. Not 50/50:
   a form column as wide as the prose beside it makes inputs that are harder to
   scan, and the rules are the thing being read rather than filled in.

   The breakpoint is on the container, not the viewport: below it the aside
   follows the form down the page, which is the right order to read them in and
   the reason the rules are not simply hidden on a phone. */
@media (min-width: 62rem) {
  .auth-pane.has-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }
}

/* Separated by a rule rather than a box, so the aside reads as part of the same
   card and not as a second thing competing with the form. */
@media (min-width: 62rem) {
  .auth-side {
    padding-left: 2rem;
    border-left: 1px solid var(--auth-border);
  }
}

@media (max-width: 61.99rem) {
  .auth-side {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--auth-border);
  }
}

/* The password box and its reveal, side by side. The button is a sibling rather
   than an overlay so it cannot sit on top of the browser's own password manager
   icon, which is the usual result of positioning one inside the field. */
.auth-password { display: flex; align-items: stretch; gap: 0.5rem; }
.auth-password .account-input { flex: 1 1 auto; }

.auth-reveal {
  flex: none;
  padding: 0 0.75rem;
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius);
  background: transparent;
  color: var(--auth-text-dim);
  font-size: 0.8125rem;
  cursor: pointer;
}
.auth-reveal:hover { background: color-mix(in srgb, var(--auth-accent) 10%, transparent); }

/* Below the fold of the form: the things a returning visitor occasionally needs
   and a new one never does. Small, and after the primary action rather than
   competing with it. */
.auth-minor {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--auth-border);
  font-size: 0.8125rem;
}
.auth-minor a { color: var(--auth-text-dim); }

/* The per-brand header above the tabs. Styled in SharedUI rather than in each
   brand's component, so eleven products cannot drift into eleven arrangements
   of the same three things. */
.login-header { margin-bottom: 1.75rem; }

.login-header__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.login-header__name { margin: 0; line-height: 1.1; }
.login-header__strap { color: var(--auth-text-dim); }

.login-header__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.875rem;
}

/* Icon beside the text rather than above it: three stacked icons read as a
   feature grid and take three times the height, on a page whose job is to get
   out of the way of a form. */
.login-header__point { display: flex; gap: 0.5rem; align-items: flex-start; }
.login-header__point b { display: block; font-size: 0.875rem; }
.login-header__point span {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--auth-text-dim);
}

/* MudBlazor capitalises button labels, so "Sign in" rendered "Sign In" directly
   under a tab reading "Sign in". Sentence case throughout: the tab, the button
   and the browser's own title now agree, which is the whole of the casing tidy
   promised with these tabs. */
/* !important, reluctantly and with the reason written down: MudBlazor sets
   text-transform on .mud-button-root from its own theme layer, which lands after
   this file whatever the link order, so a plain rule of equal or greater
   specificity still loses. The alternative is a Typography override in
   CommonThemeLayoutBase, which would change every button in ten products to fix
   the casing of two. */
.auth-page .mud-button-root { text-transform: none !important; }

/* Belt and braces on the read-only lists in the account panes. ReadOnly stops
   MudListItem responding, but a hover background that still lights up is the
   thing that made five password rules read as five buttons — the signal, not the
   behaviour, is what a reader goes on. */
.auth-side .mud-list-item,
.password-hints .mud-list-item {
  cursor: default;
  background-color: transparent !important;
}
.auth-side .mud-list-item:hover,
.password-hints .mud-list-item:hover {
  background-color: transparent !important;
}

/* Links inside them are still links, and have to look like it now that the row
   around them does not. */
.auth-side .mud-list-item a { text-decoration: underline; }