/* Marketing surfaces beyond the home page: the /modules index and each
   per-module page. Inherits the public design vocabulary from landing.css
   (the `.public-page` local vars and the `.ui-card` mockup language) and adds
   the per-module page scaffolding plus the data-driven mockup renderer. */

/* ----------------------------------------------------------------------------
   Pill nav with a sliding active indicator (shared header). Replaces the flat
   per-link background wash: a glass pill glides between items with a soft spring
   and follows the active item (scroll-spy on home, current page on subpages)
   plus the cursor on hover. Falls back to a static chip when JS is unavailable.
---------------------------------------------------------------------------- */
.nav-links {
    position: relative;
}

.nav-link {
    position: relative;
    z-index: 1;
}

/* The indicator owns the highlight now; drop the flat per-link wash. */
.nav-link:hover,
.nav-link.active {
    background: transparent;
}

/* No-JS / pre-hydration fallback keeps a visible active chip. */
.nav-links:not(.is-ready) .nav-link.active {
    background: rgba(255, 255, 255, 0.08);
}

.nav-indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 0;
    height: 0;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 0 0 1px rgba(160, 178, 205, 0.14),
        0 8px 20px rgba(2, 6, 23, 0.38),
        0 0 16px rgba(110, 231, 249, 0.06);
}

.nav-links.is-ready .nav-indicator {
    opacity: 1;
}

.nav-links.is-animated .nav-indicator {
    transition:
        transform 0.42s cubic-bezier(0.34, 1.3, 0.5, 1),
        width 0.42s cubic-bezier(0.34, 1.3, 0.5, 1),
        height 0.2s ease,
        opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .nav-links.is-animated .nav-indicator {
        transition: opacity 0.2s ease;
    }
}

/* ----------------------------------------------------------------------------
   Per-module accent. The blue->green diagonal gradient stays the shared
   signature motif (see .module-hero::after / .cta-panel); the accent only
   tints small highlights (kicker, icon chip, focus marks) so each module has a
   subtle identity without introducing a new dominant palette.
---------------------------------------------------------------------------- */
.module-page {
    --mk-accent: var(--aurora-cyan);
    --mk-accent-soft: rgba(110, 231, 249, 0.12);
    --mk-accent-line: rgba(110, 231, 249, 0.26);
}

.module-page.is-cyan {
    --mk-accent: var(--aurora-cyan);
    --mk-accent-soft: rgba(110, 231, 249, 0.12);
    --mk-accent-line: rgba(110, 231, 249, 0.26);
}

.module-page.is-mint {
    --mk-accent: var(--aurora-mint);
    --mk-accent-soft: rgba(94, 230, 183, 0.12);
    --mk-accent-line: rgba(94, 230, 183, 0.26);
}

.module-page.is-blue {
    --mk-accent: var(--aurora-blue);
    --mk-accent-soft: rgba(109, 168, 255, 0.14);
    --mk-accent-line: rgba(109, 168, 255, 0.28);
}

.module-page.is-amber {
    --mk-accent: var(--aurora-amber);
    --mk-accent-soft: rgba(247, 199, 104, 0.12);
    --mk-accent-line: rgba(247, 199, 104, 0.3);
}

/* ----------------------------------------------------------------------------
   Module hero
---------------------------------------------------------------------------- */
.module-hero {
    position: relative;
    overflow: hidden;
    padding: 150px 0 72px;
}

.module-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 82% 0%, var(--mk-accent-soft), transparent 60%),
        linear-gradient(180deg, rgba(2, 6, 23, 0), rgba(2, 6, 23, 0.55));
    pointer-events: none;
}

/* Signature motif: the same diagonal luminous sweep used by the CTA card. */
.module-hero::after {
    content: "";
    position: absolute;
    inset: auto -8% -52% 18%;
    height: 92%;
    background: linear-gradient(90deg, transparent, rgba(110, 231, 249, 0.16), rgba(247, 199, 104, 0.12), transparent);
    transform: rotate(-8deg);
    pointer-events: none;
}

.module-hero .public-container {
    position: relative;
    z-index: 2;
    width: min(1300px, calc(100% - 64px));
}

