/* ============================================================================
   GlideInventory — Marketing & Public Pages
   ----------------------------------------------------------------------------
   Replaces wwwroot/css/public.css (1,073 lines, 162 hardcoded colour literals).

   Every class name that public.css defined AND the markup actually uses is
   preserved, so no page markup is orphaned by the swap. The 10 classes it
   defined but nothing referenced are dropped.

   Depends on: tokens.css, primitives.css
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Container & page frame
   --------------------------------------------------------------------------- */
.public-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 var(--g-space-5);
}

.public-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--g-bg);
}

.public-main {
    flex: 1;
}

.public-page {
    padding-block: var(--g-space-6);
}

/* ---------------------------------------------------------------------------
   Buttons — same names public.css used, now on the primitive's geometry
   --------------------------------------------------------------------------- */
.public-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-2);
    padding: 11px 20px;
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-ui);
    font-weight: 560;
    font-size: var(--g-text-md);
    line-height: 1.4;
    text-decoration: none;
    border: 1px solid transparent;
    background: var(--g-accent);
    color: var(--g-accent-ink);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.public-btn:hover {
    background: var(--g-accent-hover);
    color: var(--g-accent-ink);
}

.public-btn-outline {
    background: transparent;
    color: var(--g-text);
    border-color: var(--g-border-strong);
}

.public-btn-outline:hover {
    background: var(--g-surface-2);
    color: var(--g-text);
}

.public-btn-small {
    padding: 7px 14px;
    font-size: var(--g-text-base);
}

/* ---------------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------------- */
.public-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--g-surface);
    border-bottom: 1px solid var(--g-border);
}

.public-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    gap: var(--g-space-5);
}

.public-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-2);
    font-weight: 660;
    font-size: var(--g-text-lg);
    letter-spacing: -0.025em;
    text-decoration: none;
    color: var(--g-text);
}

.public-logo-mark {
    width: 26px;
    height: 26px;
    border-radius: var(--g-radius-sm);
    flex-shrink: 0;
}

.public-logo-full {
    width: 132px;
    max-width: 100%;
    height: auto;
    display: block;
}

.public-logo-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.public-logo-wordmark {
    letter-spacing: -0.025em;
}

.public-nav-links {
    display: flex;
    align-items: center;
    gap: var(--g-space-5);
}

.public-nav-links a {
    text-decoration: none;
    font-size: var(--g-text-base);
    font-weight: 500;
    color: var(--g-text-muted);
    transition: color 0.15s ease;
}

.public-nav-links a:hover {
    color: var(--g-text);
}

.public-nav-links a.public-btn {
    color: var(--g-accent-ink);
}

.public-nav-links a.public-btn:hover {
    color: var(--g-accent-ink);
}

.public-nav-login {
    margin-left: var(--g-space-1);
}

/* CSS-only mobile menu — the checkbox stays visually hidden but focusable. */
.public-nav-toggle {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.public-nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 0 8px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    background: var(--g-surface);
    cursor: pointer;
}

.public-nav-burger span {
    display: block;
    height: 1.5px;
    background: var(--g-text);
    border-radius: 2px;
}

.public-nav-toggle:focus-visible + .public-nav-burger {
    outline: 2px solid var(--g-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Hero
   The old hero paired a serif headline with a flat PNG screenshot. The visual
   is now a live branch panel (see HeroSection.razor) so the offline claim is
   demonstrated rather than asserted.
   --------------------------------------------------------------------------- */
.public-hero {
    padding: var(--g-space-8) 0 var(--g-space-7);
    border-bottom: 1px solid var(--g-border);
    background: var(--g-surface);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: var(--g-space-7);
    align-items: center;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--g-space-4);
}

.hero-copy h1 {
    margin: 0;
    font-size: clamp(32px, 4.6vw, 52px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    font-weight: 660;
    text-wrap: balance;
}

.hero-copy h1 .hero-accent {
    color: var(--g-accent);
}

.hero-copy p {
    margin: 0;
    font-size: var(--g-text-lg);
    line-height: 1.55;
    color: var(--g-text-muted);
    max-width: 46ch;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-1);
    font-family: var(--g-font-data);
    font-size: var(--g-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: var(--g-radius-pill);
    background: var(--g-hold-wash);
    color: var(--g-hold);
    border: 1px solid color-mix(in srgb, var(--g-hold) 26%, transparent);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-space-3);
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-space-4);
    font-family: var(--g-font-data);
    font-size: var(--g-text-xs);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--g-text-subtle);
}

