/* Wavionex investor-portal shared styles.
   Mirrors palette + typography of the marketing site so all five PoC
   subdirectories feel like the same product. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root {
    --brand-dark: #0F172A;
    --brand-darker: #020617;
    --brand-accent: #6366F1;
    --brand-accent-soft: #818CF8;
    --brand-accent-strong: #4F46E5;
    --brand-light: #F8FAFC;
    --brand-silver: #94A3B8;
    --brand-text: #E2E8F0;
    --brand-text-dim: #CBD5E1;
    --brand-text-muted: #94A3B8;
    --brand-border: rgba(165, 180, 252, 0.18);
    --brand-border-strong: rgba(165, 180, 252, 0.42);
    /* Stronger card opacity so cards read clearly over the animated WebGL
       backdrop on portal pages — was 0.55 (too transparent over the echo). */
    --brand-glass: rgba(2, 6, 23, 0.78);
    --brand-glass-strong: rgba(2, 6, 23, 0.88);
    --brand-danger: #F87171;
    --brand-success: #34D399;
    --brand-radius: 0.625rem;
    --brand-radius-lg: 1rem;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

/* Always reserve space for the vertical scrollbar so the viewport width stays
   the same on every page — prevents the fixed-position nav from "hopping" a
   few pixels when navigating between long pages (scrollbar present) and short
   pages (scrollbar absent). */
html { scrollbar-gutter: stable; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    /* Solid dark base — the Quantum Echo WebGL canvas (#canvas-container) +
       .portal-hero-gradient overlay paint on top of this. */
    background: var(--brand-dark);
    color: var(--brand-text);
    /* Match the marketing site's .type-body (research pillar copy etc). */
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}

/* Paragraph text inside portal cards reads like the marketing site's
   .type-body — 1rem / 1.65 / weight 300. Inputs + labels keep their
   own weight so they don't look anaemic. */
.portal-card p,
.portal-card li,
.portal-card dd,
.portal-card dt {
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 300;
}

/* Full-viewport mount for the WebGL Quantum Echo. Same setup as the
   marketing site's #canvas-container. */
#canvas-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: #0f172a;
    pointer-events: none;
}

/* Subtle indigo overlay over the Quantum Echo — same vibe as the marketing
   site's `.hero-gradient` but with much less indigo, so the sign-in card
   stays the focal point. */
.portal-hero-gradient {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at top right, rgba(30, 27, 75, 0.4) 0%, rgba(15, 23, 42, 0.25) 70%);
}

/* Lift all the chrome above the canvas + gradient so they paint behind it. */
.wpn { z-index: 50; }
.portal-shell { position: relative; z-index: 10; }
.portal-card { position: relative; z-index: 11; }

/* Auth card — compact, premium glass-with-gradient treatment.
   Applied to view-signin / view-signup / view-verify so all three feel like
   the same component family. Selector specificity is (0,2,0) so it beats
   the generic `.portal-card` rule defined later in this file. */
.portal-card.portal-card--auth {
    position: relative;
    z-index: 11;
    max-width: 26rem;
    width: 100%;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border-radius: 1.25rem;
    /* Multi-stop gradient: indigo glow top, deep navy mid, near-black bottom. */
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(129, 140, 248, 0.18) 0%, rgba(129, 140, 248, 0) 55%),
        radial-gradient(110% 75% at 100% 0%, rgba(34, 211, 238, 0.10) 0%, rgba(34, 211, 238, 0) 60%),
        linear-gradient(180deg, rgba(30, 27, 75, 0.72) 0%, rgba(15, 23, 42, 0.78) 45%, rgba(2, 6, 23, 0.82) 100%);
    border: 1px solid rgba(165, 180, 252, 0.22);
    backdrop-filter: blur(20px) saturate(1.25);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 24px 48px -16px rgba(2, 6, 23, 0.85),
        0 0 0 1px rgba(99, 102, 241, 0.10),
        0 0 60px -20px rgba(99, 102, 241, 0.45);
}

