/*
 * 08067Sec portal visual refresh
 *
 * A dark, square-edged interface with restrained purple and cyan accents.
 * This file intentionally loads after the generated SPA and AI styles.
 */

:root {
    color-scheme: dark;
    --sec-bg: #07050d;
    --sec-bg-raised: #0d0918;
    --sec-panel: #120c20;
    --sec-panel-strong: #19102d;
    --sec-border: #372552;
    --sec-border-bright: #5d3d86;
    --sec-purple: #9c6ade;
    --sec-purple-bright: #bd93ff;
    --sec-cyan: #56cbd3;
    --sec-green: #71d3a5;
    --sec-pink: #de8eb9;
    --sec-text: #eee9f6;
    --sec-text-muted: #aaa0b9;
    --sec-text-faint: #786e88;
}

html,
body,
.site-shell,
.site-main,
.site-shell-spa,
.site-main-spa,
#root,
#root > div {
    background: var(--sec-bg) !important;
    color: var(--sec-text) !important;
}

body {
    min-height: 100vh;
    letter-spacing: 0;
}

::selection {
    background: var(--sec-purple);
    color: #08050f;
}

* {
    scrollbar-color: var(--sec-purple) var(--sec-bg);
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--sec-bg);
}

*::-webkit-scrollbar-thumb {
    border-radius: 0;
    background: var(--sec-purple);
}

/* Remove the decorative glow layer and retain one quiet technical grid. */
#root .ambient {
    display: none !important;
}

#root .bg-grid {
    background-color: transparent !important;
    background-image:
        linear-gradient(rgba(156, 106, 222, 0.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(86, 203, 211, 0.055) 1px, transparent 1px) !important;
    background-size: 36px 36px !important;
}

/* Square off the generated utility classes and all primary controls. */
.site-shell-spa :where(
    button,
    input,
    textarea,
    select,
    article,
    .card,
    .btn,
    .nav-pill,
    [class*="rounded"]
) {
    border-radius: 0 !important;
}

#root [class*="shadow"] {
    box-shadow: none !important;
}

/* Header and navigation */
#root > div > header {
    background: rgba(7, 5, 13, 0.96) !important;
    border-bottom: 1px solid var(--sec-border) !important;
    backdrop-filter: blur(16px);
}

#root > div > header::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    width: min(28vw, 360px);
    height: 1px;
    background: var(--sec-cyan);
    content: "";
}

#root .nav-pill {
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--sec-text-muted) !important;
}

#root .nav-pill:hover {
    border-color: var(--sec-border) !important;
    background: var(--sec-panel) !important;
    color: var(--sec-text) !important;
}

#root .nav-pill.active,
#root .nav-pill.text-white {
    border-color: var(--sec-purple) !important;
    background: var(--sec-panel-strong) !important;
    color: var(--sec-purple-bright) !important;
}

/* Solid controls replace orange-to-purple gradients. */
#root .btn,
#root button,
#root input,
#root textarea,
#root select {
    border-color: var(--sec-border) !important;
}

#root .btn-primary,
#root .mobile-primary-action,
#root [class*="bg-gradient"]:not([class*="bg-clip-text"]) {
    background-color: #6f3fb2 !important;
    background-image: none !important;
    color: #fff !important;
}

#root .btn-primary:hover,
#root .mobile-primary-action:hover {
    border-color: var(--sec-purple-bright) !important;
    background-color: #8151c5 !important;
}

#root .btn-ghost,
#root [class*="bg-white"],
#root [class*="bg-slate-50"],
#root [class*="bg-slate-100"],
#root [class*="bg-slate-200"],
#root [class*="dark:bg-slate"] {
    background-color: var(--sec-panel) !important;
    background-image: none !important;
}

#root .btn-ghost {
    border: 1px solid var(--sec-border) !important;
    color: var(--sec-text) !important;
}

#root .btn-ghost:hover {
    border-color: var(--sec-cyan) !important;
    color: var(--sec-cyan) !important;
}

/* Panels, cards and authored home-page blocks */
#root .card,
#root .panel-card,
#root .home-custom-block,
#root .home-outline-desktop,
#root .home-outline-drawer-panel,
#root [class*="border-grad"] {
    border: 1px solid var(--sec-border) !important;
    background: var(--sec-panel) !important;
    color: var(--sec-text) !important;
}

#root .card:hover,
#root .home-custom-block:hover {
    border-color: var(--sec-border-bright) !important;
}

#root .border-grad::before {
    background: var(--sec-purple) !important;
    background-image: none !important;
}

#root .home-custom-block-transparent {
    background: transparent !important;
}

