/**
 * Modern Header - Gemini-Inspired Clean Design
 * Simple, icon-driven navigation with hover dropdowns
 */

/* ==================== DESIGN TOKENS ==================== */
:root {
    --header-height: 64px;
    --header-bg: var(--gray-0);
    --header-border: var(--gray-200);

    /* Text colors */
    --header-text: var(--gray-700);
    --header-text-muted: var(--gray-500);
    --header-text-light: var(--gray-400);

    /* Brand color */
    --header-accent: var(--accent-teal-500);
    --header-accent-hover: var(--accent-teal-600);
    --header-accent-light: var(--accent-teal-50);
    --header-accent-border: var(--accent-teal-100);

    /* Consistent radius */
    --header-radius: 6px;

    /* Transitions */
    --header-transition: all 0.2s ease;
}

/* ==================== MAIN HEADER ==================== */
.header-modern {
    /* Own font: the projects page sets another one on body, which shifted the bar. */
    font-family: var(--font-sans);
    height: var(--header-height);
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    box-shadow: 0 2px 4px var(--shadow-neutral-02);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    max-width: 100vw;
}

/* ==================== LEFT SECTION ==================== */
.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    justify-self: start;
}

/* Logo */
.header-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

.header-logo-text {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 22px;
    color: var(--gray-900);
    letter-spacing: -0.06em;
    line-height: 0.9;
    text-transform: lowercase;
}

.header-logo-dot {
    color: var(--header-accent);
}

.header-logo:hover {
    opacity: 0.8;
}

/* Wordmark-only lockup (no icon) — slightly larger and tighter */
.header-logo-wordmark .header-logo-text {
    font-size: 24px;
    letter-spacing: -0.055em;
}

/* Compact brand mark — shown instead of wordmark on small/zoomed viewports */
.header-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: none;
    flex-shrink: 0;
}

/* Divider between logo and project */
.header-divider {
    height: 24px;
    width: 1px;
    background-color: var(--gray-300);
    flex-shrink: 0;
}

/* ==================== PROJECT SWITCHER ==================== */
.header-project {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: var(--header-accent-light);
    border: 1px solid var(--header-accent-border);
    border-radius: var(--header-radius);
    cursor: pointer;
    transition: var(--header-transition);
    color: var(--accent-teal-600);
    font-weight: 600;
    font-size: 14px;
    min-width: 0;
    flex-shrink: 1;
}

.header-project:hover {
    background-color: var(--success-100);
    border-color: var(--header-accent);
}

.header-project-static {
    cursor: default;
}

.header-project-static:hover {
    background-color: var(--header-accent-light);
    border-color: var(--header-accent-border);
}


.header-project-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-teal-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* Analysis-only project badges */
.header-project-im,
.header-project-res,
.header-project-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--warning-600);
    background: var(--warning-100);
    border: 1px solid var(--warning-200);
    border-radius: 3px;
    line-height: 1.3;
    flex-shrink: 0;
    cursor: default;
    position: relative;
}

.header-project-res {
    color: #0f766e;
    background: #ccfbf1;
    border-color: #99f6e4;
}

/* Also the status badge on the Data dashboard and the Publish page. */
.header-project-state-draft,
.status-badge.status-badge-draft,
.pub-chip.draft {
    color: var(--warning-700);
    background: var(--warning-100);
    border-color: var(--warning-200);
}

.header-project-state-active {
    color: #047857;
    background: #d1fae5;
    border-color: #a7f3d0;
}

.header-project-state-paused,
.status-badge.status-badge-paused {
    color: #b45309;
    background: #fef3c7;
    border-color: #fde68a;
}

.header-project-state-closed,
.status-badge.status-badge-closed,
.pub-chip.closed {
    color: #475569;
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* Blocked by platform moderation; only Choicery can lift it. */
.header-project-state-blocked,
.status-badge.status-badge-blocked {
    color: var(--danger-700);
    background: var(--danger-100);
    border-color: var(--danger-200);
}

/* Phones: the mini status badges (IM/RES + ACT/DR/PAU/CLO) cost chip space
   without adding value there; their tooltips are hover-based anyway. The
   project name keeps the room. */
@media (max-width: 640px) {
    .header-project-im,
    .header-project-res,
    .header-project-state {
        display: none;
    }
}

.header-project-chevron {
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.6;
    transition: transform 0.2s;
}

.header-project.is-open .header-project-chevron {
    transform: translateY(1px);
}

/* Project Dropdown */
.header-project-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: white;
    border: 1px solid var(--header-border);
    border-radius: var(--header-radius);
    box-shadow: 0 10px 40px var(--shadow-neutral-15);
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 200;
}