/* Subtle gradient halo around the card edge — adds the premium feel without
   competing for attention. */
.portal-card.portal-card--auth::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.5) 0%, rgba(99, 102, 241, 0.35) 45%, rgba(79, 70, 229, 0) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

/* Page-title heading inside auth + admin glass cards — same font / weight /
   letter-spacing as the marketing site's `.type-hero-display` ("Wave
   Computing"), sized one step down so it fits a card layout. */
.portal-card.portal-card--auth h1,
.portal-card.portal-card--glass h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--brand-light);
}
.portal-card.portal-card--auth h1 {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* The signup card has more fields + a two-button action row, so it needs a
   bit more breathing room than the sign-in / verify cards. */
.portal-card.portal-card--auth#view-signup {
    max-width: 32rem;
}

/* Inside the auth card the form text matches the marketing research-pillar
   body copy: 1rem, line-height 1.65, light weight. Field labels are bumped
   to bold (700) so "Email" / "Password" stand out cleanly. */
.portal-card.portal-card--auth .portal-field label {
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 700;
    color: var(--brand-light);
    letter-spacing: 0;
}
.portal-card.portal-card--auth .portal-field input,
.portal-card.portal-card--auth .portal-field textarea {
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 300;
}

/* Wide variant of the gradient glass card — for the admin container.
   Same visual treatment as .portal-card--auth, just without the 26 rem cap. */
.portal-card.portal-card--glass {
    position: relative;
    z-index: 11;
    /* Vertically self-centre inside .portal-shell-body when there's extra space;
       auto margins collapse when the content overflows, so the table-heavy
       admin views stay top-aligned and scroll normally. */
    margin: auto 0;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    border-radius: 1.25rem;
    background:
        radial-gradient(80% 60% at 0% 0%, rgba(129, 140, 248, 0.16) 0%, rgba(129, 140, 248, 0) 55%),
        radial-gradient(85% 65% at 100% 0%, rgba(34, 211, 238, 0.10) 0%, rgba(34, 211, 238, 0) 60%),
        linear-gradient(180deg, rgba(30, 27, 75, 0.72) 0%, rgba(15, 23, 42, 0.78) 45%, rgba(2, 6, 23, 0.82) 100%);
    border: 1px solid rgba(165, 180, 252, 0.22);
    backdrop-filter: blur(20px) saturate(1.25);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 24px 48px -16px rgba(2, 6, 23, 0.85),
        0 0 0 1px rgba(99, 102, 241, 0.10),
        0 0 60px -20px rgba(99, 102, 241, 0.45);
}

/* Same gradient halo as the auth card. */
.portal-card.portal-card--glass::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.5) 0%, rgba(99, 102, 241, 0.35) 45%, rgba(79, 70, 229, 0) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

/* Forgot-password — a centred plain link, not a button. */
.portal-link-reset {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0.75rem auto 0;
    padding: 0.25rem 0;
    color: var(--brand-accent-soft);
    font-size: 0.875rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(165, 180, 252, 0.55);
}
.portal-link-reset:hover,
.portal-link-reset:focus-visible {
    color: #C7D2FE;
    text-decoration-color: #C7D2FE;
}

/* .portal-shell is a flex column that always fills at least the viewport so
   we can pin the footer to the bottom on auth pages and still grow naturally
   on the dashboard. */
.portal-shell {
    max-width: 56rem;
    margin: 0 auto;
    padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem);
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 4.5rem);
}
@media (min-width: 640px) {
    .portal-shell { min-height: calc(100vh - 5rem); }
}

/* The wrapper around all of the view sections — takes whatever space is
   left over after the footer. On auth pages, it also vertically centres
   its content (the visible sign-in / sign-up / verify card). */
.portal-shell-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.portal-auth .portal-shell-body {
    justify-content: center;
}

.portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.portal-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--brand-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.portal-brand-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: var(--brand-accent);
    box-shadow: 0 0 18px rgba(99, 102, 241, 0.65);
}

