/*
 * Top bar and breadcrumb.
 *
 * The breadcrumb IS the navigation (FR-018) — there is no menu, because the
 * vault is a folder tree and the path back is the only route that matters.
 * Separated with `/` because that is literally what the structure is.
 */

.menubar {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--color-menubar);
    color: var(--color-menubar-text);
}

/*
 * Row one: the app bar. Home left, actions right, fixed height. The controls
 * never move, whatever the path is doing below them.
 */
.menubar__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    max-width: var(--measure);
    margin: 0 auto;
    padding: var(--space-xs) var(--space-md);
    min-height: 3rem;
}

.menubar__home {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--color-menubar-text-active);
    text-decoration: none;
}

.menubar__home .logo { font-size: 1.3rem; flex: none; }

.menubar__home:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ----------------------------------------------------------- breadcrumb -- */

/*
 * Row two: where you are.
 *
 * It has the full width to itself, so the entire path stays visible however
 * deep it runs — a nine-level PARA path is about 180 characters and could
 * never share a line with four controls at a readable size. It wraps instead
 * of scrolling or truncating, and the bar grows only as much as the path
 * demands.
 *
 * The trail is the road travelled, so ancestors stay quiet and the segment you
 * are on carries the weight.
 */

.breadcrumb {
    border-top: 1px solid color-mix(in srgb, var(--color-menubar-text) 12%, transparent);
}

.breadcrumb__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* Tight rows: a wrapped path should read as one block, not a list. */
    row-gap: 1px;
    /*
     * --measure is 68ch, and `ch` resolves against the element's OWN font-size.
     * Setting a smaller size here would silently narrow the column and knock
     * the path out of alignment with everything else, so the type size lives on
     * the crumbs instead.
     */
    max-width: var(--measure);
    margin: 0 auto;
    padding: var(--space-xs) var(--space-md) var(--space-sm);
    line-height: 1.55;
}

.breadcrumb__crumb {
    font-size: 0.8125rem;
    /* A long single segment breaks rather than forcing a horizontal scroll. */
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--color-menubar-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}

/* The separator belongs to the segment, so it wraps with it. */
.breadcrumb__crumb + .breadcrumb__crumb::before {
    content: "/";
    padding: 0 var(--space-xs);
    opacity: 0.4;
}

.breadcrumb__crumb:hover {
    color: var(--color-menubar-text-active);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Where you are, not how you got here. */
.breadcrumb__crumb[aria-current="page"] {
    color: var(--color-menubar-text-active);
    font-weight: 500;
}

/* -------------------------------------------------------------- actions -- */

.menubar__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.menubar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px — a real touch target, this is a phone-first product. */
    width: 2.75rem;
    height: 2.75rem;
    background: none;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--color-menubar-text);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.menubar__button:hover {
    background-color: var(--color-menubar-hover);
    color: var(--color-menubar-text-active);
}

.menubar__button:focus-visible {
    outline-color: var(--color-menubar-text-active);
}

.menubar__button svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------- search -- */

.search-bar {
    border-bottom: 1px solid var(--color-border-subtle);
    background-color: var(--color-surface);
}

.search-bar__form {
    display: flex;
    gap: var(--space-sm);
    max-width: var(--measure);
    margin: 0 auto;
    padding: var(--space-sm) var(--space-md);
}

.search-bar__input {
    flex: 1;
    min-width: 0;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--color-text);
}

.search-bar__input::placeholder {
    color: var(--color-text-muted);
}

.search-bar__input:focus-visible {
    border-color: var(--color-primary);
    outline-offset: 0;
}