/* ko-login.css — the page around the login, code, password and register screens (template/auth/shell.php, drs#1236).
 *
 * The components are ko-ui's (ko-ui.css: fields, buttons, alert, links, list rows); this file only places them on
 * the page, the way these screens were always laid out. Tokens only, no colours or sizes of its own. Loaded after
 * ko-ui.css.
 *
 * The page has the tint of the portal (--ko-bg-subtle) and the form stands straight on it, without a card, 420px wide.
 * Desktop: the logo top left, the form in the middle, the footer at the bottom.
 * Phone: the form at the BOTTOM of the screen with its button lowest, within reach of the thumb, and no footer.
 * When the keyboard opens the page shrinks to what is still visible (ko-login.js on iOS, the browser itself on
 * Android), so the button stays above the keyboard. Every screen does this; only a form that is taller than the
 * screen starts at the top by itself and scrolls.
 */

/* ---- the page (mobile.md: baseline for a customer-facing page) -------------------------------------------------
   As high as the screen, scrolling inside .auth-main: pulling down does not drag the whole page along. */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
html, body { margin: 0; padding: 0; background: var(--ko-bg-subtle); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.auth-page, .auth-page *, .auth-page *::before, .auth-page *::after { box-sizing: border-box; }

.auth-page {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* under the notch and beside it (landscape): the content stays clear, the tint runs to the edge */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* What you press does not select its text, waits for no double tap and has no callout of its own; text stays copyable. */
.auth-page a, .auth-page button { touch-action: manipulation; }
.auth-page button, .auth-page .ko-link, .auth-logo { user-select: none; -webkit-user-select: none; }
.auth-page button { -webkit-touch-callout: none; }

.auth-head { flex: none; padding: var(--ko-space-5) var(--ko-space-5) 0; }
.auth-logo { display: inline-block; border-radius: var(--ko-r-item); }
.auth-logo img { display: block; width: 160px; height: auto; }
.auth-logo:active { opacity: 0.7; }
.auth-logo:focus-visible { outline: 2px solid transparent; box-shadow: var(--ko-focus-ring); }

.auth-main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--ko-space-6) var(--ko-space-4);
}
/* An auto margin and not justify-content: it puts a short form in the middle (desktop) or at the bottom (phone), and
   collapses to nothing when the form is taller than the screen, so its top stays reachable and the page scrolls. */
.auth-content { width: 100%; max-width: 420px; flex: none; margin: auto 0; }
.auth-content-wide { max-width: 480px; } /* a step with fields side by side */

/* ---- one screen: its parts 16px apart, the button last -------------------------------------------------------- */
.auth-form { display: flex; flex-direction: column; gap: var(--ko-space-4); margin: 0; }
.auth-form [hidden] { display: none; }
/* a tick box between the parts of the form is as high as its text: the room around it is the form's gap, like
   everything else here (ko-ui gives it its 44px to tap on a touch screen without making the line taller) */
.auth-form > .ko-choice { min-height: 0; }

/* Every screen starts at the left edge of its form, on every width: the line above the title (the way to the other
   screen, or the way back), the title and its text. Until 9 Oct 2026 a screen with only a title (logging in,
   "Wachtwoord vergeten") was centred on a wide screen and the others stood left; now they all read the same way.
   No screen has an icon above its title (only the code screen had one). */
.auth-top { margin: 0; font: 400 13px/18px var(--ko-font); color: var(--ko-text-subtle); }
.auth-back { display: inline-flex; align-items: center; gap: var(--ko-space-1); align-self: flex-start; font: 400 13px/18px var(--ko-font); }
.auth-back .ko-icon { flex: none; }

.auth-title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ko-space-2); margin-bottom: var(--ko-space-2); }
.auth-title .ko-prose { margin: 0; color: var(--ko-text-subtle); overflow-wrap: break-word; min-width: 0; }

/* "Wachtwoord vergeten?" at the end of the label line of its field */
.auth-form .ko-field-row { align-items: baseline; }
.auth-form .ko-field-row .ko-link { flex: none; font: 400 13px/16px var(--ko-font); }

/* The (i) with the password rules at the end of the label line: a 32px button that does not make the line taller.
   Its popover opens upwards, so it never drops under the keyboard or the edge of a phone, and is one column wide. */