.portal-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid var(--brand-border);
    background: rgba(99, 102, 241, 0.08);
    color: var(--brand-accent-soft);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Typography matched to the marketing site: h1/h2 = .type-section-title
   (Playfair Display 700, -0.02em tracking); h3 = .type-card-title (Inter 700). */
h1, h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--brand-light);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 0.75rem 0;
}
h1 { font-size: clamp(1.75rem, 3vw, 2.375rem); }
h2 { font-size: clamp(1.25rem, 2.4vw, 1.625rem); }
h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--brand-light);
    margin: 0 0 0.75rem 0;
}

p {
    margin: 0 0 1rem 0;
    color: var(--brand-text-dim);
}

a {
    color: var(--brand-accent-soft);
    text-decoration: none;
}
a:hover, a:focus-visible { color: #C7D2FE; }

.portal-card {
    background: var(--brand-glass);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-lg);
    padding: clamp(1.25rem, 3.5vw, 2rem);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6);
}

.portal-card + .portal-card { margin-top: 1.25rem; }

.portal-form { display: flex; flex-direction: column; gap: 1rem; }

.portal-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.portal-field label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--brand-text-dim);
    letter-spacing: 0.02em;
}

.portal-field input,
.portal-field textarea {
    font: inherit;
    color: var(--brand-light);
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 0.7rem 0.875rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.portal-field input:focus,
.portal-field textarea:focus {
    outline: none;
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
    background: rgba(2, 6, 23, 0.85);
}

.portal-btn {
    font: inherit;
    cursor: pointer;
    border-radius: var(--brand-radius);
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--brand-accent) 0%, var(--brand-accent-strong) 100%);
    color: var(--brand-light);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 8px 22px -10px rgba(79, 70, 229, 0.7);
}
.portal-btn:hover:not(:disabled) { filter: brightness(1.08); }
.portal-btn:active:not(:disabled) { transform: translateY(1px); }
.portal-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.portal-btn--ghost {
    background: transparent;
    border-color: var(--brand-border-strong);
    color: var(--brand-text);
    box-shadow: none;
}
.portal-btn--ghost:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.1);
    filter: none;
}

.portal-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
}

.portal-row > * { flex: 0 0 auto; }
.portal-row--between { justify-content: space-between; }

.portal-alert {
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 0.7rem 0.875rem;
    font-size: 0.875rem;
    color: var(--brand-text-dim);
    background: rgba(2, 6, 23, 0.55);
}
.portal-alert--error {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(127, 29, 29, 0.25);
    color: #FECACA;
}
.portal-alert--ok {
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(6, 78, 59, 0.25);
    color: #A7F3D0;
}

/* Matches the marketing site's .type-caption — used for the small captions
   under inputs, deal stage labels, footnotes etc. */
.portal-muted {
    color: var(--brand-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 300;
}

.portal-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-border), transparent);
    margin: 1.5rem 0;
    border: 0;
}

.portal-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    align-items: baseline;
    font-size: 0.9375rem;
}
.portal-kv dt { color: var(--brand-text-muted); }
.portal-kv dd { margin: 0; color: var(--brand-light); font-weight: 500; word-break: break-word; }

.portal-stack > * + * { margin-top: 1rem; }

.portal-grid-deals {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.875rem;
}

.portal-deal {
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 0.875rem 1rem;
    background: rgba(15, 23, 42, 0.55);
}
.portal-deal h4 {
    margin: 0 0 0.25rem 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--brand-light);
}
.portal-deal .meta {
    font-size: 0.75rem;
    color: var(--brand-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Portal footer — same typography as the marketing site's footer bottom row
   (.type-label-caps + text-slate-600). */
.portal-footer {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--brand-border);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #475569;                 /* slate-600, same as marketing footer */
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
}
.portal-footer a {
    color: inherit;
    text-decoration: none;
}
.portal-footer a:hover { color: var(--brand-accent-soft); }

/* Comparison/landing-only helpers (used by portal-poc-comparison.html). */
.poc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}

