/**
 * PWA Shell CSS
 * Layers on top of research.css for the app shell layout.
 * Covers: app container, top nav, bottom tab bar, page containers,
 * detail panel, study selector pills, and assessment-mode overrides.
 */

/* Prevent icon text flash: invisible until font loads */
@font-face {
    font-family: 'Material Symbols Rounded';
    font-display: block;
}
.material-symbols-rounded {
    display: inline-block;
    width: 1em;
    height: 1em;
    overflow: hidden;
    text-align: center;
}

/* ═══════════════════════════════════════
   APP SHELL (full viewport container)
   ═══════════════════════════════════════ */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #0d1f33; /* Match bottom bar color so no gap shows on iOS */
}

/* On desktop, contain the app in viewport */
@media (min-width: 601px) {
    html, body { overflow: hidden; }
}

/* On mobile, allow natural scroll */
@media (max-width: 600px) {
    html, body { overflow-x: hidden; }
}

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--bg-primary);
}
@media (max-width: 900px) {
    .app-shell { max-width: none; }
}

/* In browser on wide screens: dark gutters */
@media (min-width: 901px) {
    body { background: #050e1a; }
    .app-shell { box-shadow: 0 0 40px rgba(0,0,0,0.3); }
    /* Desktop PWA: bump the rem base substantially so rem-based text
       (Bootstrap, assessment.css, research-app.css) scales with the canvas.
       Also override the hardcoded px inline styles sprinkled through
       pwa-app.js — attribute selectors catch the most common values. */
    html { font-size: 22px; }
    .bottom-tab { font-size: 14px; }
    .bottom-tab .material-symbols-rounded { font-size: 28px; }
    .tab-item { font-size: 19px; padding: 20px 16px 18px; }

    /* Hardcoded inline-style overrides: bump the small px values ~40%.
       Covers study cards, section labels, metadata rows, button text. */
    [style*="font-size:10px"] { font-size: 13px !important; }
    [style*="font-size: 10px"] { font-size: 13px !important; }
    [style*="font-size:11px"] { font-size: 14px !important; }
    [style*="font-size: 11px"] { font-size: 14px !important; }
    [style*="font-size:12px"] { font-size: 15px !important; }
    [style*="font-size: 12px"] { font-size: 15px !important; }
    [style*="font-size:13px"] { font-size: 17px !important; }
    [style*="font-size: 13px"] { font-size: 17px !important; }
    [style*="font-size:14px"] { font-size: 18px !important; }
    [style*="font-size: 14px"] { font-size: 18px !important; }
    [style*="font-size:15px"] { font-size: 19px !important; }
    [style*="font-size: 15px"] { font-size: 19px !important; }
    [style*="font-size:16px"] { font-size: 20px !important; }
    [style*="font-size: 16px"] { font-size: 20px !important; }
    [style*="font-size:18px"] { font-size: 22px !important; }
    [style*="font-size: 18px"] { font-size: 22px !important; }
}
@media (min-width: 1400px) {
    html { font-size: 24px; }
    .bottom-tab { font-size: 15px; }
    .bottom-tab .material-symbols-rounded { font-size: 30px; }
    .tab-item { font-size: 20px; }
}

/* Standalone PWA: fill entire window (class added by JS) */
body.pwa-standalone .app-shell {
    max-width: none;
    box-shadow: none;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}
body.pwa-standalone {
    background: #0d1f33;
    overflow-x: hidden;
}
body.pwa-standalone .app-nav {
    /* iOS standalone: env(safe-area-inset-top) can return 0 on some devices.
       Use max() to guarantee at least 54px top padding for Dynamic Island. */
    padding-top: max(54px, calc(10px + env(safe-area-inset-top, 54px)));
}
body.pwa-standalone .detail-panel {
    top: max(54px, env(safe-area-inset-top, 54px));
}
body.pwa-standalone .drawer-panel .drawer-header {
    padding-top: max(54px, calc(16px + env(safe-area-inset-top, 54px)));
}
body.pwa-standalone .bottom-bar {
    max-width: none;
    /* In standalone PWA, the home indicator area is part of the viewport.
       Use the safe area inset but don't double-pad. */
    padding-bottom: env(safe-area-inset-bottom, 6px);
}

/* ═══════════════════════════════════════
   TOP NAV BAR
   ═══════════════════════════════════════ */
.app-nav {
    flex-shrink: 0;
    min-height: 48px;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    overflow: visible;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    z-index: 150;
}

.app-nav .logo {
    height: 24px;
    width: auto;
}
.app-nav .logo-icon {
    display: none;
    height: 28px;
    width: 28px;
}
@media (max-width: 480px) and (orientation: portrait) {
    .app-nav .logo-full { display: none; }
    .app-nav .logo-icon { display: block; }
}

.app-nav .study-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--study-color);
    text-transform: uppercase;
}