.auth-rules { display: inline-flex; align-items: center; align-self: center; height: 16px; margin-right: -7px; } /* the line stays 16px; the icon ends where the field ends */
.auth-rules > .ko-btn { flex: none; color: var(--ko-text-subtle); }
.auth-rules > .ko-popover { top: auto; bottom: calc(100% + var(--ko-space-2)); width: 260px; transform-origin: bottom right; }
.auth-rules .ko-label { margin: 0 0 var(--ko-space-2); }
.auth-rules .ko-pw-rules { grid-template-columns: minmax(0, 1fr); }

/* the one button of the screen takes the width of the form */
.auth-submit { width: 100%; }

/* drs#1676: "Ga door met Google" above the fields (login and register alike), a secondary button as wide and as high
   as the fields (on a touch screen too: --auth-tap below) with Google's own mark (GoogleSignIn::mark), then "of"
   between two lines. Above the fields and not under the button: on a phone the orange button stays the last thing on
   the screen. Only drawn when GoogleSignIn::enabled(). */
.auth-google { width: 100%; height: var(--ko-h-control); }
.auth-google-mark { display: block; flex: none; width: 18px; height: 18px; }
.auth-or { display: flex; align-items: center; gap: var(--ko-space-3); margin: 0; font: 400 13px/18px var(--ko-font); color: var(--ko-text-subtle); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--ko-line-soft); }

/* a line with something else this screen can do ("Geen code ontvangen? Verstuur opnieuw") */
.auth-more { margin: 0; font: 400 13px/18px var(--ko-font); color: var(--ko-text-subtle); }
.auth-action { position: relative; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; cursor: pointer; }
.auth-action[aria-disabled="true"] { opacity: 0.5; cursor: progress; }
/* A link in a sentence that sends something ("Geen code ontvangen? Verstuur opnieuw"): while it is on its way the
   WHOLE sentence makes room for one line that says what is happening, with the spinner in front (ko-login.js) —
   never a spinner between the words. The sentence stays where it is, only out of sight, and the line lies over it:
   same place, same height, nothing on the screen moves. */
[data-auth-sending] { position: relative; visibility: hidden; }
.auth-sending { visibility: visible; position: absolute; top: 0; left: 0; right: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-sending > .ko-spinner { display: inline-block; width: 12px; height: 12px; margin-right: var(--ko-space-2); vertical-align: -2px; }
.auth-legal { margin: 0; font: 400 13px/18px var(--ko-font); color: var(--ko-text-subtle); }
/* our own pressables answer the finger at once (ko-ui does this for its buttons and rows) */
.auth-page .ko-link:active { text-decoration-color: currentColor; }

/* The code: six boxes over the width of the form, as it always looked, with ONE input lying over them. Each digit
   lands in the middle of its box because the letter spacing is a box plus a gap (Geist Mono: every digit is 1ch).
   The input is one box wider than the row and clipped, so the cursor after the sixth digit does not shift the text. */
.auth-code-box { --gap: var(--ko-space-2); --cell: calc((100cqw - 5 * var(--gap)) / 6); position: relative; container-type: inline-size; height: var(--ko-h-row-store); }
.auth-code-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.auth-code-cells i { border-radius: var(--ko-r-control); background: var(--ko-bg); box-shadow: inset 0 0 0 1px var(--ko-line-strong); }
/* clip, not hidden: after the sixth digit the cursor stands just past the last box, and a box with overflow hidden
   is still scrolled by the browser to show the cursor (all digits then jump half a box to the left). overflow: clip
   cannot scroll. The first line is for a browser that does not know clip; ko-login.js holds that one still. */
.auth-code-clip { position: absolute; inset: 0; z-index: 1; overflow: hidden; overflow: clip; }
.auth-code .ko-input {
    width: calc(100cqw + var(--cell) + var(--gap));
    height: 100%;
    padding: 0 0 0 calc((var(--cell) - 1ch) / 2);
    border-radius: 0;
    background: none;
    box-shadow: none;
    font: 500 20px/1 var(--ko-font-mono);
    letter-spacing: calc(var(--cell) + var(--gap) - 1ch);
    caret-color: var(--ko-accent);
}
.auth-code .ko-input:focus, .auth-code .ko-input:focus-visible { outline: 2px solid transparent; box-shadow: none; }
/* the box you are typing in has the focus ring; a refused code turns the boxes red (and the text under them says why) */
.auth-code-cells i.is-active { box-shadow: inset 0 0 0 1px var(--ko-accent), 0 0 0 3px var(--ko-accent-soft); }
.auth-code-box:has(input[aria-invalid="true"]) .auth-code-cells i { box-shadow: inset 0 0 0 1px var(--ko-danger-solid); }

/* two fields side by side where there is room for them; the form asks its own width, not the screen */
.auth-fields { display: flex; flex-direction: column; gap: var(--ko-space-4); }
.auth-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ko-space-4) var(--ko-space-3); align-items: start; }
/* the mobile number: the country code as wide as its text, the number takes the rest; they stay next to each other
   on a phone too */
