/* Breadcrumbs in the logo area */
.logo { display:flex; align-items:center; gap:.25rem; }

.logo__text-prefix { margin:0 .25rem 0 .25rem; white-space:nowrap; opacity:.9; }

/* Make the list a single row, remove numbering */
.logo__path {
  display:flex;
  align-items:center;
  gap:.25rem;
  margin:0;
  padding:0;
  list-style:none;   /* ← no 1., 2., 3. */
  min-width:0;       /* allow shrink */
  overflow:hidden;
}

.logo__sep { opacity:.5; flex:0 0 auto; }

.logo__seg { flex:0 0 auto; }
.logo__seg a,
.logo__seg span{
  display:inline-block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:.05rem .2rem;
  border-radius:.25rem;
}

/* keep first & last fully visible; middle crumbs can shrink with ellipsis */
.logo__seg.first a,
.logo__seg.first span,
.logo__seg.last a,
.logo__seg.last span { max-width:none; }

/* turn OFF per-segment trimming; the JS will insert "…" segments instead */
.logo__seg.mid a,
.logo__seg.mid span{
  max-width:none;          /* was 12ch */
  text-overflow:clip;      /* was ellipsis */
  overflow:visible;        /* allow full width when shown */
}
@media (max-width:980px){ .logo__seg.mid a,.logo__seg.mid span{ max-width:9ch; } }
@media (max-width:720px){ .logo__seg.mid a,.logo__seg.mid span{ max-width:7ch; } }

/* subtle hover to match theme */
.logo__seg a:hover{ background:rgba(255,255,255,.06); text-decoration:none; }


/* make the left side shrinkable */
.header .header__inner{ display:flex; align-items:center; }
.header .logo{ flex:1 1 auto; min-width:0; }
.header .header__right{ flex:0 0 auto; margin-left:auto; }
#pathbar{ flex:1 1 auto; min-width:0; overflow:hidden; }

/* Do NOT ellipsize middle segments in CSS; the JS manages dots */
.logo__seg.mid a,
.logo__seg.mid span{
  max-width:none;
  overflow:visible;
  text-overflow:clip;
}