/* Styles shared by the server-rendered pages (home, auth, manager login).
 *
 * These pages are the same design system as the two apps: the six beer themes,
 * their light and dark versions, the 4px spacing scale, the radius factor and
 * the type scale all come from Radix Themes (@radix-ui/themes), which the apps
 * load directly. Change a theme's palette in web/bsub/src/theme/themes.css and
 * theme.js picks the remembered theme here; the scales below restate Radix's
 * token values for pages that don't ship the Radix stylesheet.
 *
 * Dark mode: the layout <head> script toggles the "dark" class on <html>.
 * Color theme: the same script sets data-beer-theme from the "bsub-theme" key,
 * the storage the apps' Appearance settings write. */

@font-face {
    font-family: "Inter";
    src: url("/public/fonts/InterVar.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/public/fonts/InterVarItalic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* Design tokens
 * Semantic names first, then the resolved values for each beer theme. The
 * scales are Radix's own: --font-size-N, --space-N and --radius-N match the
 * apps' token names, so a value read from the apps can be used here unchanged. */

:root {
    color-scheme: light;

    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", system-ui, sans-serif;

    --font-size-1: 0.75rem; /* 12px */
    --font-size-2: 0.875rem; /* 14px */
    --font-size-3: 1rem; /* 16px */
    --font-size-4: 1.125rem; /* 18px */
    --font-size-5: 1.25rem; /* 20px */
    --font-size-6: 1.5rem; /* 24px */
    --font-size-7: 1.75rem; /* 28px */
    --font-size-8: 2.1875rem; /* 35px */

    --line-height-1: 1rem;
    --line-height-2: 1.25rem;
    --line-height-3: 1.5rem;
    --line-height-4: 1.625rem;
    --line-height-5: 1.75rem;
    --line-height-6: 1.875rem;
    --line-height-7: 2.25rem;
    --line-height-8: 2.5rem;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;

    /* The theme's radius; each beer theme scales the same steps. */
    --radius-factor: 1;
    --radius-1: calc(3px * var(--radius-factor));
    --radius-2: calc(4px * var(--radius-factor));
    --radius-3: calc(6px * var(--radius-factor));
    --radius-4: calc(8px * var(--radius-factor));
    --radius-5: calc(12px * var(--radius-factor));

    /* Surfaces are flat with a hairline seam; depth appears as a pressed or
     * raised response, never as decoration. */
    --shadow-raised:
        0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.04);
    --shadow-card:
        0 1px 2px rgb(0 0 0 / 0.05), 0 12px 32px -20px rgb(0 0 0 / 0.3);

    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);

    /* Hoppy — the default: fresh hop greens on a faintly green page. */
    --bg: #fbfefb;
    --panel: #ffffff;
    --fg: #1d211c;
    --muted: #60655f;
    --border: #d7dad7;
    --soft: #eff1ef;
    --soft-hover: #e7e9e7;
    --accent: #2a7e3b;
    --accent-hover: #203c25;
    --accent-soft: #e9f6e9;
    --accent-text: #2a7e3b;
    --accent-contrast: #ffffff;
    --destructive: #ce2c31;
}

html[data-beer-theme="h2o"] {
    --radius-factor: 1.5;
    --bg: #f4faff;
    --panel: #ffffff;
    --fg: #1c2024;
    --muted: #60646c;
    --border: #d9d9e0;
    --soft: #f0f0f3;
    --soft-hover: #e8e8ec;
    --accent: #0090ff;
    --accent-hover: #0588f0;
    --accent-soft: #e6f4fe;
    --accent-text: #0d74ce;
    --accent-contrast: #ffffff;
    --destructive: #ce2c31;
}

html[data-beer-theme="pilsner"] {
    --radius-factor: 1.5;
    --bg: #fefbe9;
    --panel: #ffffff;
    --fg: #202020;
    --muted: #646464;
    --border: #d9d9d9;
    --soft: #f0f0f0;
    --soft-hover: #e8e8e8;
    --accent: #ffc53d;
    --accent-hover: #ffba18;
    --accent-soft: #fff7c2;
    --accent-text: #ab6400;
    --accent-contrast: #21201c;
    --destructive: #ce2c31;
}

