/* ==========================================================================
   GovAssess app shell — shared/app-shell.css
   Header, nav, user chip, admin-context banner rendered by shared/app-shell.js.
   Load after tokens.css + styles.css. Contains no raw hex.
   ========================================================================== */

/* Mount point is painted before JS runs so there is no flash / layout shift */
#ga-shell-header {
    min-height: var(--ga-header-h);
    background: var(--ga-primary-900);
}

.ga-header {
    background: var(--ga-primary-900);
    color: var(--ga-white);
    border-bottom: 3px solid var(--ga-accent);
    min-height: var(--ga-header-h);
}

.ga-header__inner {
    max-width: var(--ga-container);
    margin: 0 auto;
    padding: 0 var(--ga-space-6);
    min-height: calc(var(--ga-header-h) - 3px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ga-space-4);
}

.ga-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ga-space-3);
    color: var(--ga-white);
    text-decoration: none;
    min-width: 0;
}

.ga-header__brand:focus-visible {
    outline-color: var(--ga-white);
}

.ga-logo {
    height: 28px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    border-radius: var(--ga-radius-sm);
    flex-shrink: 0;
}

/* Organisation logos (candidate / survey shells) may be any aspect ratio */
.ga-logo--org {
    height: auto;
    max-height: 40px;
    max-width: 200px;
    border-radius: 0;
}

.ga-header__title {
    font-size: var(--ga-text-md);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ga-header__org {
    font-size: var(--ga-text-sm);
    opacity: 0.85;
    white-space: nowrap;
}

.ga-header__actions {
    display: flex;
    align-items: center;
    gap: var(--ga-space-3);
    flex-shrink: 0;
}

/* ---- User chip ---- */

.ga-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ga-space-2);
    max-width: 280px;
}

.ga-chip__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ga-primary-700);
    color: var(--ga-white);
    font-size: var(--ga-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ga-chip__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.ga-chip__name {
    font-size: var(--ga-text-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ga-chip__role {
    font-size: var(--ga-text-xs);
    opacity: 0.8;
    white-space: nowrap;
}

.ga-chip .ga-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.12) 25%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.12) 75%);
    background-size: 200% 100%;
}

/* ---- Nav (styles for .ga-nav / .ga-nav__link live in styles.css §22) ---- */

.ga-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ga-nav__list li {
    display: inline-block;
}

/* ---- Back link (survey / candidate shells) ---- */

.ga-header__back {
    display: inline-flex;
    align-items: center;
    gap: var(--ga-space-1);
    color: var(--ga-white);
    text-decoration: none;
    font-size: var(--ga-text-sm);
    font-weight: 500;
    opacity: 0.85;
}

.ga-header__back:hover { opacity: 1; text-decoration: underline; }

/* ---- Admin-context banner (id="adminBackBar" kept for legacy page toggles) ---- */

.ga-banner {
    display: flex;
    background: var(--ga-info-bg);
    border-bottom: 1px solid var(--ga-info);
    color: var(--ga-gray-900);
    font-size: var(--ga-text-sm);
}

.ga-banner__inner {
    max-width: var(--ga-container);
    width: 100%;
    margin: 0 auto;
    padding: var(--ga-space-2) var(--ga-space-6);
    display: flex;
    align-items: center;
    gap: var(--ga-space-3);
    flex-wrap: wrap;
}

.ga-banner .ga-icon { color: var(--ga-info); }

.ga-banner__text { flex: 1; min-width: 12ch; }

.ga-banner a {
    color: var(--ga-primary-700);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--ga-space-1);
}

/* ---- Public (marketing) shell ---- */

.ga-header--public .ga-header__title {
    font-size: var(--ga-text-lg);
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
    .ga-header__inner { padding: 0 var(--ga-space-4); }
    .ga-header__title { font-size: var(--ga-text-sm); }
    .ga-chip__text { display: none; }
    .ga-chip { max-width: none; }
    .ga-nav__list { padding: 0 var(--ga-space-2); flex-wrap: nowrap; overflow-x: auto; }
    .ga-banner__inner { padding: var(--ga-space-2) var(--ga-space-4); }
}