.hero-visual {
    min-width: 0;
}

.hero-visual img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--g-radius-lg);
    border: 1px solid var(--g-border);
}

/* ---------------------------------------------------------------------------
   Hero demo panel — the live branch list
   --------------------------------------------------------------------------- */
.demo-panel {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    background: var(--g-surface-2);
    overflow: hidden;
    box-shadow: var(--g-shadow-2);
}

.demo-panel-top {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
    padding: var(--g-space-2) var(--g-space-3);
    border-bottom: 1px solid var(--g-border);
    background: var(--g-surface);
}

.demo-panel-title {
    font-family: var(--g-font-data);
    font-size: var(--g-text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--g-text-subtle);
}

.demo-panel-chips {
    margin-left: auto;
    display: flex;
    gap: var(--g-space-1);
}

.demo-rows {
    display: flex;
    flex-direction: column;
}

.demo-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--g-space-3);
    align-items: center;
    padding: 10px var(--g-space-3);
    border-bottom: 1px solid var(--g-border);
    font-size: var(--g-text-base);
    background: var(--g-surface);
}

.demo-row:last-child {
    border-bottom: 0;
}

.demo-row.is-offline {
    background: var(--g-hold-wash);
}

.demo-branch {
    display: flex;
    align-items: baseline;
    gap: var(--g-space-2);
    min-width: 0;
    color: var(--g-text);
}

.demo-sku {
    font-family: var(--g-font-data);
    font-size: var(--g-text-xs);
    color: var(--g-text-subtle);
}

.demo-qty {
    font-family: var(--g-font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--g-text-base);
    font-weight: 600;
    color: var(--g-text);
}

.demo-note {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
    padding: 10px var(--g-space-3);
    border-top: 1px solid var(--g-border);
    background: var(--g-surface-2);
    font-size: var(--g-text-sm);
    color: var(--g-text-muted);
}

.demo-note strong {
    color: var(--g-text);
    font-family: var(--g-font-data);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.demo-note .g-chip {
    margin-left: auto;
}

/* The queue counter ticks up while a branch is offline. Purely decorative —
   the value is also present as text for assistive tech. */
@keyframes demo-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

.demo-live-dot {
    animation: demo-pulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .demo-live-dot {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------- */
.public-section {
    padding: var(--g-space-8) 0;
    background: var(--g-bg);
}

.public-section-alt {
    background: var(--g-surface);
    border-block: 1px solid var(--g-border);
}

.section-header {
    max-width: 62ch;
    margin-bottom: var(--g-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--g-space-3);
}

.section-header h1,
.section-header h2 {
    margin: 0;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 640;
    text-wrap: balance;
}

.section-header p {
    margin: 0;
    font-size: var(--g-text-md);
    line-height: 1.6;
    color: var(--g-text-muted);
}

.section-eyebrow {
    margin: 0;
    font-family: var(--g-font-data);
    font-size: var(--g-text-xs);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--g-text-subtle);
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Feature grid
   --------------------------------------------------------------------------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: var(--g-space-3);
}

.feature-card {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
    padding: var(--g-space-4);
    background: var(--g-surface);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
}

.feature-card h3 {
    margin: 0;
    font-size: var(--g-text-md);
    font-weight: 640;
    letter-spacing: -0.015em;
    color: var(--g-text);
}

.feature-card p {
    margin: 0;
    font-size: var(--g-text-base);
    line-height: 1.6;
    color: var(--g-text-muted);
}

/* Icon sits in a tinted square, left-aligned. The previous card centred all
   three elements, which is the look this redesign is moving away from — a
   left rag scans faster in a grid. */
.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--g-radius-sm);
    background: var(--g-accent-wash);
    margin-bottom: var(--g-space-1);
    flex: none;
}