.app-nav .study-badge svg {
    width: 7px;
    height: 7px;
}

/* LOGIN / PROFILE BUTTON */
.nav-login-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.nav-login-btn:hover {
    border-color: var(--study-color);
    color: var(--text-secondary);
}
.nav-login-btn.logged-in {
    background: var(--study-color-light);
    border-color: var(--study-color);
    color: var(--study-color);
}

/* ═══════════════════════════════════════
   PAGE CONTAINERS
   ═══════════════════════════════════════ */
.page {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page.active {
    display: flex;
    flex-direction: column;
    opacity: 1;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.page main {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    margin-top: 0;
    padding-top: 20px;
    padding-bottom: 70px;
    touch-action: pan-y;

}

/* On mobile, account for fixed bottom bar + safe area */
@media (max-width: 600px) {
    .page main {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
}

.page section {
    padding: 32px 40px;
}

@media (max-width: 600px) {
    .page section {
        padding: 24px 16px;
    }
}

/* Override research.css opacity:0 fade-up animations in PWA context.
   The nested scroll containers prevent IntersectionObserver from reliably
   detecting elements on mobile. Show everything immediately. */
.page .card,
.page .timeline-item,
.page .privacy-half,
.page .bottom-cta,
.page .account-card,
.page .study-card,
.page .features-section,
.page .findings-card,
.page .about-card,
.page .stat-card,
.page .privacy-item,
.page .question-type-card,
.page .problem-card {
    opacity: 1 !important;
    transform: none !important;
}

@media (max-width: 600px) {
    .page section {
        padding: 24px 16px;
    }
}

/* ═══════════════════════════════════════
   PAGE BACKGROUND GRADIENTS
   ═══════════════════════════════════════ */

/* Layer 1: Page-specific gradients on <main> */
#page-1 main {
    background: linear-gradient(180deg, #0A2540 0%, #081e35 40%, #06192d 100%);
}

#page-2 main {
    background: linear-gradient(180deg, #0A2540 0%, #0d2a47 50%, #0A2540 100%);
}

#page-3 main {
    background: linear-gradient(180deg, #09223b 0%, #071d33 40%, #0A2540 100%);
}

#page-studies main {
    background: linear-gradient(180deg, #0A2540 0%, #081f38 60%, #071a2e 100%);
}

#page-findings main {
    background: linear-gradient(180deg, #0c2844 0%, #0A2540 50%, #081e36 100%);
}

#page-about main {
    background: linear-gradient(180deg, #0A2540 0%, #091f39 50%, #071b30 100%);
}

#page-dashboard main {
    background: linear-gradient(180deg, #0b2642 0%, #091e38 50%, #071a2f 100%);
}

/* Layer 2: Alternating section bands */
.page main > section:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}

/* Layer 3: Page-specific accent tints on hero/header sections */
#page-1 main > section:first-child {
    background: linear-gradient(180deg, rgba(0, 150, 136, 0.06) 0%, transparent 100%);
}

#page-studies main > section:first-child {
    background: linear-gradient(180deg, rgba(0, 150, 136, 0.04) 0%, transparent 100%);
}

#page-findings main > section:first-child {
    background: linear-gradient(180deg, rgba(201, 151, 59, 0.05) 0%, transparent 100%);
}

#page-3 main > section:first-child {
    background: linear-gradient(180deg, rgba(0, 150, 136, 0.04) 0%, transparent 100%);
}

#page-about main > section:first-child {
    background: linear-gradient(180deg, rgba(91, 141, 239, 0.05) 0%, rgba(91, 141, 239, 0.02) 40%, transparent 100%);
}

/* Findings methodology section: darker band */
#page-findings main > section:nth-child(2) {
    background: rgba(0, 0, 0, 0.12);
    border-top: 1px solid var(--border-subtle);
}

/* Findings cards: subtle left-border accents */
#page-findings .findings-card {
    border-left: 3px solid var(--card-accent, var(--border-subtle));
}

/* ═══════════════════════════════════════
   BOTTOM TAB BAR
   ═══════════════════════════════════════ */
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    display: flex;
    justify-content: center;
    gap: 4px;
    align-items: center;
    background: linear-gradient(180deg, #143660 0%, #0d2544 100%);
    border-top: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.45), 0 -1px 0 rgba(255,255,255,0.05) inset;
    padding: 12px 8px;
    padding-bottom: env(safe-area-inset-bottom, 12px);
    z-index: 9999;
}