.header-project.is-open .header-project-dropdown {
    display: block;
    animation: dropdownFade 0.15s ease;
}

.header-project-dropdown-title {
    padding: 12px 16px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--header-text-light);
}

.header-project-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--header-text);
    transition: var(--header-transition);
}

.header-project-item:hover {
    background: var(--gray-50);
}

.header-project-item.active {
    background: var(--accent-teal-50);
    font-weight: 600;
}

.header-project-item i:first-child {
    color: var(--header-text-muted);
    font-size: 14px;
}

.header-project-item.active i:first-child {
    color: var(--accent-teal-700);
}

.header-project-item span {
    font-size: 13px;
    font-weight: 500;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-project-check {
    color: var(--header-accent);
    font-size: 16px;
}

.header-project-empty {
    padding: 20px 16px;
    text-align: center;
    color: var(--header-text-light);
    font-size: 13px;
}

.header-project-footer {
    border-top: 1px solid var(--header-border);
    padding: 8px;
}

.header-project-footer a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--header-radius);
    text-decoration: none;
    color: var(--header-text-muted);
    font-size: 13px;
    font-weight: 500;
    transition: var(--header-transition);
}

.header-project-footer a:hover {
    background: var(--gray-50);
    color: var(--header-text);
}

/* ==================== CENTER NAVIGATION ==================== */
.header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: center;
    min-width: 0;
}

/* SVG icons in nav */
.header-nav-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Font icon variant: same glyph as the sidebar page badge */
i.header-nav-icon {
    font-size: 16px;
    line-height: 16px;
}

.header-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--header-radius);
    text-decoration: none;
    color: var(--header-text);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}

.header-nav-item:hover {
    color: var(--header-text);
    background: var(--gray-100);
}

/* Project navigation before the first project exists (button elements). */
button.header-nav-item {
    border: none;
    background: transparent;
    font-family: inherit;
}

.header-nav-item.is-disabled {
    color: var(--gray-400, #94a3b8);
    cursor: not-allowed;
}

.header-nav-item.is-disabled:hover {
    color: var(--gray-400, #94a3b8);
    background: transparent;
}

.header-nav-item.active {
    color: var(--header-accent);
    background: transparent;
    font-weight: 500;
}

/* ==================== NAV DROPDOWN (Analysis) ==================== */
.header-nav-dropdown-container {
    position: relative;
    display: flex;
    align-items: center;
}

.header-nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0 8px 16px;
    border-radius: var(--header-radius);
    color: var(--header-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}

.header-nav-dropdown-trigger:hover {
    color: var(--header-text);
    background: var(--gray-100);
}

/* Active state for parent when any child is active */
.header-nav-dropdown-container.active .header-nav-dropdown-trigger {
    color: var(--header-accent);
    font-weight: 500;
}

/* Chevron */
.header-nav-chevron {
    fill: currentColor;
    margin-left: 2px;
    transition: transform 0.2s;
}

.header-nav-dropdown-container:hover .header-nav-chevron,
.header-nav-dropdown-container:focus-within .header-nav-chevron,
.header-nav-dropdown-container.is-open .header-nav-chevron {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.header-nav-dropdown {
    display: none !important;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: white;
    border: 1px solid var(--header-border);
    border-radius: var(--header-radius);
    box-shadow: 0 10px 40px var(--shadow-neutral-15);
    min-width: 200px;
    padding: 6px 0;
    z-index: 200;
    flex-direction: column;
}

.header-nav-dropdown-container:hover .header-nav-dropdown,
.header-nav-dropdown-container:focus-within .header-nav-dropdown,
.header-nav-dropdown-container.is-open .header-nav-dropdown {
    display: flex !important;
    animation: dropdownFade 0.15s ease;
}

/* Explicitly closed via Escape: suppress hover/focus-within so focus can
   return to the trigger without reopening. JS clears the class when the
   pointer or focus leaves the container. The chevron must reset too, or
   the refocused trigger would keep it visually "open" (rotated). */
.header-nav-dropdown-container.is-closed .header-nav-dropdown {
    display: none !important;
}

.header-nav-dropdown-container.is-closed .header-nav-chevron {
    transform: none;
}

/* Invisible bridge */
.header-nav-dropdown-container::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 8px;
}

/* Dropdown Items */
.header-nav-dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none !important;
    color: var(--header-text) !important;
    font-size: 13px;
    font-weight: 500;
    transition: var(--header-transition);
    width: 100%;
    white-space: nowrap;
}

.header-nav-dropdown-item:hover {
    background: var(--gray-100);
}

.header-nav-dropdown-item.active {
    background: var(--accent-teal-50);
    color: var(--accent-teal-700) !important;
    font-weight: 600;
}

.header-nav-dropdown-item i {
    color: var(--header-text-muted);
    font-size: 15px;
    width: 18px;
    flex-shrink: 0;
}

.header-nav-dropdown-item.active i {
    color: var(--accent-teal-700);
}

/* ==================== RIGHT SECTION ==================== */
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
    grid-column: 3;
    min-width: 0;
}

