/* Deliberately almost empty.

   v1 has 10,768 lines of hand-written CSS in portal/css/style.css. MudBlazor's
   theme provider replaces nearly all of it — colours, dark mode, spacing and
   component styling come from MudTheme in MainLayout.razor, not from here.

   Add to this file only when a component genuinely cannot be themed. If this
   file starts growing, that is a signal something is being fought rather than
   configured. */

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* The brand lockup. Here rather than in MudTheme because it is an <img> in an
   <a>, not a themed component — there is nothing for the theme provider to
   configure. */
.so-brand {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.so-brand img {
    display: block;
    width: auto;
}

/* Dark mode. SOLogo_t.png is transparent, so there is no white box to hide —
   but "Stock" is dark navy and sits almost invisibly on a dark bar while
   "Overflow" reads fine, which looks like a broken image rather than a design.

   invert() flips the lightness so the navy comes out near-white; hue-rotate()
   puts the hues back where they started, so the blues stay blue instead of
   swinging to orange — the one colour README.md says to keep well away from.
   The crate lightens to a pastel as a side effect. Compared against plain
   brightness at several strengths, which never lifted "Stock" enough to read
   without washing out the rest.

   The proper fix is a dark variant of the artwork with a light wordmark. This
   is a good stopgap, not a substitute for one.

   Driven by a class from MainLayout, not prefers-color-scheme: the theme
   follows the user's saved choice, which may deliberately disagree with the
   operating system. */
.so-brand--dark img {
    filter: invert(1) hue-rotate(180deg);
}

/* Native checkbox on the static account forms — see the note in Login.razor.
   Sized and coloured to sit alongside MudBlazor's fields rather than to
   reimplement them. */
.so-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
}

.so-check input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

/* The top nav, v1's shape. MudBlazor styles the buttons and menus themselves;
   this only handles the row's spacing and how it collapses, which is layout
   rather than something the theme can configure. */
.so-nav-wrap {
    display: flex;
    align-items: center;
    margin-left: 1.5rem;
    min-width: 0;
    overflow: hidden;
}

.so-nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

/* Below ~960px the nav row would push the user label and logout off the bar.
   Hidden rather than shrunk — a squashed row of half-visible menus is worse
   than none, and every entry in it is currently disabled anyway. Revisit when
   the pages exist and a mobile drawer is worth building. */
@media (max-width: 960px) {
    .so-nav-wrap { display: none; }
}



/* Theme picker. Eleven options whose entire meaning is how they look, so each
   one previews its own page colour and accent rather than relying on the name
   — "Dark Ocean" and "Midnight" are indistinguishable as words. */
.so-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
}