.module-breadcrumb {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    color: rgba(216, 231, 245, 0.62);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.module-breadcrumb i {
    font-size: 0.72rem;
}

.module-breadcrumb:hover {
    color: #ffffff;
}

.module-breadcrumb strong {
    color: rgba(216, 231, 245, 0.92);
    font-weight: 800;
}

.module-hero__main {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr);
    gap: clamp(32px, 4vw, 60px);
    align-items: center;
}

.module-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 8px 14px;
    border: 1px solid var(--mk-accent-line);
    border-radius: 999px;
    background: rgba(7, 14, 26, 0.7);
    color: #eafdff;
    font-size: 0.82rem;
    font-weight: 800;
}

.module-hero__eyebrow i {
    color: var(--mk-accent);
}

.module-hero__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.6rem, 4vw, 4.1rem);
    line-height: 1.05;
    text-wrap: balance;
}

html:lang(zh-CN) .module-hero__title {
    font-size: clamp(2.4rem, 3.5vw, 3.7rem);
    line-height: 1.16;
    letter-spacing: 0;
}

html:lang(en) .module-hero__title {
    max-width: 15ch;
}

.module-hero__lede {
    max-width: 560px;
    margin: 24px 0 0;
    color: rgba(216, 231, 245, 0.82);
    font-size: 1.1rem;
    line-height: 1.7;
}

html:lang(zh-CN) .module-hero__lede {
    line-height: 1.85;
    font-size: 1.04rem;
}

.module-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* ----------------------------------------------------------------------------
   Mockup renderer surface (driven by views/public/_mockup.ejs)
---------------------------------------------------------------------------- */
.module-mock {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
    justify-self: end;
    width: min(680px, 100%);
}

.module-mock .ui-card {
    height: 100%;
}

.module-mock .ui-card--wide {
    grid-column: 1 / -1;
}

/* Renderer-only additions to the .ui-card vocabulary */
.ui-card__title {
    margin: 2px 0 12px;
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.3;
}

.ui-pill--info {
    color: var(--aurora-blue);
    border: 1px solid rgba(109, 168, 255, 0.28);
    background: rgba(109, 168, 255, 0.12);
}

.ui-metric em.ui-metric__hint--warn {
    color: var(--aurora-amber);
}

.ui-metrics--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Variable-width bar chart for the renderer (landing's .ui-graph is fixed 7). */
.ui-graph--mock {
    grid-template-columns: repeat(var(--bars, 7), 1fr);
}

.ui-dot--mint {
    background: var(--aurora-mint);
    box-shadow: 0 0 0 4px rgba(94, 230, 183, 0.12);
}

.ui-reward-icon--star {
    color: var(--aurora-amber);
    background: rgba(247, 199, 104, 0.12);
}

.ui-reward-icon--coin {
    color: var(--aurora-amber);
    background: rgba(247, 199, 104, 0.12);
}

.ui-reward-icon--bell {
    color: var(--aurora-cyan);
    background: rgba(110, 231, 249, 0.12);
}

/* ----------------------------------------------------------------------------
   Module page body sections
---------------------------------------------------------------------------- */
.module-section {
    padding: 92px 0;
}

.module-section--alt {
    background:
        linear-gradient(180deg, rgba(2, 6, 23, 0), rgba(6, 13, 24, 0.86) 16%, rgba(4, 11, 20, 0.86) 84%, rgba(2, 6, 23, 0));
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.benefit-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 8px;
    background: var(--mk-accent-soft);
    color: var(--mk-accent);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.feature-card {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 16px;
    align-items: start;
}

.feature-card__mark {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--mk-accent-line);
    background: var(--mk-accent-soft);
    color: var(--mk-accent);
    font-size: 0.9rem;
    line-height: 1;
}

/* The feature card carries `module-card`, so landing.css's `.module-card i`
   rule leaks a 42px cyan rounded-square chip + bottom margin onto this glyph —
   that stray inner square is the "weird shape". Reset it to a plain centered
   glyph that fills the circle and inherits the mark's accent color. */
.feature-card__mark i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    background: none;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
    line-height: 1;
}

.feature-card h3 {
    margin: 4px 0 0;
    color: #ffffff;
    font-size: 1.06rem;
    line-height: 1.3;
}

.feature-card p {
    margin: 8px 0 0;
    color: rgba(216, 231, 245, 0.7);
    line-height: 1.62;
}

html:lang(zh-CN) .feature-card p,
html:lang(zh-CN) .benefit-card p {
    line-height: 1.78;
}