/* Landscape: tighten tab vertical padding but keep the bar full-width.
   Earlier we forced it into a narrow pill, which on iPad/desktop left
   most of the screen edge looking chrome-less. Drop the pill. */
@media (orientation: landscape) {
    .bottom-tab {
        padding: 8px 10px;
        min-height: 48px;
    }
}

.bottom-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    padding: 10px 12px;
    min-height: 54px; /* iOS minimum touch target + 20% */
    min-width: 44px;
    -webkit-tap-highlight-color: rgba(0,150,136,0.2);
    border-radius: 6px;
    transition: color 0.2s;
}

.bottom-tab .material-symbols-rounded {
    font-size: 24px;
    transition: transform 0.2s, filter 0.2s;
}

/* Distinct accent colors per tab, always on (not just when active).
   Gives the bottom bar real color instead of monochrome teal + grey.
   Palette pulled from the corporate style guide accent tokens. */
.bottom-tab[data-tab="studies"]   .material-symbols-rounded { color: #6BA88A; } /* sage */
.bottom-tab[data-tab="assess"]    .material-symbols-rounded { color: #F5A623; } /* amber */
.bottom-tab[data-tab="results"]   .material-symbols-rounded { color: #00C8E0; } /* cyan */
.bottom-tab[data-tab="teams"]     .material-symbols-rounded { color: #8B6B83; } /* plum */
.bottom-tab[data-tab="dashboard"] .material-symbols-rounded { color: #4A9CC7; } /* sky */
.bottom-tab[data-tab="findings"]  .material-symbols-rounded { color: #D44A8B; } /* magenta */

.bottom-tab:not(.active) .material-symbols-rounded { filter: saturate(0.75) brightness(0.85); }

.bottom-tab.active {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
.bottom-tab.active .material-symbols-rounded {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 6px currentColor);
}

.bottom-tab.tab-disabled {
    opacity: 0.35;
    pointer-events: auto; /* Still clickable to show sign-in */
}

/* Hide bottom bar during assessment */
body.assess-active .bottom-bar {
    display: none;
}

/* Assessment mode: switch to light theme for assessment engine compatibility */
body.assess-active {
    background: var(--assess-page-bg, #efece8) !important;
}

body.assess-active .app-shell {
    background: var(--assess-page-bg, #efece8);
}

body.assess-active .app-nav {
    background: var(--assess-navy, #0a2540);
}

body.assess-active #page-2 main {
    background: var(--assess-page-bg, #efece8);
}

/* Assessment page: full-width light-bg main */
#page-2 main {
    background: var(--assess-page-bg, #efece8) !important;
}

#page-2 .app-nav {
    background: var(--assess-navy, #0a2540) !important;
    border-bottom-color: transparent;
}

/* Assessment container within PWA - centered, full landscape width */
#assessment-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Override the embedded assessment CSS min-height that creates blank space */
#assessment-container .question-wrapper,
#assessment-container .assessment-container {
    min-height: auto;
}

/* Assessment engine uses these variables from research-app.css */
body.assess-active {
    --bs-primary: #0a2540;
    --bs-secondary: #6c757d;
    --bs-accent: #009688;
    --bs-accent-gold: #C9973B;
    --bs-heading-font-family: 'Instrument Serif', serif;

    /* Override dark theme variables for light assessment mode */
    --bg-card: #ffffff;
    --bg-card-hover: #f8f9fa;
    --text-primary: #1a1a2e;
    --text-secondary: #495057;
    --text-muted: #6c757d;
    --border-subtle: #dee2e6;
}

/* ═══════════════════════════════════════
   DETAIL PANEL (slide-up iframe overlay)
   ═══════════════════════════════════════ */
.detail-panel {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    background: var(--bg-primary);
    z-index: 500;
    display: none;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    overflow: hidden;
}

.detail-panel.open {
    display: flex;
}

@media (max-width: 600px) {
    .detail-panel {
        top: 8px;
        left: 8px;
        right: 8px;
        bottom: 8px;
        border-radius: 10px;
    }
}

.detail-panel-header {
    flex-shrink: 0;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
}

.detail-panel-back,
.detail-panel-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
.detail-panel-back:hover,
.detail-panel-close:hover {
    background: rgba(255,255,255,0.15);
}
/* Hide logo when back button is visible */
.detail-panel-back[style*="flex"] + #detail-panel-logo {
    display: none;
}

.detail-panel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    text-align: center;
    padding: 0 8px;
}

.detail-panel-external {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s;
}
.detail-panel-external:hover {
    background: rgba(255,255,255,0.15);
}

.detail-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 80px;
    background: var(--bg-primary);
}

/* AJAX-fetched content: force dark theme on all light-theme page content */
.detail-ajax-content {
    color: var(--text-secondary) !important;
    background: transparent !important;
}
.detail-ajax-content * {
    color: inherit !important;
    background-color: transparent !important;
    border-color: var(--border-subtle) !important;
}
.detail-ajax-content {
    font-size: 15px;
    line-height: 1.7;
}
.detail-ajax-content h1,
.detail-ajax-content h2,
.detail-ajax-content h3,
.detail-ajax-content h4,
.detail-ajax-content strong,
.detail-ajax-content b,
.detail-ajax-content .dim-position,
.detail-ajax-content .adjacent-label {
    color: var(--text-primary) !important;
}
.detail-ajax-content h2 {
    font-size: 18px;
    margin-top: 28px;
    margin-bottom: 12px;
}
.detail-ajax-content h3 {
    font-size: 15px;
    margin-top: 20px;
    margin-bottom: 8px;
}
.detail-ajax-content p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 12px;
}
.detail-ajax-content a {
    color: var(--study-color) !important;
}
.detail-ajax-content .material-symbols-rounded,
.detail-ajax-content .study-label,
.detail-ajax-content .pole-label,
.detail-ajax-content .question-id,
.detail-ajax-content .archetype-category-badge,
.detail-ajax-content .action-number {
    color: var(--study-color) !important;
}
.detail-ajax-content .archetype-category-badge {
    background: var(--study-color-light) !important;
}
.detail-ajax-content .action-number {
    background: var(--study-color) !important;
    color: #fff !important;
}
.detail-ajax-content .text-muted,
.detail-ajax-content .dim-endpoints,
.detail-ajax-content .dim-endpoints * {
    color: var(--text-muted) !important;
}
/* Cards within detail content */
.detail-ajax-content .dimension-card,
.detail-ajax-content .adjacent-card,
.detail-ajax-content .pole-card,
.detail-ajax-content .interaction-card,
.detail-ajax-content .question-card,
.detail-ajax-content .cross-study-card {
    background: var(--bg-card) !important;
}
.detail-ajax-content .adjacent-card:hover {
    background: rgba(255,255,255,0.05) !important;
    border-color: var(--study-color) !important;
}
/* Bars and visual elements */
.detail-ajax-content .dim-bar {
    background: var(--border-subtle) !important;
    height: 6px;
    border-radius: 3px;
    position: relative;
    margin: 10px 0 4px;
}
.detail-ajax-content .dim-marker {
    background: var(--study-color) !important;
    border-color: var(--bg-primary) !important;
    position: absolute;
    top: -4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.detail-ajax-content .spectrum-bar {
    opacity: 0.8;
}
/* Sections spacing */
.detail-ajax-content section {
    padding: 20px 0 !important;
    border-bottom: 1px solid var(--border-subtle);
}
.detail-ajax-content section:last-child {
    border-bottom: none;
}
/* Bootstrap overrides within detail */
.detail-ajax-content .bg-light-warm,
.detail-ajax-content .bg-light {
    background: transparent !important;
}
/* Dimension endpoint labels */
.detail-ajax-content .dim-endpoints {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.68rem;
}
.detail-ajax-content .dim-endpoints span {
    color: var(--text-muted) !important;
}
.detail-ajax-content .dim-label {
    color: var(--study-color) !important;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.detail-ajax-content .dim-position {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 4px;
}
/* Dimension cards need visible background */
.detail-ajax-content .dimension-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px;
    padding: 20px;
    height: 100%;
}

/* ═══════════════════════════════════════
   RESULTS PAGE: STUDY SELECTOR PILLS
   ═══════════════════════════════════════ */
.results-study-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 12px;
}

.study-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.study-pill:hover { background: var(--bg-card-hover); }
.study-pill.active {
    border-color: var(--pill-color, var(--study-color));
    background: var(--study-color-light);
    color: var(--text-primary);
}
.study-pill .pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.study-pill .pill-status {
    font-size: 12px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 100px;
    margin-left: 2px;
}
.study-pill .pill-status.completed {
    background: rgba(0, 200, 120, 0.15);
    color: #00c878;
}
.study-pill .pill-status.not-started {
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
}

/* ═══════════════════════════════════════
   HERO (compact app mode)
   ═══════════════════════════════════════ */
.hero {
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 24px 16px 16px;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    text-align: center;
    margin: 0 auto;
    text-align: center;
}

.hero h1 {
    font-family: 'Instrument Serif', serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
    color: var(--text-primary);
}

.hero p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.hero-cta {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    background-color: var(--study-color);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.hero-cta:hover {
    filter: brightness(1.15);
}

.hero-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--text-secondary);
}

.hero-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-meta-item strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* ═══════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════ */
.section-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--study-color);
    margin-bottom: 16px;
}

section h2, h2 {
    font-family: 'Instrument Serif', serif;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 8px;
    line-height: 1.2;
    color: var(--text-primary);
}

section > p {
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 100%;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* ═══════════════════════════════════════
   CARDS
   ═══════════════════════════════════════ */
.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 16px;
    transition: all 0.3s ease;
}
.card:hover {
    background-color: var(--bg-card-hover);
    border-color: var(--study-color);
}

.card-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 16px;
    color: var(--study-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.card p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ═══════════════════════════════════════
   TIMELINE
   ═══════════════════════════════════════ */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 600px;
}

.timeline-item {
    display: flex;
    gap: 24px;
    position: relative;
}

/* Connector line between circles */
.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: var(--border-subtle);
    top: 48px;
    bottom: -40px;
    left: 24px;
}

