/*
 * (c) 2026 Michael Külper, Fraunhofer FKIE <https://fkie.fraunhofer.de/>
 * Licensed under the Apache License, Version 2.0.
 *
 * Web-only chrome: onboarding screens, the gateway banner, the account chip.
 * (The helper install page has its own helper-install.css.)
 * Built on the renderer's own tokens (style.css), so light/dark follow the app.
 */

.web-boot {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-sans);
    z-index: 2000;
    overflow-y: auto;
}
.web-boot:empty { display: none; }

.web-boot-card {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
}
.web-boot-card h1 { font-size: 1.35rem; font-weight: 600; margin: 4px 0 0; }
.web-boot-card .pill-btn { width: 100%; }
.web-boot-brand { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; letter-spacing: 0.01em; }
.web-boot-text { color: var(--text-secondary); margin: 0; line-height: 1.5; }
.web-boot-error { color: var(--danger); margin: 0; min-height: 1.2em; }
.web-boot-error:empty { display: none; }

.web-boot-modes { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; }
.web-boot-modes label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.web-boot-modes label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.web-boot-modes input { margin-top: 4px; accent-color: var(--accent); }
.web-boot-modes span { display: flex; flex-direction: column; gap: 2px; }
.web-boot-modes small { color: var(--text-secondary); }

.web-boot-input {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--font-mono);
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
}
.web-boot-input:focus { outline: 2px solid var(--accent-ring); border-color: var(--accent); }

.web-boot-code {
    font-family: var(--font-mono);
    font-size: 2.2rem;
    letter-spacing: 0.12em;
    text-align: center;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
}
.web-boot-key {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 12px;
    word-break: break-all;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    user-select: all;
}

.web-boot-link, .web-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}
.web-boot-link { align-self: center; }

.web-boot-spinner {
    width: 28px;
    height: 28px;
    align-self: center;
    border: 3px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: web-spin 0.9s linear infinite;
}
@keyframes web-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .web-boot-spinner { animation-duration: 3s; } }

.web-banner {
    /* A full-width strip ABOVE the app, not over it: the app shell is pushed
       down by the banner's height (--web-banner-h, kept current by
       onboarding.js), so the top bar's controls stay clickable. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px max(12px, calc((100vw - 980px) / 2));
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-bottom: 1px solid var(--accent);
    font-size: 0.9rem;
    z-index: 1900;
}
body.web-has-banner #app-shell { margin-top: var(--web-banner-h, 0px); height: calc(100vh - var(--web-banner-h, 0px)); }
body.web-has-banner #col-left,
body.web-has-banner .col-right { height: calc(100vh - var(--web-banner-h, 0px)); }
.web-banner .bi { color: var(--accent); }

.web-account {
    position: fixed;
    right: 12px;
    bottom: 8px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    z-index: 1500;
}

.web-boot-sep { border: 0; border-top: 1px solid var(--border-subtle); margin: 6px 0; opacity: 1; }
.web-boot-approval { display: flex; flex-direction: column; gap: 10px; }
.web-boot-approval .web-boot-code { font-size: 1.6rem; padding: 8px; }
.web-boot-wait { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-secondary); }
.web-boot-wait .web-boot-spinner { width: 18px; height: 18px; border-width: 2px; align-self: auto; }

.web-banner { flex-direction: column; align-items: stretch; }
.web-banner-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.web-banner-row > span { flex: 1 1 260px; }
.web-banner-btn { width: auto; height: 30px; padding: 0 12px; text-decoration: none; }
.web-sync-state { color: var(--accent); }
.web-sync-state:empty { display: none; }