/* 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); }
  /* Inset: `.nav__universe` clips its overflow, which cut an outer ring
     off above and below (found 2026-10-23 beside the story). */
  .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)); }
  }

  /* ── THE STORY BESIDE IT, ON A CHAPTER SCREEN (owner, 2026-10-23) ──────
     "story name/story selector dropdown should appear in the navbar next to
     the universe name in the same font at same font size as the universe name
     but 1 weight lower". `[data-nav-story]` is features/nav's slot and
     features/chapter-crumb fills it (that file styles the story itself).

     WHO GIVES WAY. The two names share the room between the wordmark and the
     menu. Above a phone the UNIVERSE gives way first - it shrinks three times
     as fast as the story - and the story is capped so an epic title cannot
     take the bar. On a narrow screen the universe is capped short instead and
     the story takes the rest: on a chapter screen the story is the thing you
     are in and the control you use, and the universe is the way back, which a
     few letters still are. Hiding the universe outright was tried for the old
     trail and cost that one-tap way back (`universe-chrome.spec.js`). */
  .nav__universe:has(> [data-nav-story]:not(:empty)) > .nav__universe-slot { flex: 0 3 auto; }
  .nav__universe > [data-nav-story] { flex: 0 1 auto; }
  /* Held back until chapter-crumb.css has landed (chapter-crumb.js). */
  .nav__universe > [data-nav-story][data-pending] { visibility: hidden; }

  @media (max-width: 34rem) {
    .nav__universe:has(> [data-nav-story]:not(:empty)) > .nav__universe-slot { flex-shrink: 0; }
    .nav__universe:has(> [data-nav-story]:not(:empty)) .universe-crumb__name {
      max-inline-size: calc(7ch + var(--space-2) * 2);
    }
  }

  /* ON A TOUCH PHONE THE TWO NAMES STACK (2026-11-06). The cap above was
     sized on a desktop browser at 390 (a 12px root), where the two names
     nearly fit side by side. A phone's coarse pointer sets a 16px root: there
     the pair needs about 340px and the bar gives them 230, so the cap showed
     "DRAGO..." beside "THE LOST ...". So on a touch phone they take two
     lines, the universe over the story, each with the whole width between
     the wordmark and the menu, each ellipsising only on its own line. Same
     face, same size, the story still one weight lighter (the owner's
     2026-10-23 words); the universe is still the one-tap way back. The block
     padding shrinks to a hairline so both lines sit inside the bar's 53px;
     each keeps a ~24px target (WCAG 2.5.8). Coarse-pointer only, because a
     fine pointer at this width still fits the pair on one line, and
     `chapter-nav.spec.js` holds that arrangement there. */
  @media (max-width: 34rem) and (pointer: coarse) {
    .nav__universe:has(> [data-nav-story]:not(:empty)) {
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 0;
    }
    .nav__universe:has(> [data-nav-story]:not(:empty)) > * {
      flex: 0 0 auto;
      max-inline-size: 100%;
    }
    .nav__universe:has(> [data-nav-story]:not(:empty)) .universe-crumb__name {
      max-inline-size: 100%;
      padding-block: 1px;
      line-height: 1.25;
    }

    /* ALONE, A LONG NAME TAKES TWO LINES (2026-11-06). On the universe page,
       its stories and its members, the name had the bar to itself and still
       lost its last letters: "DRAGON MOUNT..." at 390, "DRAGON MOU..." at 360,
       a 44px chevron and the menu beside it. Two lines of the same face fit
       the bar's 53px, as the stacked pair above does, so the name reads whole;
       only a name too long even for two ends in an ellipsis, on its second. */
    .nav__universe:not(:has(> [data-nav-story]:not(:empty))) .universe-crumb__name {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      white-space: normal;
      overflow-wrap: break-word;
      padding-block: 1px;
      line-height: 1.15;
    }
  }

  /* ── A PHONE'S CHAPTER SCREEN: the story, and under it the chapter ───────
     Owner, 2026-11-08: "for stories, centered in the navbar under the story
     title (universe title hidden, pressing the supernoval logo will take user
     back to the stories univese page) [< prev chapter button][Chapter select
     dropdown][next chapter button >]". features/chapter-screen fills
     `[data-nav-chapter]` below 640px only, so every rule keys on that slot
     being filled: the universe's name steps aside (the logo is the way back,
     features/nav), the story is centred, and the chapter row sits under it.
     The bar grows to hold the two lines - `--nav-height` is raised while the
     slot is filled, so everything that clears the bar (the chapter screen's
     own height, sticky panels, scroll padding) clears the taller one. */
  @media (width < 640px), (orientation: landscape) and (pointer: coarse) and (hover: none) and (height <= 500px), (device-posture: folded), (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2) {
    :root:has(.nav__universe > [data-nav-chapter]:not(:empty)) {
      --nav-height: calc(84px * var(--ui-scale));
    }
    .nav__universe:has(> [data-nav-chapter]:not(:empty)) {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      padding-block: var(--space-1);
    }
    .nav__universe:has(> [data-nav-chapter]:not(:empty)) > .nav__universe-slot { display: none; }
    .nav__universe:has(> [data-nav-chapter]:not(:empty)) > [data-nav-story] {
      flex: 0 0 auto;
      display: flex;
      justify-content: center;
      max-inline-size: 100%;
      text-align: center;
    }
    .nav__universe > [data-nav-chapter] {
      flex: 0 0 auto;
      display: flex;
      justify-content: center;
      max-inline-size: 100%;
      min-inline-size: 0;
    }
  }
  .nav__universe > [data-nav-chapter]:empty { display: none; }

  /* ── 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;
  }

}