.timeline-circle {
    min-width: 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--study-color);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    z-index: 1;
}

.timeline-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.timeline-content p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ═══════════════════════════════════════
   PRIVACY SECTION
   ═══════════════════════════════════════ */
.privacy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.privacy-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 16px;
}

.privacy-half h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.trust-item {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.privacy-half a {
    display: inline-block;
    margin-top: 16px;
    color: var(--study-color);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.privacy-half a:hover {
    text-decoration: underline;
}

/* EMAIL FORM */
.email-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.email-form input {
    padding: 12px 16px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: all 0.3s ease;
}
.email-form input:focus {
    outline: none;
    border-color: var(--study-color);
    background-color: var(--bg-card-hover);
}

.email-form button {
    padding: 12px 16px;
    background-color: var(--study-color);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.email-form button:hover {
    filter: brightness(1.1);
}

.email-micro {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ═══════════════════════════════════════
   BOTTOM CTA
   ═══════════════════════════════════════ */
.bottom-cta {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    text-align: center;
    padding: 24px 16px;
}

.bottom-cta button {
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    background-color: var(--study-color);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.bottom-cta button:hover {
    filter: brightness(1.15);
}

.bottom-cta p {
    font-size: 16px;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════
   RESULTS PAGE: TABS, THANK YOU, ACCOUNT CTA
   ═══════════════════════════════════════ */
.thank-you {
    text-align: center;
    padding-top: 24px;
    padding-bottom: 8px;
}

.thank-you-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--study-color-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.thank-you h2 {
    font-family: 'Instrument Serif', serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.3px;
    margin-bottom: 6px;
}

.thank-you p {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 100%;
    margin: 0 auto;
    line-height: 1.4;
}

/* Results tab bar */
.tab-bar {
    display: flex;
    background: linear-gradient(180deg, rgba(91,127,160,0.18) 0%, rgba(74,156,199,0.10) 100%), #0f2b4a;
    border-top: 1px solid rgba(255,255,255,0.18);
    border-bottom: 2px solid rgba(0,200,224,0.35);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: sticky;
    top: 0;
    z-index: 100;
    margin: 16px 0 0;
    border-radius: 10px 10px 0 0;
}
.tab-bar::-webkit-scrollbar { display: none; }

.tab-item {
    flex: 1;
    min-width: 90px;
    padding: 16px 12px 14px;
    text-align: center;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    color: rgba(255,255,255,0.75);
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.tab-item.active {
    color: #00C8E0;
    border-bottom-color: #00C8E0;
    background: rgba(0,200,224,0.12);
    font-weight: 700;
    text-shadow: 0 0 12px rgba(0,200,224,0.5);
}

.tab-item:hover:not(.active) {
    color: #fff;
    background: rgba(255,255,255,0.04);
}

.tab-icon {
    display: block;
    margin: 0 auto 4px;
}

/* Tab panels */
.tab-panel {
    display: none;
    padding: 16px;
    max-width: 100%;
    margin: 0 auto;
    animation: fadeIn 0.4s ease;
}
.tab-panel.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Account CTA card */
.account-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-hover) 100%);
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--study-color);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 24px;
}

.account-card h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.account-card > p {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.6;
}

.account-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.account-btn {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.account-btn.google {
    background: #ffffff;
    color: #3c4043;
    border: 1px solid #dadce0;
}
.account-btn.google:hover {
    background: #f7f8f8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.account-btn.linkedin {
    background: #0A66C2;
    color: #fff;
    border: none;
}
.account-btn.linkedin:hover {
    background: #004182;
}

.account-btn.email-auth {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}
.account-btn.email-auth:hover {
    border-color: var(--study-color);
    color: var(--study-color);
}

.account-login-text {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 24px;
}
.account-login-text a {
    color: var(--study-color);
    text-decoration: none;
}
.account-login-text a:hover { text-decoration: underline; }

.feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.feature-tag {
    padding: 6px 12px;
    background-color: var(--study-color-light);
    border: 1px solid var(--study-color);
    border-radius: 12px;
    font-size: 14px;
    color: var(--study-color);
    font-weight: 500;
}

.feature-tag.advanced {
    padding: 8px 14px;
    background-color: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: 500;
}

.account-micro {
    font-size: 14px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════
   STUDIES GRID
   ═══════════════════════════════════════ */
.studies-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.study-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid #ccc;
    border-radius: var(--radius);
    padding: 16px;
    transition: all 0.3s ease;
}
.study-card:hover {
    background-color: var(--bg-card-hover);
}

.study-name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.study-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.4;
    color: var(--text-primary);
}

.study-meta {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.study-card a, .study-card .coming-soon {
    display: inline-block;
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.study-card a {
    background-color: var(--study-color);
    color: #fff;
    border: none;
    cursor: pointer;
}
.study-card a:hover {
    filter: brightness(1.15);
}

.study-card .coming-soon {
    background-color: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    cursor: not-allowed;
}

/* ═══════════════════════════════════════
   FEATURES / DASHBOARD PROMO
   ═══════════════════════════════════════ */
.features-section h2 {
    margin-bottom: 12px;
}

.features-section > p {
    margin-bottom: 24px;
}

.features-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.features-section button {
    padding: 12px 24px;
    background-color: transparent;
    color: var(--study-color);
    border: 1px solid var(--study-color);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.features-section button:hover {
    background-color: var(--study-color);
    color: #fff;
}

/* ═══════════════════════════════════════
   RESPONSIVE: WIDER SCREENS
   ═══════════════════════════════════════ */
@media (min-width: 600px) {
    .card-grid {
        grid-template-columns: 1fr 1fr;
    }
    .privacy-grid {
        grid-template-columns: 1fr 1fr;
    }
    .studies-grid {
        grid-template-columns: 1fr 1fr;
    }
    .account-buttons {
        flex-direction: row;
    }
}

@media (min-width: 900px) {
    .page section {
        padding: 32px 24px;
    }
    .hero h1 {
        font-size: 36px;
    }
}

/* ═══════════════════════════════════════
   DRAWER PANELS (slide down from top)
   ═══════════════════════════════════════ */
.drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 90%;
    height: 100%;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-subtle);
    z-index: 10000;
    display: none;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,0.3);
}
.drawer-panel.open {
    display: flex;
}
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.drawer-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: background 0.2s;
}
.drawer-close:hover { background: rgba(255,255,255,0.08); }
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    -webkit-overflow-scrolling: touch;
}
.drawer-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: none;
}
.drawer-overlay.open { display: block; }