.auth-phone-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ko-space-2); }
.auth-phone-row .ko-select { width: auto; }
/* postcode · house number · addition: the last one wide enough for its label on one line */
.auth-row-address { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) minmax(0, 7fr); }
@container (width <= 340px) {
    .auth-row { grid-template-columns: minmax(0, 1fr); }
    .auth-row-address { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .auth-row-address > :first-child { grid-column: 1 / -1; }
}

/* the addresses found, as rows in the page under the search field (not a floating list) */
.auth-suggest { margin: 0; padding: var(--ko-space-1); border-radius: var(--ko-r-card); background: var(--ko-bg); box-shadow: var(--ko-ring); }
.auth-suggest > li { margin: 0; padding: 0; }
.auth-suggest .ko-row { cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.auth-suggest .ko-row.is-active { background: var(--ko-bg-hover); } /* the row the arrow keys are on */
.auth-suggest .ko-row > span { min-width: 0; overflow-wrap: anywhere; }
.auth-suggest-credit { margin: 0; padding: var(--ko-space-1) var(--ko-space-2); font: 400 12px/16px var(--ko-font); color: var(--ko-text-subtle); }
/* the check mark in the search field, only once an address is chosen */
.ko-input-wrap > .auth-chosen { display: none; color: var(--ko-success-text); }
.ko-input-wrap.is-chosen > .auth-chosen { display: inline-flex; }

/* a field for robots: off the page, out of the tab order (the view sets tabindex and aria-hidden) */
.auth-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.auth-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ko-space-2) var(--ko-space-3); padding: var(--ko-space-4) var(--ko-space-5); font: 400 13px/18px var(--ko-font); color: var(--ko-text-subtle); }

