.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* Blazor's built-in validation CSS hooks, mapped onto the design palette. Ruby is
   DESIGN.md's documented red; the brand defines no green, so the valid state uses the
   primary rather than inventing an accent colour (DESIGN.md: "Don't add new accent
   colors outside the documented gradient stops"). */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--ank-primary);
}

.invalid {
    outline: 1px solid var(--ank-ruby);
}

.validation-message {
    color: var(--ank-ruby);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* --- Kiosk touch-optimized styles ------------------------------------------------
   docs/spec-pack/10_KIOSK_APPLICATION.md "Touch optimized UI". Branding colors are
   applied via CSS custom properties set inline by Home.razor (--kiosk-primary etc.),
   with sane fallbacks here so the kiosk still looks right before branding loads. */

:root {
    --kiosk-primary: var(--ank-primary);
    --kiosk-secondary: var(--ank-ink);
    --kiosk-background: var(--ank-canvas);
}

html, body {
    height: 100%;
    margin: 0;
}

.kiosk-main {
    min-height: 100vh;
}

.kiosk-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    background-color: var(--kiosk-background);
    background-size: cover;
    background-position: center;
    color: var(--kiosk-secondary);
    text-align: center;
}

.kiosk-logo {
    max-height: 96px;
    margin-bottom: 2rem;
}

/* Company + site identity — deliberately subtle, a caption confirming where you are,
   not competing with the welcome message or the logo above it. */
.kiosk-site-info {
    color: var(--ank-ink-mute);
    font-size: 1rem;
    letter-spacing: 0.02em;
    margin-top: -1.2rem;
    margin-bottom: 1.5rem;
}

/* Language picker. Touch-first sizing: a kiosk is operated with a fingertip on a
   wall-mounted screen, so the tap targets are comfortably past the ~44px minimum even
   though the text is small — this sits above the step content and must never compete
   with the primary action, but it also must not be fiddly to hit. Wraps rather than
   scrolls so every language stays reachable on a narrow portrait screen. */
.kiosk-language-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 1.75rem;
}

.kiosk-language-option {
    background: none;
    border: 1px solid var(--ank-hairline-input);
    border-radius: var(--ank-radius-pill);
    color: var(--ank-ink-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    min-height: 44px;
    padding: 0.4rem 1rem;
}

.kiosk-language-option:hover {
    border-color: var(--ank-primary);
    color: var(--ank-ink);
}

/* The active language is shown in the site's own brand colour rather than a grey
   "pressed" state — on a shared device the current language is the single most
   important thing for the next visitor to be able to see at a glance. */
.kiosk-language-option-active {
    background-color: var(--kiosk-primary);
    border-color: var(--kiosk-primary);
    color: #fff;
    font-weight: 600;
}

.kiosk-step {
    width: 100%;
    max-width: 640px;
}

.kiosk-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.kiosk-hint {
    color: var(--ank-ink-mute);
}

.kiosk-field-error {
    color: var(--ank-ruby);
    margin-top: 0.3rem;
}

.kiosk-input {
    width: 100%;
    font-size: 1.5rem;
    padding: 0.9rem 1rem;
    border: 2px solid var(--ank-hairline-input);
    border-radius: var(--ank-radius-sm);
    box-sizing: border-box;
}

.kiosk-policy-text {
    text-align: left;
    font-size: 1.1rem;
    line-height: 1.5;
    background: var(--ank-canvas-soft);
    padding: 1rem;
    border-radius: var(--ank-radius-md);
}

.kiosk-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.kiosk-button {
    font-size: 1.3rem;
    padding: 1rem 2rem;
    border-radius: var(--ank-radius-pill);
    border: none;
    cursor: pointer;
    min-height: 3.5rem;
    min-width: 8rem;
}

.kiosk-button-primary {
    background-color: var(--kiosk-primary);
    color: #fff;
}

/* ReconfigureScreen.razor's disconnect button — deliberately styled as a warning
   action, distinct from the primary/secondary flow buttons above. */
.kiosk-button-danger {
    background-color: var(--ank-ruby);
    color: #fff;
}

.kiosk-button-secondary {
    background-color: var(--ank-canvas-soft);
    color: var(--ank-primary);
}

.kiosk-host-list {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.kiosk-host-button {
    width: 100%;
    text-align: left;
    background-color: var(--ank-canvas-soft);
    color: var(--ank-ink);
}

.kiosk-footer {
    margin-top: 3rem;
    color: var(--ank-ink-mute);
    font-size: 0.9rem;
}

/* --- Kiosk device pairing — Phase 05 redesign (one deployment, many kiosks) ------ */

.kiosk-pairing-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin-top: 1rem;
}

/* Kiosk-initiated pairing (QR/scan) — see KioskPairingScreen.razor. */
.kiosk-pairing-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    background: var(--ank-canvas);
    border-radius: var(--ank-radius-lg);
    border: 1px solid var(--ank-hairline);
}

.kiosk-pairing-qr img {
    border-radius: 0.25rem;
}

.kiosk-pairing-shortcode {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    letter-spacing: 0.15em;
}

.kiosk-pairing-divider {
    width: 100%;
    text-align: center;
    color: var(--ank-ink-mute);
    margin-top: 1.5rem;
}

/* --- Badge print view — docs/spec-pack/14_BADGE_PRINTING.md ----------------------
   DELIBERATELY NOT TOKENIZED. The hardcoded black-on-white below is an existing
   project convention that ADR-003 calls out by name: the printed badge must come out
   correctly on any printer regardless of screen theme or tenant branding, so it takes
   neither the design system's ink/canvas tokens nor the tenant's colors. Do not
   "finish the job" by swapping these for var(--ank-*). */

.kiosk-badge-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.kiosk-badge {
    width: 340px;
    padding: 1.5rem;
    border: 2px solid var(--kiosk-secondary);
    border-radius: 0.75rem;
    background: #fff;
    color: #000;
    text-align: left;
}

/* Visitor photo (Visit.PhotoBlobUrl) — deliberately conditional in BadgeView.razor,
   so this rule only ever needs to look right ABOVE the badge fields when a photo
   exists; skipping the photo (the common case) leaves the badge exactly as before this
   feature existed. Same DELIBERATELY NOT TOKENIZED reasoning as .kiosk-badge itself. */
.kiosk-badge-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.kiosk-badge-field {
    margin-bottom: 0.75rem;
}

.kiosk-badge-field span {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
}

.kiosk-badge-field strong {
    font-size: 1.3rem;
}

@media print {
    body * {
        visibility: hidden;
    }

    .kiosk-badge, .kiosk-badge * {
        visibility: visible;
    }

    .kiosk-badge {
        position: absolute;
        top: 0;
        left: 0;
        border: none;
    }

    .kiosk-no-print {
        display: none !important;
    }
}

/* --- StatusPage.razor: shared 4xx/5xx shell ----------------------------------
   DESIGN.md "Status Pages (4xx/5xx)" — no gradient mesh (that's a marketing-hero
   signature; deliberately absent here), flat canvas, centered column, generous
   vertical padding that steps down on mobile same as every other section. Same
   rule as Ankomst.AdminWeb's own copy of this block — kept duplicated per-app,
   not shared via an RCL, matching how design-tokens.css/app.css are already
   duplicated per product app in this repo. */
.ankomst-status-page {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--ank-space-huge) var(--ank-space-xl);
    text-align: center;
}

.ankomst-status-page-code {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .ankomst-status-page {
        padding: var(--ank-space-xl) var(--ank-space-lg);
    }
}