/* ==========================================================================
   Stochumberg — shared page chrome
   Nav, shell, cards and footer for landing, legal and updates.

   All colour, radius and type comes from tokens.css (shadcn zinc). This file
   only does layout and component shape. The --br-* names still resolve —
   they are aliases defined in tokens.css — so any inline style in a template
   keeps working.
   ========================================================================== */

/* ---------- Base ---------- */

.br-page *,
.br-page *::before,
.br-page *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html:has(.br-page) {
    background: var(--background);
    scroll-behavior: smooth;
}

.br-page {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Inline links stay bright and distinct on dark public-page backgrounds. */
.br-page main p a:not(.br-btn),
.br-page .ld-band p a:not(.br-btn),
.br-page .br-shell p a:not(.br-btn),
.br-page main p a:not(.br-btn):visited,
.br-page .ld-band p a:not(.br-btn):visited,
.br-page .br-shell p a:not(.br-btn):visited {
    color: var(--foreground);
    font-weight: 600;
    text-decoration-color: color-mix(in srgb, var(--foreground) 72%, transparent);
    text-underline-offset: 0.18em;
}

.br-page main p a:not(.br-btn):hover,
.br-page main p a:not(.br-btn):focus-visible,
.br-page .ld-band p a:not(.br-btn):hover,
.br-page .ld-band p a:not(.br-btn):focus-visible,
.br-page .br-shell p a:not(.br-btn):hover,
.br-page .br-shell p a:not(.br-btn):focus-visible {
    color: var(--foreground);
    text-decoration-color: var(--foreground);
}

/* Anchors land below the sticky nav instead of under it */
.br-page [id] {
    scroll-margin-top: calc(var(--br-nav-h) + 20px);
}

:root {
    --br-nav-h: 56px;
    --br-container: 1120px;
    --br-gutter: clamp(16px, 4vw, 32px);
}

@media (min-width: 1500px) {
    :root { --br-container: 1280px; }
}

/* ---------- Backdrop ----------
   Two layers. The light is fixed to the viewport: a mostly dark field with a
   blue glow top-right and a green one bottom-left, so every section of every
   page sits in the same light. The dot grid is not: it is anchored to the top
   of the document (body::before), because a fixed grid left the same band of
   dots hanging above every section as you scrolled.

   The glow sits at z-index -1 so the unpositioned page content paints over
   it; that needs the body transparent (html already carries --background). */

.br-page { background: transparent; }

.br-aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(55% 50% at 88% -8%,
            color-mix(in srgb, var(--chart-1) 24%, transparent), transparent 70%),
        radial-gradient(50% 45% at -8% 108%,
            color-mix(in srgb, var(--chart-2) 16%, transparent), transparent 70%),
        radial-gradient(35% 30% at 30% 40%,
            color-mix(in srgb, var(--chart-6) 6%, transparent), transparent 70%),
        var(--background);
}

.br-page::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: clamp(620px, 95vh, 940px);
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 1px 1px,
        color-mix(in srgb, var(--foreground) 9%, transparent) 1px, transparent 0) 0 0 / 30px 30px;
    mask-image: radial-gradient(80% 70% at 70% 0%, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(80% 70% at 70% 0%, #000, transparent 75%);
}

/* ---------- Nav ----------
   A floating frosted pill: thin light rim, a top highlight, and a heavy
   blur + saturate so the backdrop glows read through it. */

.br-nav {
    position: sticky;
    top: 12px;
    z-index: 50;
    height: var(--br-nav-h);
    width: min(var(--br-container), calc(100% - 2 * var(--br-gutter)));
    margin: 12px auto 0;
    padding: 0 8px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
    border-radius: 9999px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--foreground) 8%, transparent),
            color-mix(in srgb, var(--foreground) 2%, transparent)),
        color-mix(in srgb, var(--background) 40%, transparent);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--foreground) 12%, transparent),
        0 12px 32px -14px rgb(0 0 0 / 0.7);
}

.br-nav .br-btn { border-radius: 9999px; }

/* Phone menu button: three bars that turn into an X. Hidden above 640px,
   where the links sit inline; brand.js toggles .br-nav--open. */
.br-menu-btn {
    display: none;
    place-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    flex: none;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
    border-radius: 9999px;
    background: color-mix(in srgb, var(--foreground) 6%, transparent);
    cursor: pointer;
}

.br-menu-btn span {
    display: block;
    width: 16px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--foreground);
    transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.br-nav--open .br-menu-btn span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.br-nav--open .br-menu-btn span:nth-child(2) { opacity: 0; }
.br-nav--open .br-menu-btn span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.br-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.02em;
    color: var(--foreground);
    text-decoration: none;
    flex: none;
}

.br-brand-mark {
    width: 26px;
    height: 26px;
    flex: none;
    background: url('favicon.svg') center / contain no-repeat;
}

.br-nav-links {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.2vw, 8px);
    list-style: none;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.br-nav-links::-webkit-scrollbar { display: none; }
.br-nav-links li { flex: none; }

.br-nav-links a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.br-nav-links a:hover,
.br-nav-links a[aria-current="page"] {
    color: var(--foreground);
    background: color-mix(in srgb, var(--foreground) 9%, transparent);
}

/* ---------- Buttons (shadcn: default / outline) ---------- */

.br-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration) var(--ease),
                color var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
}