/* Nav icon buttons */
.nav-icon-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-icon-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.08); }

/* About icon in header (replaces bottom tab) */

/* Mobile: compact nav to fit all icons on small screens */
@media (max-width: 640px) {
    /* Study-name badge wraps badly into 3 lines on narrow phones once the
       title is full ("AI VULNERABILITY STUDY"). The study pill selector
       below the nav already identifies the active study, so the top badge
       is redundant at this width. Hide it rather than truncate. */
    .app-nav .study-badge { display: none; }
}
@media (max-width: 480px) {
    .app-nav {
        padding: 0 8px;
        gap: 4px;
    }
    .app-nav > div:last-child {
        gap: 2px !important;
    }
    .nav-icon-btn {
        min-width: 30px;
        min-height: 30px;
        padding: 3px;
    }
    .nav-icon-btn .material-symbols-rounded {
        font-size: 1.15rem !important;
    }
    .nav-login-btn {
        font-size: 13px;
        padding: 4px 8px;
    }
    .app-nav span[style*="font-size: 16px"] {
        font-size: 14px !important;
    }
}
@media (max-width: 360px) {
    .app-nav > div:last-child {
        gap: 0px !important;
    }
    .nav-icon-btn {
        min-width: 28px;
        min-height: 28px;
        padding: 2px;
    }
    .nav-icon-btn .material-symbols-rounded {
        font-size: 1.1rem !important;
    }
    .nav-login-btn {
        font-size: 12px;
        padding: 3px 6px;
    }
}

