:root{color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,sans-serif}body{margin:0}.app-shell{display:flex;flex-direction:column;min-height:100vh}.app-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-block-end:1px solid #ddd}.app-title{font-weight:600;text-decoration:none;color:inherit}.app-header-user{display:flex;align-items:center;gap:.75rem}main{padding:1.25rem;flex:1}.auth-page form{display:flex;flex-direction:column;gap:.75rem;max-inline-size:320px}.form-error{color:#b00020}.tree-list{list-style:none;padding:0}.tree-list li{padding:.5rem 0;display:flex;gap:.5rem;align-items:baseline}.tree-role{color:#666;font-size:.85em}.create-tree-form{display:flex;gap:.5rem;align-items:end;margin-block-start:1.5rem}.tree-view-header{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.tree-view-header h1{font-size:1.1rem;font-weight:500;margin:0;font-family:ui-monospace,monospace;color:#666}.view-mode-switcher{display:flex;gap:.25rem}.view-mode-switcher button[aria-pressed=true]{font-weight:700}.placeholder-note{color:#666;font-size:.85em}.language-switcher select{font:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tree-view-body{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-block-start:.75rem}.person-detail-panel{inline-size:280px;flex:none;border:1px solid #ddd;border-radius:8px;padding:1rem}.person-detail-header{display:flex;align-items:center;justify-content:space-between}.person-detail-header h2{font-size:1.1rem;margin:0}.placeholder-badge{display:inline-block;font-size:.75em;color:#7c3aed;border:1px solid #7c3aed;border-radius:4px;padding:.1em .4em}.person-detail-fields{display:grid;grid-template-columns:auto 1fr;gap:.25rem .75rem;margin:.75rem 0}.person-detail-fields dt{color:#666;font-size:.85em}.person-detail-fields dd{margin:0}.person-detail-actions,.person-detail-add-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-block-start:.75rem}.person-edit-form{display:flex;flex-direction:column;gap:.5rem}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:canvas;color:canvastext;border-radius:8px;padding:1.25rem;inline-size:min(360px,90vw);max-block-size:80vh;overflow:auto}.modal-tabs{display:flex;gap:.5rem;margin-block-end:.75rem}.modal-tabs button[aria-selected=true]{font-weight:700}.modal form{display:flex;flex-direction:column;gap:.5rem}.modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-block-start:.5rem}.people-directory-list-column{inline-size:360px;flex:none;display:flex;flex-direction:column;gap:.75rem}.people-directory-list{list-style:none;padding:0;margin:0;max-block-size:400px;overflow:auto;border:1px solid #ddd;border-radius:8px}.people-directory-row{display:flex;align-items:center;gap:.5rem;inline-size:100%;text-align:start;padding:.5rem .75rem;background:none;border:none;border-block-end:1px solid #eee;cursor:pointer}.people-directory-row:last-child{border-block-end:none}.add-person-form{display:flex;flex-direction:column;gap:.5rem;border:1px solid #ddd;border-radius:8px;padding:.75rem}.add-person-form h2{font-size:1rem;margin:0}.connection-picker-row{display:flex;gap:1rem;flex-wrap:wrap;margin-block:1rem}.connection-picker-column{display:flex;flex-direction:column;gap:.5rem;inline-size:260px}.connection-picker-column select{inline-size:100%}.connection-results{list-style:none;padding:0;display:flex;flex-direction:column;gap:.75rem}.connection-result{border:1px solid #ddd;border-radius:8px;padding:.75rem}.connection-result p{margin:0 0 .35rem}.connection-category{color:#666;font-size:.8em;text-transform:uppercase}.connection-breadcrumbs{display:flex;flex-wrap:wrap;gap:.35rem;padding:0;margin:0;list-style:none}.connection-breadcrumbs li:not(:last-child):after{content:"→";margin-inline-start:.35rem;color:#888}.realtime-status{font-size:.8em;color:#888}.realtime-status--connected{color:#0d9488}.realtime-status--reconnecting{color:#b45309}.realtime-status--disconnected,.realtime-status--connecting{color:#888}