/* Action Buttons */
.header-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--header-radius);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: var(--header-transition);
    cursor: pointer;
    border: none;
}

/* Icon inside Preview/Publish — visible even when the text span collapses. */
.header-action-icon {
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ghost button (icon-only, like Images) */
.header-action-ghost {
    background: transparent;
    color: var(--header-text-muted);
    padding: 8px;
}

.header-action-ghost:hover {
    background: var(--gray-100);
    color: var(--header-text);
}

.header-action-ghost.active {
    color: var(--header-accent);
}

/* Outline button (Preview) */
.header-action-outline {
    background: white;
    border: 1px solid var(--gray-300);
    color: var(--header-text);
}

.header-action-outline:hover {
    border-color: var(--gray-400);
    background: var(--gray-50);
    color: var(--header-text);
}

/* Primary button (Publish) */
.header-action-primary {
    background-color: var(--header-accent);
    color: white;
    position: relative;
}

.header-action-primary:hover {
    background-color: var(--header-accent-hover);
    color: white;
}

/* Published but paused: new participants cannot start */
.header-action-primary.is-paused {
    background-color: var(--accent-amber-400, #f59e0b);
    color: #3b2a00;
}

.header-action-primary.is-paused:hover {
    background-color: var(--accent-amber-500, #d97706);
    color: #3b2a00;
}

/* Unpublished Changes Badge */
.header-action.has-changes {
    position: relative;
}

.header-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    background: var(--accent-orange-500);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    line-height: 1;
}

.header-action.has-changes .header-badge {
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Published Choice design differs from the editor design */
.unpublished-changes-banner {
    position: sticky;
    top: var(--header-height);
    z-index: 99;
    flex: 0 0 auto;
    background: var(--warning-50);
    border-bottom: 1px solid var(--warning-200);
    box-shadow: 0 2px 8px var(--shadow-neutral-05);
    color: var(--warning-700);
}

.unpublished-changes-banner-inner {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 10px 68px 10px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.unpublished-changes-banner-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--warning-600);
    background: var(--warning-100);
    border: 1px solid var(--warning-200);
    border-radius: 50%;
}

.unpublished-changes-banner-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.unpublished-changes-banner-title {
    color: var(--warning-700);
    font-size: 14px;
    line-height: 1.35;
}

.unpublished-changes-banner-message {
    color: var(--gray-700);
    font-size: 13px;
    line-height: 1.4;
}

.unpublished-changes-banner-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 14px;
    color: white;
    background: var(--warning-600);
    border: 1px solid var(--warning-600);
    border-radius: var(--header-radius);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.unpublished-changes-banner-action:hover {
    color: white;
    background: var(--warning-700);
    border-color: var(--warning-700);
}

.unpublished-changes-banner-action:focus-visible {
    outline: 2px solid var(--warning-700);
    outline-offset: 2px;
}

.unpublished-changes-banner-dismiss {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: var(--gray-600);
    background: transparent;
    cursor: pointer;
}

.unpublished-changes-banner-dismiss:hover {
    color: var(--gray-900);
    background: rgb(0 0 0 / 6%);
}

.unpublished-changes-banner-dismiss:focus-visible {
    outline: 2px solid var(--warning-700);
    outline-offset: 2px;
}

/* ==================== LEGAL RE-ACCEPTANCE BANNER ==================== */
/* Persistent (no dismiss) bar under the header while the account has not yet
   accepted the current legal versions (decision N10). Same geometry as the
   unpublished-changes banner, neutral colouring: it is a notice, not a fault. */
.legal-reaccept-banner {
    position: sticky;
    top: var(--header-height);
    z-index: 98;
    flex: 0 0 auto;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: 0 2px 8px var(--shadow-neutral-05);
    color: var(--gray-800);
}

.legal-reaccept-banner-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.legal-reaccept-banner-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-700);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 50%;
}

.legal-reaccept-banner-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.legal-reaccept-banner-title {
    color: var(--gray-900);
    font-size: 14px;
    line-height: 1.35;
}