/* ----------------------------------------------------------------------------
   /modules index
---------------------------------------------------------------------------- */
.mods-index {
    padding: 142px 0 96px;
}

.mods-index__header {
    max-width: 760px;
    margin-bottom: 48px;
}

.mod-group {
    margin-top: 52px;
}

.mod-group:first-of-type {
    margin-top: 0;
}

.mod-group__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(160, 178, 205, 0.14);
}

.mod-group__head h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.32rem;
    font-weight: 800;
}

.mod-group__head p {
    margin: 0;
    color: rgba(216, 231, 245, 0.6);
    font-size: 0.95rem;
}

.mod-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.mod-card {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
    padding: 20px;
    border: 1px solid rgba(160, 178, 205, 0.14);
    border-radius: 8px;
    background: var(--aurora-panel);
    box-shadow: 0 22px 60px rgba(2, 6, 23, 0.22);
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.mod-card:hover {
    transform: translateY(-4px);
    border-color: var(--mk-card-line, rgba(110, 231, 249, 0.4));
    box-shadow: 0 26px 64px rgba(2, 6, 23, 0.32);
}

.mod-card.is-cyan { --mk-card-accent: var(--aurora-cyan); --mk-card-soft: rgba(110, 231, 249, 0.12); --mk-card-line: rgba(110, 231, 249, 0.4); }
.mod-card.is-mint { --mk-card-accent: var(--aurora-mint); --mk-card-soft: rgba(94, 230, 183, 0.12); --mk-card-line: rgba(94, 230, 183, 0.4); }
.mod-card.is-blue { --mk-card-accent: var(--aurora-blue); --mk-card-soft: rgba(109, 168, 255, 0.14); --mk-card-line: rgba(109, 168, 255, 0.42); }
.mod-card.is-amber { --mk-card-accent: var(--aurora-amber); --mk-card-soft: rgba(247, 199, 104, 0.12); --mk-card-line: rgba(247, 199, 104, 0.42); }

.mod-card__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--mk-card-soft, rgba(110, 231, 249, 0.12));
    color: var(--mk-card-accent, var(--aurora-cyan));
    font-size: 1.05rem;
}

.mod-card__name {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.3;
}

.mod-card__arrow {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    color: rgba(216, 231, 245, 0.4);
    transition: transform 0.18s ease, color 0.18s ease;
}

.mod-card:hover .mod-card__arrow {
    transform: translateX(3px);
    color: var(--mk-card-accent, var(--aurora-cyan));
}

.mod-card__tagline {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    color: rgba(216, 231, 245, 0.68);
    font-size: 0.92rem;
    line-height: 1.55;
}

html:lang(zh-CN) .mod-card__tagline {
    line-height: 1.7;
}

/* ----------------------------------------------------------------------------
   Home "How it works" — the 3-step flow paired with the signal board visual
   (merged from the former Signals + Workflows sections).
---------------------------------------------------------------------------- */
.how-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 32px;
    align-items: start;
}

.how-layout .workflow-steps {
    gap: 16px;
}

.how-board {
    min-height: 0;
}

/* ----------------------------------------------------------------------------
   Responsive
---------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .how-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .module-hero__main {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .module-mock {
        justify-self: start;
        width: min(680px, 100%);
    }

    .benefit-grid,
    .mod-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .module-hero {
        padding: 104px 0 56px;
    }

    .module-hero .public-container {
        width: min(100% - 32px, 1180px);
    }

    .module-hero__title {
        font-size: clamp(2.3rem, 11vw, 3rem);
    }

    .module-mock,
    .benefit-grid,
    .feature-grid,
    .mod-cards {
        grid-template-columns: 1fr;
    }

    .module-mock .ui-card--wide {
        grid-column: auto;
    }

    .module-section,
    .mods-index {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .module-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .feature-card {
        grid-template-columns: 32px 1fr;
        gap: 12px;
    }
}

/* ============================================================================
   Authentic dashboard mockups
   The mockup vocabulary (.ui-card & friends, rendered by _mockup.ejs and reused
   by the home hero + the "how it works" board) is restyled here to match the
   REAL dashboard components from client/dashboard/src/styles.css: flat slate
   card surfaces, the overview metric tiles, dashboard status pills, the
   green->teal status switch, and the dashboard type scale — instead of the
   earlier blue-gradient approximations.
   ============================================================================ */

