/* Breadcrumbs (components/breadcrumbs.html), shared by the IPv4 range and IP detail pages.
   Ancestors read "/8", "/16" and slide open to "1.0.0.0/8" on hover. The hovered crumb opens; crumbs to
   its left stay open only if the pointer already opened them on its way right (range-breadcrumbs.ts sets
   [data-open]), so nothing opens behind the cursor and pushes the hovered crumb away; leaving the trail
   closes everything. One line only: when the trail (measured fully expanded) cannot fit, "All IP Ranges"
   and then the ancestors fold into a "···" menu. The current entry truncates with an ellipsis only as a
   last resort. Touch screens never expand; screen readers always get the full network text. */
.range-crumbs { position: relative; min-width: 0; margin-bottom: 10px; }
.range-crumbs [hidden] { display: none !important; }
.range-crumbs > ol { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; white-space: nowrap; color: #757575; font-size: 14px; line-height: 20px; }
.range-crumbs > ol > li { display: flex; align-items: center; flex: none; min-width: 0; }
.range-crumbs > ol > li + li::before { content: ""; flex: none; width: 16px; height: 16px; margin: 0 8px; background: url("/pictures/icons/chevron-right.svg") center / contain no-repeat; }
.range-crumbs a { color: inherit; }
.range-crumbs a:hover, .range-crumbs a:focus-visible { color: #1e283a; text-decoration: underline; }
.range-crumb-home { display: flex; }
.range-crumb-home svg { display: block; }
.range-crumb { display: inline-flex; align-items: baseline; }
.range-crumb-net { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .5s cubic-bezier(.4, 0, .2, 1) .05s, opacity .5s cubic-bezier(.4, 0, .2, 1) .05s; }
@media (hover: hover) and (min-width: 768px) {
  .range-crumbs > ol > li:is(:hover, :focus-within, [data-open]) .range-crumb-net { max-width: calc(var(--chars, 15) * .62em); opacity: 1; }
}
.range-crumbs > ol > li.range-crumb-current { flex: 0 1000 auto; min-width: 4em; color: #424242; }
.range-crumbs > ol > li.range-crumb-current > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* range-breadcrumbs.ts measures the natural width: no shrinking, and ancestors open where hover opens them. */
.range-crumbs.is-measuring > ol > li { flex-shrink: 0; }
.range-crumbs.is-measuring .range-crumb-net { transition: none; }
.range-crumbs.is-measuring-open .range-crumb-net { max-width: none; opacity: 1; }
.range-crumb-more { position: relative; }
.range-crumb-more > button { display: flex; align-items: center; justify-content: center; height: 20px; padding: 0 4px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; letter-spacing: 1px; cursor: pointer; }
.range-crumb-more > button:hover, .range-crumb-more > button:focus-visible, .range-crumb-more > button[aria-expanded="true"] { color: #1e283a; background: #f3f4f6; }
.range-crumb-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 160px; margin: 0; padding: 4px; list-style: none; border: 1px solid #eceef3; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); }
.range-crumb-menu a { display: block; padding: 6px 10px; border-radius: 4px; color: #424242; }
.range-crumb-menu a:hover, .range-crumb-menu a:focus-visible { background: #f3f4f6; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .range-crumb-net { transition: none; } }