/**
 * ChatGuard – top navigation (same language as chat / friends / groups / admin):
 * plain brand, links with a sliding marker, "Mer" for links that don't fit, a search pill that opens
 * Snabbsök (.tnp), quiet icon buttons and a rich account menu with a status picker.
 * Geometry (height, safe-area, sticky/relative on phones) stays with app.css / mobile-pwa.css.
 * Behaviour: js/topnav.js (signed in) and js/guest-topnav.js (guests).
 */

body .app-topnav.tn {
    --tn-line: color-mix(in srgb, var(--border) 60%, transparent);
    --tn-soft: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
    --tn-hover: color-mix(in srgb, var(--text) 6%, transparent);
    --tn-active: color-mix(in srgb, var(--accent) 12%, transparent);
    --tn-r: calc(var(--radius-sm, 8px) + 2px);
    --tn-ok: var(--success, #22c55e);
    --tn-warn: var(--warning, #f59e0b);
    --tn-danger: var(--error, #ef4444);
    gap: 6px;
    border-bottom: 1px solid var(--tn-line);
    background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: none;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Allt som döljs med hidden ska vara dolt, även när en klass sätter display (knappar, "Mer", "Fortsätt som …"). */
body .tn [hidden],
.tnp [hidden] { display: none !important; }

body .app-topnav.tn.is-scrolled { box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.55); }

body .tn :where(a, button):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset: 2px;
}

/* Brand */
body .tn .tn-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    margin-right: 10px;
    padding: 4px 8px 4px 4px;
    border-radius: var(--tn-r);
    color: var(--text);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    transition: background 0.15s ease;
}

body .tn .tn-brand:hover { background: var(--tn-soft); }
body .tn .tn-brand .logo-mark { width: 28px; height: 28px; transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.2, 1.4); }
body .tn .tn-brand:hover .logo-mark { transform: rotate(-8deg) scale(1.06); }

/* Links + sliding marker */
body .tn .tn-links {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    margin-left: 0;
}

body .tn .tn-ink {
    position: absolute;
    top: 50%;
    left: 0;
    height: 38px;
    width: var(--ink-w, 0);
    margin-top: -19px;
    border-radius: var(--tn-r);
    background: var(--tn-active);
    transform: translateX(var(--ink-x, 0));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.32s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.2s ease;
}

body .tn .tn-ink::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -7px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

body .tn .tn-links.has-ink .tn-ink { opacity: 1; }

body .tn .tn-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--tn-r);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

body .tn .tn-link .material-icons-round { font-size: 1.2rem; transition: color 0.15s ease, transform 0.2s ease; }
body .tn .tn-link:hover { color: var(--text); background: var(--tn-hover); }
body .tn .tn-link:hover .material-icons-round { transform: translateY(-1px); }
body .tn .tn-link.active { color: var(--text); background: transparent; box-shadow: none; }
body .tn .tn-link.active .material-icons-round { color: var(--accent); }
body .tn .tn-links:not(.has-ink) .tn-link.active { background: var(--tn-active); }
body .tn .tn-links.has-ink .tn-link.active:hover { background: transparent; }
body .tn .tn-link.is-overflow { display: none; }

body .tn .tn-link__badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: var(--accent);
}

body .tn .tn-link__badge.is-bump { animation: tn-bump 0.5s ease; }
@keyframes tn-bump { 30% { transform: scale(1.35); } }

body .tn .tn-link--vip .material-icons-round { color: #f5b301; }
body .tn .tn-link--vip:hover { color: var(--text); background: color-mix(in srgb, #f5b301 12%, transparent); }

/* "Mer" (överflöd) och "Om" (gäster) */
body .tn .tn-more { position: relative; flex-shrink: 0; }
body .tn .tn-more__chev { font-size: 1.05rem !important; margin-left: -3px; opacity: 0.7; transition: transform 0.18s ease !important; }
body .tn .tn-more.is-open .tn-more__chev { transform: rotate(180deg); }
body .tn .tn-more__btn.active .material-icons-round:first-child { color: var(--accent); }
body .tn .tn-more__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg-surface); }

/* ═══ Gemensamt utseende för alla rullgardiner i menyn ═══
 * "Mer", "Om", kontomenyn och notispanelen delar yta, hörn, skugga, animation och rader.
 * En rad = ikon i en ruta + text (+ ev. siffra). Gruppetiketter som i notispanelen. */
body .tn .tn-pop,
body .tn .tn-menu,
body .tn .notif-panel.nfp {
    border: 1px solid var(--tn-line);
    border-radius: 18px;
    background: var(--bg-surface);
    box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--bg-base, #000) 40%, transparent);
    animation: tn-pop 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-interface-blur] body .tn .tn-pop,
html[data-interface-blur] body .tn .tn-menu { background: color-mix(in srgb, var(--bg-surface) 86%, transparent); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); }