/* Card surface — dashboard soft panel (.overview-card / .dashboard-v2-card) */
.ui-card {
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 16px;
    background: rgba(11, 18, 32, 0.96);
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.16);
    backdrop-filter: none;
}

.ui-card--economy {
    background: rgba(11, 18, 32, 0.96);
}

.ui-card__head {
    margin-bottom: 14px;
}

/* Eyebrow / kicker — .overview-card__eyebrow (bright cyan, wide tracking) */
.ui-kicker {
    color: #9fdfff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Card title — .dashboard-v2-card__title */
.ui-card__title {
    margin: 0 0 12px;
    color: #f8fafc;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Status pills — .dashboard-rule-status variants (bg tint + color, no border) */
.ui-pill {
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}

.ui-pill--live,
.ui-pill--mint {
    color: #86efac;
    background: rgba(34, 197, 94, 0.14);
}

.ui-pill--elevated {
    color: #fdba74;
    background: rgba(249, 115, 22, 0.14);
}

.ui-pill--info {
    color: #dbe4ff;
    background: rgba(148, 163, 184, 0.12);
}

/* Metric tiles — .overview-metric (uppercase label, big -0.05em value, deltas) */
.ui-metric {
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 10px;
    background: rgba(11, 18, 32, 0.72);
}

.ui-metric span {
    color: rgba(191, 219, 254, 0.68);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ui-metric strong {
    margin-top: 6px;
    color: #f8fafc;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.ui-metric em {
    margin-top: 5px;
    color: rgba(191, 219, 254, 0.62);
    font-size: 0.64rem;
    font-weight: 600;
}

.ui-metric em.ui-metric__hint--good {
    color: #34d399;
}

.ui-metric em.ui-metric__hint--warn {
    color: #fbbf6b;
}

/* List / incident rows — dashboard list items */
.ui-incident {
    padding: 9px 11px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 10px;
    background: rgba(11, 18, 32, 0.55);
}

.ui-incident__text strong {
    color: #eaf1fc;
    font-weight: 700;
}

/* Status chips — full-radius .dashboard-rule-status pills */
.ui-chip {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
}

.ui-chip--reviewing {
    color: #cfe0fb;
    background: rgba(96, 165, 250, 0.16);
}

.ui-chip--open {
    color: #fda4af;
    background: rgba(244, 63, 94, 0.16);
}

.ui-chip--done {
    color: #86efac;
    background: rgba(34, 197, 94, 0.16);
}

/* Data lines (daily report) — dashboard data cells */
.ui-daily-line {
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 8px;
    background: rgba(11, 18, 32, 0.55);
}

.ui-daily-line span {
    color: rgba(191, 219, 254, 0.6);
    letter-spacing: 0.08em;
}

.ui-daily-line strong {
    color: #eaf1fc;
}

/* Reward rows */
.ui-reward-row {
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 10px;
    background: rgba(11, 18, 32, 0.55);
}

/* Tag chips — .dashboard-v2-pill */
.ui-term {
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(148, 163, 184, 0.08);
    color: #cbd5e8;
}

/* Card footer divider */
.ui-card__foot {
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    color: rgba(191, 219, 254, 0.55);
}

/* Bar charts — dashboard data surface */
.ui-graph,
.signal-board__chart {
    border: 1px solid rgba(148, 163, 184, 0.08);
    background:
        linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
        rgba(11, 18, 32, 0.55);
}

/* The "how it works" sentiment board reuses the dashboard card surface */
.signal-board__main.how-board {
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 16px;
    background: rgba(11, 18, 32, 0.96);
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.16);
}

/* Real status switch — .dashboard-status-switch (green->teal on, slate off) */
.ui-switch {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 40px;
    height: 23px;
    padding: 3px;
    border: 1px solid rgba(45, 212, 191, 0.34);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(20, 184, 166, 0.9));
    box-shadow: 0 8px 18px rgba(20, 184, 166, 0.18);
}

.ui-switch__thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f8fafc;
    box-shadow: 0 4px 10px rgba(2, 6, 23, 0.28);
}

.ui-switch--off {
    justify-content: flex-start;
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.88);
    box-shadow: none;
}

.ui-switch--off .ui-switch__thumb {
    background: rgba(226, 232, 240, 0.96);
}