.legal-reaccept-banner-message {
    color: var(--gray-700);
    font-size: 13px;
    line-height: 1.4;
}

.legal-reaccept-banner-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 14px;
    color: white;
    background: var(--interactive-color);
    border: 1px solid var(--interactive-color);
    border-radius: var(--header-radius);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.legal-reaccept-banner-action:hover {
    color: white;
    background: var(--interactive-color-hover);
    border-color: var(--interactive-color-hover);
}

.legal-reaccept-banner-action:focus-visible {
    outline: 2px solid var(--gray-900);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .legal-reaccept-banner-inner {
        flex-wrap: wrap;
        padding: 10px 16px;
    }

    .legal-reaccept-banner-copy {
        flex-basis: calc(100% - 44px);
    }

    .legal-reaccept-banner-action {
        margin-left: 44px;
    }
}

@media print {
    .legal-reaccept-banner {
        display: none;
    }
}

/* ==================== USER MENU ==================== */
.header-user {
    position: relative;
    margin-left: 4px;
}

.header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--header-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--header-transition);
}

.header-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px var(--teal-tint-30);
}

/* User Dropdown */
.header-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border: 1px solid var(--header-border);
    border-radius: var(--header-radius);
    box-shadow: 0 10px 40px var(--shadow-neutral-15);
    min-width: 200px;
    z-index: 200;
    overflow: hidden;
}

.header-user:hover .header-user-dropdown,
.header-user:focus-within .header-user-dropdown,
.header-user.is-open .header-user-dropdown {
    display: block;
    animation: dropdownFade 0.15s ease;
}

/* Explicitly closed via Escape (see nav dropdown above). */
.header-user.is-closed .header-user-dropdown {
    display: none;
}

/* Invisible bridge */
.header-user::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 12px;
}

.header-user-info {
    padding: 14px 16px;
    background: var(--gray-50);
}

.header-user-project-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--header-text-light);
}

.header-user-project-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-teal-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--header-border);
}

.header-user-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--header-text);
}

.header-user-email {
    display: block;
    font-size: 12px;
    color: var(--header-text-muted);
    margin-top: 2px;
}

.header-user-divider {
    height: 1px;
    background: var(--header-border);
}

.header-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--header-text);
    font-size: 13px;
    font-weight: 500;
    transition: var(--header-transition);
}

/* Compact-only user menu entries (Preview/Images fallback on small screens) */
.header-user-item-compact {
    display: none;
}

.header-logout-form {
    margin: 0;
}