/* Alla menyer öppnas 8px under menyraden (inte under sin knapp), precis som notispanelen. */
body .tn .tn-pop {
    position: absolute;
    top: calc(100% + (var(--topnav-h, 64px) - 38px) / 2 + 8px);
    left: 0;
    z-index: 410;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 250px;
    padding: 6px;
    transform-origin: top left;
}

body .tn .tn-pop[hidden] { display: none; }

body .tn .tn-pop__label,
body .tn .tn-menu__label {
    margin: 0;
    padding: 8px 10px 4px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Raderna – samma i "Mer", "Om" och kontomenyn */
body .tn .tn-more__item,
body .tn .tn-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 4px 8px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    color: var(--text);
    background: transparent;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

body .tn .tn-more__item > .material-icons-round:first-child,
body .tn .tn-menu .dropdown-item > .material-icons-round:first-child,
body .tn .tn-more__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 1.1rem !important;
    color: var(--text-muted);
    background: var(--tn-soft);
    transition: background 0.12s ease, color 0.12s ease;
}

body .tn .tn-more__item:hover,
body .tn .tn-more__item:focus-visible,
body .tn .tn-menu .dropdown-item:hover,
body .tn .tn-menu .dropdown-item:focus-visible { background: var(--tn-soft); outline: none; }

body .tn .tn-more__item:hover > .material-icons-round:first-child,
body .tn .tn-more__item:focus-visible > .material-icons-round:first-child,
body .tn .tn-menu .dropdown-item:hover > .material-icons-round:first-child,
body .tn .tn-menu .dropdown-item:focus-visible > .material-icons-round:first-child,
body .tn .tn-more__item:hover .tn-more__icon,
body .tn .tn-more__item:focus-visible .tn-more__icon { color: var(--accent); background: var(--tn-active); }

body .tn .tn-more__item.is-active,
body .tn .tn-menu .dropdown-item.active { color: var(--accent); background: var(--tn-active); }
body .tn .tn-more__item.is-active > .material-icons-round:first-child,
body .tn .tn-more__item.is-active .tn-more__icon,
body .tn .tn-menu .dropdown-item.active > .material-icons-round:first-child { color: #fff; background: var(--accent); }

body .tn .tn-more__item .tn-link__badge { margin-left: auto; }
body .tn .tn-more__lock { margin-left: auto; font-size: 1rem !important; color: var(--text-muted); }
body .tn .tn-more__item--rich { align-items: center; padding: 6px 8px; }
body .tn .tn-more__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
body .tn .tn-more__text strong { font-size: 0.86rem; }
body .tn .tn-more__text small { font-size: 0.74rem; font-weight: 500; color: var(--text-muted); }

/* Knappen som öppnar en meny ser likadan ut som notisknappen när menyn är öppen */
body .tn .tn-more.is-open .tn-more__btn,
body .tn .tn-user.open .tn-user__trigger,
body .tn .notif-btn.is-open { color: var(--accent) !important; background: var(--tn-active) !important; }

/* Actions */
body .tn .tn-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

body .tn .tn-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: var(--tn-r);
    background: transparent;
    color: var(--text-muted);
    box-shadow: none;
    transition: background 0.15s ease, color 0.15s ease;
}

body .tn .tn-icon:hover { color: var(--text); background: var(--tn-soft); }
body .tn .tn-icon .material-icons-round { font-size: 1.3rem; }
body .tn .tn-icon.pwa-install-btn:not([hidden]) { color: var(--accent); }
body .tn .topnav-toggle { display: none; }
body .tn .notif-btn[aria-expanded="true"] { color: var(--text); background: var(--tn-soft); }