.so-theme {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.so-theme:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Two rings rather than a colour change: the tile's own preview colour is the
   point, so the selected state must not repaint it. */
.so-theme--on {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.so-theme-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 24px;
    border-radius: 5px;
    border: 1px solid var(--mud-palette-lines-default);
}

.so-theme-chip--auto {
    background: linear-gradient(135deg, #ffffff 0 50%, #0f172a 50% 100%);
    color: var(--mud-palette-text-secondary);
}

.so-theme-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.so-theme-name {
    line-height: 1.2;
}

/* The same preview chip, small, for the app bar's theme menu. */
.so-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------
   MARKETING PAGES

   More hand-written CSS than anywhere else in the app, and that is the right
   trade here. MudBlazor is built for application chrome — forms, tables,
   dialogs — not for a scrolling sales page, and forcing one out of MudGrid
   costs more markup than plain sections do.

   Everything is scoped under .so-marketing or a .so- prefix so it cannot leak
   into the app.

   COLOURS COME FROM VARIABLES so the whole page can follow the reader's
   machine. Done with a media query rather than from the app's theme service
   on purpose: nobody is signed in out here, so there is no saved preference to
   read — and a media query applies before any JavaScript runs, which means no
   flash of the wrong colour on load.
   --------------------------------------------------------------- */
.so-marketing {
    --so-bg: #ffffff;
    --so-bg-alt: #f8fafc;
    --so-text: #0f172a;
    --so-text-muted: #475569;
    --so-line: #e2e8f0;
    --so-accent: #1d4ed8;
    --so-tick: #0f766e;
    --so-warn: #b45309;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--so-text);
    background: var(--so-bg);
}

@media (prefers-color-scheme: dark) {
    .so-marketing {
        color-scheme: dark;

        --so-bg: #0f172a;
        --so-bg-alt: #131f38;
        --so-text: #e2e8f0;
        --so-text-muted: #94a3b8;
        --so-line: #334155;
        --so-accent: #60a5fa;
        --so-tick: #2dd4bf;
        --so-warn: #fbbf24;

        /* MudBlazor's palette, redefined for the buttons and chips sitting on
           top of this page. Same trick as .so-account: these are custom
           properties, so they inherit to every MudBlazor component inside.

           This REPLACED a C# version that asked the browser through
           MudThemeProvider. That never ran — the marketing pages turn out to
           render statically, so the flag it set stayed false and the logo
           never inverted while the page around it went dark. CSS has no such
           dependency, and is right on the first paint rather than after a
           connection opens. */
        --mud-palette-background: #0f172a;
        --mud-palette-surface: #131f38;
        --mud-palette-text-primary: #e2e8f0;
        --mud-palette-text-secondary: #94a3b8;
        --mud-palette-action-default: #94a3b8;
        --mud-palette-action-default-hover: rgba(255, 255, 255, 0.06);
        --mud-palette-action-disabled: rgba(255, 255, 255, 0.3);
        --mud-palette-action-disabled-background: rgba(255, 255, 255, 0.12);
        --mud-palette-lines-default: #334155;
        --mud-palette-divider: #334155;
        --mud-palette-primary: #60a5fa;
        --mud-palette-primary-rgb: 96, 165, 250;
        --mud-palette-primary-text: #0f172a;
        --mud-palette-primary-hover: rgba(96, 165, 250, 0.1);
        --mud-palette-primary-darken: #3b82f6;
        --mud-palette-primary-lighten: #93c5fd;
        --mud-palette-info: #60a5fa;
        --mud-palette-info-text: #0f172a;
    }

    /* The wordmark is dark navy and would disappear. Same treatment as the
       app's dark themes and the account pages. */
    .so-marketing .so-brand img {
        filter: invert(1) hue-rotate(180deg);
    }
}

.so-marketing-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--so-line);
    position: sticky;
    top: 0;
    background: var(--so-bg);
    z-index: 10;
}

.so-marketing-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.so-marketing main { flex: 1 0 auto; }

/* THE ONE LAYOUT RULE. A band is full-bleed and only carries a background;
   the container inside it is what has the width and the centring.
   
   The previous version tried to centre a band's children individually with
   `.so-band > * { margin-inline: auto }`, which loses to `.so-marketing h2 {
   margin: 0 0 1rem }` on specificity — so headings sat against the left edge
   while the cards below them centred. Invisible under ~1080px, obvious on a
   wide monitor. Nesting removes the fight entirely. */
.so-section {
    max-width: 1080px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem;
}

.so-band { background: var(--so-bg-alt); }

.so-hero {
    background: linear-gradient(180deg, var(--so-bg-alt), var(--so-bg));
    border-bottom: 1px solid var(--so-line);
}

.so-marketing h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.1;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}

.so-marketing h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
}

.so-marketing h3 { font-size: 1.05rem; margin: 0 0 0.5rem; }

.so-lede {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--so-text-muted);
    max-width: 62ch;
    margin: 0 0 2rem;
}

.so-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.so-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.so-card {
    padding: 1.5rem;
    border: 1px solid var(--so-line);
    border-radius: 12px;
    background: var(--so-bg);
}

.so-card p { margin: 0; color: var(--so-text-muted); line-height: 1.55; }

.so-cta { text-align: center; }
.so-cta .so-lede { margin-left: auto; margin-right: auto; }

/* Pricing */
.so-pricing-head { text-align: center; padding-bottom: 1rem; }
.so-pricing-head .so-lede { margin-left: auto; margin-right: auto; }

.so-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 760px;
    margin: 0 auto;
}

.so-tier {
    position: relative;
    padding: 2rem;
    border: 1px solid var(--so-line);
    border-radius: 14px;
    background: var(--so-bg);
    display: flex;
    flex-direction: column;
}

.so-tier--feature { border-color: var(--so-accent); box-shadow: 0 0 0 1px var(--so-accent); }

