/* Optional shared directory presentation for links with a title and metadata.
   Add directory-details alongside directory; routing remains DirectoryCFX's. */
div.directory.directory-details[data-spectrum="menu"] > ul { padding: 8px; }
div.directory.directory-details[data-spectrum="menu"] > ul > li[data-link] {
    padding: 12px 32px 12px 36px;
    margin: 0 0 8px;
    border: 1px solid var(--dialog-border-fade);
    border-radius: 10px;
    min-height: 44px;
    box-sizing: border-box;
    line-height: 1.4;
}
.directory-details .directory-item-title,
.directory-details .directory-item-description,
.directory-details .directory-item-meta { display: block; overflow-wrap: anywhere; }
.directory-details .directory-item-title { font-weight: 700; }
.directory-details .directory-item-description { margin-top: 4px; font-weight: 400; font-size: .9em; }
.directory-details .directory-item-meta { margin-top: 4px; font-weight: 400; font-size: .8em; opacity: .8; }
div.directory.directory-details[data-spectrum="menu"] > ul > li[data-link]:hover,
div.directory.directory-details[data-spectrum="menu"] > ul > li[data-link]:focus-visible {
    background: var(--dialog-background-highlight);
    color: var(--dialog-color-highlight);
}
div.directory.directory-details[data-spectrum="menu"] > ul > li[data-link]:focus-visible {
    outline: 2px solid currentColor; outline-offset: -2px;
}