/*
 * mlp-page-header styles. Import after platform.css (reuses its tokens) and after mlp-sidebar.css
 * — CSS-only, no src/index.js: the one interactive element this header can hold (the mobile
 * sidebar toggle button) is wired entirely by mlp-sidebar's own mountSidebarToggles(), matched
 * by the `[data-mlp-sidebar-toggle]` attribute wherever the button actually lives in the DOM, not
 * by its class or its package. This package only owns where that button sits and what it looks
 * like — see its own rules below.
 *
 * The markup itself (`.page-header`'s actual `<div>`/`<h1>`/`{{#if backHref}}` structure) stays
 * in mlp-platform's own `app-shell.hbs` partial — a Handlebars template isn't something this
 * repo deals with (see mlp-libraries' own CLAUDE.md: browser JS+CSS only), so unlike every other
 * package here, the "mechanism vs. content" boundary runs through the *markup* rather than
 * around it: this file owns layout/visual rules for a fixed, known set of class names
 * (`.page-header`, `.page-header__title`, `.page-header__actions`, `.breadcrumb`), and
 * `app-shell.hbs` is the one place in mlp-platform allowed to emit them (PLAT-42) — the same
 * "don't hand-roll a second copy" discipline `mlp-forms`'s `.field` classes already require of
 * every view that uses them.
 */

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.page-header h1 {
  margin: 0;
}

.page-header__title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--t-sm);
}

/* The mobile sidebar toggle (`app-shell.hbs`'s first `.page-header__title` child,
 * `[data-mlp-sidebar-toggle]`, mlp-sidebar's own click wiring) — hidden above the breakpoint,
 * where the sidebar is always visible inline and there's nothing to toggle. Real feedback drove
 * two full iterations before landing here: first a `.shell`-level `position: sticky` button
 * that silently reserved a full-page-height column ("that width seems to be dedicated all the
 * way down the page"), then a `position: fixed` overlay that stopped reserving space but could
 * still paint over a page's own back link/title ("it blocks the header text... in a detail
 * view"), patched at the time with a blanket `padding-top` on `main.content` (PLAT-41) rather
 * than fixed at the source — because `app-shell.hbs` wasn't yet the *only* place a page's header
 * could come from (PLAT-42). Now that every page goes through it, the toggle can finally be a
 * normal in-flow flex child of `.page-header__title` like this, and that padding-top hack is
 * gone (removed from `platform.css`). */
.mlp-sidebar-toggle {
  display: none;
}

@media (max-width: 768px) {
  .mlp-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    /* Native <button> text color doesn't follow the page's color scheme on its own — without
       this, the icon (fill: currentColor) stayed browser-default black even in dark mode,
       against this button's dark var(--c-surface) background. */
    color: var(--c-text);
    font-size: var(--t-md);
    cursor: pointer;
  }
}