.directory-dialog { width:calc(100vw - 48px); max-width:1560px; height:calc(100dvh - 64px); max-height:1000px; margin:auto; padding:0; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--card); overflow:hidden; }
.directory-dialog::backdrop { background:rgb(10 27 38 / 38%); }
.directory-dialog[open] { display:flex; flex-direction:column; }
.directory-dialog * { box-sizing:border-box; }
.directory-header { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; border-bottom:1px solid var(--line); }
.directory-header h2 { margin:0; font-size:22px; }
.directory-dialog button { font:inherit; cursor:pointer; color:var(--ink); }
.directory-close { display:grid; place-items:center; width:36px; height:36px; padding:7px; border:0; border-radius:4px; background:transparent; }
.directory-close:hover { background:var(--bg); }
.directory-close svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; }
.directory-toolbar { display:flex; flex:0 0 auto; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 24px; border-bottom:1px solid var(--line); font-size:13px; }
.directory-toolbar label { color:var(--ink-soft); font-weight:600; }
.directory-toolbar input { flex:1; max-width:360px; min-width:180px; padding:9px 12px; border:1px solid var(--line-strong); border-radius:4px; background:var(--card); color:var(--ink); font:inherit; }
.directory-unassigned { margin-left:auto; padding:8px 12px; border:1px solid var(--line); border-radius:4px; background:var(--card); font-size:13px!important; }
.directory-unassigned[aria-pressed="true"] { color:var(--brand-link); background:var(--brand-pale); }
.directory-layout { display:grid; flex:1; grid-template-columns:minmax(0,1fr) 320px; min-height:0; }
.directory-chart-panel { display:flex; flex-direction:column; min-width:0; min-height:0; }
.directory-chart-scroll { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--line-strong) var(--bg); }
.directory-chart { display:flex; justify-content:center; align-items:flex-start; gap:16px; width:max-content; min-width:100%; padding:28px 16px 40px; }
.directory-chart ul { list-style:none; padding:0; margin:0; }
.directory-roots { display:contents; }
.directory-branch { position:relative; text-align:center; flex:0 0 auto; }
.directory-node { display:inline-flex; align-items:center; justify-content:center; min-height:42px; width:120px; padding:9px 10px; border:1px solid #88b8d9; border-radius:4px; background:var(--card); color:var(--ink)!important; font-size:14px!important; font-weight:600!important; line-height:1.5; overflow-wrap:anywhere; }
.directory-roots > .directory-branch > .directory-node, .directory-hq > .directory-node { color:var(--brand-link)!important; background:var(--brand-pale); }
.directory-node:hover, .directory-node.is-selected { border-color:var(--brand-link); color:var(--brand-link)!important; }
.directory-node.is-selected { background:#d8eeff; }
.directory-node.is-muted { opacity:.45; }
.directory-children { position:relative; display:flex; justify-content:center; align-items:flex-start; gap:18px; padding-top:26px!important; }
.directory-children::before { content:""; position:absolute; top:0; left:50%; height:13px; border-left:1px solid #88b8d9; }
.directory-children > .directory-branch::before { content:""; position:absolute; top:-13px; left:50%; height:13px; border-left:1px solid #88b8d9; }
.directory-children > .directory-branch::after { content:""; position:absolute; top:-13px; left:-9px; right:-9px; border-top:1px solid #88b8d9; }
.directory-children > .directory-branch:first-child::after { left:50%; }
.directory-children > .directory-branch:last-child::after { right:50%; }
.directory-headquarters { margin-top:15px!important; }
.directory-hq > .directory-offices { flex-direction:column; align-items:center; gap:9px; }
.directory-hq > .directory-offices > .directory-branch::after { display:none; }
.directory-hq > .directory-offices > .directory-branch::before { top:-9px; height:9px; }
.directory-hq > .directory-offices > .directory-branch:first-child::before { top:-13px; height:13px; }
.directory-details { min-width:0; overflow:auto; padding:24px; border-left:1px solid var(--line); scrollbar-width:thin; scrollbar-color:var(--line-strong) var(--bg); }
.directory-details h3 { margin:0 0 12px; font-size:20px; line-height:1.5; }
.directory-details p { margin:6px 0; font-size:13px; line-height:1.75; overflow-wrap:anywhere; white-space:pre-line; }
.directory-members-title { margin:24px 0 8px; font-size:14px; }
.directory-person { padding:14px 0; border-top:1px solid var(--line); }
.directory-person-head { display:flex; align-items:center; gap:12px; min-width:0; margin-bottom:8px; text-align:left; }
.directory-person-avatar { position:relative; display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; overflow:hidden; border-radius:50%; background:var(--brand-pale); color:var(--brand-link); font-size:18px; font-weight:600; }
.directory-person-avatar img { position:absolute; inset:0; width:48px; height:48px; object-fit:cover; }
.directory-person-avatar img[hidden] { display:none; }
.directory-person h4 { min-width:0; margin:0; font-size:15px; overflow-wrap:anywhere; }
.directory-person h4 span { display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:400; }
.directory-note { color:var(--muted); }
.directory-empty { margin:12px 0!important; padding:20px 0; color:var(--muted); font-size:14px; line-height:1.7; text-align:center; }
.directory-results { display:flex; flex-wrap:wrap; gap:6px; padding:12px 18px; border-bottom:1px solid var(--line); max-height:150px; overflow:auto; }
.directory-results button { padding:6px 10px; background:var(--brand-pale); border:1px solid var(--line); border-radius:4px; font-size:12px; }
.directory-results p { margin:0; font-size:13px; color:var(--muted); }
.directory-dialog :focus-visible { outline:2px solid var(--brand-blue); outline-offset:2px; }
@media(max-width:760px) {
  .directory-dialog { width:calc(100vw - 20px); height:calc(100dvh - 24px); }
  .directory-header { padding:12px 16px; }
  .directory-toolbar { padding:12px 16px; gap:8px; }
  .directory-toolbar input { max-width:none; min-width:120px; }
  .directory-unassigned { margin-left:0; }
  .directory-layout { display:flex; flex-direction:column; overflow:auto; }
  .directory-chart-panel { flex:0 0 330px; }
  .directory-details { flex:1 0 auto; overflow:visible; border-left:0; border-top:1px solid var(--line); padding:20px 16px; }
}