/* Header — mirrors noted/public_html/components/header.css so
   family members feel the same. Fixed to the top of the viewport so it
   stays put when the page scrolls (mobile onboarding, login forms taller
   than the viewport, etc.). .appLayout in app.css carries a matching
   padding-top so the content below isn't hidden behind the header. */
.appHeader {
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.headerLeft {
    display: flex;
    align-items: center;
    gap: 6px;
}

.headerRight {
    display: flex;
    align-items: center;
    gap: 6px;
}

.logoLink {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.02em;
}

.logoIcon {
    font-size: 14px;
    color: var(--text-secondary);
}

.logoBy {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-left: 4px;
    white-space: nowrap;
}

/* ── Action buttons ──────────────────────────────────────────────────────
   Three flavors share the same dimensions for visual harmony:
     .headerBtn                  — labeled secondary action (icon + text)
     .headerBtn.headerBtnGhost   — icon-only secondary action (square)
     .headerBtn.headerBtnPrimary — primary CTA: accent fill, subtle elevation
*/
.headerBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    /* All non-primary action buttons share one color + full opacity so
       icon-only and labeled variants read as the same UI weight. The
       primary CTA (.headerBtnPrimary) overrides this below. */
    color: var(--text-secondary);
    opacity: 1;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: background 120ms ease, color 120ms ease,
                border-color 120ms ease, box-shadow 160ms ease,
                transform 120ms ease;
}

.headerBtn:hover {
    border-color: var(--border-strong);
}

.headerBtn:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.headerBtn:active {
    transform: translateY(0.5px);
}

.headerBtn:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 2px;
}

.headerBtn.headerBtnGhost {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 14px;
}

.headerBtn.headerBtnGhost:hover {
    color: var(--text);
}

/* Primary CTA — accent fill with hairline inner highlight + soft drop
   shadow. Hover lifts ½px and grows the shadow for tactile feedback. */
.headerBtn.headerBtnPrimary {
    background: var(--accent);
    color: var(--bg-sidebar);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.headerBtn.headerBtnPrimary:hover {
    background: var(--accent);
    color: var(--bg-sidebar);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateY(-0.5px);
}

.headerBtn.headerBtnPrimary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.headerBtnLabel {
    display: inline;
}

@media (max-width: 768px) {
    /* Match Noted's mobile header height so the top bar lines up across
       every tool. Set on the variable so anything else that anchors off
       --header-height (sidebar top, popovers) follows automatically. */
    :root {
        --header-height: 56px;
    }

    /* Native iOS HIG touch target = 44pt. Match it on mobile so taps in
       the top nav feel identical to taps in any system app. */
    .headerBtn {
        height: 44px;
        padding: 0 14px;
        font-size: 14px;
    }
    .headerBtn.headerBtnGhost {
        width: 44px;
        height: 35px;
        padding: 0;
        font-size: 16px;
    }
    .suiteSwitchBtn {
        height: 44px;
        padding: 0 14px;
        font-size: 14px;
    }
    .suiteSwitchBtn .fa-grip { font-size: 16px; }
}

@media (max-width: 600px) {
    .logoBy {
        display: none;
    }
    .headerBtnLabel {
        display: none;
    }
    /* When labels collapse, the labeled .headerBtn variants and the
       suite switcher should square up so they don't render as
       stretched pills. */
    .headerBtn {
        padding: 0;
        min-width: 38px;
    }
    .headerBtn.headerBtnPrimary {
        min-width: 38px;
    }
    .suiteSwitchBtn {
        padding: 0;
        min-width: 38px;
    }
}

/* --- Suite switcher (the "switch tools" grip button + its popover) --- */
.suiteSwitchBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    margin-right: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    opacity: 1;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: background 120ms ease, color 120ms ease,
                border-color 120ms ease;
    flex-shrink: 0;
}

.suiteSwitchBtn .fa-grip { font-size: 14px; }

.suiteSwitchBtn:hover {
    color: var(--text);
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

.suiteSwitchBtn:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 2px;
}

.suitePopover {
    position: fixed;
    top: calc(var(--header-height) + 6px);
    left: 14px;
    width: 280px;
    padding: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.04);
    z-index: 200;
    display: none;
}

.suitePopover[data-open="true"] {
    display: block;
}

.suiteHead {
    padding: 6px 10px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.suiteItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    transition: background var(--transition);
}

.suiteItem:hover:not([aria-disabled="true"]) {
    background: var(--bg-hover);
}

.suiteItem:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: -2px;
}

.suiteIcon {
    width: 18px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    flex-shrink: 0;
}

.suiteName {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.suiteHint {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* The currently-active tool: subtle accent fill + a mint left stripe. */
.suiteItem--current {
    background: var(--accent-soft);
    position: relative;
}

.suiteItem--current::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--mint);
    border-radius: 2px;
}

.suiteItem--planned {
    cursor: default;
    opacity: 0.55;
}

.suiteItem--planned .suiteIcon { color: var(--text-tertiary); }

.suiteDivider {
    height: 1px;
    background: var(--border);
    margin: 6px 4px;
}

.suiteItem--home .suiteIcon { color: var(--text-tertiary); }
.suiteItem--home .suiteName { color: var(--text-secondary); font-weight: 400; }

@media (max-width: 520px) {
    .suitePopover { left: 10px; right: 10px; width: auto; }
}

/* ── Visibility utilities for auth-aware header (added with Done sync) ──
   Ported from Noted's header.css so the auth-related buttons (account,
   logout, sign-in, mobile overflow ⋯) collapse correctly across viewports. */
.headerBtnMobileOnly { display: none; }
.headerBtnDesktopOnly { display: inline-flex; }

@media (max-width: 768px) {
    .headerBtnMobileOnly { display: inline-flex; }
    .headerBtnDesktopOnly { display: none; }
}

/* ── Mobile overflow popover (the ⋯ menu holding account / logout / sign-in
   on small screens). Mirrors .suitePopover positioning. */
.headerOverflowPopover {
    position: fixed;
    top: calc(var(--header-height) + 6px);
    right: 12px;
    width: 240px;
    padding: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10),
                0 1px 4px rgba(0, 0, 0, 0.04);
    z-index: 200;
    display: none;
}

.headerOverflowPopover[data-open="true"] {
    display: block;
}

.headerOverflowUser {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 8px;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.headerOverflowUser i {
    font-size: 18px;
    color: var(--text-secondary);
}

.headerOverflowUser span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.headerOverflowItem {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background var(--transition);
}

.headerOverflowItem:hover {
    background: var(--bg-hover);
}

.headerOverflowItem:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: -2px;
}

.headerOverflowItemIcon {
    width: 18px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    flex-shrink: 0;
}