/*
 * E-mail instellen (new design) — page layout only, on the same shell as betalen (betalen.css) and the verhuisservice
 * (vs-app.css): one 680px column, logo + app badge, form card with the action bottom right, help under the card,
 * quiet footer. Every component comes from ko-ui.css. Tokens only. Designed in /prototypes/email-instellen.
 */
html {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}
html, body {
    margin: 0;
    background: var(--ko-bg-subtle);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box; }
input, textarea, select { font-size: 16px; }
button, a, [role="button"] { touch-action: manipulation; }

/* One column, the same width as betalen and the verhuisservice */
.ea-shell {
    max-width: 680px;
    min-height: 100svh;
    margin: 0 auto;
    padding:
        calc(var(--ko-space-5) + env(safe-area-inset-top, 0px))
        calc(var(--ko-space-4) + env(safe-area-inset-right, 0px))
        calc(var(--ko-space-6) + env(safe-area-inset-bottom, 0px))
        calc(var(--ko-space-4) + env(safe-area-inset-left, 0px));
    display: flex;
    flex-direction: column;
}

.ea-top { display: flex; align-items: center; justify-content: space-between; gap: var(--ko-space-3); margin-bottom: 58px; }
@media (max-width: 479.98px) { .ea-top { margin-bottom: var(--ko-space-6); } }
.ea-logo { display: inline-flex; min-height: 24px; border-radius: var(--ko-r-item); }
.ea-logo img { display: block; height: 28px; width: auto; }
.ea-logo:focus-visible { outline: 2px solid transparent; box-shadow: var(--ko-focus-ring); }
.ea-main { flex: 1; outline: 2px solid transparent; }

.ea-footer { margin-top: var(--ko-space-6); color: var(--ko-text-subtle); }
/* Phone: no footer. It costs a screen's worth of scrolling past every step for a copyright line; help stays one tap
   away through the Help Scout button (Beacon) in the corner. */
@media (max-width: 560px) { .ea-footer { display: none; } }
.ea-footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ko-space-2); }
/* "Hulp nodig?" and the links in the help note read as text but are buttons (they open the chat or a dialog). */
.ea-footer-link,
.ea-inline-link {
    min-height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color 150ms ease, text-decoration-color 150ms ease;
}
.ea-inline-link { min-height: 0; color: var(--ko-accent); text-decoration-color: currentColor; }
.ea-footer-link:active,
.ea-inline-link:active { color: var(--ko-text); }
.ea-footer-link:focus-visible,
.ea-inline-link:focus-visible { outline: 2px solid transparent; border-radius: 2px; box-shadow: var(--ko-focus-ring); }
@media (hover: hover) and (pointer: fine) {
    .ea-footer-link:hover { color: var(--ko-text); text-decoration-color: currentColor; }
    .ea-inline-link:hover { color: var(--ko-text); }
}
/* A text link inside a sentence still gets a 24px hit area on touch, without moving the line. */
@media (pointer: coarse) {
    .ea-inline-link { position: relative; }
    .ea-inline-link::after { content: ""; position: absolute; inset: -6px 0; }
}

/* Screens: page head, then the cards, 16px apart (as betalen) */
.stack { display: flex; flex-direction: column; gap: var(--ko-space-4); }
.stack > .ko-page-head { margin: 0 0 var(--ko-space-1); }
.ko-page-head-text p { margin: 4px 0 0; }
.ko-title-page { text-wrap: balance; }
.addr { overflow-wrap: break-word; color: var(--ko-text); font-weight: 500; }

/* ---------------------------------------------------------------------------------------------
 * App bar (every screen after the address): back · title + one line · Gegevens, the progress as a line along the
 * bottom edge. Desktop: part of the page. Phone: sticky at the top, full bleed, the logo header goes (it would cost
 * a third of the first screen on every step).
 * ------------------------------------------------------------------------------------------- */
