/* Header & price ticker — redesign (layout and buttons unchanged) */

/* Active page: white label with an accent underline on the header's bottom edge */
.header .header-nav { align-self: stretch; margin: -5px 0; }
.header .header-nav .nav-item {
    display: flex; align-items: center; align-self: stretch;
    padding: 0 4px;
    color: var(--text-secondary);
}
.header .header-nav .nav-item:hover { color: var(--text-primary); }
/* Terminal: html[data-section] is set in <head> before the first paint, so the
   current section is highlighted from the start (not Portfolio, then the right one) */
.header .header-nav .nav-item.active,
html[data-section="portfolio"] .header .header-nav .nav-item[href$="#portfolio"],
html[data-section="analytics"] .header .header-nav .nav-item[href$="#analytics"],
html[data-section="history"] .header .header-nav .nav-item[href$="#history"] {
    color: var(--text-primary);
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* Icon buttons: outlined squares */
.header .icon-btn {
    width: 44px; height: 44px; padding: 0;
    box-sizing: border-box;
    border: 1px solid var(--border-color, #2B3139);
    border-radius: 10px;
    background: transparent;
    color: #B7BDC6;
    transition: border-color 0.15s, color 0.15s;
}
.header .icon-btn svg { width: 16px; height: 16px; }
.header .icon-btn:hover { background: transparent; border-color: #474D57; color: var(--text-primary); }
.header .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Price ticker */
.market-ticker {
    height: 40px; box-sizing: border-box;
    padding: 0 24px;
    display: flex; align-items: center;
    background: var(--bg-primary, #0B0E11);
}
.market-ticker .ticker-track { gap: 0; }
.market-ticker .ticker-item {
    gap: 8px;
    padding-right: 20px; margin-right: 20px;
    border-right: 1px solid var(--border-color, #1E2329);
    font-size: 0.8125rem;
}
.market-ticker .ticker-symbol { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 500; color: var(--text-secondary); }
.market-ticker .ticker-price { font-weight: 500; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.market-ticker .ticker-change { font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
    .header .icon-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
    .market-ticker { height: 36px; padding: 0 16px; }
    .market-ticker .ticker-item { gap: 6px; padding-right: 14px; margin-right: 14px; font-size: 0.75rem; }
}

/* Terminal refresh: outlined icon button (same style as settings) */
.header .dq-refresh {
    width: 44px; height: 44px; min-width: 44px; padding: 0; gap: 0;
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-color, #2B3139);
    border-radius: 10px;
    background: transparent;
    color: #B7BDC6;
    transform: none;
    transition: border-color 0.15s, color 0.15s;
}
.header .dq-refresh:hover { background: transparent; border-color: #474D57; color: var(--text-primary); transform: none; }
.header .dq-refresh:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.header .dq-refresh .refresh-icon { display: block; width: 16px; height: 16px; }
.header .dq-refresh .refresh-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.header .dq-refresh.loading .refresh-icon { animation: hv2Spin 1s linear infinite; }
@keyframes hv2Spin { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
    .header .dq-refresh { width: 44px; height: 44px; min-width: 44px; }
}

/* Footer — headings keep the original yellow, uppercase style (shared-styles.css) */
.footer-links a, .footer-cookie-settings-btn { color: var(--text-secondary); }
.footer-links a:hover, .footer-cookie-settings-btn:hover { color: var(--text-primary); }

/* Non-terminal pages: "Go to terminal" as an outlined icon button in the
   same slot as the terminal's refresh button (settings · terminal · account) */
.header .header-terminal-btn {
    width: 44px; height: 44px; min-width: 44px; padding: 0; gap: 0;
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-color, #2B3139);
    border-radius: 10px;
    background: transparent;
    color: #B7BDC6;
    transform: none;
    transition: border-color 0.15s, color 0.15s;
}
.header .header-terminal-btn:hover { background: transparent; border-color: #474D57; color: var(--text-primary); transform: none; }
.header .header-terminal-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.header .header-terminal-btn .terminal-icon { display: block; width: 16px; height: 16px; }
.header .header-terminal-btn #terminalBtnText {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 768px) {
    .header .header-terminal-btn { width: 44px; height: 44px; min-width: 44px; }
}

/* Terminal: when the data on screen was last refreshed (signed-in header) */
.header .hdr-updated { display: inline-flex; align-items: center; gap: 7px; margin-right: 4px; font-size: 0.75rem; color: var(--text-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Live dot (moved from the Portfolio value card) */
.header .hdr-updated::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: var(--green); animation: hv2Live 2s ease-in-out infinite;
}
@keyframes hv2Live { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .header .hdr-updated::before { animation: none; } }
.header .hdr-updated[hidden] { display: none; }
@media (max-width: 900px) { .header .hdr-updated { display: none; } }

/* Desktop: the links start a set distance after the logo instead of floating
   in the space the right side leaves. Items added there after loading (the
   alerts bell, "Updated just now", the balance) can no longer push them.
   Between 1201px and about 1350px the spacing and the gap between links grow
   with the window, so everything fits without squeezing the logo. */
@media (min-width: 1201px) {
    .header > .logo { flex-shrink: 0; }
    .header > .header-nav {
        margin-left: clamp(4px, calc(100vw - 1300px), 48px);
        margin-right: auto;
        gap: clamp(24px, calc((100vw - 1201px) * 0.16 + 24px), 40px);
    }
}