/* ---- a phone: the form at the bottom, the button lowest, no footer ----------------------------------------------- */
@media (max-width: 640px) {
    .auth-head { padding: var(--ko-space-4) var(--ko-space-4) 0; }
    .auth-main { padding: var(--ko-space-4); }
    /* at the bottom, within reach of the thumb: every screen, also the address step (until 9 Oct 2026 that one
       started at the top; known and accepted: the search field moves up when the addresses found appear under it) */
    .auth-content { margin: auto 0 0; }
    .auth-foot { display: none; }

    /* Searching for an address: while the search field has the focus the step stands at the TOP, with the field as
       its first line. The keyboard then leaves room for all five addresses found (with the title above it only
       three and a half were in view), and nothing moves when they appear: at the bottom the field jumped up by the
       height of the list. The title is still there for a screen reader, only out of sight. One change of place,
       at the moment someone taps the field and the keyboard comes up anyway; it goes back when the field is left. */
    .auth-content:has(#f-address-search:focus) { margin: 0 0 auto; }
    .auth-content:has(#f-address-search:focus) .auth-title { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---- a touch screen ------------------------------------------------------------------------------------------------
   These screens are one form you work with your thumb, so here the fields, the code boxes and the button of the
   screen are all the same thumb-sized height (48px, as these screens always had), and the button's label is as large
   as what you type. Elsewhere ko-ui's controls stay 32px. The small links get 44px to hit without looking bigger. */
@media (pointer: coarse) {
    .auth-form { --auth-tap: calc(var(--ko-h-row-store) + var(--ko-space-1)); }
    .auth-form .ko-input, .auth-form .ko-select, .auth-submit, .auth-google, .auth-code-box { height: var(--auth-tap); }
    /* what stands at the end of a field (show password, the check of a chosen address) follows that height (ko-ui) */
    .auth-form .ko-input-wrap { --ko-h-control: var(--auth-tap); }
    .auth-submit { font: 500 16px/20px var(--ko-font); }
    .auth-action, .auth-top .ko-link, .auth-more .ko-link, .auth-back, .auth-form .ko-field-row .ko-link { position: relative; }
    .auth-action::after, .auth-top .ko-link::after, .auth-more .ko-link::after, .auth-back::after, .auth-form .ko-field-row .ko-link::after { content: ""; position: absolute; inset: -14px -4px; } /* 16px of text + 28 = 44 */
    /* the (i) with the password rules stands alone at the end of its line: 44px wide to hit too (ko-ui gives an
       icon button 44px of height only, because they usually have neighbours) */
    .auth-rules > .ko-btn-icon::after { left: 50%; width: var(--ko-h-row-store); transform: translate(-50%, -50%); }
    /* the links in the line of the tick box for the terms: taller to hit, not wider (their neighbours are words) */
    .auth-legal .ko-link, .ko-choice .ko-link, .auth-form .ko-alert .ko-link, .auth-form .ko-field-error .ko-link { position: relative; }
    .auth-legal .ko-link::after, .ko-choice .ko-link::after, .auth-form .ko-alert .ko-link::after, .auth-form .ko-field-error .ko-link::after { content: ""; position: absolute; inset: -14px 0; }
}

/* "neem contact met ons op" in the red line under a field (AuthForm::contact): part of that sentence, so in its
   colour, and underlined so it is still seen to be a link */
.auth-form .ko-field-error .ko-link { color: inherit; text-decoration-color: currentColor; }

/* ---- a low screen (a phone on its side) ----------------------------------------------------------------------------
   Normally the logo and the footer stay in view and the form scrolls between them. On a phone on its side that left
   room for one field: the logo row and the footer row took the rest, and the button was out of sight. So on a low
   screen the whole page scrolls instead: the logo goes up with the form, the footer is left out, and the form is as
   tall as it is. Asked of the height that is there, not of the device (a low browser window gets the same). */
@media (max-height: 540px) {
    .auth-page { overflow-y: auto; overscroll-behavior: contain; }
    .auth-main { flex: 1 0 auto; overflow: visible; }
    .auth-foot { display: none; }
}

/* ---- motion (ko-ui motion.md) -----------------------------------------------------------------------------------
   Decided for these screens on 29 Sep 2026 (73c7a91): the server answers so fast that the next screen is there "all
   at once". Gate: a login or a registration is something you do now and then, never hundreds of times a day.
   Purpose: preventing a jarring change. So a screen comes in over 220ms, and what appears later on a screen that is
   already there (the error under a field, the fields of a company, the line under the address search) over 180ms.
   Opacity and transform only, ko-ui's ease-out, under 300ms. Nothing leaves with motion: the next page does that.
   The addresses found only fade, and only when the list appears: results while typing are instant (motion.md).
   With "reduce motion" the fade stays and the movement goes. */
.auth-content { animation: auth-enter 220ms var(--ko-ease-out); }
@keyframes auth-enter { from { opacity: 0; transform: translateY(6px); } }
@keyframes auth-fade { from { opacity: 0; } }

.auth-form .ko-field-error, .auth-fields { transition: opacity 180ms var(--ko-ease-out), transform 180ms var(--ko-ease-out); }
.auth-suggest, #auth-address-status { transition: opacity 180ms var(--ko-ease-out); }
#auth-address-status:empty { opacity: 0; transition: none; }
@starting-style {
    .auth-form .ko-field-error, .auth-fields { opacity: 0; transform: translateY(-2px); }
    .auth-suggest { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-content { animation-name: auth-fade; }
    @starting-style {
        .auth-form .ko-field-error, .auth-fields { transform: none; }
    }
}

/* ---- a wide screen in the portal: the form beside Mijn KeurigOnline as a skeleton --------------------------------
   Decided 19 Oct 2026 with the prototype /stijlgids/inloggen (Pablo). Only the portal (shell.php puts .is-split on
   the page and the panel next to the form; the office login has neither) and only from 960px. Below that nothing
   here applies: .auth-shell is display: contents (the form is a child of .auth-main as before) and the panel is not
   shown, so a phone and a narrow window are exactly as they were.
   The page keeps its tint (#F8FCF6); in the middle one white shape, the form left, the panel right. The form stands
   in the middle of its column with the button straight under the fields; "Nog geen account? Registreren" / "Al een
   account? Inloggen" go under the button (on a phone that line stays above the title: a phone decision). The panel
   (AuthAside) invents nothing: a skeleton with the real menu, the real subject of the mail the screen sends, and
   what is being typed. */
.auth-shell { display: contents; }
.auth-aside { display: none; }
@media (min-width: 960px) {
    .auth-page.is-split .auth-head { text-align: center; padding: var(--ko-space-6) var(--ko-space-5) 0; }
    .auth-page.is-split .auth-main { padding: var(--ko-space-6) var(--ko-space-5); }
    /* two halves, 600 high; outside 16, the panel 12 with 4 between (nested corners) */
    .auth-page.is-split .auth-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; max-width: 1040px; min-height: 600px; margin: auto 0; padding: 4px; background: var(--ko-bg); border-radius: 16px; box-shadow: var(--ko-ring); }
    .auth-page.is-split .auth-shell > .auth-content { align-self: center; justify-self: center; width: 100%; max-width: 400px; margin: 0; padding: var(--ko-space-6) 0; }
    .auth-page.is-split .auth-shell > .auth-content-wide { max-width: 440px; }
    /* visually under the button; the order in the page is unchanged (the phone needs it first) */
    .auth-page.is-split .auth-form > .auth-top { order: 1; text-align: center; }

    /* the panel: a background image (the page tint, three faint colour fields from ko-ui, a fine grain); decoration */
    .auth-page.is-split .auth-aside { display: block; position: relative; min-width: 0; overflow: hidden; border-radius: var(--ko-r-card); box-shadow: inset 0 0 0 1px var(--ko-line-soft);
        background:
            radial-gradient(60% 50% at 8% 0%, color-mix(in srgb, var(--ko-brand) 16%, transparent), transparent 72%),
            radial-gradient(55% 55% at 100% 100%, color-mix(in srgb, var(--ko-accent) 13%, transparent), transparent 70%),
            radial-gradient(40% 35% at 96% 6%, color-mix(in srgb, var(--ko-success) 11%, transparent), transparent 70%),
            var(--ko-bg-subtle); }
    .auth-aside::before { content: ""; position: absolute; inset: 0; opacity: 0.22; mix-blend-mode: multiply; pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.38 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

    /* Mijn KeurigOnline as a skeleton, as the portal is: NavShell's sidebar on the tint with the logo in its head (no
       top bar), the page white beside it. Laid out at the portal's own sizes (ko-shell.css: 264px sidebar, 32px rows,
       14/20 text) and scaled down as one picture, so it keeps the portal's proportions; it starts top left in the panel
       and runs off its right edge. Nothing in it moves. */
    .auth-app { --auth-app-scale: 0.68; position: absolute; z-index: 1; top: 40px; left: 40px; width: 1040px; height: calc((100% - 80px) / var(--auth-app-scale)); display: grid; grid-template-columns: 264px minmax(0, 1fr); overflow: hidden; border-radius: 16px; background: var(--ko-bg); box-shadow: var(--ko-ring), var(--ko-shadow-pop); transform: scale(var(--auth-app-scale)); transform-origin: 0 0; }
    .auth-sb { display: flex; flex-direction: column; gap: var(--ko-space-5); min-height: 0; padding: 12px 12px 16px; overflow: hidden; background: var(--ko-bg-subtle); border-right: 1px solid var(--ko-line-soft); font: 400 14px/20px var(--ko-font); color: var(--ko-text); }
    .auth-sb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ko-space-2); min-height: 40px; padding: 0 0 0 8px; }
    .auth-sb-head img { display: block; width: auto; height: 24px; }
    .auth-sb-toggle { display: grid; place-items: center; width: var(--ko-h-control); height: var(--ko-h-control); color: var(--ko-text-subtle); }
    .auth-sb-search { display: flex; align-items: center; gap: var(--ko-space-2); height: var(--ko-h-control); margin-top: calc(var(--ko-space-3) - var(--ko-space-5)); padding: 0 6px 0 10px; border-radius: var(--ko-r-control); background: var(--ko-bg); box-shadow: var(--ko-ring); color: var(--ko-text-subtle); }
    .auth-sb-group { display: flex; flex-direction: column; gap: 2px; }
    /* a row of the menu as a skeleton: the icon's spot (18px) and a line about as long as the name */
    .auth-sb-item { display: flex; align-items: center; gap: 10px; min-height: var(--ko-h-control); padding: 6px 8px; border-radius: var(--ko-r-control); }
    .auth-sb-item.is-current { background: var(--ko-bg); box-shadow: var(--ko-ring); }
    .auth-sb-icon { display: block; flex: none; width: 18px; height: 18px; border-radius: 5px; background: var(--ko-line); }
    .auth-sb-search .auth-sb-icon { width: 16px; height: 16px; border-radius: 50%; }
    .auth-sb-item .auth-line, .auth-sb-search .auth-line { flex: none; }
    .auth-line.is-short { width: 64px; }
    .auth-line.is-mid { width: 88px; }
    .auth-line.is-long { width: 120px; }
    .auth-line.is-heading { width: 48px; height: 6px; margin: 7px 8px 11px; background: var(--ko-line-soft); } /* where .ko-list-heading is: 16 + 4 */
    .auth-sb-foot { display: flex; flex-direction: column; gap: var(--ko-space-3); margin-top: auto; }
    .auth-sb-account { display: flex; align-items: center; gap: 10px; min-height: var(--ko-h-row-store); padding: 6px 8px; }
    .auth-sb-account > .ko-icon { flex: none; color: var(--ko-text-subtle); }
    .auth-sb-account-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
    .auth-sb-account-text b, .auth-sb-account-text span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .auth-sb-account-text b { font-weight: 500; }
    .auth-sb-account-text span { color: var(--ko-text-subtle); font: 400 12px/16px var(--ko-font); }
    .auth-app-page { display: flex; flex-direction: column; gap: var(--ko-space-3); min-width: 0; padding: 48px 46px; }
    .auth-app-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ko-space-4); margin-top: var(--ko-space-6); }
    .auth-app-card { display: grid; gap: var(--ko-space-3); padding: var(--ko-space-4); border-radius: var(--ko-r-card); box-shadow: var(--ko-ring); }
    .auth-app-card.is-wide { grid-column: 1 / -1; min-height: 220px; align-content: start; }
    /* no name yet: the person icon on grey instead of initials on a tint (a tint is picked from the name) */
    .auth-avatar-empty { background: var(--ko-bg-hover); color: var(--ko-text-subtle); }

    /* a still grey line: something that is not there (yet); not ko-skeleton, that shimmers and nothing loads here */
    .auth-line { display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--ko-line); }
    .auth-line.is-s { width: 40%; }
    .auth-line.is-m { width: 64%; }
    .auth-line.is-title { width: 28%; height: 16px; border-radius: 6px; }
    .auth-line.is-value { width: 48%; height: 16px; border-radius: 6px; }
    .auth-sb-account-text .auth-line { height: 8px; margin: 6px 0; }
    .auth-sb-account-text .auth-line.is-s { margin: 4px 0; }

    /* the card over the skeleton, at its true size: the mail or sms this screen sends, or the account being made */
    .auth-float { position: absolute; z-index: 2; top: 150px; right: 24px; width: 304px; display: grid; gap: var(--ko-space-3); padding: var(--ko-space-4); border-radius: var(--ko-r-card); background: var(--ko-bg); box-shadow: var(--ko-shadow-pop); }
    .auth-float-head { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--ko-space-3); }
    .auth-float-head > div { display: grid; gap: 2px; min-width: 0; }
    .auth-tile { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ko-r-item); background: var(--ko-bg-hover); color: var(--ko-text-subtle); }
    .auth-float-head b { font: 500 14px/20px var(--ko-font); }
    .auth-float-head span { font: 400 13px/18px var(--ko-font); color: var(--ko-text-subtle); }
    .auth-float-head small { font: 400 12px/16px var(--ko-font); color: var(--ko-text-subtle); }
    .auth-account-head { display: flex; align-items: center; gap: var(--ko-space-3); min-width: 0; }
    .auth-account-head > div { display: grid; gap: 6px; flex: 1; min-width: 0; }
    .auth-account-head strong { display: block; font: 600 16px/20px var(--ko-font); overflow-wrap: anywhere; }
    .auth-account-head [data-auth-aside="email"] { display: block; font: 400 13px/18px var(--ko-font); color: var(--ko-text-subtle); overflow-wrap: anywhere; }
    .auth-account-dl { display: grid; margin: 0; }
    .auth-account-dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--ko-space-3); min-height: 40px; border-top: 1px solid var(--ko-line-soft); font: 400 14px/20px var(--ko-font); }
    .auth-account-dl dt { color: var(--ko-text-subtle); }
    .auth-account-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
    .auth-account-dl .auth-line { width: 70%; }
}