.feature-icon img {
    width: 19px;
    height: 19px;
}

/* ---------------------------------------------------------------------------
   Stats strip
   --------------------------------------------------------------------------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--g-space-3);
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-1);
    padding: var(--g-space-4);
    background: var(--g-surface);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
}

.stat-value {
    font-family: var(--g-font-data);
    font-variant-numeric: tabular-nums;
    font-size: 28px;
    font-weight: 620;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--g-text);
}

.stat-label {
    font-size: var(--g-text-base);
    color: var(--g-text-muted);
}

/* ---------------------------------------------------------------------------
   Panels, lists, CTA
   --------------------------------------------------------------------------- */
.public-panel {
    padding: var(--g-space-5);
    background: var(--g-surface);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
}

.public-panel h3 {
    margin: 0 0 var(--g-space-2);
    font-size: var(--g-text-md);
    font-weight: 640;
}

.public-panel p {
    margin: 0;
    color: var(--g-text-muted);
}

.public-list {
    margin: 0;
    padding-left: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
    color: var(--g-text-muted);
    line-height: 1.6;
}

.public-list li::marker {
    color: var(--g-text-subtle);
}

.pricing-panel,
.final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-5);
    flex-wrap: wrap;
    padding: var(--g-space-6);
    background: var(--g-surface);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
}

.pricing-panel h2,
.final-cta h2 {
    margin: 0 0 var(--g-space-2);
    font-size: clamp(21px, 2.4vw, 28px);
    letter-spacing: -0.03em;
    font-weight: 640;
    text-wrap: balance;
}

.pricing-panel p,
.final-cta p {
    margin: 0;
    color: var(--g-text-muted);
    max-width: 52ch;
}

/* ---------------------------------------------------------------------------
   Auth pages (login, signup success, activation)
   --------------------------------------------------------------------------- */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--g-space-8) var(--g-space-4);
    min-height: 70vh;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: var(--g-space-6);
    background: var(--g-surface);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
}

.auth-header {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
}

.auth-header h1 {
    margin: 0;
    font-size: var(--g-text-xl);
    font-weight: 640;
    letter-spacing: -0.025em;
}

.auth-header p {
    margin: 0;
    color: var(--g-text-muted);
    font-size: var(--g-text-base);
}

.auth-submit {
    width: 100%;
}

.auth-footer {
    padding-top: var(--g-space-3);
    border-top: 1px solid var(--g-border);
    font-size: var(--g-text-base);
    color: var(--g-text-muted);
    text-align: center;
}

.auth-footer a {
    color: var(--g-accent);
}

/* ---------------------------------------------------------------------------
   Forms on public pages (signup wizard)
   --------------------------------------------------------------------------- */
.form-card {
    padding: var(--g-space-5);
    background: var(--g-surface);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
}

.form-card h2 {
    margin: 0;
    font-size: var(--g-text-lg);
    font-weight: 640;
    letter-spacing: -0.02em;
}

/* Stacked form groups need rhythm between them. `.form-field` owns only the
   label-to-input gap; the space BETWEEN groups belongs to the form element.
   Without this, an EditForm renders as a single <form> child of .auth-card, so
   the card's gap spaces header/form/footer and the fields inside touch. */
.auth-card form,
.form-stack {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
}

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

.form-field label {
    font-size: var(--g-text-sm);
    font-weight: 550;
    color: var(--g-text);
}

