@charset "UTF-8";
@layer bf-reset, bf-base, bf-auto, bf-tokens, bf-components, bf-utilities, bf-overrides;
@layer bf-components {
  /* ───────── Shell ───────── */
  .bf-shell {
    --bf-shell-sidebar-w: 64px;
    --bf-shell-sidebar-w-expanded: 248px;
    --bf-shell-secondary-w: 0px;
    --bf-shell-detail-w: 0px;
    --bf-shell-rail-w: 0px;
    --bf-shell-topbar-h: 56px;
    display: grid;
    grid-template-columns: var(--bf-shell-sidebar-w) var(--bf-shell-secondary-w) 1fr var(--bf-shell-detail-w) var(--bf-shell-rail-w);
    grid-template-rows: var(--bf-shell-topbar-h) 1fr;
    grid-template-areas: "sidebar topbar    topbar topbar topbar" "sidebar secondary main   detail rail";
    /* Fixed-chrome scroll model: the shell is exactly viewport height and only
     * the `main` cell scrolls. Topbar / sidebar / secondary / detail / rail
     * stay pinned because they live in non-scrolling grid cells. */
    height: 100dvh;
    overflow: hidden;
    background-color: var(--bf-color-canvas-bg);
    color: var(--bf-color-text-base);
  }
  .bf-shell--no-sidebar {
    grid-template-columns: 0 var(--bf-shell-secondary-w) 1fr var(--bf-shell-detail-w) var(--bf-shell-rail-w);
  }
  .bf-shell--has-secondary {
    --bf-shell-secondary-w: 248px;
  }
  .bf-shell--has-detail {
    --bf-shell-detail-w: 360px;
  }
  .bf-shell--has-rail {
    --bf-shell-rail-w: 48px;
  }
  /* Sidebar width state — defaults to "rail" if the attribute is absent so
   * existing screens keep their icon-only sidebar with no markup change. */
  .bf-shell[data-bf-sidebar=expanded] {
    --bf-shell-sidebar-w: var(--bf-shell-sidebar-w-expanded);
  }
  .bf-shell__sidebar {
    grid-area: sidebar;
  }
  .bf-shell__topbar {
    grid-area: topbar;
  }
  .bf-shell__secondary {
    grid-area: secondary;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .bf-shell__main {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .bf-shell__detail {
    grid-area: detail;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .bf-shell__rail {
    grid-area: rail;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Default chrome on the optional regions — authors can override per-page. */
  .bf-shell__secondary {
    background-color: var(--bf-color-bg-base);
    border-right: 1px solid var(--bf-color-border-base);
  }
  .bf-shell__detail {
    background-color: var(--bf-color-bg-base);
    border-left: 1px solid var(--bf-color-border-base);
    padding: var(--bf-space-5);
  }
  .bf-shell__rail {
    background-color: var(--bf-color-bg-subtle);
    border-left: 1px solid var(--bf-color-border-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bf-space-2);
    padding: var(--bf-space-3) 0;
  }
  /* ───────── Sidebar ───────── */
  .bf-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--bf-shell-sidebar-w);
    background-color: var(--bf-color-shell-bg);
    border-right: 1px solid var(--bf-color-shell-border);
    z-index: var(--bf-z-sidebar);
    /* `visible` so the absolutely-positioned toggle button can poke out past
     * the right edge. Inner `.bf-sidebar__nav` retains its own overflow-y: auto
     * so long nav lists still scroll inside the sidebar. */
    overflow: visible;
  }
  .bf-sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--bf-shell-topbar-h);
    width: 100%;
    flex-shrink: 0;
    border-bottom: 1px solid var(--bf-color-shell-border);
  }
  .bf-sidebar__brand img,
  .bf-sidebar__brand svg {
    width: 32px;
    height: 32px;
  }
  .bf-sidebar__nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bf-space-1);
    padding: var(--bf-space-2) 0;
    overflow-y: auto;
  }
  .bf-sidebar__nav.bf-scroll {
    scrollbar-width: none;
  }
  .bf-sidebar__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bf-space-2);
    padding: var(--bf-space-2) 0;
    border-top: 1px solid var(--bf-color-shell-border);
  }
  /* Sidebar items — icon-only buttons. The .bf-sidebar__item--active row has the
   * filled tile look from the reference screenshots.
   *
   * text-decoration: none is locked on every state because the global
   * a:hover rule in core/base.scss applies an underline that, on a
   * sidebar entry, reads as a visual bug. The opt-out has to repeat on
   * :hover — the global selector has equal specificity and would
   * otherwise win the cascade on element-based <a> rendering. */
  .bf-sidebar__item {
    --_size: 36px;
    width: var(--_size);
    height: var(--_size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bf-radius-md);
    color: var(--bf-color-shell-fg);
    background-color: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--bf-duration-fast) var(--bf-ease-out), color var(--bf-duration-fast) var(--bf-ease-out);
    position: relative;
  }
  .bf-sidebar__item:hover {
    background-color: var(--bf-color-shell-hover-bg);
    color: var(--bf-color-text-strong);
    text-decoration: none;
  }
  .bf-sidebar__item--active {
    background-color: var(--bf-color-shell-active-bg);
    color: var(--bf-color-shell-active-fg);
  }
  .bf-sidebar__item i,
  .bf-sidebar__item svg {
    font-size: 18px;
    line-height: 1;
  }
  .bf-sidebar__item__label {
    display: none;
    font-size: var(--bf-text-sm);
    font-weight: var(--bf-weight-medium);
    white-space: nowrap;
  }
  /* ─── Submenus ───────────────────────────────────────────────────────────
   * Sidebar groups: a parent .bf-sidebar__item plus a panel of
   * children. Two display modes keyed on data-bf-sidebar:
   *
   *   - rail (icon-only):  popout panel to the right on hover /
   *                        focus-within. A transparent pseudo-element
   *                        bridges the visible gap between group and
   *                        panel so the cursor stays inside the hover
   *                        region while transiting.
   *   - expanded:          inline drawer beneath the parent, always
   *                        open while the sidebar is expanded. The
   *                        caret rotates to point down. No popout
   *                        chrome — children render flush with the
   *                        nav, just indented.
   *
   * Markup contract:
   *
   *   <div class="bf-sidebar__group">
   *     <a class="bf-sidebar__item bf-sidebar__item--has-children" …>
   *       <i class="fa-duotone fa-code"></i>
   *       <span class="bf-sidebar__item__label">Dev</span>
   *       <i class="bf-sidebar__caret fa-solid fa-chevron-right"></i>
   *     </a>
   *     <div class="bf-sidebar__submenu" role="menu">
   *       <a class="bf-sidebar__submenu__item" href="…">
   *         <i class="fa-duotone fa-cubes"></i>
   *         <span>Addons</span>
   *       </a>
   *       …
   *     </div>
   *   </div>
   *
   * The popout uses :hover + :focus-within so keyboard navigation
   * works (focusing the parent, then tabbing into the submenu keeps
   * it open until focus leaves the group). No JS required. */
  /* The group spans the full sidebar width in both modes so the
   * rail-mode 3-dot caret can be position: absolute against the
   * group and land in the gutter between the 36px item tile and
   * the sidebar's right border. The .bf-sidebar__item inside is
   * still 36px and gets centered/full-width by its own rules. */
  .bf-sidebar__group {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .bf-shell[data-bf-sidebar=expanded] .bf-sidebar__group {
    align-items: stretch;
  }
  /* Caret variants: --rail is the 3-dot ellipsis shown only in
   * rail mode, --expanded is the chevron-right (rotated to point
   * down) shown only when the sidebar is expanded.
   *
   * Each mode has BOTH a show rule for its own variant AND a hide
   * rule for the opposite variant. The hide rules carry the same
   * specificity (0,4,0) so they override the unlayered Font Awesome
   * `.fa-solid { display: inline-block }` rule — which would
   * otherwise force the wrong-mode caret to render alongside the
   * right-mode one. (FA's stylesheet is unlayered and bf's is in
   * @layer bf-components, so any equal-specificity layered rule
   * loses the cascade against FA. Bumping specificity sidesteps
   * the layer issue without reaching for !important.) */
  .bf-sidebar__caret {
    font-size: 10px;
    transition: transform var(--bf-duration-fast) var(--bf-ease-out);
  }
  /* Rail mode: 3-dot ellipsis sits in the sidebar gutter, between
   * the item's right edge and the sidebar's right border. The
   * caret is rendered as a sibling of the <a> inside .bf-sidebar__group
   * (so its containing block is the full-width group, not the
   * 36px item tile) and absolute-positioned with right: 4px so
   * it visually settles in the right margin. top is 18px (half of
   * the 36px item height the group's first row reserves) so the
   * dots align with the icon's vertical center. pointer-events:
   * none + aria-hidden in the markup keeps it as a pure visual
   * hint — the parent <a> owns the click region, the dots don't
   * compete for hit-testing. */
  .bf-shell:not([data-bf-sidebar=expanded]) .bf-sidebar__group > .bf-sidebar__caret--rail {
    display: inline-block;
    position: absolute;
    right: 4px;
    top: 18px;
    transform: translateY(-50%);
    opacity: 0.45;
    pointer-events: none;
  }
  .bf-shell[data-bf-sidebar=expanded] .bf-sidebar__group > .bf-sidebar__caret--rail {
    display: none !important;
  }
  /* Rail mode: popout panel right next to the sidebar's right
   * border. var(--bf-space-2) (8px) keeps the panel close to the
   * menu edge as the visual reference. The .bf-shell__sidebar-toggle
   * button overhangs +12px from the sidebar, but it sits at y ~60px
   * (under the brand) while parent menu items tend to land further
   * down — vertical overlap with a popout is rarely an issue. */
  .bf-sidebar__submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: var(--bf-space-2);
    min-width: 200px;
    padding: var(--bf-space-2);
    background: var(--bf-color-bg-elevated);
    border: 1px solid var(--bf-color-border-base);
    border-radius: var(--bf-radius-md);
    box-shadow: var(--bf-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
    /* Sit above the topbar (--bf-z-topbar = 40) — the popout
     * extends past the sidebar's column into the topbar region
     * when a Dev-style group has many children, and was getting
     * clipped behind it. Use the dropdown layer (1000) since
     * this surface is functionally a flyout panel. */
    z-index: var(--bf-z-dropdown);
  }
  /* Hover bridge — fills the visible gap between the group and
   * the popout so the cursor never leaves :hover during transit.
   * Width matches the margin-left + 2px overlap on each edge to
   * tolerate sub-pixel rounding. */
  .bf-sidebar__submenu::before {
    content: "";
    position: absolute;
    left: calc(-1 * (var(--bf-space-2) + 2px));
    top: 0;
    width: calc(var(--bf-space-2) + 2px);
    height: 100%;
  }
  .bf-sidebar__group:hover > .bf-sidebar__submenu,
  .bf-sidebar__group:focus-within > .bf-sidebar__submenu {
    display: block;
  }
  /* Expanded mode: drop the popout chrome, render children inline
   * below the parent. The drawer is collapsed by default and only
   * opens when the parent's .bf-sidebar__group has data-bf-open="true"
   * (set by the toggle button click, OR pre-set by Go when one of
   * the group's children matches the request path). The
   * .bf-sidebar__group-toggle is the click affordance — visible
   * only in expanded mode, sits at the row's right edge, rotates
   * the chevron when open. */
  .bf-shell[data-bf-sidebar=expanded] .bf-sidebar__group > .bf-sidebar__submenu {
    display: none;
    position: static;
    margin-left: 0;
    min-width: 0;
    padding: var(--bf-space-1) 0 var(--bf-space-2);
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .bf-shell[data-bf-sidebar=expanded] .bf-sidebar__group[data-bf-open=true] > .bf-sidebar__submenu {
    display: block;
  }
  .bf-shell[data-bf-sidebar=expanded] .bf-sidebar__submenu::before {
    content: none;
  }
  .bf-shell[data-bf-sidebar=expanded] .bf-sidebar__submenu__item {
    padding-left: var(--bf-space-7);
  }
  /* Disclosure: chevron + (sometimes) a dedicated toggle button.
   *
   * Two markup shapes for the disclosure trigger:
   *
   *   - URL-parent case: the <a> navigates to the parent's URL,
   *     and a separate .bf-sidebar__group-toggle button (with the
   *     chevron inside) handles open/close. Both must be
   *     independently click-targetable.
   *   - No-URL-parent case: the parent itself is a <button>; the
   *     whole row is the toggle and the chevron sits inline at
   *     the row's right edge inside that button.
   *
   * The chevron rules below apply to both shapes — visible only
   * in expanded mode, rotates 90deg when the closest group has
   * data-bf-open="true". The toggle-button rules apply only to
   * the URL-parent case (positioned at the row's right edge,
   * hidden in rail mode). */
  .bf-sidebar__caret--expanded {
    font-size: 10px;
    transition: transform var(--bf-duration-fast) var(--bf-ease-out);
  }
  .bf-shell:not([data-bf-sidebar=expanded]) .bf-sidebar__caret--expanded {
    display: none !important;
  }
  .bf-shell[data-bf-sidebar=expanded] .bf-sidebar__caret--expanded {
    display: inline-block;
    opacity: 0.6;
  }
  .bf-shell[data-bf-sidebar=expanded] .bf-sidebar__group[data-bf-open=true] .bf-sidebar__caret--expanded {
    transform: rotate(90deg);
  }
  /* When the chevron is a direct child of the parent .bf-sidebar__item
   * (no-URL-parent case), push it to the row's right edge. */
  .bf-shell[data-bf-sidebar=expanded] .bf-sidebar__item > .bf-sidebar__caret--expanded {
    margin-left: auto;
  }
  /* Dedicated toggle button — only the URL-parent case. */
  .bf-sidebar__group-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--bf-color-shell-fg);
    opacity: 0.6;
  }
  .bf-sidebar__group-toggle:hover {
    opacity: 1;
  }
  .bf-shell[data-bf-sidebar=expanded] .bf-sidebar__group-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: var(--bf-space-2);
    top: 8px;
    width: 20px;
    height: 20px;
  }
  .bf-shell:not([data-bf-sidebar=expanded]) .bf-sidebar__group-toggle {
    display: none !important;
  }
  /* Submenu header — names the group the popout belongs to. The
   * parent .bf-sidebar__item deliberately drops its tooltip when
   * it owns a submenu (the tooltip and popout collide on the same
   * screen real estate and the cursor transit breaks the hover
   * chain), so this header is what tells the user "you're looking
   * at Dev's children." Hidden in expanded mode where the parent
   * row is already visible right above its inline drawer. */
  .bf-sidebar__submenu__header {
    display: flex;
    align-items: center;
    gap: var(--bf-space-2);
    padding: var(--bf-space-2) var(--bf-space-3) var(--bf-space-1);
    margin-bottom: var(--bf-space-1);
    font-size: var(--bf-text-sm);
    font-weight: var(--bf-weight-semibold);
    color: var(--bf-color-text-strong);
    border-bottom: 1px solid var(--bf-color-border-base);
    pointer-events: none;
  }
  .bf-sidebar__submenu__header i {
    font-size: 14px;
    opacity: 0.85;
  }
  .bf-shell[data-bf-sidebar=expanded] .bf-sidebar__submenu__header {
    display: none;
  }
  .bf-sidebar__submenu__item {
    display: flex;
    align-items: center;
    gap: var(--bf-space-2_5);
    padding: var(--bf-space-2) var(--bf-space-3);
    border-radius: var(--bf-radius-sm);
    color: var(--bf-color-text-base);
    text-decoration: none;
    font-size: var(--bf-text-sm);
    white-space: nowrap;
    cursor: pointer;
  }
  .bf-sidebar__submenu__item:hover {
    background-color: var(--bf-color-shell-hover-bg);
    color: var(--bf-color-text-strong);
    text-decoration: none;
  }
  .bf-sidebar__submenu__item--active {
    background-color: var(--bf-color-shell-active-bg);
    color: var(--bf-color-shell-active-fg);
  }
  .bf-sidebar__submenu__item i {
    width: 18px;
    text-align: center;
    opacity: 0.85;
  }
  /* Expanded state — sidebar shows labels next to icons. Items become full-width
   * rows; the brand grows to fit a wordmark next to the logo. */
  .bf-shell[data-bf-sidebar=expanded] .bf-sidebar__nav,
  .bf-shell[data-bf-sidebar=expanded] .bf-sidebar__footer {
    align-items: stretch;
    padding-inline: var(--bf-space-2);
  }
  .bf-shell[data-bf-sidebar=expanded] .bf-sidebar__item {
    width: 100%;
    justify-content: flex-start;
    gap: var(--bf-space-2_5);
    padding: 0 var(--bf-space-3);
  }
  .bf-shell[data-bf-sidebar=expanded] .bf-sidebar__item__label {
    display: inline;
  }
  .bf-shell[data-bf-sidebar=expanded] .bf-sidebar__brand {
    justify-content: flex-start;
    gap: var(--bf-space-2);
    padding-inline: var(--bf-space-3);
  }
  /* Sidebar collapse toggle — anchored to the sidebar's right edge. The toggle
   * is appended into `.bf-shell__sidebar` by `src/js/shell.ts`, so it moves
   * with the sidebar (off-canvas on mobile, follows width changes on desktop).
   * `.bf-sidebar` runs `overflow: visible` already so this can poke out. */
  .bf-shell__sidebar-toggle {
    position: absolute;
    top: calc(var(--bf-shell-topbar-h) + var(--bf-space-3));
    right: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bf-color-bg-base);
    border: 1px solid var(--bf-color-border-base);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--bf-color-text-muted);
    font-size: 10px;
    z-index: calc(var(--bf-z-sidebar) + 1);
    padding: 0;
    box-shadow: var(--bf-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.06));
  }
  .bf-shell__sidebar-toggle:hover {
    background: var(--bf-color-surface-hover);
    color: var(--bf-color-text-strong);
  }
  .bf-shell__sidebar-toggle > i {
    transition: transform var(--bf-duration-fast) var(--bf-ease-out);
  }
  .bf-shell[data-bf-sidebar=expanded] .bf-shell__sidebar-toggle > i {
    transform: rotate(180deg);
  }
  /* The little vertical "::" handle that some sidebar rows show on hover. */
  .bf-sidebar__handle {
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 16px;
    border-radius: var(--bf-radius-full);
    background-color: var(--bf-color-border-strong);
    opacity: 0;
  }
  .bf-sidebar__row {
    position: relative;
    display: flex;
    align-items: center;
  }
  .bf-sidebar__row:hover .bf-sidebar__handle {
    opacity: 0.6;
  }
  /* Mobile — sidebar becomes off-canvas; the optional regions collapse out so
   * `main` claims the full width. The off-canvas drawer always uses the
   * expanded width so labels render even if the desktop default was rail. */
  @media (max-width: 1023px) {
    .bf-shell {
      grid-template-columns: 1fr;
      grid-template-areas: "topbar" "main";
    }
    .bf-shell__secondary,
    .bf-shell__detail,
    .bf-shell__rail,
    .bf-shell__sidebar-toggle {
      display: none;
    }
    .bf-shell__sidebar {
      position: fixed;
      inset: 0 auto 0 0;
      width: var(--bf-shell-sidebar-w-expanded);
      transform: translateX(-100%);
      transition: transform var(--bf-duration-base) var(--bf-ease-emphasized);
      box-shadow: var(--bf-shadow-xl);
    }
    .bf-shell[data-bf-shell-open=true] .bf-shell__sidebar {
      transform: translateX(0);
    }
    .bf-sidebar {
      width: 100%;
    }
    /* Scrim */
    .bf-shell__scrim {
      display: none;
      position: fixed;
      inset: 0;
      background-color: var(--bf-color-bg-overlay);
      z-index: calc(var(--bf-z-sidebar) - 1);
    }
    .bf-shell[data-bf-shell-open=true] .bf-shell__scrim {
      display: block;
    }
  }
  /* ───────── Topbar ───────── */
  .bf-topbar {
    display: flex;
    align-items: center;
    gap: var(--bf-space-3);
    height: var(--bf-shell-topbar-h);
    padding-inline: var(--bf-space-4);
    background-color: var(--bf-color-shell-bg);
    border-bottom: 1px solid var(--bf-color-shell-border);
    z-index: var(--bf-z-topbar);
  }
  .bf-topbar__menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    border-radius: var(--bf-radius-md);
    color: var(--bf-color-text-muted);
    cursor: pointer;
  }
  .bf-topbar__menu:hover {
    background-color: var(--bf-color-surface-hover);
    color: var(--bf-color-text-strong);
  }
  @media (max-width: 1023px) {
    .bf-topbar__menu {
      display: inline-flex;
    }
  }
  .bf-topbar__title {
    display: flex;
    align-items: center;
    gap: var(--bf-space-2);
    flex: 1 1 auto;
    min-width: 0;
  }
  .bf-topbar__search {
    flex: 0 1 480px;
    min-width: 0;
  }
  .bf-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--bf-space-2);
    flex-shrink: 0;
  }
  @media (max-width: 767px) {
    .bf-topbar__search {
      display: none;
    }
  }
  /* ───────── Main + content card frame ───────── */
  .bf-main {
    display: block;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    background-color: var(--bf-color-canvas-bg);
  }
  .bf-content {
    background-color: var(--bf-color-bg-base);
    margin: var(--bf-space-3);
    border-radius: var(--bf-radius-lg);
    border: 1px solid var(--bf-color-border-base);
    min-height: calc(100% - var(--bf-space-6));
    overflow: hidden;
  }
  .bf-content__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bf-space-4);
    padding: var(--bf-space-5) var(--bf-space-6);
    border-bottom: 1px solid var(--bf-color-border-base);
  }
  .bf-content__title {
    font-size: var(--bf-text-xl);
    font-weight: var(--bf-weight-semibold);
    color: var(--bf-color-text-strong);
    line-height: var(--bf-leading-tight);
    margin: 0;
  }
  .bf-content__subtitle {
    font-size: var(--bf-text-sm);
    color: var(--bf-color-text-muted);
    margin: 0;
  }
  .bf-content__body {
    padding: var(--bf-space-6);
  }
  .bf-content__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--bf-space-2);
    padding: var(--bf-space-4) var(--bf-space-6);
    border-top: 1px solid var(--bf-color-border-base);
    background-color: var(--bf-color-bg-subtle);
  }
  /* ───────── Section nav (tabs-like rail used in settings/workflow screens) ───────── */
  .bf-section-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--bf-space-2);
    background-color: var(--bf-color-bg-base);
    border-right: 1px solid var(--bf-color-border-base);
    min-width: 240px;
  }
  .bf-section-nav__group {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .bf-section-nav__group-title {
    display: flex;
    align-items: center;
    gap: var(--bf-space-1);
    padding: var(--bf-space-2) var(--bf-space-3);
    color: var(--bf-color-text-muted);
    font-size: var(--bf-text-xs);
    font-weight: var(--bf-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--bf-tracking-wide);
  }
  .bf-section-nav__item {
    display: flex;
    align-items: center;
    gap: var(--bf-space-2_5);
    padding: var(--bf-space-2) var(--bf-space-3);
    color: var(--bf-color-text-base);
    font-size: var(--bf-text-sm);
    font-weight: var(--bf-weight-medium);
    border-radius: var(--bf-radius-md);
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
  }
  .bf-section-nav__item:hover {
    background-color: var(--bf-color-surface-hover);
  }
  .bf-section-nav__item--active {
    background-color: var(--bf-color-surface-selected);
    color: var(--bf-color-shell-active-fg);
  }
  .bf-section-nav__item i {
    width: 1em;
    color: var(--bf-color-text-muted);
  }
  .bf-section-nav__item--active i {
    color: inherit;
  }
  /* ───────── Secondary menu (the second left aside, e.g. workflow Modules) ───────── */
  .bf-shell__secondary__nav {
    padding: var(--bf-space-3) var(--bf-space-2);
    display: flex;
    flex-direction: column;
    gap: var(--bf-space-3);
    overflow-y: auto;
    height: 100%;
  }
  .bf-shell__secondary__group {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .bf-shell__secondary__title {
    display: flex;
    align-items: center;
    gap: var(--bf-space-1);
    padding: var(--bf-space-2) var(--bf-space-3);
    color: var(--bf-color-text-muted);
    font-size: var(--bf-text-xs);
    font-weight: var(--bf-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--bf-tracking-wide);
  }
  .bf-shell__secondary__item {
    display: flex;
    align-items: center;
    gap: var(--bf-space-2_5);
    padding: var(--bf-space-2) var(--bf-space-3);
    color: var(--bf-color-text-base);
    font-size: var(--bf-text-sm);
    font-weight: var(--bf-weight-medium);
    border-radius: var(--bf-radius-md);
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
  }
  .bf-shell__secondary__item:hover {
    background-color: var(--bf-color-surface-hover);
  }
  .bf-shell__secondary__item--active {
    background-color: var(--bf-color-surface-selected);
    color: var(--bf-color-shell-active-fg);
  }
  .bf-shell__secondary__item > i:first-child {
    width: 1em;
    color: var(--bf-color-text-muted);
  }
  .bf-shell__secondary__item--active > i:first-child {
    color: inherit;
  }
  /* ───────── Page header strip + tabs (full-bleed against `<main>`) ─────────
   *
   * Standard chrome for `body_layout: "full"` pages. Enforces the
   * shape from `examples/screens/ticket-detail.html` — full-width
   * section with bottom border, icon-tile + title-block + meta on
   * the left, action bar on the right, optional tabs strip below.
   * The right-edge padding (60px) reserves clearance for an
   * optional tools rail; pages without a rail still inherit the
   * spacing for visual consistency.
   *
   * Usage from a page template:
   *
   *   {{ define "page_header_html" }}
   *     <div class="bf-shell__page-header">
   *       <div class="bf-shell__page-header__title-block">
   *         <div class="bf-shell__page-header__icon-tile">
   *           <i class="fa-duotone fa-ticket"></i>
   *         </div>
   *         <div>
   *           <h1 class="bf-shell__page-header__title">…</h1>
   *           <p class="bf-shell__page-header__meta">…</p>
   *         </div>
   *       </div>
   *       <div class="bf-shell__page-header__actions">…buttons…</div>
   *     </div>
   *     <div class="bf-shell__tabs-strip">
   *       <nav class="bf-tabs">…tabs…</nav>
   *     </div>
   *   {{ end }}
   *
   * page_shell wraps the rendered block in a single <section> with
   * `bf-shell__page-header-strip` so the bottom-border spans the
   * viewport even when inner padding clips the rail clearance. */
  .bf-shell__page-header-strip {
    background: var(--bf-color-bg-base);
    border-bottom: 1px solid var(--bf-color-border-base);
  }
  .bf-shell__page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bf-space-4);
    padding: var(--bf-space-4) 60px var(--bf-space-4) var(--bf-space-6);
    background: var(--bf-color-bg-base);
  }
  .bf-shell__page-header__title-block {
    display: flex;
    gap: var(--bf-space-3);
    align-items: flex-start;
    max-width: 56rem;
  }
  .bf-shell__page-header__icon-tile {
    width: 40px;
    height: 40px;
    border-radius: var(--bf-radius-md);
    background: var(--bf-color-success-solid);
    color: white;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: var(--bf-shadow-xs);
  }
  .bf-shell__page-header__title {
    font-size: var(--bf-text-lg);
    font-weight: var(--bf-weight-semibold);
    color: var(--bf-color-text-strong);
    line-height: var(--bf-leading-snug);
    margin: 0 0 var(--bf-space-1);
  }
  .bf-shell__page-header__meta {
    display: flex;
    align-items: center;
    gap: var(--bf-space-1_5);
    font-size: var(--bf-text-xs);
    color: var(--bf-color-text-muted);
    flex-wrap: wrap;
    margin: 0;
  }
  .bf-shell__page-header__meta__author {
    color: var(--bf-color-text-strong);
    font-weight: var(--bf-weight-medium);
  }
  .bf-shell__page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--bf-space-2);
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .bf-shell__page-header__nav-group {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--bf-color-border-base);
    border-radius: var(--bf-radius-md);
    overflow: hidden;
    margin-left: var(--bf-space-1);
  }
  .bf-shell__page-header__nav-group .bf-btn {
    border-radius: 0;
    border: 0;
  }
  .bf-shell__page-header__nav-group .bf-btn:first-child {
    border-right: 1px solid var(--bf-color-border-base);
  }
  .bf-shell__tabs-strip {
    padding: 0 60px 0 var(--bf-space-6);
    border-top: 1px solid var(--bf-color-border-base);
  }
  /* ───────── Tools rail (rightmost icon column, e.g. ticket-detail tools) ───────── */
  .bf-shell__rail__btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--bf-radius-sm);
    color: var(--bf-color-text-muted);
    cursor: pointer;
  }
  .bf-shell__rail__btn:hover {
    background: var(--bf-color-surface-hover);
    color: var(--bf-color-text-strong);
  }
  .bf-shell__rail__btn--active {
    color: var(--bf-color-primary-11);
    background: var(--bf-color-primary-3);
    border: 1px solid var(--bf-color-primary-7);
  }
  .bf-shell__rail__sep {
    width: 24px;
    height: 1px;
    background: var(--bf-color-border-base);
    margin: var(--bf-space-1) 0;
  }
  /* ───────── Page header (in-content, used by ticket / analytics screens) ───────── */
  .bf-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bf-space-4);
    padding: var(--bf-space-4) var(--bf-space-6);
    border-bottom: 1px solid var(--bf-color-border-base);
    background-color: var(--bf-color-bg-base);
  }
  .bf-page-header__title {
    display: flex;
    align-items: center;
    gap: var(--bf-space-3);
  }
  .bf-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--bf-space-2);
    flex-shrink: 0;
  }
} /* end @layer bf-components */
/*# sourceMappingURL=bf.layout.css.map */