/* Uppdatera-knappen behövs bara i den installerade appen (där finns ingen webbläsarknapp) */
body .tn .topnav-refresh { display: none; }
html.cg-pwa-standalone body .tn .topnav-refresh { display: inline-grid; }
@media (display-mode: standalone), (display-mode: fullscreen) {
    body .tn .topnav-refresh { display: inline-grid; }
}

body .tn .notif-btn .badge-count {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid var(--bg-surface);
    border-radius: 999px;
    box-sizing: border-box;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
    color: #fff;
    background: var(--tn-danger);
}

/* Sökfältet (öppnar Snabbsök) */
body .tn .tn-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: clamp(180px, 18vw, 280px);
    height: 38px;
    margin-right: 6px;
    padding: 0 8px 0 12px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.84rem;
    color: var(--text-muted);
    text-align: left;
    background: var(--tn-soft);
    box-shadow: inset 0 0 0 1px var(--tn-line);
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

body .tn .tn-search:hover { color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--tn-line)); }
body .tn .tn-search .material-icons-round { font-size: 1.2rem; }
body .tn .tn-search__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body .tn kbd,
body .tnp kbd {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 6px;
    border: 1px solid var(--tn-line, color-mix(in srgb, var(--border) 60%, transparent));
    border-bottom-width: 2px;
    border-radius: 6px;
    font: 700 0.66rem/1 inherit;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    background: var(--bg-surface);
}

/* Konto */
body .tn .tn-user { margin-left: 4px; }

body .tn .tn-user__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 6px 0 3px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}

body .tn .tn-user__trigger:hover,
body .tn .tn-user.open .tn-user__trigger { background: var(--tn-soft); }
body .tn .tn-user__avatar { position: relative; display: inline-flex; flex-shrink: 0; }
body .tn .tn-user__trigger .avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 3px var(--tn-line); }
body .tn .tn-user__trigger .user-menu-name { max-width: 130px; font-size: 0.85rem; font-weight: 700; }
body .tn .tn-user__trigger .chevron { font-size: 1.15rem; color: var(--text-muted); transition: transform 0.18s ease; }
body .tn .tn-user.open .tn-user__trigger .chevron { transform: rotate(180deg); }

body .tn .tn-presence {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border: 2px solid var(--bg-surface);
    border-radius: 50%;
    background: var(--text-muted);
    box-sizing: content-box;
}

body .tn .tn-presence--online { background: var(--tn-ok); }
body .tn .tn-presence--away { background: var(--tn-warn); }
body .tn .tn-presence--busy { background: var(--tn-danger); }
body .tn .tn-presence--offline { background: transparent; box-shadow: inset 0 0 0 2px var(--text-muted); }

