/* Header account badge / Log in button (templates/_header_account.html), shared
   by index, tracker and account. The menu lives inside the sticky header
   (z-index 100), so it overlays page content but stays under index.html's
   grid view (500), backdrop (700) and bottom sheets (800). The legal footer's
   styles are at the end of this file. */

/* Keep logo + title + badge on one line down to 360px: the title never wraps;
   on narrow phones the subtitle tightens, and ellipsizes as a last resort. */
.header-text { min-width: 0; }
.header-text h1, .header-text p { white-space: nowrap; }
.header-text p { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) {
    .header-text p { font-size: 0.55rem; letter-spacing: 1px; }
}

.acct { margin-left: auto; position: relative; flex-shrink: 0; }
.acct-badge {
    display: flex; align-items: center; gap: 3px;
    background: none; border: 0; padding: 4px 0 4px 4px; cursor: pointer;
    color: var(--text-dim);
    -webkit-tap-highlight-color: transparent;
}
.acct-circle {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #222; color: #fff;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px;
    border: 2px solid #444;             /* neutral: all green or unset */
}
.acct-circle.ring-yellow { border-color: var(--warning); }
.acct-circle.ring-red    { border-color: var(--danger); }
.acct-chev { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.acct-badge[aria-expanded="true"] .acct-chev { transform: rotate(180deg); }

.acct-menu {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 210px; max-width: calc(100vw - 32px);
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.acct-menu[hidden] { display: none; }
.acct-menu a {
    display: block; padding: 13px 16px;
    color: var(--text); text-decoration: none; font-size: 0.9rem;
    border-top: 1px solid var(--card-border);
}
.acct-menu a:first-child { border-top: 0; }
.acct-menu a:active { background: #222; }
.acct-menu .acct-alert { font-size: 0.8rem; font-weight: 700; }
.acct-menu .acct-alert.red    { color: var(--danger);  background: #200404; }
.acct-menu .acct-alert.yellow { color: var(--warning); background: #130e00; }
.acct-menu .logout { color: var(--danger); }

.acct-login {
    margin-left: auto; flex-shrink: 0;
    font-size: 0.65rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--accent); text-decoration: none;
    border: 1px solid var(--accent); border-radius: 6px;
    padding: 8px 12px;
}
.acct-login:active { background: rgba(0, 212, 255, 0.12); }

/* Terms / Privacy / support links (templates/_legal_footer.html). Deliberately
   small and dim so they don't compete with the main page. */
.legal-footer {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 8px;
    padding: 18px 16px 24px; font-size: 0.72rem; color: var(--text-dim);
}
.legal-footer a {
    color: var(--text-dim); text-decoration: none; padding: 6px 0;
    -webkit-tap-highlight-color: transparent;
}
.legal-footer a:hover, .legal-footer a:focus-visible { color: var(--accent); text-decoration: underline; }