/* Native login slice (#3025, interim). Small, self-contained sheet — reuses the shared design
   tokens from btj.css so the login page matches the rest of the native chrome. Deleted with the
   slice when the real auth slice arrives. */

/* ALREADY INSIDE THE COLUMN. main.page is itself --page-max with an --sp-4 gutter, so
   this block re-applying both put the sheet one whole gutter right of the search band
   and of the media tabs. It contributes vertical rhythm and a readable measure only;
   the left edge is the page's, which is the band's (#3140). */
.auth-page {
    margin: var(--sp-6) 0;
}

/* The sheet stays 26rem — a login form wider than that is unreadable — but the cap is
   on the children, so the block itself keeps the column's left edge. */
.auth-page > * {
    max-width: 26rem;
}

.auth-page h1 {
    font-size: var(--fs-xl);
    margin: 0 0 var(--sp-4);
}

.auth-info {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3);
    background: var(--c-badge-bg);
    border-radius: 0;
    font-size: var(--fs-sm);
}

.auth-form {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 0;
    box-shadow: var(--shadow);
}

.auth-error {
    margin: 0;
    color: var(--c-danger);
    font-size: var(--fs-sm);
}

.auth-field {
    display: grid;
    gap: var(--sp-1);
}

.auth-field label {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.auth-field input {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: 0;
    font-size: var(--fs-base);
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
}

.auth-submit {
    justify-self: start;
    padding: var(--sp-2) var(--sp-5);
    border: 0;
    border-radius: var(--radius);
    background: var(--c-accent);
    color: #fff;
    font-size: var(--fs-base);
    cursor: pointer;
}

.auth-submit:hover { background: var(--c-accent-dark); }
.auth-submit:disabled { opacity: 0.6; cursor: default; }

.auth-links {
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
}

.auth-links a { color: var(--c-link); }

/* ---------------------------------------------------------------------------
   Account lifecycle (#3240): /registrera and /glomt-losenord.

   They share this sheet with /logga-in because they are the same surface — one
   anonymous, boxed form on the shop's own grey — and every rule above already
   describes it. What signup needs on top is width: it is twenty-three fields in
   three fieldsets, and the 26rem cap that makes a login form readable turns that
   into a column half a screen tall.
   --------------------------------------------------------------------------- */

/* Opt out of the 26rem child cap. Deliberately a modifier on the page rather than
   a wider default: the cap is right for every other form this sheet draws, and a
   sheet whose default is "as wide as it likes" would have to re-narrow two pages. */
.auth-page-wide > * {
    max-width: none;
}

/* Two columns from ~46rem, one below it. The number is read off the CONTENT, the
   rule this codebase keeps arriving at (#3149, #3153): a label plus a comfortable
   input is ~21rem, so two of them plus the grid gap need ~44rem and the form's own
   padding takes the rest. There is no viewport width in it — the form is inside
   the page column, and on a phone one field per row is the only honest layout. */
.signup-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
}

@media (min-width: 46rem) {
    .signup-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A field sits at the TOP of its grid cell at its natural height. Without this the
   outer grid stretches each .auth-field to the row height and the field's own rows
   stretch with it — so a box whose neighbour carries a hint ("XXX XX", the password
   rule) is drawn TALLER than the box beside it, and the two are the same control.
   Only the cells with a hint are shorter, so the inconsistency looks arbitrary. */
.signup-grid > .auth-field {
    align-content: start;
}

.signup-form fieldset {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3);
    border: 1px solid var(--c-border);
}

.signup-form legend {
    padding: 0 var(--sp-2);
    font-weight: 600;
    font-size: var(--fs-sm);
}

/* The required marker. aria-hidden on the span, because "required" is said to a
   screen reader by the input's own attribute — a bare "*" read aloud is noise. */
.auth-required {
    margin-left: 0.15em;
    color: var(--c-danger);
}

/* Legacy's ToolTip text, rendered as a visible hint instead. A tooltip is a
   mouse-only affordance (the same argument #3198 made about the number stepper),
   and these two sentences are the password and username RULES — a caller who
   cannot see them finds out by being refused. */
.auth-hint {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.auth-field-error {
    margin: 0;
    color: var(--c-danger);
    font-size: var(--fs-xs);
}

/* Legacy's PasswordReminderText — a warning about what the re-render dropped,
   not an error about what the caller typed, so it is not --c-danger. */
.auth-warning {
    margin: 0 0 var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-badge-bg);
    font-size: var(--fs-sm);
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    font-size: var(--fs-sm);
}

/* Legacy greys the invoice labels (CssClass += " Disabled") when the box is
   ticked. signup.js sets this on the block; the fields are also disabled, so the
   dimming is a look and the inertness is real — the pair #3140's advanced panel
   settled (a dimmed field that is still focusable is a trap). */
.signup-invoice-disabled {
    opacity: 0.55;
}

/* The success panel's way back to the login form. A link that acts as the one
   forward affordance, so it is drawn as the page's button rather than as prose. */
.auth-link-btn {
    display: inline-block;
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--radius);
    background: var(--c-accent);
    color: #fff;
    text-decoration: none;
}

.auth-link-btn:hover { background: var(--c-accent-dark); }

/* The signup intro (application_texts 48) — an editor-authored body rendered through the shared
   _EditorialHtml partial. Deliberately a short list: kundservice.css carries ~40 rules for the
   legacy CMS markup its own bodies use, and this body is three paragraphs. It gets the shape rules
   an authored text always needs and nothing scoped to another page's content. */
.auth-page .editorial-html {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-sm);
    line-height: 1.5;
    overflow-wrap: break-word;
}

.auth-page .editorial-html p { margin: 0 0 var(--sp-2); }
.auth-page .editorial-html a { color: var(--c-link); }
.auth-page .editorial-html img { max-width: 100%; height: auto; }