/*
===============================================================================
OG ID v0.6.2110(og) // ECOSYSTEM SWITCHER + MAIL SIGNAL
===============================================================================

This file is intentionally readable and heavily commented. It sits after the
established og-id.css stylesheet, so these rules can refine the interface without
rewriting the entire visual foundation during a focused release.

COLOR RULE:
- True ultraviolet/purple = identity, navigation and energy.
- Signal green = online, connected, confirmed and interactive response.
- Gold = founder, time-sensitive and elevated status.
- Rose/red = errors, warnings, revoked access and destructive actions only.
- There is no decorative pink or purple-to-pink gradient in this layer.
*/

:root {
    --og-ultraviolet-deep: #4324c6;
    --og-ultraviolet: #6848ef;
    --og-ultraviolet-light: #9a86ff;
    --og-signal: #b8ff31;
    --og-signal-strong: #8cff3f;
    --og-graphite: #08070d;
    --og-graphite-raised: #12101b;
    --og-graphite-card: #151220;
    --og-rose-alert: #ff706f;
}

/*
The previous texture concept was correct, but a dense noise raster looked grainy.
This version uses only sharp CSS grid lines and very low-opacity radial light.
Because it is vector-like CSS, it remains crisp on Retina and high-DPI screens.
*/
.og-noise {
    opacity: .18;
    background-image:
        linear-gradient(rgba(154, 134, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(154, 134, 255, .035) 1px, transparent 1px);
    background-size: 88px 88px;
}

body {
    background:
        radial-gradient(circle at 76% -10%, rgba(104, 72, 239, .20), transparent 35%),
        radial-gradient(circle at 8% 58%, rgba(140, 255, 63, .075), transparent 31%),
        radial-gradient(circle at 52% 112%, rgba(101, 230, 226, .035), transparent 30%),
        var(--og-graphite);
}

/* Give the access button and the disclosure below it unmistakable separation. */
.og-access-panel .og-consent-disclosure {
    margin-top: 16px;
}

/* Six Control stats fit cleanly without forcing a narrow fourth-column layout. */
.og-stat-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/*
===============================================================================
FOUR-LINE PYRAMID MENU
===============================================================================

The visual begins as a pyramid: each line is wider than the one above it. Hover,
focus and the open state reverse the widths. This is the same interaction concept
Russell approved for the Inspiro hamburger, now implemented as accessible markup.
*/
.og-pyramid-menu {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line2) !important;
    border-radius: 13px;
    padding: 9px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    background: rgba(18, 16, 27, .88) !important;
    cursor: pointer;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.og-pyramid-menu span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--og-ultraviolet-light), var(--og-signal));
    box-shadow: 0 0 10px rgba(184, 255, 49, .08);
    transition: width .28s cubic-bezier(.2, .8, .2, 1), transform .28s ease;
}

.og-pyramid-menu span:nth-child(1) { width: 9px; }
.og-pyramid-menu span:nth-child(2) { width: 14px; }
.og-pyramid-menu span:nth-child(3) { width: 19px; }
.og-pyramid-menu span:nth-child(4) { width: 24px; }

.og-pyramid-menu:hover,
.og-pyramid-menu:focus-visible,
.og-pyramid-menu[aria-expanded="true"] {
    border-color: rgba(184, 255, 49, .7) !important;
    box-shadow: 0 0 0 4px rgba(104, 72, 239, .11), 0 0 28px rgba(184, 255, 49, .08);
    transform: translateY(-1px);
    outline: none;
}

.og-pyramid-menu:hover span:nth-child(1),
.og-pyramid-menu:focus-visible span:nth-child(1),
.og-pyramid-menu[aria-expanded="true"] span:nth-child(1) { width: 24px; }
.og-pyramid-menu:hover span:nth-child(2),
.og-pyramid-menu:focus-visible span:nth-child(2),
.og-pyramid-menu[aria-expanded="true"] span:nth-child(2) { width: 19px; }
.og-pyramid-menu:hover span:nth-child(3),
.og-pyramid-menu:focus-visible span:nth-child(3),
.og-pyramid-menu[aria-expanded="true"] span:nth-child(3) { width: 14px; }
.og-pyramid-menu:hover span:nth-child(4),
.og-pyramid-menu:focus-visible span:nth-child(4),
.og-pyramid-menu[aria-expanded="true"] span:nth-child(4) { width: 9px; }

/*
===============================================================================
ECOSYSTEM SWITCHER OVERLAY
===============================================================================
*/
body.og-switcher-open {
    overflow: hidden;
}

.og-switcher[hidden] {
    display: none;
}