.so-tier-flag {
    position: absolute;
    top: -0.75rem;
    left: 2rem;
    background: var(--so-accent);
    color: var(--so-bg);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

.so-price { display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: 0.5rem; }
.so-price-amount { font-size: 2.5rem; font-weight: 600; letter-spacing: -0.02em; }
.so-price-unit { color: var(--so-text-muted); }

.so-tier-note { color: var(--so-text-muted); margin: 0 0 1.25rem; }

.so-tier-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    flex: 1 0 auto;
}

.so-tier-list li {
    padding: 0.4rem 0 0.4rem 1.5rem;
    position: relative;
    color: var(--so-text);
    line-height: 1.45;
}

.so-tier-list li::before {
    content: "¹3";
    position: absolute;
    left: 0;
    color: var(--so-tick);
    font-weight: 600;
}

.so-marketing-footer {
    border-top: 1px solid var(--so-line);
    padding: 2rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    color: var(--so-text-muted);
    font-size: 0.9rem;
}

.so-marketing-footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.so-marketing-footer a { color: var(--so-text-muted); }

/* Visibly unfinished, on purpose — these are legally required before money
   changes hands and before Paddle will approve a seller account. */
.so-todo { color: var(--so-warn); }

/* ---------------------------------------------------------------
   THE SIGN-IN AND REGISTRATION PAGES, IN DARK

   These pages are static server-rendered on purpose — signing in sets a
   cookie, and a cookie needs a real HTTP response, which a live Blazor
   connection cannot give. No connection means no way to ASK the browser what
   the machine is set to, so the usual theme provider route is closed.

   This works instead because MudBlazor publishes its whole palette as CSS
   custom properties, and custom properties inherit. Redefining them on a
   wrapper element re-themes every MudBlazor component inside it, without any
   JavaScript at all — which also means it is right on the first paint rather
   than flickering once a connection opens.

   Values mirror the marketing palette so the two signed-out surfaces match.
   --------------------------------------------------------------- */
.so-account {
    min-height: 100vh;
    background: var(--mud-palette-background);
}

@media (prefers-color-scheme: dark) {
    .so-account {
        color-scheme: dark;

        --mud-palette-background: #0f172a;
        --mud-palette-background-gray: #0b1222;
        --mud-palette-surface: #131f38;

        --mud-palette-text-primary: #e2e8f0;
        --mud-palette-text-secondary: #94a3b8;

        --mud-palette-action-default: #94a3b8;
        --mud-palette-action-default-hover: rgba(255, 255, 255, 0.06);
        --mud-palette-action-disabled: rgba(255, 255, 255, 0.3);
        --mud-palette-action-disabled-background: rgba(255, 255, 255, 0.12);

        --mud-palette-lines-default: #334155;
        --mud-palette-lines-inputs: #475569;
        --mud-palette-divider: #334155;
        --mud-palette-divider-light: rgba(255, 255, 255, 0.4);

        --mud-palette-primary: #60a5fa;
        --mud-palette-primary-rgb: 96, 165, 250;
        --mud-palette-primary-text: #0f172a;
        --mud-palette-primary-hover: rgba(96, 165, 250, 0.1);
        --mud-palette-primary-darken: #3b82f6;
        --mud-palette-primary-lighten: #93c5fd;

        --mud-palette-error: #fb7185;
        --mud-palette-error-text: #0f172a;
    }

    /* The logo's wordmark is dark navy and would vanish. Same treatment as the
       app's dark themes — see the note on .so-brand--dark. Applied by media
       query here because nothing on a static page can set the class. */
    .so-account .so-brand img {
        filter: invert(1) hue-rotate(180deg);
    }
}

/* The holding page. Sits inside .so-marketing so it inherits that palette and
   its dark handling — see BareLayout. */
.so-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    text-align: center;
}

.so-soon-inner { max-width: 34rem; }

.so-soon h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin: 2rem 0 0.75rem;
    letter-spacing: -0.02em;
}

.so-soon p {
    color: var(--so-text-muted);
    line-height: 1.6;
    margin: 0 0 2rem;
}

.so-soon-links {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    color: var(--so-line);
}

.so-soon a { color: var(--so-accent); text-decoration: none; }
.so-soon a:hover { text-decoration: underline; }

.so-soon-contact {
    margin: 2.5rem 0 0;
    font-size: 0.875rem;
}