.poc-grid .portal-card { padding: 1.25rem 1.25rem 1.5rem; }
.poc-grid .portal-card h3 { margin-bottom: 0.5rem; }

.poc-stack-line {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    color: var(--brand-accent-soft);
    margin: 0.25rem 0 0.875rem 0;
}

/* =========================================================================
   Portal nav — mirrors the marketing site's .glass-nav exactly. Mounted by
   portals/_shared/portal-nav.js. Class names are .wpn-* (Wavionex Portal Nav)
   to avoid colliding with Tailwind-based utility classes used by the site.
   ========================================================================= */
.wpn {
    /* Fixed (not sticky) so the nav spans the *viewport*, exactly like the
       marketing site. Sticky on portal pages would centre the nav inside
       <body>, which is narrower than the viewport whenever the scrollbar
       takes width — causing a left-shift when crossing from / to /portals/. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    width: 100%;
    isolation: isolate;
    overflow: visible;
    background: linear-gradient(180deg, rgba(7, 12, 28, 0.93) 0%, rgba(9, 15, 31, 0.92) 100%);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    backdrop-filter: blur(12px) saturate(1.15);
    border-bottom: 1px solid transparent;
    box-shadow: 0 18px 48px rgba(2, 6, 23, 0.3);
    transition: background 0.225s ease, border-color 0.225s ease, box-shadow 0.225s ease, -webkit-backdrop-filter 0.225s ease, backdrop-filter 0.225s ease;
}

/* Account for the fixed nav so portal content doesn't disappear under it.
   Marketing site uses `.main-pad-top { padding-top: var(--header-anchor); }`;
   the portal pages don't have that class — push the body down by the nav
   height instead. The class is set by mountNav() so pages that import the
   shared stylesheet but don't mount the nav (e.g. the comparison page)
   aren't affected. */
body.wpn-active { padding-top: 4.5rem; }
@media (min-width: 640px) { body.wpn-active { padding-top: 5rem; } }

/* Same two overlay layers the marketing nav uses — subtle highlight + tri-colour glow. */
.wpn::before,
.wpn::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: opacity 0.225s ease, background 0.225s ease;
}
.wpn::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 18%, rgba(255, 255, 255, 0) 52%);
    opacity: 0.55;
}
.wpn::after {
    background:
        radial-gradient(circle at 18% 20%, rgba(34, 211, 238, 0.18), rgba(34, 211, 238, 0) 27%),
        radial-gradient(circle at 52% -10%, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0) 36%),
        radial-gradient(circle at 84% 18%, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0) 26%);
    opacity: 1;
}

.wpn-inner {
    position: relative;
    z-index: 1;
    /* Tailwind max-w-screen-2xl = 96rem — matches the main marketing nav so
       there is zero alignment shift when crossing from / to /portals/. */
    max-width: 96rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 4.5rem;
}

@media (min-width: 640px) {
    .wpn-inner { padding: 0 1.5rem; min-height: 5rem; gap: 1rem; }
}

/* Right-side group: profile dropdown + burger on mobile. Separate from
   .wpn-primary so the layout matches the main site's three-column nav
   (brand | primary | right). */
.wpn-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.wpn-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--brand-text);
    min-width: 0;
    flex-shrink: 1;
}

.wpn-brand img {
    display: block;
    height: 2.4375rem;
    width: auto;
    max-width: min(58vw, 252px);
}

@media (min-width: 640px) {
    .wpn-brand img { height: 2.9375rem; max-width: min(76vw, 292px); }
}

.wpn-tagline {
    display: block;
    margin-top: 0.375rem;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.71875rem, 1.9vw, 0.9375rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.35;
    white-space: nowrap;
    color: rgba(199, 210, 254, 0.9);
}

@media (min-width: 640px) {
    .wpn-tagline { margin-top: 0.5rem; }
}

