@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * NAVIGATION BAR
 * Component-owned responsive behavior is driven by the bar's inline size, not
 * the viewport.
 * ======================================== */

  .cinder-navigation-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cinder-space-6);
    inline-size: 100%;
    height: 3.5rem;
    container-type: inline-size;
    container-name: cinder-navigation-bar;
    padding-inline: var(--cinder-space-4);
    background: var(--cinder-surface);
    border-bottom: 1px solid var(--cinder-border-muted);
  }

  /* The portaled mobile-menu scope mirrors the `cinder-navigation-bar` class
     purely as a selector hook for root-scoped consumer overrides (e.g.
     `.cinder-navigation-bar.compact .cinder-navigation-item`) — it must not
     also inherit the root's own box model, or the portal target grows an
     empty second nav bar with its own height, padding, background, and
     border while the mobile menu is open. */
  .cinder-navigation-bar__portal-scope.cinder-navigation-bar {
    /* `display` is driven by an inline style on this element (block while
       the mobile menu is open, contents otherwise) and always wins over
       this class rule, so it is intentionally left untouched here. */
    position: static;
    height: auto;
    padding-inline: 0;
    background: none;
    border-bottom: none;

    /* No `@container cinder-navigation-bar` rule currently reaches a
       descendant of this scope without also requiring `[data-collapsible]`
       on the same named-container element (which this scope never carries),
       so this is inert today — but the mirrored class alone would otherwise
       make a `display: block` portal target (at document.body's width) a
       second, wrongly-sized "cinder-navigation-bar" query container. Turn
       containment off here so a future selector change can't accidentally
       resolve against it. */
    container-type: normal;
    container-name: none;
  }

  .cinder-navigation-bar[data-cinder-placement='bottom'] {
    justify-content: center;
    min-height: 4rem;
    height: auto;
    padding-inline: var(--cinder-space-2);
    border-bottom: none;
    border-top: 1px solid var(--cinder-border-muted);
  }

  /* ----------------------------------------
 * Sections
 * ---------------------------------------- */

  .cinder-navigation-bar__brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-inline-end: var(--cinder-space-2);
    min-height: 2rem;
    padding-block: var(--cinder-space-1-5);
    font-size: var(--cinder-text-lg);
    font-weight: var(--cinder-font-semibold);
  }

  .cinder-navigation-bar__items {
    display: flex;
    align-items: center;
    gap: var(--cinder-space-1);
    flex: 1 1 auto;
    min-width: 0;
  }

  .cinder-navigation-bar__items-owner {
    position: absolute;
    inline-size: 0;
    block-size: 0;
  }

  .cinder-navigation-bar[data-cinder-placement='bottom'] .cinder-navigation-bar__items {
    align-self: stretch;
    justify-content: space-around;
    gap: 0;
    /*
     * CIN-125 pins each tab to the 44px touch-target floor on the inline axis. That
     * floor is not negotiable, so with enough tabs in a narrow bar the children can
     * exceed this container — nine tabs at 375px, say. Without somewhere for that
     * overflow to go, the excess either runs off the page or, more often, is clipped
     * and unreachable, because a bottom bar is normally sticky or fixed inside a host
     * that clips. Scrolling keeps the floor AND keeps every tab reachable.
     *
     * Deliberately no scroll-fade: _scroll-fade.css's third design rule is never to
     * fade a focusable edge, because roving focus scrolls an item to the boundary and
     * a fade would obscure the focused control. Every tab here is focusable.
     */
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    /* Matches data-grid/data-table/table: keeps iOS momentum scrolling on the now
       horizontally scrollable tab row. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    /*
     * Room for the focus ring INSIDE the scroll box. Setting overflow-x forces the
     * block axis to compute as `auto` too — CSS does not allow one axis to scroll
     * while the other stays visible — so this container now clips vertically as well.
     * `.cinder-navigation-item:focus-visible` paints its ring as a box-shadow outside
     * the tab (--cinder-ring-offset + --cinder-ring-width), and the forced-colors
     * fallback reaches further still at outline-offset 3px, so both would be cut off.
     *
     * Pad the block axis by enough to clear the larger of the two, then pull the
     * padding straight back out with a matching negative margin so the bar's own
     * height is unchanged.
     *
     * Derived from the ring recipe itself rather than from a spacing token that merely
     * happened to be big enough: `max()` picks whichever of the two focus treatments
     * reaches further, so retuning `--cinder-ring-offset` or `--cinder-ring-width`
     * keeps this correct, and a change to the spacing scale can no longer silently
     * shrink the clearance below what the ring needs.
     */
    --_cinder-navigation-bar-tab-ring-room: calc(
      var(--cinder-ring-width) + max(var(--cinder-ring-offset), 3px)
    );

    padding-block: var(--_cinder-navigation-bar-tab-ring-room);
    margin-block: calc(-1 * var(--_cinder-navigation-bar-tab-ring-room));
  }

  /* The bar is chrome, not content — a visible scrollbar would sit on top of the tab
     row. Reachability comes from scrolling and from roving focus, not from the bar. */
  .cinder-navigation-bar[data-cinder-placement='bottom']
    .cinder-navigation-bar__items::-webkit-scrollbar {
    display: none;
  }

  .cinder-navigation-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--cinder-space-2);
    flex-shrink: 0;
  }

  /* ----------------------------------------
 * Toggle button — hidden by default; shown on mobile only when
 * the consumer provides a menuToggle snippet (data-collapsible='true').
 * ---------------------------------------- */

  .cinder-navigation-bar__menu-toggle {
    display: none;
  }

  .cinder-navigation-bar[data-cinder-placement='bottom']
    .cinder-navigation-item[data-variant='mobile'] {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--cinder-space-1);
    min-block-size: 4rem;
    /* `flex: 1 1 0` has no floor on the inline axis: the label's
       `overflow: hidden` zeroes its min-content contribution, so with enough
       tabs in a narrow bar the item shrinks well under an accessible tap
       target even though `min-block-size` already keeps the block axis
       generous. Pin the inline axis to the same 44px floor used for the
       drawer handle (drawer.css) and sortable-list drag handle
       (sortable-list.css) so touch-target-min stays the dominant term on
       both axes, not just the one that happened to already clear it. */
    min-inline-size: var(--cinder-touch-target-min);
    padding-block: var(--cinder-space-1);
    padding-inline: var(--cinder-space-2);
    border-bottom: none;
    border-top: 2px solid transparent;
    border-radius: 0;
    text-align: center;
  }

  .cinder-navigation-bar[data-cinder-placement='bottom']
    .cinder-navigation-item[data-variant='mobile'][data-active='true'] {
    border-top-color: var(--cinder-accent-solid);
    background-color: var(--cinder-surface-inset);
  }

  .cinder-navigation-bar[data-cinder-placement='bottom']
    .cinder-navigation-item[data-variant='mobile']
    [data-cinder-navigation-label] {
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cinder-navigation-bar[data-cinder-placement='bottom'][data-cinder-label-visibility='active']
    .cinder-navigation-item[data-variant='mobile']:not([data-active='true'])
    [data-cinder-navigation-label],
  .cinder-navigation-bar[data-cinder-placement='bottom'][data-cinder-label-visibility='never']
    .cinder-navigation-item[data-variant='mobile']
    [data-cinder-navigation-label] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ----------------------------------------
 * Collapsible mobile mode
 * Scoped under [data-collapsible='true'] so non-opted-in bars are
 * completely unaffected at every viewport.
 * ---------------------------------------- */

  @container cinder-navigation-bar (max-width: 47.99rem) {
    .cinder-navigation-bar[data-collapsible='true'] .cinder-navigation-bar__menu-toggle {
      display: inline-flex;
    }

    .cinder-navigation-bar[data-collapsible='true'][data-cinder-menu-toggle-placement='after-brand']
      .cinder-navigation-bar__menu-toggle {
      margin-inline-start: auto;
    }

    .cinder-navigation-bar[data-collapsible='true']
      .cinder-navigation-bar__items:not([data-cinder-mobile-panel]) {
      display: none;
    }
  }

  .cinder-navigation-bar__items[data-cinder-mobile-panel] {
    position: fixed;
    flex-direction: column;
    align-items: stretch;
    padding: var(--cinder-space-2);
    background: var(--cinder-surface);
    border-bottom: 1px solid var(--cinder-border-muted);
    z-index: var(--cinder-z-dropdown);

    /* The shared floating-surface base rule only turns on scrolling for
       role="listbox"/"menu"; this panel is neither, so without this it
       inherits `overflow: visible` and a tall item list simply paints past
       the fixed panel's capped block-size with no way to reach the rest. */
    overflow: auto;

    /* Open → visible, slide in */
    transition:
      transform var(--cinder-duration-normal) ease,
      opacity var(--cinder-duration-normal) ease;
  }

  /* Closed steady-state: instant, no transition to play. */
  .cinder-navigation-bar__items[data-cinder-mobile-panel][data-open='false'] {
    transform: translateY(-0.5rem);
    opacity: 0;
    pointer-events: none;
  }

  .cinder-navigation-bar__items[data-cinder-mobile-panel][data-open='true'] {
    transform: none;
    opacity: 1;
  }

  .cinder-navigation-bar__items[data-cinder-mobile-panel][data-open='true']:not(
      [data-cinder-position-ready]
    ) {
    visibility: hidden;
  }

  /* Removed from focus/AT trees only once the exit transition below has
   genuinely finished (driven by `createAnchoredOverlayExitState` /
   `waitForTransitionCompletion`), not the instant `data-open` flips to
   `false` — see OVERLAY-POLICY.md § "Transition lifecycle". Previously this
   panel used an unconditional `visibility: hidden` on `[data-open='false']`,
   which made the exit transition invisible; CIN-376 fixes that. */
  .cinder-navigation-bar__items[data-cinder-mobile-panel]:not([data-cinder-visible]) {
    visibility: hidden;
  }

  /* Exit transition: mirrors the closed state above so the panel slides/fades
   back out instead of snapping away. */
  .cinder-navigation-bar__items[data-cinder-mobile-panel][data-cinder-closing] {
    transform: translateY(-0.5rem);
    opacity: 0;
    pointer-events: none;
  }

  /* Keyed off `[data-cinder-visible]` (present whenever `exitState.renderPanel`
   is true — both the live-open state AND the retained closing state), not
   `[data-open='true']` — the template emits `data-open='false'` the instant
   close begins, well before the panel is actually removed. Gating this
   mobile item styling on the live `data-open` alone made the items lose
   their mobile treatment and reflow mid-exit, even though the panel itself
   correctly stayed visible via `data-cinder-visible`/`data-cinder-closing`. */
  .cinder-navigation-bar__items[data-cinder-mobile-panel][data-cinder-visible]
    .cinder-navigation-item[data-variant='mobile'] {
    display: flex;
    inline-size: 100%;
    justify-content: flex-start;
    padding-block: var(--cinder-space-3);
    /* Every real touch surface in this panel — the tap target itself, not just
       the visual chrome around it — needs to clear the same 44px floor used
       for the drawer handle (drawer.css) and sortable-list drag handle
       (sortable-list.css). navigation-item.css's base `.cinder-navigation-item`
       rule (outside this file) only sets `min-height: 2rem`, and nothing in
       this rule overrode it, so a row here rendered ~38px tall from padding
       and text alone. Pin it explicitly rather than relying on inheriting a
       floor the shared base rule was never given. */
    min-block-size: var(--cinder-touch-target-min);
    border-bottom: none;
    border-inline-start: 2px solid transparent;
    /* Concentric with this panel, not a smaller step off the radius scale.
       The panel (`.cinder-navigation-bar__items[data-cinder-mobile-panel]`)
       gets `cinder-_floating-surface`'s `border-radius: var(--cinder-radius-md)`
       (_floating-surface.css), but that class's own `padding: var(--cinder-space-1)`
       is overridden by this file's higher-specificity
       `.cinder-navigation-bar__items[data-cinder-mobile-panel] { padding:
       var(--cinder-space-2); }` (line 186 above). So the panel's real inset is
       `--cinder-space-2`, and the row's radius has to be derived from that same
       pair of tokens — the panel's own radius minus its own inset — not an
       unrelated scale step like `--cinder-radius-sm`. (See
       segmented-control.css's `.cinder-segmented-control-option` for the same
       pattern.) `--cinder-radius-md` (0.5rem) minus `--cinder-space-2` (0.5rem)
       resolves to 0 here — the row sits flush against the panel's own inner
       edge, which is the correct concentric result at this particular inset,
       not a bug. */
    border-radius: calc(var(--cinder-radius-md) - var(--cinder-space-2));
  }

  .cinder-navigation-bar__items[data-cinder-mobile-panel][data-cinder-visible]
    .cinder-navigation-item[data-variant='mobile'][data-active='true'] {
    border-inline-start-color: var(--cinder-accent-solid);
    background-color: var(--cinder-surface-inset);
  }

  /* ----------------------------------------
 * Reduced motion — zero out transitions
 * ---------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-navigation-bar__items[data-cinder-mobile-panel] {
      transition: none;
    }
  }

  /* ----------------------------------------
 * Forced colors — keep panel border visible
 * ---------------------------------------- */

  @media (forced-colors: active) {
    .cinder-navigation-bar__items[data-cinder-mobile-panel] {
      border-bottom-color: CanvasText;
    }

    .cinder-navigation-bar[data-cinder-placement='bottom'] {
      border-top-color: CanvasText;
    }
  }
}