.og-switcher {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: clamp(12px, 3vw, 36px);
}

.og-switcher-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(3, 2, 7, .84);
    backdrop-filter: blur(22px) saturate(.72);
    cursor: default;
}

.og-switcher-shell {
    position: relative;
    width: min(1320px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    border: 1px solid #453b62;
    border-radius: 28px;
    padding: clamp(20px, 3.5vw, 42px);
    background:
        radial-gradient(circle at 88% -8%, rgba(104, 72, 239, .22), transparent 34%),
        radial-gradient(circle at 2% 96%, rgba(184, 255, 49, .055), transparent 30%),
        rgba(11, 9, 17, .98);
    box-shadow: 0 40px 120px rgba(0, 0, 0, .66);
    animation: ogSwitcherIn .30s cubic-bezier(.2, .8, .2, 1) both;
}

.og-switcher-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image:
        linear-gradient(rgba(154, 134, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(154, 134, 255, .025) 1px, transparent 1px);
    background-size: 66px 66px;
    mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.og-switcher-head,
.og-switcher-foot,
.og-app-grid {
    position: relative;
    z-index: 1;
}

.og-switcher-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 26px;
    margin-bottom: 28px;
}

.og-switcher-head > div > span {
    color: var(--og-signal);
    font-size: .64rem;
    font-weight: 950;
    letter-spacing: .19em;
}

.og-switcher-head h2 {
    margin: 8px 0 7px;
    font-size: clamp(2.1rem, 5vw, 5.5rem);
    line-height: .92;
    letter-spacing: -.065em;
    text-transform: uppercase;
}

.og-switcher-head p {
    margin: 0;
    color: var(--muted);
}

.og-switcher-close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line2);
    border-radius: 999px;
    background: rgba(8, 7, 13, .78);
    color: var(--text);
    padding: 9px 10px 9px 15px;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .12em;
    cursor: pointer;
}

.og-switcher-close b {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--og-ultraviolet);
    color: white;
    font-size: 1.05rem;
}

.og-switcher-close:hover,
.og-switcher-close:focus-visible {
    border-color: var(--og-signal);
    outline: none;
}

.og-app-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    perspective: 1100px;
}

.og-ecosystem-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    min-height: 286px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    border: 1px solid #352e49;
    border-radius: 20px;
    padding: 20px;
    color: var(--text);
    text-decoration: none;
    background:
        linear-gradient(145deg, rgba(22, 18, 33, .98), rgba(11, 9, 17, .98));
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);
    transform-style: preserve-3d;
    transition: transform .16s ease-out, border-color .22s ease, box-shadow .22s ease;
    overflow: hidden;
}

.og-ecosystem-card::after {
    content: "";
    position: absolute;
    inset: auto -20% -55% 30%;
    height: 75%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(104, 72, 239, .20), transparent 68%);
    pointer-events: none;
}

.og-ecosystem-card:hover,
.og-ecosystem-card:focus-visible {
    border-color: rgba(184, 255, 49, .50);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .38), 0 0 0 1px rgba(104, 72, 239, .18);
    outline: none;
}

.og-app-card-top,
.og-app-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    transform: translateZ(20px);
}

.og-app-monogram {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid #5a4c79;
    border-radius: 15px;
    color: var(--og-ultraviolet-light);
    background: #1b1628;
    font-size: .75rem;
    font-weight: 950;
    letter-spacing: -.02em;
}

.og-app-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #978fa4;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.og-app-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--og-ultraviolet-light);
    box-shadow: 0 0 11px rgba(154, 134, 255, .65);
}

.og-app-status.is-connected {
    color: var(--og-signal);
}

.og-app-status.is-connected i {
    background: var(--og-signal);
    box-shadow: 0 0 13px rgba(184, 255, 49, .7);
}

.og-app-card-copy {
    position: relative;
    z-index: 1;
    transform: translateZ(30px);
}

.og-app-card-copy small {
    display: block;
    color: var(--og-signal);
    font-size: .54rem;
    font-weight: 900;
    letter-spacing: .13em;
    line-height: 1.45;
}