.wpn-primary {
    display: none;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
    justify-content: flex-end;
    /* Match .nav-primary spec from the marketing site verbatim. */
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (min-width: 1024px) { .wpn-primary { display: flex; } }
@media (min-width: 1280px) {
    .wpn-primary { gap: 2rem; font-size: 1.0625rem; letter-spacing: 0.05em; }
}

.wpn-link {
    color: #94a3b8;
    text-decoration: none;
    padding: 0.5rem 0;
    transition: color 0.18s ease;
}

.wpn-link:hover, .wpn-link:focus-visible { color: #818cf8; }

/* Company dropdown */
.wpn-dropdown { position: relative; display: inline-flex; flex-direction: column; align-items: center; overflow: visible; }
.wpn-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: transparent;
    border: 0;
    color: #cbd5e1;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0.5rem 0;
}
.wpn-dropdown-trigger:hover, .wpn-dropdown-trigger:focus-visible { color: #fff; }
.wpn-dropdown-trigger svg { width: 14px; height: 14px; opacity: 0.8; }

.wpn-menu {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 0.375rem;
    min-width: 14rem;
    background-color: #020617;
    border: 1px solid rgba(99, 102, 241, 0.5);
    border-radius: 0.375rem;
    padding: 0.5rem 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.135s ease, visibility 0.135s ease;
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.wpn-dropdown[data-open="true"] .wpn-menu { visibility: visible; opacity: 1; pointer-events: auto; }

.wpn-menu a, .wpn-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.625rem 1rem;
    color: #e2e8f0;
    background: transparent;
    border: 0;
    font: inherit;
    /* Items are normal-case + lighter weight — matches .nav-dropdown-item. */
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.wpn-menu a:hover, .wpn-menu button:hover { background: rgba(99, 102, 241, 0.15); color: #fff; }
.wpn-menu strong { color: var(--brand-light); }

/* "Sign out" button gets the same indigo emphasis as the main site's
   primary dropdown item. */
.wpn-profile-menu > button[data-signout] {
    color: #C7D2FE;                                 /* indigo-200 */
    font-weight: 600;
}
.wpn-profile-menu > button[data-signout]:hover {
    background: rgba(79, 70, 229, 0.3);             /* indigo-600/30 */
    color: #fff;
}

/* Signed-out icon: plain link + hover tooltip.
   Sits next to .wpn-profile (signed-in dropdown); only one is visible at a time. */
.wpn-profile-link { position: relative; display: inline-flex; }

/* The `hidden` HTML attribute is normally `display: none` but the rules above
   set `display: inline-flex` and beat the user-agent stylesheet on
   specificity. These selectors restore the hide semantics. */
.wpn-profile-link[hidden],
.wpn-profile[hidden] { display: none; }

.wpn-profile-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background-color: #020617;
    border: 1px solid rgba(99, 102, 241, 0.5);
    color: #cbd5e1;
    padding: 0.4rem 0.75rem;
    border-radius: 0.375rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    z-index: 200;
    box-shadow:
        0 18px 38px -10px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.wpn-profile-link:hover .wpn-profile-tooltip,
.wpn-profile-link:focus-within .wpn-profile-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Profile icon button + dropdown.
   Trigger styling mirrors the main marketing nav's profile button exactly
   so crossing from / to /portals/ shows no visual jump. */
.wpn-profile { display: inline-flex; position: relative; flex-direction: column; align-items: center; overflow: visible; }
.wpn-profile-trigger {
    background: transparent;
    /* slate-600/60 = rgba(71, 85, 105, 0.6) */
    border: 1px solid rgba(71, 85, 105, 0.6);
    border-radius: 9999px;
    color: #cbd5e1;                 /* slate-300 */
    cursor: pointer;
    padding: 0;
    width: 2.5rem;                  /* w-10 */
    height: 2.5rem;                 /* h-10 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;          /* the signed-out variant is an <a> */
    transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.wpn-profile-trigger:hover,
.wpn-profile-trigger:focus-visible {
    /* indigo-400/70 = rgba(129, 140, 248, 0.7) */
    border-color: rgba(129, 140, 248, 0.7);
    /* indigo-500/10 = rgba(99, 102, 241, 0.1) */
    background: rgba(99, 102, 241, 0.1);
    color: #fff;
}

/* Anchor the dropdown to the right edge of the trigger (same as main site profile menu). */
.wpn-profile .wpn-profile-menu {
    right: 0;
    left: auto;
    transform: none;
}

.wpn-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
}
.wpn-avatar svg { width: 100%; height: 100%; display: block; }
/* Subtle indigo glow on hover so the colourful gradient feels alive. */
.wpn-profile-trigger:hover .wpn-avatar svg,
.wpn-profile-trigger:focus-visible .wpn-avatar svg {
    filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.55));
}

.wpn-profile-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.375rem;
    width: 18rem;
    background-color: #020617;
    /* Same border + shadow as the Company menu panel on the marketing site. */
    border: 1px solid rgba(99, 102, 241, 0.5);
    border-radius: 0.375rem;
    padding: 0.5rem 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.135s ease, visibility 0.135s ease;
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.wpn-profile[data-open="true"] .wpn-profile-menu { visibility: visible; opacity: 1; pointer-events: auto; }

.wpn-profile-menu a,
.wpn-profile-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.625rem 1rem;
    color: #e2e8f0;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.wpn-profile-menu a:hover,
.wpn-profile-menu button:hover { background: rgba(99, 102, 241, 0.15); color: #fff; }

/* `display: block` above wins over the user-agent `[hidden]` rule. Force
   hidden items to actually disappear (e.g. the Admin link when the
   signed-in user is not an admin). */
.wpn-profile-menu a[hidden],
.wpn-profile-menu button[hidden] { display: none !important; }

.wpn-profile-header {
    padding: 0.25rem 1rem 0.5rem 1rem;
    border-bottom: 1px solid var(--brand-border);
    margin-bottom: 0.25rem;
}
.wpn-profile-header .wpn-profile-line1 { color: var(--brand-light); font-weight: 600; font-size: 0.95rem; }
.wpn-profile-header .wpn-profile-line2 { color: var(--brand-text-muted); font-size: 0.78rem; word-break: break-all; }
.wpn-profile-header .wpn-profile-line3 { color: var(--brand-text-muted); font-size: 0.78rem; margin-top: 0.25rem; }

.wpn-status-pill {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid var(--brand-border);
}
.wpn-status-pill--admin    { color: var(--brand-accent-soft); border-color: rgba(165,180,252,0.4); }
.wpn-status-pill--approved { color: var(--brand-success); border-color: rgba(52,211,153,0.4); }
.wpn-status-pill--pending  { color: var(--brand-text-muted); }

/* Mobile burger + sheet */
.wpn-mobile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid rgba(100, 116, 139, 0.6);
    border-radius: var(--brand-radius);
    background: transparent;
    color: var(--brand-text-dim);
    cursor: pointer;
}
@media (min-width: 1024px) { .wpn-mobile-btn { display: none; } }
.wpn-mobile-btn:hover { background: rgba(255,255,255,0.05); color: var(--brand-light); }

.wpn-sheet {
    display: none;
    position: fixed;
    inset: 4.5rem 0 0 0;
    background: rgba(2, 6, 23, 0.96);
    z-index: 49;
    overflow-y: auto;
    padding: 1.5rem;
}
.wpn-sheet[data-open="true"] { display: block; }
.wpn-sheet a, .wpn-sheet button {
    display: block;
    padding: 0.9rem 0;
    color: var(--brand-text-dim);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: transparent;
    border-left: 0; border-right: 0; border-top: 0;
    font: inherit;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.wpn-sheet a:hover, .wpn-sheet button:hover { color: var(--brand-accent-soft); }
.wpn-sheet .wpn-sheet-sub {
    padding-left: 0.75rem;
    border-left: 2px solid rgba(99, 102, 241, 0.4);
    margin: 0.25rem 0;
}