#root .home-outline-desktop,
#root .home-outline-drawer-panel {
    border-left: 2px solid var(--sec-purple) !important;
}

#root .home-outline-drawer-toggle {
    border: 1px solid var(--sec-purple) !important;
    background: var(--sec-panel-strong) !important;
    color: var(--sec-purple-bright) !important;
}

/* Replace gradient lettering with deliberate solid accent colors. */
#root .gradient-text,
#root [class*="bg-gradient"][class*="bg-clip-text"],
#root [class*="bg-gradient"][class*="text-transparent"] {
    background: none !important;
    color: var(--sec-purple-bright) !important;
    -webkit-text-fill-color: var(--sec-purple-bright) !important;
}

#root .rich-text-gradient {
    background: none !important;
    color: var(--sec-purple-bright) !important;
    -webkit-text-fill-color: currentColor !important;
}

#root .rich-text-gradient-ocean {
    color: var(--sec-cyan) !important;
}

#root .rich-text-gradient-aurora {
    color: var(--sec-green) !important;
}

#root .rich-text-gradient-candy {
    color: var(--sec-pink) !important;
}

#root .text-brand-purple {
    color: var(--sec-purple-bright) !important;
}

#root .text-brand-orange {
    color: var(--sec-cyan) !important;
}

#root main p {
    color: var(--sec-text-muted) !important;
}

/* Normalize generated light-theme text and borders. */
#root :is(
    [class*="text-slate-900"],
    [class*="text-slate-800"],
    [class*="text-slate-700"]
) {
    color: var(--sec-text) !important;
}

#root :is(
    [class*="text-slate-600"],
    [class*="text-slate-500"],
    [class*="text-slate-400"],
    [class*="text-slate-300"]
) {
    color: var(--sec-text-muted) !important;
}

#root [class*="border-slate"],
#root footer,
#root footer [class*="border"] {
    border-color: var(--sec-border) !important;
}

#root a {
    text-decoration-color: var(--sec-purple);
}

#root footer {
    background: var(--sec-bg-raised) !important;
    color: var(--sec-text-muted) !important;
}

/* Forms and editable surfaces */
#root input,
#root textarea,
#root select {
    background: #090611 !important;
    color: var(--sec-text) !important;
    outline: none;
}

#root input:focus,
#root textarea:focus,
#root select:focus {
    border-color: var(--sec-cyan) !important;
    box-shadow: 0 0 0 1px var(--sec-cyan) !important;
}

#root input::placeholder,
#root textarea::placeholder {
    color: var(--sec-text-faint) !important;
}

/* AI workspace */
.ai-portal-page,
.ai-page,
.ai-main,
.ai-chat-shell,
.ai-conversation {
    background: var(--sec-bg) !important;
    color: var(--sec-text) !important;
}

.ai-portal-page [class*="ai-"],
.ai-page.ai-page--spa {
    border-radius: 0 !important;
}

.ai-page--spa .ai-history-drawer {
    animation: none !important;
}

.ai-portal-intro,
.ai-portal-status,
.ai-sidebar,
.ai-history-drawer,
.ai-sidebar-open,
.ai-sidebar-close,
.ai-composer,
.ai-login-card,
.ai-starter-list button,
.ai-current-session button,
.ai-history-info {
    border-color: var(--sec-border) !important;
    border-radius: 0 !important;
    background: var(--sec-panel) !important;
    box-shadow: none !important;
    color: var(--sec-text) !important;
}

.ai-sidebar-open,
.ai-sidebar-close {
    color: var(--sec-text-muted) !important;
}

.ai-starter-list button:hover,
.ai-current-session button:hover {
    border-color: var(--sec-purple) !important;
    background: var(--sec-panel-strong) !important;
}

.ai-send-button,
.ai-drawer-new,
.ai-login-submit {
    border-radius: 0 !important;
    background: #6f3fb2 !important;
    background-image: none !important;
    box-shadow: none !important;
}

.ai-eyebrow,
.ai-scope-label,
.ai-sidebar-section-label {
    color: var(--sec-cyan) !important;
}

.ai-welcome h1,
.ai-login-card h2,
.ai-portal-heading h1 {
    color: var(--sec-text) !important;
}

.ai-welcome-copy,
.ai-login-copy,
.ai-disclaimer,
.ai-starter-list small,
.ai-history-info p {
    color: var(--sec-text-muted) !important;
}