/* Account menu */
body .tn .tn-menu {
    top: calc(100% + (var(--topnav-h, 64px) - 40px) / 2 + 8px);
    width: 300px;
    min-width: 0;
    max-height: min(640px, calc(var(--app-vh, 100dvh) - var(--topnav-h) - 24px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 6px;
    transform-origin: top right;
}

body .tn .tn-menu__me {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: var(--tn-r);
    color: var(--text);
    text-decoration: none;
    background: linear-gradient(120deg, var(--tn-active), transparent 75%);
}

body .tn .tn-menu__me:hover { background: var(--tn-soft); }
body .tn .tn-user__avatar--lg img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
body .tn .tn-user__avatar--lg .tn-presence { width: 12px; height: 12px; }
body .tn .tn-menu__who { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
body .tn .tn-menu__who strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .tn .tn-menu__who small { font-size: 0.75rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Statusväljaren */
body .tn .tn-status {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    margin: 6px 2px 2px;
    padding: 3px;
    border-radius: 12px;
    background: var(--tn-soft);
}

body .tn .tn-status__opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 7px 2px 6px;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

body .tn .tn-status__opt .tn-presence { position: static; width: 9px; height: 9px; border-width: 0; }
body .tn .tn-status__opt--offline .tn-presence { box-shadow: inset 0 0 0 2px var(--text-muted); }
body .tn .tn-status__opt:hover { color: var(--text); }
body .tn .tn-status__opt[aria-checked="true"] { color: var(--text); background: var(--bg-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
body .tn .tn-status.is-busy { opacity: 0.6; pointer-events: none; }

body .tn .tn-menu__group {
    margin-top: 4px;
    padding-top: 2px;
    border-top: 1px solid var(--tn-line);
}

body .tn .tn-menu .dropdown-item.danger { color: var(--tn-danger); }
body .tn .tn-menu .dropdown-item.danger > .material-icons-round:first-child { color: var(--tn-danger); background: color-mix(in srgb, var(--tn-danger) 10%, transparent); }
body .tn .tn-menu .dropdown-item.danger:hover { background: color-mix(in srgb, var(--tn-danger) 10%, transparent); }
body .tn .tn-menu .dropdown-item.danger:hover > .material-icons-round:first-child { color: #fff; background: var(--tn-danger); }
body .tn .tn-menu .tn-menu__admin > .material-icons-round:first-child { color: var(--accent); background: var(--tn-active); }
body .tn .tn-menu .dropdown-item--vip > .material-icons-round:first-child { color: #f5b301; background: color-mix(in srgb, #f5b301 13%, transparent); }

body .tn .tn-menu__count {
    margin-left: auto;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
    color: #fff;
    background: var(--tn-danger);
}

body .tn .tn-menu__hint { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 6px 0 2px; font-size: 0.7rem; color: var(--text-muted); }

body .tn .logout-form--dropdown { margin: 0; }
body .tn .logout-form--dropdown .dropdown-item { width: 100%; }

/* Notispanelen: samma rubrikrad och fot som de andra menyerna */
body .tn .notif-panel.nfp { transform-origin: top right; }
body .tn .notif-panel.nfp .nfp__head { padding: 12px 10px 6px 14px; }
body .tn .notif-panel.nfp .nfp__foot a { border-radius: 12px; }

@keyframes tn-pop {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* ─── Guest (signed out) ─── */
body .tn--guest .tn-link--sheet-only { display: none; }
body .tn .tn-divider { width: 1px; height: 22px; margin: 0 6px; background: var(--tn-line); }

/* Startsidan: genomskinlig över hero-ytan tills man scrollar */
body .app-topnav.tn.tn--over-hero:not(.is-scrolled) {
    border-bottom-color: transparent;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body .tn .tn-auth {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--tn-r);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, filter 0.15s ease;
}

body .tn .tn-auth .material-icons-round { font-size: 1.05rem; transition: transform 0.15s ease; }
body .tn .tn-auth--ghost { color: var(--text); background: transparent; }
body .tn .tn-auth--ghost:hover,
body .tn .tn-auth--ghost.is-active { background: var(--tn-soft); }
body .tn .tn-auth--primary { margin-left: 4px; color: #fff; background: var(--accent); }
body .tn .tn-auth--primary:hover { color: #fff; filter: brightness(1.08); }
body .tn .tn-auth--primary:hover .material-icons-round { transform: translateX(2px); }
body .tn .tn-auth--primary.is-active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }

/* "Fortsätt som …" */
body .tn .tn-remember { position: relative; display: inline-flex; align-items: center; }
body .tn .tn-remember[hidden] { display: none; }
body .tn .tn-remember__forget {
    position: absolute;
    top: -4px;
    right: -4px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--text-muted);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 1px var(--tn-line);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}
body .tn .tn-remember__forget .material-icons-round { font-size: 0.8rem; }
body .tn .tn-remember:hover .tn-remember__forget,
body .tn .tn-remember__forget:focus-visible { opacity: 1; }
body .tn .tn-remember__forget:hover { color: var(--tn-danger); }
body .tn .tn-auth--remembered { gap: 8px; padding: 0 12px 0 4px; color: var(--text); border-radius: 999px; background: var(--tn-soft); box-shadow: inset 0 0 0 1px var(--tn-line); }
body .tn .tn-auth--remembered:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--tn-line)); }
body .tn .tn-auth--remembered img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
body .tn .tn-auth__text { display: flex; flex-direction: column; line-height: 1.1; }
body .tn .tn-auth__text small { font-size: 0.64rem; font-weight: 600; color: var(--text-muted); }
body .tn .tn-auth__text strong { max-width: 140px; overflow: hidden; font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Snabbsök (dialog, ligger utanför headern) ─── */
.tnp {
    --tn-line: color-mix(in srgb, var(--border) 60%, transparent);
    --tn-soft: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
    --tn-active: color-mix(in srgb, var(--accent) 12%, transparent);
    width: min(640px, calc(100vw - 32px));
    max-height: min(560px, calc(100dvh - 120px));
    margin: 12vh auto auto;
    padding: 0;
    border: 1px solid var(--tn-line);
    border-radius: 20px;
    color: var(--text);
    background: var(--bg-surface);
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

.tnp[open] { animation: tnp-in 0.16s cubic-bezier(0.22, 1, 0.36, 1); }
.tnp::backdrop { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(3px); }
@keyframes tnp-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
.tnp__box { display: flex; flex-direction: column; max-height: inherit; }

.tnp__field { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--tn-line); }
.tnp__field > .material-icons-round { font-size: 1.35rem; color: var(--accent); }

.tnp__field input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    font: inherit;
    font-size: 1.02rem;
    color: var(--text);
    background: transparent;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.tnp__field input:focus,
.tnp__field input:focus-visible { outline: none; box-shadow: none; }
.tnp__spin { width: 16px; height: 16px; border: 2px solid var(--tn-line); border-top-color: var(--accent); border-radius: 50%; animation: tnp-spin 0.7s linear infinite; }
@keyframes tnp-spin { to { transform: rotate(360deg); } }

.tnp__list { flex: 1; min-height: 0; padding: 6px; overflow-y: auto; scroll-padding: 8px; }
.tnp__group { margin: 8px 10px 4px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.tnp__group:first-child { margin-top: 4px; }

.tnp__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
}

.tnp__item.is-on { background: var(--tn-active); }
.tnp__icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; font-size: 1.15rem !important; color: var(--text-muted); background: var(--tn-soft); }
.tnp__item.is-on .tnp__icon { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.tnp__avatar { position: relative; flex-shrink: 0; width: 32px; height: 32px; }
.tnp__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tnp__avatar i { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border: 2px solid var(--bg-surface); border-radius: 50%; background: var(--text-muted); }
.tnp__avatar i.is-online { background: var(--success, #22c55e); }
.tnp__avatar i.is-away { background: var(--warning, #f59e0b); }
.tnp__avatar i.is-busy { background: var(--error, #ef4444); }
.tnp__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.tnp__text strong { overflow: hidden; font-size: 0.9rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.tnp__text strong mark { color: var(--accent); background: none; font-weight: 800; }
.tnp__text small { overflow: hidden; font-size: 0.74rem; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.tnp__meta { flex-shrink: 0; font-size: 0.72rem; color: var(--text-muted); }
.tnp__badge { flex-shrink: 0; min-width: 20px; padding: 0 6px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; line-height: 20px; text-align: center; color: #fff; background: var(--accent); }
.tnp__enter { flex-shrink: 0; font-size: 1.05rem !important; color: var(--accent); opacity: 0; }
.tnp__item.is-on .tnp__enter { opacity: 1; }
.tnp__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 16px; font-size: 0.86rem; text-align: center; color: var(--text-muted); }
.tnp__empty .material-icons-round { font-size: 2rem; color: var(--accent); }

.tnp__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 16px; border-top: 1px solid var(--tn-line); font-size: 0.72rem; color: var(--text-muted); background: color-mix(in srgb, var(--bg-elevated) 40%, transparent); }
.tnp__foot span { display: inline-flex; align-items: center; gap: 3px; }
.tnp__foot-end { margin-left: auto; }

/* Appearance options */
html[data-nav-style="minimal"] body .app-topnav.tn { border-bottom-color: transparent; background: color-mix(in srgb, var(--bg-base) 80%, transparent); }
html[data-nav-style="prominent"] body .app-topnav.tn {
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    background: color-mix(in srgb, var(--bg-surface) 92%, var(--accent) 8%);
}
html[data-nav-style="prominent"] body .tn .tn-ink { background: color-mix(in srgb, var(--accent) 20%, var(--bg-elevated)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent); }
html[data-accent-style="muted"] body .tn .tn-ink { background: var(--tn-soft); }
html[data-compact] body .tn .tn-link,
html[data-compact] body .tn .tn-icon,
html[data-compact] body .tn .tn-search,
html[data-compact] body .tn .tn-user__trigger { height: 34px; }
html[data-compact] body .tn .tn-ink { height: 34px; margin-top: -17px; }
html[data-compact] body .tn .tn-icon { width: 34px; }
html[data-compact] body .tn .tn-pop { top: calc(100% + (var(--topnav-h, 56px) - 34px) / 2 + 8px); }
html[data-compact] body .tn .tn-menu { top: calc(100% + (var(--topnav-h, 56px) - 34px) / 2 + 8px); }

/* Mellanstora skärmar: kortare sökfält och inget namn vid avataren – länkarna flyttas till "Mer" i stället för att bli bara ikoner */
@media (max-width: 1320px) and (min-width: 901px) {
    body .tn .tn-search { width: 38px; padding: 0; justify-content: center; margin-right: 2px; background: transparent; box-shadow: none; }
    body .tn .tn-search:hover { background: var(--tn-soft); box-shadow: none; }
    body .tn .tn-search__text,
    body .tn .tn-search__kbd { display: none; }
}

@media (max-width: 1100px) and (min-width: 901px) {
    body .tn .tn-user__trigger .user-menu-name { display: none; }
    body .tn .tn-brand .logo-text { display: none; }
}

/* Phones & tablets: menu button on the right, links open as a sheet of tiles */
@media (max-width: 900px) {
    body .app-topnav.tn { gap: 2px; }
    body .tn .tn-brand { margin-right: auto; padding-right: 4px; }
    body .tn .tn-brand .logo-text { display: none; }
    body .tn .topnav-toggle { display: inline-grid; }
    body .tn .topnav-refresh,
    body .tn .tn-search,
    body .tn .tn-ink,
    body .tn .tn-more,
    body .tn .tn-divider,
    body .tn .tn-remember { display: none !important; }
    body .tn .tn-link.is-overflow { display: flex; }
    body .tn .tn-user { margin-left: 0; }
    body .tn .tn-user__trigger { padding: 0 3px; }
    body .tn .tn-user__trigger .user-menu-name,
    body .tn .tn-user__trigger .chevron { display: none; }

    body .tn .tn-links {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 290;
        flex: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 12px max(12px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
        border-bottom: 1px solid var(--tn-line);
        background: var(--bg-surface);
        box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.55);
        animation: tn-sheet 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    }

    body .tn .tn-links.open { display: grid; }

    body .tn .tn-link {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        height: auto;
        min-height: 72px;
        padding: 10px 6px;
        border-radius: var(--radius, 12px);
        background: var(--tn-soft);
        font-size: 0.78rem;
        white-space: normal;
        text-align: center;
    }

    body .tn .tn-link .material-icons-round { font-size: 1.5rem; }
    body .tn .tn-link.active { background: var(--tn-active); }

    /* Guest: auth buttons move into the sheet, the primary one stays visible */
    body .tn--guest .tn-link--sheet-only { display: flex; }
    body .tn--guest .tn-link--cta { color: #fff; background: var(--accent); }
    body .tn--guest .tn-link--cta .material-icons-round { color: #fff; }
    body .tn--guest .tn-auth--ghost { display: none; }
    body .tn--guest .tn-auth--primary { height: 34px; padding: 0 12px; font-size: 0.8rem; }
    body .tn--guest .tn-auth--primary .material-icons-round { display: none; }
    body .tn--guest .tn-brand .logo-text { display: inline; }
    body .app-topnav.tn.tn--over-hero:not(.is-scrolled) { background: color-mix(in srgb, var(--bg-surface) 86%, transparent); }

    body .tn .tn-link__badge {
        position: absolute;
        top: 6px;
        right: 8px;
    }

    body .tn .tn-menu {
        position: fixed;
        top: calc(var(--topnav-h) + var(--safe-top, env(safe-area-inset-top, 0px)) + 6px);
        right: 8px;
        left: auto;
        width: min(320px, calc(100vw - 16px));
    }
}

@media (max-width: 360px) {
    body .tn .tn-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@keyframes tn-sheet {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body .tn .tn-menu,
    body .tn .notif-panel,
    body .tn .tn-pop,
    body .tn .tn-links,
    body .tn .tn-ink,
    .tnp[open] { animation: none; transition: none; }
}

/* ── Språkväljare ── */
body .tn .tn-menu .lang-switch-item__now {
    margin-left: auto;
    padding: 1px 7px;
    border: 1px solid var(--tn-line);
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
body .tn .lang-switch-icon { text-decoration: none; }
body .tn .lang-switch-icon__code {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: 4px 6px;
    border: 1.5px solid currentColor;
    border-radius: 7px;
}
.lang-switch-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.lang-switch-inline .material-icons-round { font-size: 1em; }