/* Shared styles for profile/activity content */
.profile-section {
    margin-bottom: 24px;
}
.profile-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--study-color);
    margin-bottom: 12px;
}
.activity-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 15px;
}
.activity-item:last-child {
    border-bottom: none;
}
.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}
.activity-time {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}
.demo-field {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 14px;
}
.demo-field:last-child { border-bottom: none; }
.demo-label { color: var(--text-muted); }
.demo-value { color: var(--text-primary); font-weight: 500; }

/* ═══════════════════════════════════════
   VISUAL VARIETY: Break up blue-on-blue monotony
   ═══════════════════════════════════════ */

/* Alternate section backgrounds for visual rhythm */
.page main > section:nth-child(even) {
    background: rgba(255,255,255,0.02) !important;
}

/* Cards: subtle top accent bar instead of uniform borders */
.page .card {
    border-top: 2px solid var(--study-color) !important;
    border-color: rgba(255,255,255,0.06) !important;
    border-top-color: var(--study-color) !important;
}

/* Study cards on Studies page: stronger left border, lighter card bg */
#page-studies .card-grid > div {
    background: rgba(255,255,255,0.03) !important;
}

/* Findings cards: left accent matches study color */
.findings-card {
    border-left: 3px solid var(--card-accent, var(--study-color)) !important;
}