.app-bar { position: relative; display: flex; align-items: center; gap: var(--ko-space-2); padding-bottom: var(--ko-space-3); margin-bottom: var(--ko-space-1); border-bottom: 1px solid var(--ko-line-soft); }
.app-bar-back { flex: none; margin-left: -8px; }
.app-bar-text { flex: 1; min-width: 0; }
.app-bar-text .ko-title-page { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-bar-sub { margin: 2px 0 0; color: var(--ko-text-subtle); font: 400 14px/20px var(--ko-font); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-bar-action { flex: none; }
.app-bar-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 0; }

@media (max-width: 560px) {
    .has-app-bar .ea-top { display: none; }
    .has-app-bar .ea-shell { padding-top: 0; }
    .app-bar {
        position: sticky;
        top: 0;
        z-index: 20;
        min-height: calc(56px + env(safe-area-inset-top, 0px));
        margin: 0 calc(-1 * (var(--ko-space-4) + env(safe-area-inset-right, 0px))) var(--ko-space-1) calc(-1 * (var(--ko-space-4) + env(safe-area-inset-left, 0px)));
        padding: calc(6px + env(safe-area-inset-top, 0px)) calc(var(--ko-space-2) + env(safe-area-inset-right, 0px)) 6px calc(var(--ko-space-2) + env(safe-area-inset-left, 0px));
        background: var(--ko-bg);
    }
    .app-bar-back { margin-left: 0; }
    .app-bar-text .ko-title-page { font: 600 16px/20px var(--ko-font); letter-spacing: -0.01em; }
    .app-bar-sub { font: 400 12px/16px var(--ko-font); }
}

/* Server details (sheet / drawer) */
.details-intro { margin: 0 0 var(--ko-space-2); color: var(--ko-text-subtle); font: 400 14px/22px var(--ko-font); text-wrap: pretty; }
#details-dlg .ko-drawer-body { padding-top: var(--ko-space-4); }

/* ---------------------------------------------------------------------------------------------
 * The steps: one horizontal scroll-snap track (mobile.md: native scroll-snap beats a hand-rolled gesture and needs no
 * touch-action). One step per snap; scroll-snap-stop so a fast flick never skips a step. The scrollbar is hidden on
 * purpose: "Stap 3 van 8", the progress line and the buttons already say there is more, and a bar under every step
 * would read as a broken page.
 * ------------------------------------------------------------------------------------------- */
.steps-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    column-gap: var(--ko-space-4);
    align-items: start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-radius: var(--ko-r-card);
}
.steps-track::-webkit-scrollbar { display: none; }
.steps-track:focus-visible { outline: 2px solid transparent; box-shadow: var(--ko-focus-ring); }
.step-slide { min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
/* A #stap-N link (and focus moving down the page) scrolls the page: on a phone keep it clear of the sticky app bar.
   On the page's own scroller (html): Chrome ignores scroll-margin on a step inside the snapping track. */
@media (max-width: 560px) { html:has(.has-app-bar), .has-app-bar { scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px)); } }
/* The track clips what sits outside a slide, so the card's ring (an outer 1px shadow) is drawn inside instead. */
.step-slide.ko-card { box-shadow: inset 0 0 0 1px var(--ko-line); }
.step-body { display: flex; flex-direction: column; gap: var(--ko-space-3); }
.step-body > .ko-title { text-wrap: balance; }

/* Vorige / Volgende. Desktop: under the step. Phone: a bar fixed to the bottom, in thumb reach, clear of the home
   indicator; Volgende takes the width, Vorige stays a small ghost button on the left. */
