/* The universe crumb in the nav bar, and the advanced panel under it.

   DESIGN.md section 5: one shell, and the panel header names the current
   place. The crumb is that naming made permanent - on a universe route the
   bar says which universe you are in without opening the menu. */

@layer components {
  /* ── The crumb ─────────────────────────────────────────────────────────── */

  .universe-crumb {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    /* Takes the room between the wordmark and the hamburger, and gives it
       back rather than pushing the burger off a narrow screen. */
    flex: 1 1 auto;
    min-width: 0;
  }

  /* The wordmark's face, size and tracking, one weight step up from it, in
     white rather than the wordmark's gradient (owner, 2026-09-10). The step
     is relative because the wordmark's weight is the skin's business: Noval
     sets 200, so this is 300; Holo sets 400, so this is 500. `--brand-weight`
     is declared in base.css and overridden by each skin. */
  .universe-crumb__name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: 1.2;
    font-weight: calc(var(--brand-weight) + 100);
    letter-spacing: var(--brand-tracking);
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    /* One line, ellipsised. A universe may be called anything, and the name
       must not be allowed to wrap the bar onto two rows or shove the
       hamburger out of reach. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    transition: color var(--dur-2) var(--ease-out),
                background var(--dur-2) var(--ease-out);
  }

  .universe-crumb__name:hover { background: color-mix(in oklab, var(--text) 8%, transparent); }
  .universe-crumb__name:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

  .universe-crumb__chevron {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    /* 44px on touch per the guidelines; 32 is enough for a pointer and keeps
       the bar from feeling like it has two hamburgers in it. */
    inline-size: calc(32px * var(--ui-scale));
    block-size: calc(32px * var(--ui-scale));
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-2) var(--ease-out),
                background var(--dur-2) var(--ease-out);
  }

  .universe-crumb__chevron svg {
    inline-size: 16px;
    block-size: 16px;
    transition: rotate var(--dur-3) var(--ease-spring);
  }

  .universe-crumb__chevron:hover {
    color: var(--text);
    background: color-mix(in oklab, var(--text) 10%, transparent);
  }
  .universe-crumb__chevron:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

  /* Rotated, not swapped for a second icon: one element that turns reads as
     the same control in two states. */
  .universe-crumb__chevron[aria-expanded='true'] { color: var(--text); }
  .universe-crumb__chevron[aria-expanded='true'] svg { rotate: 180deg; }

  @media (pointer: coarse) {
    .universe-crumb__chevron { inline-size: calc(44px * var(--ui-scale)); block-size: calc(44px * var(--ui-scale)); }
  }

  /* On a narrow CHAPTER route the universe name gets short, not hidden.
     Hiding it did fit everything, and cost the only one-tap way back to the
     universe from a chapter - the hamburger was all that was left - and the
     owner's layout names the universe in this bar. It can be this small
     because the chapter name now has a floor of its own and cannot be
     squeezed out in exchange. */
  @media (max-width: 34rem) {
    .nav__universe:has(.chapter-crumb) .universe-crumb__name {
      max-inline-size: 6ch;
      padding-inline: var(--space-1);
    }
  }

  /* ── The advanced panel ────────────────────────────────────────────────── */

  /* Sticky under the bar, at the bar's own height, so scrolling the page does
     not slide the panel out from under the control that opened it. In flow,
     so opening it pushes the page down instead of covering the era bar. */
  .universe-advanced {
    position: sticky;
    top: calc(var(--nav-height) + env(safe-area-inset-top, 0));
    z-index: calc(var(--z-popover) - 1);
    /* The token, not a mix of it. This panel hangs directly off the nav bar
       and has to look like the same pane of glass; when `--surface-1` was an
       opaque grey this rule hand-rolled its own translucency, and now that
       the token carries it, mixing again only made the panel 6% thinner than
       the bar it is attached to. */
    background: var(--surface-1);
    backdrop-filter: var(--glass-filter-strong);
    border-bottom: 1px solid var(--border);
  }

  .universe-advanced__inner {
    max-width: var(--app-max-width);
    margin-inline: auto;
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: var(--space-4) var(--space-8);
  }

  .universe-advanced__group {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
  }

  /* The three uniform rows (owner, 2026-10-01 section 4) take the whole panel
     width, so the skin control below them is a row of its own rather than a
     column beside them. `__inner` is still the flex row it was; this item
     simply refuses to share a line.

     `features/universe/universe-rows.css` owns everything inside it. */
  .universe-advanced__rows {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* The skin control is a fourth band of the same grid rather than a group
     floating under it: the same hairline the rows draw between themselves,
     and the same block padding, so opening this panel reads as one table of
     settings instead of "three rows, then something else". */
  .universe-advanced__rows + .universe-advanced__group {
    flex: 1 1 100%;
    border-block-start: 1px solid var(--divider);
    padding-block: var(--space-3);
  }

  .universe-advanced__heading {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: var(--text-xs-lh);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .universe-advanced__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  /* Wide enough for the longest skin name plus its price, narrow enough that
     the three groups in the panel still read as three columns. */
  .universe-advanced__skin {
    max-inline-size: 20rem;
    min-inline-size: 0;
  }

  .universe-advanced__note {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--text-sm-lh);
    color: var(--text-muted);
  }

  /* The reveal. Height cannot be transitioned from `hidden` and
     `interpolate-size` is not everywhere yet, so the panel fades and slides
     its contents instead of animating its own box: the page's downward shift
     is instant, which is honest about the layout change and avoids a reflow
     animation on every row below it.

     Driven by `data-state`, set by the component on the frame after it
     unhides the panel - NOT by `@starting-style`. The first version used
     `@starting-style` on this element under a `:not([hidden])` parent and it
     did not fire: the element's own display never changes, its ancestor's
     does, and the before-state was never captured. So the first open of the
     panel was instant and every one after it animated, which is precisely
     the bug the owner reported. The same rAF pattern already works in
     ui/toast. */
  .universe-advanced__inner {
    opacity: 0;
    translate: 0 calc(var(--motion, 1) * -6px);
    transition: opacity var(--dur-3) var(--ease-out),
                translate var(--dur-3) var(--ease-out);
  }

  .universe-advanced[data-state='shown'] .universe-advanced__inner {
    opacity: 1;
    translate: 0 0;
  }

}