/* Storybook presentation only: Patterns/Layout/LNB Stories. Scoped by the decorator wrapper in lnb.stories.tsx, so the shared
   @hm-design/ui LNB Pattern, its tokens and every other Story keep their values.
   - min-width 212px: a floor, not a fixed width. The column follows --hm-lnb-width (240px from 1024px, see below) and may be wider.
   - menu font 14px: --hm-lnb-item-font-size is redefined for this subtree; weight (700) and line height (28px) stay.
   - row height: depth1 48px, depth2 and deeper 42px. Heights come from min-height + vertical padding (not a fixed height), so a
     label that wraps grows the row instead of being clipped. Current and hover only change color/background, not the height. */
.hm-lnb-story {
  display: contents;
  --hm-lnb-item-font-size: 14px;
  /* Existing variable: min-height of every item and group trigger (used by nothing else). */
  --hm-lnb-item-min-height: 48px;
  /* Existing variable: bottom padding of [data-slot="lnb-brand"] (22px by default; top 0 and the 30px sides are unchanged). */
  --hm-lnb-brand-padding-bottom: 8px;
}
.hm-lnb-story [data-slot="lnb"] {
  min-width: 212px;
}
/* PC column width 240px through the existing --hm-lnb-width (the column, the Story grid track and the menu row offset all read it).
   Only from 1024px: the package sets --hm-lnb-width to 0px below that and collapses the column, which must keep working. */
@media (min-width: 1024px) {
  .hm-lnb-story {
    --hm-lnb-width: 240px;
  }
}

/* Profile text (PC column): name (strong) 14px, description (p) 12px with no top margin, both 700. The package's existing 1px text
   stroke on strong/p stays as is; the color and the 1.5 line-height ratio are unchanged (21px + 18px lines in the 48px profile).
   The sizes use the existing profile variables; the container gets the name size. */
.hm-lnb-story {
  --hm-lnb-profile-name-size: 14px;
  --hm-lnb-profile-description-size: 12px;
}
.hm-lnb-story [data-slot="lnb"] [data-slot="lnb-profile-text"] {
  font-size: 14px;
}
.hm-lnb-story [data-slot="lnb"] [data-slot="lnb-profile-text"] :is(strong, p) {
  font-weight: 700;
}
.hm-lnb-story [data-slot="lnb"] [data-slot="lnb-profile-text"] p {
  margin-top: 0;
}
/* Divider lines, same design as the Storybook Manager section divider (manager.css, .sidebar-subheading ::before): a 2px double
   line (black 30% over white 40%) faded at both ends by a mask. Shared by the profile divider and the group divider below. */
.hm-lnb-story [data-slot="lnb"] > [data-slot="lnb-profile"]::before,
.hm-lnb-story .hm-lnb-story-group-divider {
  height: 2px;
  background: linear-gradient(var(--hm-lnb-text-stroke-color) 0 50%, color-mix(in srgb, var(--hm-sem-palette-white) 40%, transparent) 50% 100%);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  pointer-events: none;
}
/* Above the PC profile, 12px above the block. Like the Manager, it starts after the left inset (--hm-lnb-inset-start, 20px: where
   the menu rows start) and stops 20px short of the right edge. The profile button is only as wide as its content, so the line is
   sized from the column width (--hm-lnb-width) and offset back by the button's left margin. It sits in the 22px gap between the
   menu and the profile, never over the avatar or text. The mobile Sheet profile is not under [data-slot="lnb"]. */
.hm-lnb-story [data-slot="lnb"] > [data-slot="lnb-profile"] {
  position: relative;
}
.hm-lnb-story [data-slot="lnb"] > [data-slot="lnb-profile"]::before {
  content: "";
  position: absolute;
  top: -12px;
  left: calc(var(--hm-lnb-inset-start) + 8px - var(--hm-lnb-profile-padding-x));
  width: calc(var(--hm-lnb-width) - var(--hm-lnb-inset-start) - var(--hm-lnb-inset-end));
}
/* Between large menu groups (a role="separator" element, direct child of LNBNav). The package already puts a direct child at the
   menu rows' x start (margin-left), so only the other margins are set: the line ends 20px short of the column's right edge (the
   nav is 1px wider than the column), and 12px + 2px + 10px = 24px in total, the Manager's section gap. */
.hm-lnb-story .hm-lnb-story-group-divider {
  flex: none; /* keep the 2px in a height-limited (scrolling) menu, where an empty item would otherwise shrink to 0 */
  margin-top: 12px;
  margin-right: calc(var(--hm-lnb-inset-end) + 1px);
  margin-bottom: 10px;
}

/* Profile in the mobile Sheet (<=1023px): 14px, 700, no text stroke. The Sheet is portaled to body, outside .hm-lnb-story, so the
   Story marks its LNBProfile with a class instead. The doubled attribute raises specificity above the package's
   [data-slot="lnb-profile"] strong/p rules. Menu links and the mobile header already have no text stroke. */
.hm-lnb-story-mobile-profile[data-slot="lnb-profile"] [data-slot="lnb-profile-text"],
.hm-lnb-story-mobile-profile[data-slot="lnb-profile"] strong {
  font-size: 14px;
}
/* Description: 12px with no top margin, like the PC profile (the line height is unchanged, so the Sheet profile is 4px lower
   without the old 4px margin: 8 + 20 + 20 + 8 = 56px). */
.hm-lnb-story-mobile-profile[data-slot="lnb-profile"] p {
  font-size: 12px;
  margin-top: 0;
}
.hm-lnb-story-mobile-profile[data-slot="lnb-profile"] :is(strong, p) {
  font-weight: 700;
  -webkit-text-stroke: 0;
  paint-order: normal;
}

/* depth1: nav items and top-level group triggers. The package hard-codes 14px vertical padding (28px line + 28px = 56px). */
.hm-lnb-story [data-slot="lnb-item"],
.hm-lnb-story [data-slot="lnb-group-trigger"] {
  padding-top: 10px;
  padding-bottom: 10px;
}
/* depth2: links directly inside a group and nested group triggers (28px line + 14px = 42px). */
.hm-lnb-story [data-slot="lnb-group-content"] > [data-slot="lnb-item"],
.hm-lnb-story [data-slot="lnb-group-content"] [data-slot="lnb-group-trigger"] {
  min-height: 42px;
  padding-top: 7px;
  padding-bottom: 7px;
}
/* depth3: links in a nested group (24px line + 18px = 42px). --hm-lnb-third-min-height is also the Profile's height, so it is
   overridden on the row's link instead of through the variable. */
.hm-lnb-story [data-slot="lnb-group-content"] [data-slot="lnb-third-row"] > [data-slot="lnb-item"] {
  min-height: 42px;
  padding-top: 9px;
  padding-bottom: 9px;
}