.og-app-card-copy h3 {
    margin: 9px 0 8px;
    font-size: clamp(1.35rem, 2vw, 2.05rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.og-app-card-copy p {
    margin: 0;
    color: #9f98aa;
    font-size: .73rem;
    line-height: 1.58;
}

.og-app-card-foot {
    border-top: 1px solid #302a40;
    padding-top: 13px;
    color: #716a7b;
    font-size: .51rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.og-app-card-foot b {
    color: var(--og-ultraviolet-light);
}

.og-ecosystem-card:hover .og-app-card-foot b {
    color: var(--og-signal);
}

.og-switcher-foot {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #302a40;
    color: #777080;
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.og-switcher-foot a {
    color: var(--og-ultraviolet-light);
    text-decoration: none;
}

.og-switcher-foot a:hover { color: var(--og-signal); }

/*
===============================================================================
MAIL DELIVERY SIGNALS
===============================================================================
*/
.og-mail-signal {
    display: grid;
    grid-template-columns: 10px 1fr;
    align-items: center;
    gap: 11px;
    margin: 16px 0;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 12px 14px;
    background: rgba(8, 7, 13, .62);
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.45;
}

.og-mail-signal > i,
.og-mail-rule > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.og-mail-signal span { display: grid; gap: 3px; }
.og-mail-signal b { font-size: .57rem; letter-spacing: .12em; }

.og-mail-signal.is-sent {
    border-color: rgba(184, 255, 49, .35);
}
.og-mail-signal.is-sent > i { background: var(--og-signal); box-shadow: 0 0 12px var(--og-signal); }
.og-mail-signal.is-sent b { color: var(--og-signal); }

/* Rose is used here because this is a real failure state, not decoration. */
.og-mail-signal.is-failed {
    border-color: rgba(255, 112, 111, .48);
    background: rgba(255, 112, 111, .055);
}
.og-mail-signal.is-failed > i { background: var(--og-rose-alert); box-shadow: 0 0 12px rgba(255, 112, 111, .55); }
.og-mail-signal.is-failed b { color: #ffaaa9; }

.og-mail-signal.is-skipped > i { background: var(--gold); box-shadow: 0 0 12px rgba(230, 196, 93, .45); }
.og-mail-signal.is-skipped b { color: var(--gold); }

.og-mail-config {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 18px;
}

.og-mail-config > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 12px;
    background: rgba(8, 7, 13, .50);
}

.og-mail-config small {
    color: #756e81;
    font-size: .50rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.og-mail-config b {
    color: #d9d4e0;
    font-size: .66rem;
    overflow-wrap: anywhere;
}

.og-mail-config b.is-online { color: var(--og-signal); }

.og-mail-rule {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 11px;
    align-items: center;
    margin-top: 14px;
    border-left: 2px solid var(--og-signal);
    padding: 7px 0 7px 12px;
    color: var(--muted);
    font-size: .65rem;
    line-height: 1.55;
}

.og-mail-rule > i { background: var(--og-signal); }
.og-mail-rule span { display: grid; gap: 2px; }
.og-mail-rule b { color: var(--og-signal); font-size: .54rem; letter-spacing: .11em; }

.og-mail-feed { display: grid; }
.og-mail-feed > div:not(.og-empty) {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.og-mail-feed > div > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
}
.og-mail-feed > div.is-sent > i { background: var(--og-signal); box-shadow: 0 0 10px rgba(184,255,49,.5); }
.og-mail-feed > div.is-failed > i { background: var(--og-rose-alert); box-shadow: 0 0 10px rgba(255,112,111,.5); }
.og-mail-feed p { display: grid; gap: 2px; margin: 0; min-width: 0; }
.og-mail-feed b { font-size: .58rem; }
.og-mail-feed span,
.og-mail-feed small,
.og-mail-feed time { color: #777080; font-size: .55rem; line-height: 1.35; }
.og-mail-feed small { color: #a18f94; }

@keyframes ogSwitcherIn {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1180px) {
    .og-app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .og-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .og-topnav { gap: 10px; }
    .og-topnav .og-system { display: none; }
    .og-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .og-switcher-head { align-items: center; }
    .og-switcher-head p { display: none; }
    .og-ecosystem-card { min-height: 250px; }
}

@media (max-width: 560px) {
    .og-topnav > a:not(:last-of-type) { display: none; }
    .og-pyramid-menu { width: 40px; height: 40px; }
    .og-switcher { padding: 8px; }
    .og-switcher-shell { max-height: calc(100vh - 16px); border-radius: 21px; padding: 18px; }
    .og-switcher-head h2 { font-size: 2.35rem; }
    .og-switcher-close { font-size: 0; padding-left: 9px; }
    .og-app-grid { grid-template-columns: 1fr; }
    .og-ecosystem-card { min-height: 225px; }
    .og-switcher-foot { display: grid; }
    .og-mail-config { grid-template-columns: 1fr; }
    .og-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Respect members who explicitly request reduced motion at OS/browser level. */
@media (prefers-reduced-motion: reduce) {
    .og-switcher-shell,
    .og-ecosystem-card,
    .og-pyramid-menu,
    .og-pyramid-menu span {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}