/* 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; }

/* above the title: the way to the other screen, or the way back */
.auth-top { margin: 0; text-align: center; font: 400 13px/18px var(--ko-font); color: var(--ko-text-subtle); }
/* above a title that stands at the left (the code screen: "Geen code ontvangen? Verstuur opnieuw") */
.auth-top-left { text-align: left; }
.auth-back { display: inline-flex; align-items: center; gap: var(--ko-space-1); align-self: center; font: 400 13px/18px var(--ko-font); }
.auth-back .ko-icon { flex: none; }
.auth-back-left { align-self: flex-start; }

/* the title in the middle; with a text (the code screen) at the left */
.auth-title { display: flex; flex-direction: column; align-items: center; gap: var(--ko-space-2); margin-bottom: var(--ko-space-2); text-align: center; }
.auth-title-left { align-items: flex-start; text-align: left; }
.auth-title .ko-prose { margin: 0; color: var(--ko-text-subtle); overflow-wrap: break-word; min-width: 0; }
/* what kind of code it is, as an icon in a tile (the icon stays 18px) */
.auth-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: var(--ko-space-2); border-radius: var(--ko-r-control); background: var(--ko-bg); box-shadow: var(--ko-ring); color: var(--ko-text-subtle); }

/* "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%; }

/* 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 { margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; cursor: pointer; }
.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; }
/* 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-top, .auth-title { text-align: left; }
    .auth-title { align-items: flex-start; }
    .auth-back { align-self: flex-start; }
    .auth-icon { display: none; }
    .auth-foot { display: none; }
}

/* ---- 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-code-box { height: 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: -13px -4px; }
}