/* =========================================================
   ALGOLASSI DEVELOPER TOOLS BREADCRUMB
   Separate visual system for Developer Tools breadcrumbs.
   All DevTools icons use the same monochrome brown stroke.
   ========================================================= */

@import url("/assets/css/algolassi-developer-tools-stepper.css?v=20260902-stepper-layout-1");
@import url("/assets/css/algolassi-tutorial-quiz.css?v=20260903-quiz-1");

.algolassi-toolmenu-home,
.algolassi-toolmenu-devtools,
.algolassi-toolmenu-category,
.algolassi-toolmenu-current,
.algolassi-toolmenu-managed {
  --algolassi-devtools-brown: #8b5a2b;
}

/* DevTools breadcrumb labels and arrows */
.algolassi-toolmenu-home > .breadcrumb-trigger,
.algolassi-toolmenu-devtools > .breadcrumb-trigger,
.algolassi-toolmenu-category > .breadcrumb-trigger,
.algolassi-toolmenu-current,
.algolassi-toolmenu-managed .breadcrumb-arrow {
  color: var(--algolassi-devtools-brown) !important;
}

/* Brown monochrome SVG icons — including the Home icon. */
.algolassi-toolmenu-home .algolassi-devtools-brown-icon,
.algolassi-toolmenu-managed .algolassi-devtools-brown-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1em !important;
  height: 1em !important;
  min-width: 1em !important;
  margin-right: .3em !important;
  vertical-align: -.14em !important;
  color: var(--algolassi-devtools-brown) !important;
  flex: 0 0 auto !important;
}

.algolassi-toolmenu-home .algolassi-devtools-brown-icon svg,
.algolassi-toolmenu-managed .algolassi-devtools-brown-icon svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Generic breadcrumb SVGs must not also render inside DevTools.
   DevTools uses the dedicated brown icon system above. */
.algolassi-toolmenu-home .algolassi-icon-inline,
.algolassi-toolmenu-devtools .algolassi-icon-inline,
.algolassi-toolmenu-category .algolassi-icon-inline,
.algolassi-toolmenu-current .algolassi-icon-inline,
.algolassi-toolmenu-managed .algolassi-icon-inline {
  display: none !important;
}

/* Generated DevTools menu text stays brown, including tool entries. */
.algolassi-toolmenu-managed > .algolassi-toolmenu-menu > a,
.algolassi-toolmenu-home > .algolassi-toolmenu-menu > a,
.algolassi-toolmenu-managed > .algolassi-toolmenu-menu > a.breadcrumb-dropdown-current {
  color: #6f4b2a !important;
}

.algolassi-toolmenu-managed > .algolassi-toolmenu-menu > a:hover,
.algolassi-toolmenu-home > .algolassi-toolmenu-menu > a:hover {
  color: var(--algolassi-devtools-brown) !important;
  background: #faf4ee !important;
}

/* DevTools common shell and stepper use the same geometry as breadcrumbs. */
#algolassi-devtools-common-shell,
.algolassi-devtools-stepper {
  width: min(900px, 100%) !important;
  max-width: 900px !important;
  box-sizing: border-box !important;
  margin: 0 auto 24px !important;
}

.algolassi-devtools-stepper {
  padding: 8px 0 !important;
}

/* Never allow the native color emoji presentation to return inside DevTools. */
.algolassi-toolmenu-home,
.algolassi-toolmenu-devtools,
.algolassi-toolmenu-category,
.algolassi-toolmenu-current,
.algolassi-toolmenu-menu {
  font-variant-emoji: text !important;
}

@media (max-width: 700px) {
  .algolassi-toolmenu-home .algolassi-devtools-brown-icon,
  .algolassi-toolmenu-managed .algolassi-devtools-brown-icon {
    width: 1em !important;
    height: 1em !important;
  }

  #algolassi-devtools-common-shell,
  .algolassi-devtools-stepper {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .algolassi-toolmenu-home,
  .algolassi-toolmenu-managed {
    transition: none !important;
  }
}