html[data-beer-theme="marzen"] {
    --radius-factor: 1;
    --bg: #fff7ed;
    --panel: #fefcfb;
    --fg: #21201c;
    --muted: #63635e;
    --border: #dad9d6;
    --soft: #f1f0ef;
    --soft-hover: #e9e8e6;
    --accent: #f76b15;
    --accent-hover: #ef5f00;
    --accent-soft: #ffefd6;
    --accent-text: #cc4e00;
    --accent-contrast: #ffffff;
    --destructive: #ce2c31;
}

html[data-beer-theme="nutbrown"] {
    --radius-factor: 0.75;
    --bg: #f6f0e6;
    --panel: #fbf8f2;
    --fg: #3e332e;
    --muted: #815e46;
    --border: #e4cdb7;
    --soft: #f6eee7;
    --soft-hover: #f0e4d9;
    --accent: #ad7f58;
    --accent-hover: #a07553;
    --accent-soft: #f6eee7;
    --accent-text: #815e46;
    --accent-contrast: #ffffff;
    --destructive: #ce2c31;
}

html[data-beer-theme="stout"] {
    --radius-factor: 0.75;
    --bg: #ffffff;
    --panel: #ffffff;
    --fg: #202020;
    --muted: #646464;
    --border: #d9d9d9;
    --soft: #f0f0f0;
    --soft-hover: #e8e8e8;
    --accent: #202020;
    --accent-hover: #646464;
    --accent-soft: #f0f0f0;
    --accent-text: #202020;
    --accent-contrast: #ffffff;
    --destructive: #ce2c31;
}

html.dark {
    color-scheme: dark;

    --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-card:
        0 0 0 1px rgb(255 255 255 / 0.03), 0 12px 32px -20px rgb(0 0 0 / 0.7);

    /* Hoppy, dark. */
    --bg: #111210;
    --panel: #181917;
    --fg: #eceeec;
    --muted: #afb5ad;
    --border: #383a36;
    --soft: #212220;
    --soft-hover: #282a27;
    --accent: #46a758;
    --accent-hover: #53b365;
    --accent-soft: #1b2a1e;
    --accent-text: #71d083;
    --accent-contrast: #ffffff;
    --destructive: #ff9592;
}

html.dark[data-beer-theme="h2o"] {
    --bg: #0d1520;
    --panel: #111a27;
    --fg: #edeef0;
    --muted: #b0b4ba;
    --border: #363a3f;
    --soft: #212225;
    --soft-hover: #272a2d;
    --accent: #0090ff;
    --accent-hover: #3b9eff;
    --accent-soft: #0d2847;
    --accent-text: #70b8ff;
    --accent-contrast: #ffffff;
    --destructive: #ff9592;
}

html.dark[data-beer-theme="pilsner"] {
    --bg: #121212;
    --panel: #191919;
    --fg: #eeeeee;
    --muted: #b4b4b4;
    --border: #3a3a3a;
    --soft: #222222;
    --soft-hover: #2a2a2a;
    --accent: #ffc53d;
    --accent-hover: #ffd60a;
    --accent-soft: #302008;
    --accent-text: #ffca16;
    --accent-contrast: #21201c;
    --destructive: #ff9592;
}

html.dark[data-beer-theme="marzen"] {
    --bg: #17120e;
    --panel: #1f1710;
    --fg: #eeeeec;
    --muted: #b5b3ad;
    --border: #3b3a37;
    --soft: #222221;
    --soft-hover: #2a2a28;
    --accent: #f76b15;
    --accent-hover: #ff801f;
    --accent-soft: #331e0b;
    --accent-text: #ffa057;
    --accent-contrast: #ffffff;
    --destructive: #ff9592;
}

