/* ============================================================
   BLOCK — nav.css
   Top bar navigation. A horizontal bar with the brand on the
   left and account/session actions on the right.

   Nav items (Account, Sign in, Sign out) use .button classes.
   The brand link is a plain link with custom type styling.

   Markup:
     <header class="top-bar">
       <nav>
         <ul>
           <li class="top-bar-brand"><a href="/">App</a></li>
           <li><a href="/account" class="button" data-variant="ghost" data-size="sm">Account</a></li>
           <li>
             <%= button_to "Sign out", session_path, method: :delete,
                 class: "button", data: { variant: "ghost-danger", size: "sm" } %>
           </li>
         </ul>
       </nav>
     </header>
   ============================================================ */

/* ── Top bar — structural chrome frame ───────────────────── */

.top-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-surface-chrome);
    border-block-end: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* ── Nav layout ──────────────────────────────────────────── */

.top-bar nav {
    display: flex;
    align-items: center;
    padding-inline: var(--gutter);
    padding-block: var(--space-2xs);
    max-width: var(--container);
    margin-inline: auto;
}

.top-bar nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Reset global li+li spacing for top bar list items */
.top-bar nav ul li + li {
    margin-block-start: 0;
}

/* Push everything after the brand to the right */
.top-bar-brand {
    margin-inline-end: auto;
}

/* ── Brand link — larger type, bridges to content on hover ── */

.top-bar .top-bar-brand a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--step-0);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    text-decoration: none;
    padding-inline-start: 0;
    padding-block: var(--space-2xs);
    padding-inline-end: var(--space-s);
    border-radius: 6px;
    letter-spacing: var(--tracking-tight);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.top-bar .top-bar-brand a:hover {
    color: var(--color-text-subtle);
    /*background-color: var(--color-surface-base);*/
}

/* ── Rails button_to — flatten wrapper so .button propagates ── */

.top-bar nav form.button_to {
    display: contents;
}