.br-btn:hover {
    background: var(--accent);
    color: var(--accent-foreground);
}

.br-btn-primary {
    background: var(--primary);
    border-color: transparent;
    color: var(--primary-foreground);
    font-weight: 500;
    box-shadow: var(--shadow-xs);
}

.br-btn-primary:hover {
    background: color-mix(in srgb, var(--primary) 90%, var(--background));
    color: var(--primary-foreground);
}

/* ---------- Page shell ---------- */

.br-shell {
    position: relative;
    z-index: 1;
    max-width: var(--br-container);
    margin: 0 auto;
    padding: clamp(40px, 7vw, 72px) var(--br-gutter) 88px;
}

.br-shell-narrow { max-width: 768px; }

/* Badge */
.br-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 9999px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 20px;
}

.br-h1 {
    font-family: var(--font-sans);
    font-size: clamp(30px, 5vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--foreground);
    margin-bottom: 12px;
    text-wrap: balance;
}

.br-lead {
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.6;
    color: var(--muted-foreground);
    max-width: 65ch;
    text-wrap: pretty;
}

.br-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted-foreground);
    margin-top: 14px;
}

.br-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 24px;
    color: var(--card-foreground);
}

.br-rule {
    height: 1px;
    border: 0;
    background: var(--border);
    margin: clamp(40px, 6vw, 64px) 0;
}

/* ---------- Footer ----------
   Brand column + three link columns, then a hairline and the legal line.
   One markup source: templates/_footer.html. Translucent so the page glow
   carries through, with a faint top light to close the page. */

.br-footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--border);
    background:
        radial-gradient(60% 120% at 50% 0%,
            color-mix(in srgb, var(--chart-1) 7%, transparent), transparent 70%),
        color-mix(in srgb, var(--background) 70%, transparent);
}

.br-footer-top,
.br-footer-bottom {
    max-width: var(--br-container);
    margin: 0 auto;
    padding-inline: var(--br-gutter);
}

.br-footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
    gap: 40px clamp(32px, 6vw, 96px);
    padding-block: clamp(44px, 6vw, 64px) 40px;
}

.br-footer-brand p {
    max-width: 34ch;
    margin-top: 14px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted-foreground);
}

.br-footer-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
}

.br-footer-cols h2 {
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--foreground);
}

.br-footer-cols ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.br-footer a:not(.br-brand) {
    font-size: 13.5px;
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

.br-footer a:not(.br-brand):hover { color: var(--foreground); }

.br-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding-block: 20px 28px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--muted-foreground);
}

/* ---------- A11y ---------- */

.br-page a:focus-visible,
.br-page button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
    border-radius: var(--radius-md);
}

.br-skip {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    background: var(--popover);
    border: 1px solid var(--border);
    color: var(--popover-foreground);
    font-size: 14px;
    text-decoration: none;
}

.br-skip:focus { left: 16px; }

/* ---------- Reveal on scroll (armed by JS, so no-JS shows everything) ---------- */

.br-reveal-armed {
    opacity: 0;
    translate: 0 8px;
    transition: opacity 0.4s var(--ease), translate 0.4s var(--ease);
}

.br-reveal-armed.br-in {
    opacity: 1;
    translate: none;
}

@media (prefers-reduced-motion: reduce) {
    html:has(.br-page),
    .br-page {
        scroll-behavior: auto;
    }

    .br-page *,
    .br-page *::before,
    .br-page *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 640px) {
    .br-nav {
        gap: 8px;
        top: 8px;
        margin-top: 8px;
        padding-left: 14px;
    }
    /* Mark only, so the header keeps its brand. Must exclude the mark itself —
       it is a <span> too, and hiding it left the nav with no brand at all. */
    .br-nav .br-brand span:not(.br-brand-mark) { display: none; }
    .br-nav { padding-right: 6px; }
    .br-nav .br-btn { margin-left: auto; }
    .br-menu-btn { display: grid; }

    /* The link row cannot fit beside the CTA at this width (it scrolled
       sideways and clipped under the button), so it becomes a dropdown list
       under the pill, opened by the menu button. Nested backdrop-filter does
       not blur through the pill's own, so the panel is opaque instead. */
    .br-nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        max-height: min(70vh, 420px);
        overflow-x: hidden;
        overflow-y: auto;
        padding: 8px;
        border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
        border-radius: 20px;
        background: var(--card);
        box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.7);
    }

    .br-nav--open .br-nav-links {
        display: flex;
        animation: br-menu-in 0.18s var(--ease);
    }

    .br-nav-links a {
        width: 100%;
        height: 44px;
        padding: 0 16px;
        font-size: 15px;
    }

    /* Footer: one column of brand copy, Product and Features side by side,
       Legal as one full-width justified row, and no rule above the legal
       line, whose "All rights reserved." drops under the year. */
    .br-footer-top { grid-template-columns: 1fr; }
    .br-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .br-footer-cols > div:last-child { grid-column: 1 / -1; }
    .br-footer-cols > div:last-child h2 { text-align: center; }
    .br-footer-cols > div:last-child ul {
        flex-direction: row;
        justify-content: space-between;
    }
    .br-footer-bottom {
        border-top: 0;
        padding-top: 0;
        flex-wrap: nowrap;
        align-items: flex-end;
    }
    .br-footer-copy span { display: block; }
}

@keyframes br-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
}