html.dark[data-beer-theme="nutbrown"] {
    --bg: #110d0a;
    --panel: #1b1511;
    --fg: #f2e1ca;
    --muted: #dbb594;
    --border: #4d3c2f;
    --soft: #28211d;
    --soft-hover: #322922;
    --accent: #ad7f58;
    --accent-hover: #b88c67;
    --accent-soft: #28211d;
    --accent-text: #dbb594;
    --accent-contrast: #ffffff;
    --destructive: #ff9592;
}

html.dark[data-beer-theme="stout"] {
    --bg: #000000;
    --panel: #0f0f0f;
    --fg: #eeeeee;
    --muted: #b4b4b4;
    --border: #3a3a3a;
    --soft: #222222;
    --soft-hover: #2a2a2a;
    --accent: #eeeeee;
    --accent-hover: #b4b4b4;
    --accent-soft: #222222;
    --accent-text: #eeeeee;
    --accent-contrast: #000000;
    --destructive: #ff9592;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--font-size-2);
    line-height: 1.5;
    transition: background-color 300ms ease, color 300ms ease;
}

a {
    color: var(--accent-text);
}

a:hover {
    color: var(--accent-hover);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Header / navbar */

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
}

.site-nav {
    max-width: 72rem;
    margin: 0 auto;
    min-height: 3.5rem;
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

/* The wordmark plate matches the apps' header: the hop icon on an accent tile,
 * the name in the same weight and tracking. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    color: var(--fg);
    text-decoration: none;
}

.brand:hover {
    color: var(--fg);
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    flex: none;
    border-radius: var(--radius-3);
    background: var(--accent-soft);
}

.brand-mark img {
    display: block;
    height: 1.125rem;
    width: auto;
}

.brand-name {
    font-size: var(--font-size-3);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Header controls are the apps' 32px icon and text buttons. */
.nav-link {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 var(--space-3);
    color: var(--fg);
    background: var(--soft);
    border: 1px solid transparent;
    border-radius: var(--radius-3);
    font-size: var(--font-size-2);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

.nav-link:hover {
    background: var(--soft-hover);
    color: var(--fg);
}

.nav-link:active {
    transform: translateY(1px);
}

.theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    padding: 0;
    color: var(--fg);
    background: var(--soft);
    border: 1px solid transparent;
    border-radius: var(--radius-3);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.theme-btn:hover {
    background: var(--soft-hover);
}

.theme-btn:active {
    transform: translateY(1px);
}

.theme-btn svg {
    width: 1rem;
    height: 1rem;
}

/* Moon shows in light mode, sun shows in dark mode (click to switch to the other). */
.icon-sun {
    display: none;
}

.icon-moon {
    display: inline-block;
}

html.dark .icon-sun {
    display: inline-block;
}

html.dark .icon-moon {
    display: none;
}

/* Page chrome */

.site-main {
    padding: var(--space-5) var(--space-4) var(--space-8);
}

.flash {
    position: absolute;
    top: calc(3.5rem + var(--space-3));
    right: var(--space-4);
    z-index: 20;
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-4);
    background: var(--panel);
    box-shadow: var(--shadow-card);
    font-size: var(--font-size-2);
}

.flash-error,
.flash-warning {
    border-color: color-mix(in srgb, var(--destructive) 40%, transparent);
    color: var(--destructive);
}

/* Forms */

.auth-card {
    max-width: 26rem;
    margin: var(--space-7) auto 0;
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-4);
    background: var(--panel);
    box-shadow: var(--shadow-card);
}

.auth-card h1 {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-6);
    line-height: var(--line-height-6);
    text-align: center;
}

.auth-logo {
    display: block;
    margin: 0 auto var(--space-4);
    width: 7rem;
    height: 7rem;
    object-fit: contain;
    border-radius: 50%;
}

.form-hint {
    margin: 0 0 var(--space-4);
    color: var(--muted);
    line-height: 1.55;
}

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-field label {
    font-size: var(--font-size-2);
    font-weight: 500;
}

