/* Alpgate Mobile Konfigurator — thin app layer on top of BlazorBlueprint.
 *
 * The design language IS BlazorBlueprint's (shadcn): zinc base, amber primary, subtle
 * borders, rounded corners. Every colour below comes from a Blueprint theme token
 * (--background / --foreground / --card / --border / --primary / --muted-foreground / …)
 * defined by _content/BlazorBlueprint.Components/css/themes.css — do NOT introduce raw
 * hex values here.
 *
 * IMPORTANT: Blueprint ships a PREBUILT Tailwind bundle. Utility classes the library does
 * not use itself DO NOT EXIST. Custom styling therefore lives in this file and in scoped
 * .razor.css files — never in invented Tailwind classes.
 */

:root {
    /* System stack only — no CDN fonts. Blueprint reads --font-sans / --font-mono. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    --radius: 0.625rem;

    /* Mobile ergonomics: one number for the minimum touch target. */
    --touch: 48px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    color: var(--foreground);
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
}

/* Styled backdrop: base colour on html, a soft primary glow + faint blueprint grid on a
   fixed body::before behind the content. All colours derive from theme tokens via
   color-mix — no raw hex, follows dark mode automatically. body itself must stay
   transparent: an in-flow body background would paint OVER the negative-z layer. */
html { background: var(--background); }
body { background: transparent; }

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(120% 55% at 50% -12%,
            color-mix(in oklab, var(--primary) 14%, transparent), transparent 70%),
        linear-gradient(color-mix(in oklab, var(--border) 60%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklab, var(--border) 60%, transparent) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
    -webkit-mask-image: radial-gradient(130% 70% at 50% 0%, black 30%, transparent 78%);
    mask-image: radial-gradient(130% 70% at 50% 0%, black 30%, transparent 78%);
}

h1 {
    font-size: clamp(1.55rem, 5.5vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 700;
    margin: 0 0 .5rem;
}

/* FocusOnNavigate focuses the page h1 for screen readers — a heading is not
   interactive, so the browser's focus ring is just visual noise there. */
h1:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- Layout ------------------------------------------------------------- */

.m-shell {
    max-width: 560px;
    margin: 0 auto;
    padding: max(env(safe-area-inset-top), 16px) 20px calc(env(safe-area-inset-bottom) + 24px);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* The chat is the one page that must NOT grow the document. Its log scrolls INSIDE the
   viewport so the gate above it and the input row below it stay put — and so "scroll to the
   newest message" actually has a scroller to act on. With the shell's default min-height the
   column just grows and the page scrolls instead, which leaves the newest bubble below the
   fold. :has() is the only way to say this from here: the shell lives in MainLayout, which
   knows nothing about routes. */
body:has(.m-chat) .m-shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.m-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 8px;
}

.m-stack { display: flex; flex-direction: column; gap: 22px; }
.m-stack-sm { display: flex; flex-direction: column; gap: 12px; }
.m-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Type helpers ------------------------------------------------------- */

.m-muted { color: var(--muted-foreground); }

.m-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Small uppercase technical caption — measurements, section eyebrows. */
.m-eyebrow {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.m-field-hint {
    color: var(--muted-foreground);
    font-size: .85rem;
    line-height: 1.5;
    margin: 8px 0 0;
}

.m-link {
    color: var(--primary);
    background: none;
    border: 0;
    font: inherit;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    min-height: var(--touch);
}

/* --- Home / mode picker ------------------------------------------------- */

.m-hero { padding: 8vh 0 4vh; }

.m-hero-sub {
    color: var(--muted-foreground);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
}

.m-mode-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.m-mode-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 18px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.m-mode-card:active { background: var(--accent); }
.m-mode-card:first-child { border-color: var(--primary); }

.m-mode-icon { font-size: 1.5rem; }
.m-mode-title { font-size: 1.1rem; font-weight: 650; }
.m-mode-desc { color: var(--muted-foreground); font-size: .92rem; line-height: 1.5; }

/* Trace id on the error page — readable enough to dictate over the phone, quiet enough to ignore. */
.m-error-id { color: var(--muted-foreground); font-size: .8rem; margin-top: 24px; word-break: break-all; }

/* --- Circuit error bar (Blazor's default id) ---------------------------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--destructive);
    color: var(--destructive-foreground);
    padding: 12px 16px;
    font-size: .9rem;
    z-index: 1000;
}

#blazor-error-ui .reload { color: inherit; margin-left: 8px; }

/* --- Kit classes that land on Bb-rendered elements -----------------------
   These cannot live in scoped .razor.css: a component whose markup is only a
   Bb* tag emits no scope attribute for the scoping rewrite to hook onto. */

.m-btn {
    min-height: var(--touch);
    width: 100%;
    font-size: 1rem;
}

.m-btn-auto { width: auto; }

.m-chip {
    width: auto;
    min-height: var(--touch);
    border-radius: 999px;
}