/* Keep dense pages usable on small screens. */
@media (max-width: 767px) {
    #root > div > header {
        background: var(--sec-bg) !important;
    }

    #root .layout-mobile-nav {
        border-top: 1px solid var(--sec-border);
    }

    #root .card,
    #root .home-custom-block {
        border-left-color: var(--sec-purple) !important;
    }

    #root .home-outline-drawer:not(.is-open) {
        transform: translateX(-100%) !important;
    }

    #root .home-outline-drawer.is-open {
        transform: translateX(0) !important;
    }
}

@media (max-width: 480px) {
    #root .home-outline-drawer {
        display: none !important;
    }
}

/* Homepage: two full-width narrative sections */
.home-rebuilt {
    background: #05030a;
    color: #f7f4ff;
}

.home-story-section,
.home-milestones-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #07040d;
    background-repeat: no-repeat;
    background-size: cover;
}

.home-story-section::before,
.home-milestones-section::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: rgba(4, 2, 10, 0.48);
    content: "";
}

.home-story-section {
    display: flex;
    min-height: calc(100svh - 68px);
    align-items: center;
    background-position: center;
}

.home-milestones-section {
    min-height: 1080px;
    background-position: center top;
}

.home-section-inner {
    width: min(100% - 40px, 1200px);
    margin-inline: auto;
}

.home-story-inner {
    padding-block: 104px;
}

.home-section-kicker {
    margin: 0 0 20px;
    color: #55d9f4;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.home-brand-title {
    max-width: 720px;
    margin: 0;
    color: #ffffff;
    font-size: 72px;
    font-weight: 900;
    line-height: 0.96;
    letter-spacing: 0;
}

.home-brand-title span {
    display: block;
    margin-top: 18px;
    color: #c8a9ff;
    font-size: 20px;
    font-weight: 700;
}

.home-story-copy {
    max-width: 720px;
    margin-top: 52px;
    padding-left: 24px;
    border-left: 2px solid #7b4bd4;
}

.home-story-copy p {
    margin: 0;
    color: #ded8e9;
    font-size: 16px;
    line-height: 1.95;
}

.home-story-copy p + p {
    margin-top: 17px;
}

.home-section-divider {
    position: relative;
    height: 88px;
    background: #05030a;
}

.home-section-divider::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(100% - 40px, 1200px);
    height: 1px;
    background: #2a163f;
    content: "";
    transform: translate(-50%, -50%);
}

.home-milestones-inner {
    padding-block: 112px 128px;
}

.home-milestones-inner > .home-section-kicker,
.home-milestones-inner > h2,
.home-timeline {
    width: min(100%, 720px);
    margin-left: auto;
}

.home-milestones-inner > h2 {
    margin-top: 0;
    margin-bottom: 58px;
    color: #ffffff;
    font-size: 48px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0;
}

.home-timeline {
    border-top: 1px solid #3a2850;
}

.home-timeline-year {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 28px;
    padding-block: 34px;
    border-bottom: 1px solid #3a2850;
}

.home-timeline-year h3 {
    margin: 0;
    color: #c8a9ff;
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0;
}

.home-timeline-year:first-child h3 {
    color: #55d9f4;
}

.home-timeline-year ul {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-timeline-year li {
    position: relative;
    padding-left: 18px;
    color: #e2dceb;
    font-size: 15px;
    line-height: 1.75;
}

.home-timeline-year li::before {
    position: absolute;
    top: 0.72em;
    left: 0;
    width: 5px;
    height: 5px;
    background: #55d9f4;
    content: "";
}

@media (max-width: 900px) {
    .home-story-section::before,
    .home-milestones-section::before {
        background: rgba(4, 2, 10, 0.68);
    }

    .home-brand-title {
        font-size: 56px;
    }

    .home-milestones-inner > .home-section-kicker,
    .home-milestones-inner > h2,
    .home-timeline {
        width: min(100%, 680px);
    }
}

@media (max-width: 640px) {
    .home-story-section {
        min-height: auto;
        background-position: 62% center;
    }

    .home-milestones-section {
        background-position: 31% top;
    }

    .home-story-section::before,
    .home-milestones-section::before {
        background: rgba(4, 2, 10, 0.8);
    }

    .home-section-inner {
        width: min(100% - 32px, 1200px);
    }

    .home-story-inner {
        padding-block: 76px 84px;
    }

    .home-brand-title {
        font-size: 42px;
    }

    .home-brand-title span {
        margin-top: 14px;
        font-size: 17px;
    }

    .home-story-copy {
        margin-top: 42px;
        padding-left: 16px;
    }

    .home-story-copy p {
        font-size: 15px;
        line-height: 1.85;
    }

    .home-section-divider {
        height: 64px;
    }

    .home-milestones-inner {
        padding-block: 80px 96px;
    }

    .home-milestones-inner > h2 {
        margin-bottom: 42px;
        font-size: 38px;
    }

    .home-timeline-year {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 14px;
        padding-block: 28px;
    }

    .home-timeline-year h3 {
        font-size: 19px;
    }

    .home-timeline-year li {
        padding-left: 14px;
        font-size: 14px;
        line-height: 1.7;
    }
}

.site-minimal-footer {
    margin: 0;
    padding: 22px 20px;
    border-top: 1px solid #2a163f;
    background: #05030a;
    color: #91899f;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.site-minimal-footer p {
    margin: 0;
}

/* Header scroll states */
#root > div > header.site-header {
    border-bottom: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none;
    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        backdrop-filter 220ms ease;
}