.form-field input,
.form-field textarea {
    width: 100%;
    min-height: 2.5rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    background: var(--panel);
    color: var(--fg);
    font: inherit;
    /* 1rem minimum: mobile Safari zooms the page when focusing inputs
     * with a font-size under 16px. */
    font-size: var(--font-size-3);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--muted);
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.form-field textarea {
    min-height: 6rem;
    padding: var(--space-2) var(--space-3);
    resize: vertical;
}

.form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.form-check input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
}

.form-check label {
    font-size: var(--font-size-2);
}

.form-alt {
    margin: var(--space-5) 0 0;
    font-size: var(--font-size-2);
    text-align: center;
}

.form-alt a {
    color: var(--accent-text);
    text-decoration: none;
}

.form-alt a:hover {
    text-decoration: underline;
}

/* honeypot: visually removed but present in the form for bots to fill. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

.input-code {
    text-align: center;
    letter-spacing: 0.5em;
    font-size: var(--font-size-5);
    font-variant-numeric: tabular-nums;
}

/* Buttons: 40px controls, a hairline seam, and a 1px press. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-3);
    background: var(--soft);
    color: var(--fg);
    font: inherit;
    font-size: var(--font-size-3);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        transform 80ms ease;
}

.btn:hover {
    background: var(--soft-hover);
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
    box-shadow: var(--shadow-raised);
}

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
}

/* Form buttons span the card; comfortable touch targets on mobile,
 * tidy on desktop. */
.form .btn {
    width: 100%;
}

/* Home hero */

.hero {
    margin: var(--space-9) auto 0;
    max-width: 36rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    text-align: center;
}

.hero h1 {
    margin: 0;
    font-size: var(--font-size-8);
    line-height: var(--line-height-8);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hero-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0 var(--space-5);
    border: 1px solid var(--accent);
    border-radius: var(--radius-3);
    background: var(--accent);
    color: var(--accent-contrast);
    box-shadow: var(--shadow-raised);
    font-size: var(--font-size-3);
    font-weight: 500;
    text-decoration: none;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        transform 80ms ease;
}

.hero-link:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
}

.hero-link:active {
    transform: translateY(1px);
}

/* Leaving the page is the recovery the heading offers; going back is the
 * quieter second choice. */
.hero-link-secondary {
    background: var(--soft);
    border-color: transparent;
    color: var(--fg);
    box-shadow: none;
}

.hero-link-secondary:hover {
    background: var(--soft-hover);
    border-color: transparent;
    color: var(--fg);
}

/* Not found */

.not-found {
    margin: var(--space-6) auto 0;
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    text-align: center;
}

.not-found-img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-4);
}

.not-found h1 {
    margin: 0;
    font-size: var(--font-size-7);
    line-height: var(--line-height-7);
}

.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

/* Small screens */

@media (max-width: 30em) {
    .site-nav {
        padding: 0 var(--space-3);
        gap: var(--space-2);
    }

    .brand-mark {
        width: 1.75rem;
        height: 1.75rem;
    }

    .nav-actions {
        gap: var(--space-1);
    }

    .nav-link {
        padding: 0 var(--space-2);
    }

    .site-main {
        padding: var(--space-4);
    }

    .hero {
        margin-top: var(--space-8);
        gap: var(--space-4);
    }

    .hero h1 {
        font-size: var(--font-size-7);
        line-height: var(--line-height-7);
    }

    /* the flash becomes a full-width banner instead of a floating toast. */
    .flash {
        left: var(--space-2);
        right: var(--space-2);
        padding: var(--space-3) var(--space-4);
        text-align: center;
    }

    /* the card sheds its frame and hugs the viewport. */
    .auth-card {
        margin-top: var(--space-5);
        padding: var(--space-5) var(--space-3);
        border: none;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body,
    .btn,
    .hero-link,
    .nav-link,
    .theme-btn,
    .form-field input,
    .form-field textarea {
        transition: none;
    }

    .btn:active,
    .hero-link:active,
    .nav-link:active,
    .theme-btn:active {
        transform: none;
    }
}