.form-field input,
.form-field select,
.form-field textarea {
    font-family: var(--g-font-ui);
    font-size: var(--g-text-base);
    color: var(--g-text);
    background: var(--g-surface);
    border: 1px solid var(--g-border-strong);
    border-radius: var(--g-radius-sm);
    padding: 9px 12px;
    width: 100%;
}

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

.form-field .validation-message {
    font-size: var(--g-text-sm);
    color: var(--g-alert);
}

.form-hint {
    font-size: var(--g-text-sm);
    color: var(--g-text-subtle);
}

.form-actions {
    display: flex;
    gap: var(--g-space-3);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.public-form-alert {
    padding: var(--g-space-3) var(--g-space-4);
    border-radius: var(--g-radius-sm);
    border: 1px solid color-mix(in srgb, var(--g-alert) 30%, transparent);
    border-left-width: 2px;
    background: var(--g-alert-wash);
    color: var(--g-alert);
    font-size: var(--g-text-base);
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.public-footer {
    background: var(--g-surface-2);
    border-top: 1px solid var(--g-border);
    margin-top: auto;
}

.public-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: var(--g-space-6);
    /* Extra inline padding on top of .public-container so the brand block and the
       footer columns keep clear of the viewport edge. */
    padding: var(--g-space-7) var(--g-space-2) var(--g-space-6);
}

.public-footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-3);
    max-width: 34ch;
}

.public-footer-brand p {
    margin: 0;
    color: var(--g-text-muted);
    font-size: var(--g-text-base);
    line-height: 1.6;
}

.public-logo--footer {
    font-size: var(--g-text-md);
}

.public-footer-contact {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-1);
    font-size: var(--g-text-base);
    color: var(--g-text-muted);
}

.public-footer-contact a {
    color: var(--g-accent);
    text-decoration: none;
}

.public-footer-contact a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.public-footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
}

.public-footer-links h4 {
    margin: 0 0 var(--g-space-1);
    font-family: var(--g-font-data);
    font-size: var(--g-text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--g-text-subtle);
    font-weight: 500;
}

.public-footer-links a {
    font-size: var(--g-text-base);
    color: var(--g-text-muted);
    text-decoration: none;
}

.public-footer-links a:hover {
    color: var(--g-text);
}

.public-footer-meta {
    border-top: 1px solid var(--g-border);
}

.public-footer-meta-inner {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
    padding: var(--g-space-4) var(--g-space-2);
    font-size: var(--g-text-sm);
    color: var(--g-text-subtle);
}

/* ---------------------------------------------------------------------------
   Spacing utilities retained from public.css (used across marketing markup)
   --------------------------------------------------------------------------- */
.mt-2 { margin-top: var(--g-space-2); }
.mb-2 { margin-bottom: var(--g-space-2); }
.mb-3 { margin-bottom: var(--g-space-3); }
.mb-4 { margin-bottom: var(--g-space-4); }
.me-2 { margin-right: var(--g-space-2); }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: var(--g-space-6);
    }

    .public-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--g-space-5);
    }
}

@media (max-width: 760px) {
    .public-nav-burger {
        display: flex;
    }

    .public-nav-links {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 60px;
        flex-direction: column;
        align-items: stretch;
        gap: var(--g-space-1);
        padding: var(--g-space-3) var(--g-space-5) var(--g-space-4);
        background: var(--g-surface);
        border-bottom: 1px solid var(--g-border);
        box-shadow: var(--g-shadow-2);
    }

    .public-nav-toggle:checked ~ .public-nav-links {
        display: flex;
    }

    .public-section,
    .public-hero {
        padding-block: var(--g-space-6);
    }

    .pricing-panel,
    .final-cta {
        padding: var(--g-space-5);
    }

    .public-footer-grid {
        grid-template-columns: 1fr;
        padding-inline: var(--g-space-3);
    }

    .public-footer-meta-inner {
        padding-inline: var(--g-space-3);
    }
}

@media (max-width: 480px) {
    .public-container {
        padding-inline: var(--g-space-4);
    }

    .hero-actions .public-btn {
        flex: 1;
    }
}