/* Dashboard feature cards: covered by global card-grid tints */

/* About page: section label accent bars */
#page-about section {
    border-left: 3px solid transparent;
}
#page-about section:nth-child(3) { border-left-color: rgba(0,150,136,0.3); }
#page-about section:nth-child(5) { border-left-color: rgba(201,151,59,0.3); }
#page-about section:nth-child(7) { border-left-color: rgba(212,133,106,0.3); }
#page-about section:nth-child(9) { border-left-color: rgba(91,141,239,0.3); }

/* Privacy/data cards on About: green accent */
#page-about .card-grid > div[style*="shield"],
#page-about .card-grid > div:nth-child(1) {
    border-left: 2px solid rgba(0,150,136,0.4);
}

/* Section headings: subtle underline accent + breathing room from band boundary */
.page h2 {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 16px !important;
}
.page main > section {
    padding-top: 36px !important;
}
.page main > section:first-child {
    padding-top: 0 !important;
}
/* About sub-sections with padding-top:0 still need spacing */
#page-about section[style*="padding-top:0"] {
    padding-top: 24px !important;
}

/* Card grids: consistent subtle teal tint */
.page .card-grid > div,
.page .card-grid > .card {
    background: rgba(0,150,136,0.06) !important;
}

/* Stat grids (non-card-grid): same teal tint */
.page section > div[style*="grid-template-columns"] > div {
    background: rgba(0,150,136,0.06) !important;
}

/* Break up card-grid monotony: first card gets study-color tint */
.page .card-grid > .card:first-child,
.page .card-grid > div:first-child > .card {
    border-top-color: var(--study-color) !important;
}

/* ═══════════════════════════════════════
   MASTER WIDTH OVERRIDES
   Everything in the PWA aligns to the app-shell width.
   These rules override ANY competing max-width, padding,
   or margin from research.css, research-app.css, assessment.css,
   or Bootstrap. Must stay at the END of this file.
   ═══════════════════════════════════════ */

/* All page sections: consistent padding, no max-width (shell handles it) */
.page section,
.page .section,
.page .thank-you,
.page .privacy-grid,
.page .bottom-cta,
.page .account-card,
.page .features-section {
    max-width: none !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Hero content: full width within section padding */
.page .hero-content {
    max-width: none !important;
    margin: 0 !important;
}

/* Card grids: 2 columns default */
.page .card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
}

