.dir-logo{object-fit:contain}
.dir-nav{display:flex;gap:1.5rem;align-items:center;padding:.8rem 1.5rem;border-bottom:1px solid var(--line)}
.dir-nav nav{display:flex;gap:1rem}.dir-nav nav a[aria-current]{color:var(--accent);font-weight:600}
.dir-shell{display:grid;grid-template-columns:220px 1fr;gap:1.5rem;max-width:1280px;margin:0 auto;padding:1.5rem}
.dir-side{position:sticky;top:1rem;align-self:start}.dir-side ul{list-style:none;padding:0;margin:0}
.dir-side li button{width:100%;display:flex;justify-content:space-between;padding:.45rem .7rem;border:0;background:none;color:var(--fg);border-radius:8px;cursor:pointer;font:inherit}
.dir-side li button:hover{background:var(--surface-active)}.dir-side li button.on{background:var(--accent-glow);color:var(--accent);font-weight:600}
.dir-side small{color:var(--muted)}.dir-side-title{color:var(--muted);font-size:.85rem;margin:.2rem .7rem}
.dir-sub,.dir-hint{color:var(--muted)}
.dir-search{display:flex;gap:.5rem;margin:1rem 0}.dir-search input{flex:1;padding:.7rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);font:inherit}
.dir-search button,.dir-more,.dir-close,.dir-copy{padding:.6rem 1.1rem;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface-elevated);color:var(--fg);cursor:pointer;font:inherit}
.dir-search button{background:var(--accent);color:#fff;border-color:transparent}
.dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.dir-card{border:1px solid var(--line);border-radius:12px;padding:1rem;background:var(--surface-elevated);cursor:pointer;display:flex;flex-direction:column;gap:.4rem}
.dir-card:hover{border-color:var(--line-glow)}.dir-card h3{margin:0;font-size:1rem}.dir-card p{margin:0;color:var(--muted);font-size:.9rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.dir-tags{display:flex;flex-wrap:wrap;gap:.3rem}.dir-tag{font-size:.75rem;padding:.1rem .5rem;border-radius:99px;background:var(--surface-active);color:var(--muted)}
.dir-sim{font-size:.75rem;color:var(--accent);font-weight:600}
.dir-dlg{max-width:760px;width:92vw;border:1px solid var(--line);border-radius:14px;background:var(--surface-elevated);color:var(--fg)}
.dir-dlg pre{white-space:pre-wrap;background:var(--bg-subtle);padding:.8rem;border-radius:8px;max-height:320px;overflow:auto;font-size:.85rem}
.dir-dlg dl{display:grid;grid-template-columns:7rem 1fr;gap:.3rem .8rem}.dir-dlg dt{color:var(--muted)}
.dir-more{display:block;margin:1.5rem auto}.dir-foot{text-align:center;color:var(--muted);font-size:.85rem;padding:2rem 1rem}
@media (max-width:760px){.dir-shell{grid-template-columns:1fr}.dir-side{position:static}}
/* phones: the four header links get their own row instead of breaking mid-label */
@media (max-width:560px){.dir-nav{flex-wrap:wrap;row-gap:.25rem;padding:.6rem 1rem}.dir-nav nav{flex:1 1 100%;min-width:0;margin-left:-12px;gap:.25rem;overflow-x:auto;scrollbar-width:none}}