.header-user-item-button {
    width: 100%;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.header-user-item:hover {
    background: var(--gray-50);
}

.header-user-item i {
    color: var(--header-text-muted);
    font-size: 15px;
    width: 18px;
}

.header-user-item-admin {
    color: var(--header-accent);
}

.header-user-item-admin i {
    color: var(--header-accent);
}

.header-user-item-logout:hover {
    background: var(--danger-50);
    color: var(--danger-600);
}

.header-user-item-logout:hover i {
    color: var(--danger-600);
}

/* ==================== ANIMATIONS ==================== */
@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== RESPONSIVE ==================== */
/* Threshold raised from 1024px to 1280px so collapses kick in BEFORE the
   left section starts colliding with the centered nav. Typical browser
   zoom 175% on a 1920px screen lands at ~1097px CSS width — without this
   the project name overlapped the Edit icon. */
@media (max-width: 1280px) {
    .header-nav-item span,
    .header-nav-dropdown-trigger span {
        display: none;
    }

    .header-nav-item,
    .header-nav-dropdown-trigger {
        padding: 8px 10px;
    }

    .header-nav-chevron {
        display: none;
    }

    .header-action-outline span,
    .header-action-primary span {
        display: none;
    }

    .header-action-outline,
    .header-action-primary {
        padding: 8px 10px;
    }

    .header-nav-dropdown {
        left: auto;
        right: 0;
    }

    .header-project-name {
        max-width: 130px;
    }

    .header-left {
        gap: 10px;
    }
}

/* Touch screens show no tooltip on the icon-only nav. Where the labels still
   fit next to a truncated project name (iPad landscape, 1024px and up), bring
   them back. Below ~975px the centred nav would run into the project chip, so
   portrait tablets keep the icons like phones do. */
@media (hover: none) and (min-width: 1000px) and (max-width: 1280px) {
    .header-nav-item span,
    .header-nav-dropdown-trigger span {
        display: inline;
    }
}

@media (max-width: 1024px) {
    .header-project-name {
        max-width: 80px;
    }

    .header-project {
        padding: 6px 10px;
    }

    .header-divider {
        display: none;
    }

    .header-left {
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .header-modern {
        padding: 0 12px;
    }

    .header-project-name {
        max-width: 70px;
    }

    .header-nav {
        gap: 4px;
    }

    .header-logo-wordmark .header-logo-text {
        font-size: 20px;
    }

    .header-left {
        gap: 6px;
    }

    .header-project {
        padding: 6px 8px;
    }
}

@media (max-width: 640px) {
    /* Shorter header on phones to free vertical space */
    :root {
        --header-height: 56px;
    }

    .header-modern {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
        gap: 6px;
        padding: 0 8px;
    }

    .header-left {
        gap: 8px;
    }

    .header-nav {
        gap: 2px;
    }

    .header-right {
        gap: 6px;
    }

    /* 44px touch target = 24px icon + 10px padding both sides */
    .header-nav-item,
    .header-nav-dropdown-trigger,
    .header-action-outline,
    .header-action-primary {
        padding: 10px;
    }

    .header-action-ghost {
        padding: 10px;
    }

    .header-user {
        margin-left: 0;
    }

    .header-avatar {
        width: 34px;
        height: 34px;
    }

    .header-logo-wordmark .header-logo-text {
        display: none;
    }

    .header-logo-mark {
        display: block;
    }

    .header-divider {
        display: none;
    }

    .header-project {
        display: flex;
        max-width: clamp(96px, 28vw, 150px);
        padding: 6px 8px;
    }

    .header-project-name {
        max-width: 110px;
    }

    .header-project-chevron {
        display: none;
    }

    .unpublished-changes-banner-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 10px 52px 10px 12px;
    }

    .unpublished-changes-banner-copy {
        flex-basis: calc(100% - 44px);
    }

    .unpublished-changes-banner-action {
        width: calc(100% - 44px);
        margin-left: 44px;
    }

    .unpublished-changes-banner-dismiss {
        top: 10px;
        right: 12px;
        transform: none;
    }
}

@media (max-width: 480px) {
    .header-right .header-action-ghost[data-nav="images"] {
        display: none;
    }

    /* Preview button leaves the bar; both actions move into the user menu */
    .header-action-outline {
        display: none;
    }

    .header-user-item-compact {
        display: flex;
    }

    .header-project {
        max-width: 92px;
    }

    .header-project-name {
        max-width: 74px;
    }
}

@media (max-width: 380px) {
    .header-modern {
        padding: 0 6px;
    }
}

/* ==================== ACCESSIBILITY ==================== */
@media (prefers-reduced-motion: reduce) {
    .header-modern,
    .header-modern * {
        transition: none !important;
        animation: none !important;
    }
}

/* Keyboard focus only. On `:focus` the ring also appeared on tap/click, where
   the offset ring overlapped the neighbouring project chip on phones (the
   header bar's gap is 6px there, the ring reaches 4px past the control). */
.header-logo:focus-visible,
.header-project:focus-visible,
.header-nav-item:focus-visible,
.header-action:focus-visible,
.header-avatar:focus-visible,
.header-user:focus-visible,
.header-nav-dropdown-trigger:focus-visible {
    outline: 2px solid var(--header-accent);
    outline-offset: 2px;
}

/* ==================== PUBLISH REMINDER TOAST ==================== */
.publish-reminder-toast {
    position: fixed;
    /* 84px keeps the persistent reminder clear of the transient toast/snackbar
       zone (utils.js .toast-notification and Notify snackbars both anchor at
       bottom 20px right 20px and would overlap it). */
    bottom: 84px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--gray-800);
    color: white;
    border-radius: var(--header-radius);
    box-shadow: 0 10px 40px var(--shadow-neutral-20);
    font-size: 13px;
    z-index: 9999;
    animation: toastSlideIn 0.3s ease;
    transition: opacity 0.3s;
}

.publish-reminder-toast i { color: var(--accent-orange-500); font-size: 16px; }
.publish-reminder-toast a { color: var(--accent-cyan-500); text-decoration: none; font-weight: 600; margin-left: 4px; }
.publish-reminder-toast a:hover { text-decoration: underline; }
.publish-reminder-toast button { background: none; border: none; color: var(--gray-400); font-size: 18px; cursor: pointer; padding: 0; margin-left: 8px; line-height: 1; }
.publish-reminder-toast button:hover { color: white; }
.publish-reminder-toast.is-hiding { opacity: 0; }

@keyframes toastSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ==================== PRINT ==================== */
@media print {
    .header-modern,
    .unpublished-changes-banner {
        display: none;
    }
}