/* Mobile portrait only: 1 column */
@media (max-width: 600px) and (orientation: portrait) {
    .page .card-grid,
    .archetype-duo-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Tab bars: full width */
.page .tab-bar,
.page .results-study-selector {
    max-width: none !important;
    margin: 0 !important;
}

/* Tab panels: full width */
.page .tab-panel {
    max-width: none !important;
    margin: 0 !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* Timeline: full width */
.page .timeline {
    max-width: none !important;
}

/* Privacy grid: consistent */
.page .privacy-grid {
    max-width: none !important;
}

/* Assessment container: centered within shell */
#assessment-container,
#assessment-container .assess-header,
#assessment-container .study-banner,
#assessment-container .progress-container,
#assessment-container .assess-main,
#assessment-container .question-card,
#assessment-container .question-wrapper {
    max-width: none !important;
    width: 100% !important;
}

/* Assessment cards: keep max-width for readability */
#assessment-container .question-card {
    max-width: 780px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Mobile: tighter padding */
@media (max-width: 600px) {
    .page section,
    .page .section,
    .page .tab-panel {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}
@media (max-width: 600px) and (orientation: portrait) {
    .page .card-grid,
    .archetype-duo-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════
   GLOBAL: INCREASE CONTENT FONT SIZES
   All content text bumped up for readability.
   Bottom bar labels (9px) are intentionally left alone.
   ═══════════════════════════════════════ */

/* Desktop + tablet: bump up from small defaults */
section > p,
.card p,
.detail-ajax-content p,
.detail-ajax-content,
.activity-item,
.tab-panel p,
.tab-panel li {
    font-size: 15px !important;
}
section h2, .page h2 {
    font-size: 24px !important;
}
.section-label {
    font-size: 14px !important;
}
.hero p {
    font-size: 15px !important;
}
.hero-meta {
    font-size: 15px !important;
}
.card h3 {
    font-size: 17px !important;
}
.timeline-content h3 {
    font-size: 18px !important;
}
.timeline-content p {
    font-size: 15px !important;
}
.detail-ajax-content h2 {
    font-size: 20px !important;
}
.detail-ajax-content h3 {
    font-size: 17px !important;
}
.demo-field {
    font-size: 16px !important;
}
.profile-section-title {
    font-size: 14px !important;
}
.activity-time {
    font-size: 14px !important;
}
.hero-cta {
    font-size: 16px !important;
}

/* Mobile: additional mobile-specific overrides */
@media (max-width: 600px) {
    .results-study-selector .study-pill {
        font-size: 15px !important;
    }
}

/* Assessment page: hide study name from nav to prevent header clipping */
#page-2 .app-nav .study-badge {
    display: none;
}

/* ═══════════════════════════════════════
   COOKIE CONSENT BANNER
   ═══════════════════════════════════════ */
/* Responsive 2-column grid: stacks on mobile, side-by-side on wider screens */
.grid-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 500px) {
    .grid-2col { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════
   GATE OVERLAY (feature unlock prompt)
   ═══════════════════════════════════════ */
.gate-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.gate-card {
    max-width: 400px;
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 28px 24px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}
.gate-card-close {
    position: absolute;
    top: 12px; right: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}
.gate-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(0,150,136,0.1);
    border: 2px solid rgba(0,150,136,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.gate-title {
    font-family: 'Instrument Serif', serif;
    font-size: 20px;
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.gate-desc {
    font-size: 15px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 20px;
}
.gate-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    font-size: 13px;
    color: var(--text-muted);
}
.gate-divider::before, .gate-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}
.gate-email-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}
.gate-email-input:focus {
    border-color: var(--study-color);
}
.gate-save-btn {
    width: 100%;
    padding: 12px;
    background: var(--study-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}
.gate-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.gate-signin-btn {
    width: 100%;
    padding: 11px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
    border: 1px solid var(--border-subtle);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    transition: background 0.15s;
}
.gate-signin-btn:hover {
    background: rgba(255,255,255,0.08);
}

/* Muted gated button style */
.gated-btn {
    opacity: 0.5;
    position: relative;
}
.gated-btn:hover {
    opacity: 0.7;
}

/* Welcome banner */
.welcome-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9998;
    background: linear-gradient(135deg, rgba(0,150,136,0.15), rgba(201,151,59,0.1));
    border-bottom: 1px solid rgba(0,150,136,0.2);
    padding: 14px 20px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: center;
    gap: 12px;
}
body.pwa-standalone .welcome-banner {
    padding-top: max(58px, calc(14px + env(safe-area-inset-top, 58px)));
}
.welcome-banner-text {
    flex: 1;
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.5;
}
.welcome-banner-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.cookie-consent-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 900px;
    background: #0d1f33;
    border-top: 1px solid var(--border-subtle);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 10001; /* above bottom-bar (9999) */
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    color: var(--text-muted, #8899aa);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.3);
}
.cookie-consent-bar p {
    margin: 0;
    flex: 1;
    min-width: 220px;
    line-height: 1.5;
}
.cookie-consent-bar a {
    color: #009688;
    text-decoration: underline;
}
.cookie-consent-bar a:hover {
    color: #00bfa5;
}
.cookie-consent-accept {
    background: #009688;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
}
.cookie-consent-accept:hover {
    background: #00796b;
}
body.assess-active .cookie-consent-bar {
    display: none;
}