#root > div > header.site-header.is-scrolled {
    border-bottom-color: var(--sec-border) !important;
    background: rgba(7, 5, 13, 0.94) !important;
    box-shadow: 0 12px 32px rgba(2, 1, 7, 0.3) !important;
    backdrop-filter: blur(16px);
}

#root > div > header.site-header::after {
    opacity: 0;
    transition: opacity 220ms ease;
}

#root > div > header.site-header.is-scrolled::after {
    opacity: 1;
}

#root > div > header.site-header.is-top .nav-pill {
    color: #e7e0ee !important;
}

#root > div > header.site-header.is-top .nav-pill:hover {
    border-color: rgba(207, 177, 255, 0.45) !important;
    background: rgba(17, 10, 28, 0.42) !important;
}

#root > div > header.site-header.is-top .nav-pill.active,
#root > div > header.site-header.is-top .nav-pill.text-white {
    border-color: rgba(188, 139, 255, 0.7) !important;
    background: rgba(75, 40, 112, 0.36) !important;
    color: #ffffff !important;
}

#root > div > header.site-header .header-login-action,
#root > div > header.site-header .header-register-action {
    min-height: 40px;
    padding-inline: 18px;
    border: 1px solid;
    font-weight: 750;
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        color 180ms ease;
}

#root > div > header.site-header.is-top .header-login-action {
    border-color: rgba(255, 255, 255, 0.38) !important;
    background: rgba(5, 3, 10, 0.24) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px);
}

#root > div > header.site-header.is-top .header-login-action:hover {
    border-color: #55d9f4 !important;
    background: rgba(5, 3, 10, 0.5) !important;
    color: #55d9f4 !important;
}

#root > div > header.site-header .header-register-action {
    border-color: #9362d4 !important;
    background: #7041b3 !important;
    color: #ffffff !important;
}

#root > div > header.site-header.is-top .header-register-action {
    border-color: #bd91ff !important;
    background: rgba(100, 54, 160, 0.72) !important;
    backdrop-filter: blur(8px);
}

#root > div > header.site-header .header-register-action:hover {
    border-color: #55d9f4 !important;
    background: #8151c5 !important;
}

#root > div > header.site-header .mobile-user-trigger {
    min-height: 40px;
    border-color: var(--sec-border) !important;
    background: var(--sec-panel-strong) !important;
    color: var(--sec-text) !important;
}

#root > div > header.site-header.is-top .mobile-user-trigger {
    border-color: rgba(255, 255, 255, 0.38) !important;
    background: rgba(5, 3, 10, 0.34) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px);
}

#root > div > header.site-header .mobile-user-trigger:hover {
    border-color: #55d9f4 !important;
}

#root > div > header.site-header .mobile-user-trigger > img,
#root > div > header.site-header .mobile-user-trigger > div:first-child {
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50% !important;
}

#root > div > header.site-header .mobile-user-name {
    max-width: 140px;
    overflow: hidden;
    color: inherit !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#root > div > header.site-header .mobile-admin-badge {
    border: 1px solid rgba(188, 139, 255, 0.4);
    background: rgba(112, 65, 179, 0.18) !important;
    color: #c9a8ff !important;
}

#root > div > header.site-header .header-user-menu {
    border-color: var(--sec-border) !important;
    background: #0c0813 !important;
    color: var(--sec-text) !important;
}

/* Let the homepage image continue behind the transparent header. */
.home-rebuilt {
    margin-top: -68px;
}

.home-story-inner {
    padding-top: 172px;
}

@media (max-width: 767px) {
    #root > div > header.site-header {
        background: transparent !important;
    }

    #root > div > header.site-header.is-scrolled {
        background: rgba(7, 5, 13, 0.96) !important;
    }

    .home-rebuilt {
        margin-top: -122px;
    }

    .home-story-inner {
        padding-top: 198px;
    }
}