.site-header {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    height: var(--bar-h);
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

/* Shared pill used by every clickable item in the header and footer bars. */
.bar-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: var(--bar-item-h);
    padding: 0 0.5rem;
    color: var(--muted);
    white-space: nowrap;
    border-radius: var(--radius);
}

a.bar-item:hover,
.bar-action:hover {
    color: var(--fg);
    background: var(--surface-2);
    text-decoration: none;
}

.bar-action {
    font: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: var(--bar-item-h);
    padding: 0 0.5rem;
    margin-right: 0.375rem;
    font-weight: 600;
    color: var(--fg);
    border-radius: var(--radius);
}

.brand:hover {
    background: var(--surface-2);
    text-decoration: none;
}

.brand .icon {
    color: var(--accent);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: var(--bar-item-h);
    padding: 0 0.5rem;
    color: var(--muted);
    white-space: nowrap;
    border-radius: var(--radius);
}

.site-nav a:hover {
    color: var(--fg);
    background: var(--surface-2);
    text-decoration: none;
}

.site-nav a[aria-current="page"] {
    color: var(--fg);
    font-weight: 600;
}

.site-user {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin-left: auto;
}

.site-user form {
    margin: 0;
}

.main {
    flex: 1;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.5rem;
}

.flash {
    width: calc(100% - 3rem);
    max-width: 69rem;
    margin: 1rem auto 0;
    padding: 0.6rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.flash-ok {
    background: var(--ok-soft);
    border-color: var(--ok);
}

.flash-error {
    background: var(--danger-soft);
    border-color: var(--danger);
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.125rem 1rem;
    min-height: var(--bar-h);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: var(--muted);
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.footer-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem 0.875rem;
    padding: 0 0.5rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem;
}

.footer-info a {
    color: var(--muted);
}

.footer-info a:hover {
    color: var(--fg);
}

.footer-links .bar-item {
    height: 1.625rem;
}

/* Same pill geometry as .bar-item so the icon-to-label rhythm matches API
   and GitHub: 0.5rem of padding, then a 0.375rem gap after the icon. */
.theme-form {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.625rem;
    margin: 0;
    padding: 0 0.5rem;
    color: var(--muted);
    border-radius: var(--radius);
}

.theme-form:hover,
.theme-form:focus-within {
    color: var(--fg);
    background: var(--surface-2);
}

.theme-form label {
    display: inline-flex;
    align-items: center;
}

.select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* The native arrow reserves far more room than the label needs, so it is
   replaced by a chevron sized to the other footer icons. */
.select-wrap select {
    width: auto;
    min-width: 0;
    height: 1.625rem;
    padding: 0 0.875rem 0 0;
    font-size: 0.75rem;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    appearance: none;
}

.select-wrap .icon-chevron {
    position: absolute;
    right: 0;
    width: 0.75rem;
    height: 0.75rem;
    pointer-events: none;
}

.auth {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 3rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 24rem;
}

.auth-alt {
    margin: 1rem 0 0;
    text-align: center;
}

.auth-or {
    margin: 1rem 0;
    font-size: 0.85rem;
    text-align: center;
}

.error-page {
    max-width: 32rem;
    margin: 3rem auto;
    text-align: center;
}

.error-code {
    margin: 0;
    font-size: 3rem;
    font-weight: 600;
    color: var(--muted);
}

@media (max-width: 640px) {
    .site-header {
        gap: 0;
        padding: 0 0.25rem;
    }

    /* Keep the bar one row tall: collapse the labels, keep the icons.
       Clipped rather than display:none so the icon-only sign-out button
       keeps its accessible name. */
    .bar-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .brand {
        margin-right: 0;
    }

    .main {
        padding: 1rem;
    }

    .flash {
        width: calc(100% - 2rem);
    }

    .site-footer {
        justify-content: flex-start;
        padding: 0.375rem 0.25rem;
    }
}

.header-search {
    display: flex;
    align-items: center;
    margin: 0 0 0 0.5rem;
}

.header-search input {
    width: 12rem;
    height: var(--bar-item-h);
    padding: 0 0.5rem;
    font-size: 0.8125rem;
}

@media (max-width: 640px) {
    .header-search {
        display: none;
    }
}

.flash-undo {
    display: inline-flex;
    margin: 0 0 0 0.75rem;
    vertical-align: baseline;
}