.step-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ko-space-2); padding-top: var(--ko-space-1); }
.step-bar-inner .step-next { margin-left: auto; }
@media (max-width: 560px) {
    .step-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        padding: var(--ko-space-3) calc(var(--ko-space-4) + env(safe-area-inset-right, 0px)) calc(var(--ko-space-3) + env(safe-area-inset-bottom, 0px)) calc(var(--ko-space-4) + env(safe-area-inset-left, 0px));
        background: var(--ko-bg);
        border-top: 1px solid var(--ko-line-soft);
    }
    .step-bar-inner { padding-top: 0; }
    .step-bar .ko-btn { height: var(--ko-h-row-store); }
    .step-bar .step-next { flex: 1; justify-content: center; }
    .has-step-bar .ea-shell { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
    /* The step's own card frame costs 32px of width on a 390px screen: the steps run edge to edge instead. */
    .steps-track { margin-inline: calc(-1 * var(--ko-space-4)); border-radius: 0; column-gap: 0; }
    .step-slide.ko-card { border-radius: 0; box-shadow: none; background: transparent; }
    .step-slide .step-body { padding: var(--ko-space-2) var(--ko-space-4) var(--ko-space-4); }
}

/* Form card */
.ea-card-body { display: flex; flex-direction: column; gap: var(--ko-space-4); }
.ea-card-body > form { display: flex; flex-direction: column; gap: var(--ko-space-4); }
.ea-card-body p { margin: 0; }
.mail-form .ko-field { margin: 0; }

/* Bottom row: back left, primary right; on a phone the primary goes on top, full width (betalen .bt-actions) */
.ea-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ko-space-2);
    padding-top: var(--ko-space-4);
    border-top: 1px solid var(--ko-line-soft);
}
.ea-actions-end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ko-space-2); margin-left: auto; }
@media (max-width: 479.98px) {
    .ea-actions { flex-direction: column-reverse; align-items: stretch; }
    .ea-actions-end { flex-direction: column-reverse; margin-left: 0; }
    .ea-actions .ko-btn { width: 100%; }
}

/* Help under a screen: no frame, icon + title + one paragraph, aligned with the card's content (betalen .bt-help) */
.ea-help {
    display: grid;
    grid-template-columns: 18px 1fr;
    column-gap: var(--ko-space-3);
    margin: var(--ko-space-2) 0 0;
    padding: 0 var(--ko-space-4);
}
.ea-help-icon { margin-top: 1px; color: var(--ko-text-subtle); }
.ea-help-title { margin: 0; font: 500 14px/20px var(--ko-font); letter-spacing: 0; color: var(--ko-text); }
.ea-help-text { margin: 2px 0 0; max-width: 72ch; font: 400 14px/22px var(--ko-font); color: var(--ko-text-subtle); }

/* Lists */
.ko-card > .ko-list { padding: 4px; }
.ko-row-main { min-width: 0; }
.row-platform { white-space: nowrap; }
@media (max-width: 479.98px) { .row-platform { display: none; } }

/* Server details */
.ko-dl dd .val { overflow-wrap: anywhere; }
.pw-note a { color: var(--ko-accent); }

/* Screenshot: the image on a quiet ground, never wider than its column or taller than a phone screen. */
.shot { display: flex; justify-content: center; padding: var(--ko-space-4); border-radius: var(--ko-r-card); background: var(--ko-bg-subtle); box-shadow: inset 0 0 0 1px var(--ko-line-soft); }
.shot canvas,
.shot img { display: block; max-width: 100%; max-height: 480px; width: auto; height: auto; border-radius: var(--ko-r-item); box-shadow: var(--ko-ring); background: var(--ko-bg); }

/* One instruction step */
.guide-text b { font-weight: 500; }
.guide-text ul { margin: 0 0 12px; }
.fill-values { --ko-dl-label: 104px; border-radius: var(--ko-r-card); box-shadow: var(--ko-ring); padding: 0 var(--ko-space-4); }
.fill-values .ko-dl-heading { padding-top: var(--ko-space-3); }
/* Phone: the screenshot gets the width; at most ~half the screen tall, so the text above it stays in view. */
@media (max-width: 560px) {
    .shot { padding: var(--ko-space-2); }
    .shot canvas,
    .shot img { max-height: 56svh; }
}

/* Finished */
.done { padding: var(--ko-space-6) var(--ko-space-5); }
.done .ko-empty-icon { color: var(--ko-success-text); background: var(--ko-success-bg); box-shadow: none; }
.done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ko-space-2); }