.work-directory {
  width: min(100%, 72rem);
  min-height: min(44rem, calc(100dvh - 9rem));
  margin: 0 auto;
}

.shareos-directory {
  width: 100%;
  min-width: 0;
  min-height: min(44rem, calc(100dvh - 9rem));
  display: flex;
  flex-direction: column;
  color: var(--sv-ink);
  font-family: var(--sv-font-sans);
  font-size: var(--sv-text-body);
  line-height: var(--sv-leading-body);
}
.shareos-directory *, .shareos-directory *::before, .shareos-directory *::after { box-sizing: border-box; }
.shareos-directory h1, .shareos-directory h2, .shareos-directory h3, .shareos-directory p { margin: 0; }
.shareos-directory button, .shareos-directory input { font: inherit; }
.shareos-directory button, .shareos-directory a { touch-action: manipulation; }
.shareos-directory a { text-decoration: none; }
.shareos-directory :focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
.directory-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.directory-muted { color: var(--sv-ink-secondary); }

.directory-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sv-space-4);
  padding-bottom: var(--sv-space-5);
}
.directory-heading h1 {
  color: var(--sv-ink);
  font-size: var(--sv-text-h1);
  font-weight: 500;
  line-height: var(--sv-leading-heading);
  letter-spacing: var(--sv-tracking-heading);
}
.directory-heading p { margin-top: var(--sv-space-2); }
.directory-secondary-action, .directory-primary-action {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sv-space-4);
  border-radius: 999px;
  border: 1px solid var(--sv-hairline-strong);
  background: var(--sv-surface);
  color: var(--sv-ink);
  white-space: nowrap;
  cursor: pointer;
}
.directory-primary-action {
  border-color: var(--sv-emphasis-surface);
  background: var(--sv-emphasis-surface);
  color: var(--sv-emphasis-ink);
  font-weight: 500;
}
.directory-secondary-action:hover { background: var(--workspace-hover); }
.directory-primary-action:hover { opacity: .86; }

.directory-toolbar {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto;
  align-items: center;
  gap: var(--sv-space-3);
  padding: var(--sv-space-3);
  border: 1px solid var(--sv-hairline);
  border-bottom: 0;
  border-radius: calc(var(--sv-radius) * 2) calc(var(--sv-radius) * 2) 0 0;
  background: var(--sv-surface-raised);
}
.directory-search { min-width: 0; }
.directory-search input {
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0 var(--sv-space-4);
  border: 1px solid var(--sv-hairline-strong);
  border-radius: 999px;
  background: var(--sv-surface);
  color: var(--sv-ink);
}
.directory-search input::placeholder { color: var(--sv-ink-tertiary); }
.directory-search input::-webkit-search-cancel-button { cursor: pointer; }
.directory-filters {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--sv-surface-sunken);
}
.directory-filter {
  min-height: 2.25rem;
  padding: 0 var(--sv-space-3);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sv-ink-secondary);
  cursor: pointer;
}
.directory-filter:hover { color: var(--sv-ink); }
.directory-filter[aria-pressed="true"] {
  background: var(--sv-surface-raised);
  color: var(--sv-ink);
  box-shadow: inset 0 0 0 1px var(--sv-hairline);
}
.directory-results {
  min-width: 4.5rem;
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-small);
  text-align: right;
  white-space: nowrap;
}

/* The Org chart tab (a host-supplied chart, see mount's orgChart) takes the
   frame's place. Search and the count do not apply to it, but keep their space
   so the tabs never move; the toolbar closes into its own rounded bar. */
.shareos-directory .directory-frame[hidden], .shareos-directory > [hidden] { display: none; }
.shareos-directory :is(.directory-search, .directory-results)[hidden] { display: block; visibility: hidden; }
.shareos-directory.is-chart .directory-toolbar {
  margin-bottom: var(--sv-space-5);
  border-bottom: 1px solid var(--sv-hairline);
  border-radius: calc(var(--sv-radius) * 2);
}
/* the directory already names the page; the chart keeps its summary line */
.shareos-directory > .org > .head > h1 { display: none; }
.directory-filter { white-space: nowrap; }
.directory-frame {
  min-height: 32rem;
  height: min(42rem, calc(100dvh - 13rem));
  display: grid;
  grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--sv-hairline);
  border-radius: 0 0 calc(var(--sv-radius) * 2) calc(var(--sv-radius) * 2);
  background: var(--sv-surface-raised);
}
.directory-roster {
  min-width: 0;
  display: block;
  margin: 0;
  overflow-y: auto;
  border-right: 1px solid var(--sv-hairline);
  background: var(--workspace-sidebar);
  scrollbar-gutter: stable;
}
.directory-group { padding: var(--sv-space-4) var(--sv-space-2) var(--sv-space-2); }
.directory-group + .directory-group { border-top: 1px solid var(--sv-hairline); }
.directory-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-2);
  padding: 0 var(--sv-space-2) var(--sv-space-2);
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-small);
  font-weight: 500;
  letter-spacing: .02em;
}
.directory-list { display: grid; gap: 2px; }
.directory-row {
  width: 100%;
  min-width: 0;
  min-height: 3.75rem;
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  padding: var(--sv-space-2) var(--sv-space-3);
  border: 0;
  border-radius: var(--sv-radius);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.directory-row:hover { background: var(--workspace-hover); }
.directory-row[aria-current="true"] { background: var(--workspace-selected); }
.directory-row-copy { min-width: 0; display: grid; gap: 1px; }
.directory-row-copy strong {
  overflow: hidden;
  color: var(--sv-ink);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.directory-row-meta {
  overflow: hidden;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* profile.yaml's staffing role, secondary to the job title */
.directory-tag {
  display: inline-block;
  margin-left: var(--sv-space-1);
  padding: 0 var(--sv-space-2);
  border: 1px solid var(--sv-hairline);
  border-radius: 999px;
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-small);
  line-height: 1.5;
  vertical-align: baseline;
}
.directory-person-avatar, .directory-agent-avatar {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
}
.directory-person-avatar {
  display: grid;
  place-items: center;
  border: 1px solid var(--sv-hairline);
  border-radius: 50%;
  background: var(--sv-surface-dim);
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  font-weight: 600;
  letter-spacing: .02em;
}
.directory-person-avatar { position: relative; overflow: hidden; }
.directory-person-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.directory-agent-avatar { border-radius: 0; }
.directory-roster-empty, .directory-detail-empty {
  min-height: 15rem;
  display: grid;
  place-items: center;
  padding: var(--sv-space-6);
  color: var(--sv-ink-tertiary);
  text-align: center;
}

.directory-detail {
  min-width: 0;
  overflow-y: auto;
  padding: clamp(var(--sv-space-5), 4vw, var(--sv-space-8));
  background: var(--sv-surface);
  scrollbar-gutter: stable;
}
.directory-back {
  display: none;
  min-height: 2.5rem;
  margin: 0 0 var(--sv-space-4);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sv-ink-secondary);
  cursor: pointer;
}
.directory-back::before { content: "←"; margin-right: var(--sv-space-2); }
.directory-profile-heading {
  display: flex;
  align-items: center;
  gap: var(--sv-space-4);
  padding-bottom: var(--sv-space-5);
  border-bottom: 1px solid var(--sv-hairline);
}
.directory-profile-heading .directory-person-avatar,
.directory-profile-heading .directory-agent-avatar { width: 4rem; height: 4rem; }
.directory-profile-copy { min-width: 0; display: grid; gap: var(--sv-space-1); }
.directory-profile-copy h2 {
  overflow-wrap: anywhere;
  font-size: var(--sv-text-h2);
  font-weight: 500;
  line-height: var(--sv-leading-heading);
  letter-spacing: var(--sv-tracking-heading);
}
.directory-profile-copy h2:focus { outline: none; }
.directory-profile-role { color: var(--sv-ink-secondary); }
.directory-description {
  max-width: 48rem;
  margin-top: var(--sv-space-5) !important;
  font-size: var(--sv-text-h4);
  line-height: 1.55;
}
.directory-facts {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--sv-space-2) var(--sv-space-4);
  margin: var(--sv-space-5) 0 0;
}
.directory-facts dt { color: var(--sv-ink-tertiary); }
.directory-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.directory-detail-section {
  margin-top: var(--sv-space-6);
  padding-top: var(--sv-space-5);
  border-top: 1px solid var(--sv-hairline);
}
.directory-detail-section h3 {
  margin-bottom: var(--sv-space-3);
  font-size: var(--sv-text-h4);
  font-weight: 500;
  letter-spacing: var(--sv-tracking-heading);
}
.directory-tag-list { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); }
.directory-tag {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  padding: 0 var(--sv-space-3);
  border: 1px solid var(--sv-hairline);
  border-radius: 999px;
  background: var(--sv-surface-raised);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
}
.directory-highlights { display: grid; gap: var(--sv-space-2); margin: 0; padding-left: 1.2em; color: var(--sv-ink-secondary); }
.directory-chat-list { display: grid; gap: var(--sv-space-1); margin: 0; padding: 0; list-style: none; }
.directory-chat-list li { display: grid; gap: 2px; padding: var(--sv-space-2) 0; border-bottom: 1px solid var(--sv-hairline); }
.directory-chat-list li:last-child { border-bottom: 0; }
.directory-chat { color: var(--sv-ink); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.directory-chat:hover { text-decoration: underline; }
.directory-skill-list { display: grid; gap: var(--sv-space-2); margin: 0; padding: 0; list-style: none; }
.directory-skill {
  padding: var(--sv-space-3) var(--sv-space-4);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  background: var(--sv-surface-raised);
}
.directory-skill strong { font-weight: 500; overflow-wrap: anywhere; }
.directory-skill p { margin-top: var(--sv-space-1); color: var(--sv-ink-secondary); overflow-wrap: anywhere; }
.directory-actions { margin-top: var(--sv-space-6); }
.directory-actions > p { max-width: 32rem; }

.directory-state {
  min-height: 28rem;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sv-space-3);
  padding: var(--sv-space-8);
  border: 1px solid var(--sv-hairline);
  border-radius: calc(var(--sv-radius) * 2);
  background: var(--sv-surface-raised);
  text-align: center;
}
.directory-state h1 {
  font-size: var(--sv-text-h2);
  font-weight: 500;
  letter-spacing: var(--sv-tracking-heading);
}
.directory-state p { max-width: 30rem; }
.directory-progress {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--sv-hairline-strong);
  border-top-color: var(--sv-ink);
  border-radius: 50%;
  animation: directory-spin var(--workspace-spin) linear infinite;
}
@keyframes directory-spin { to { transform: rotate(1turn); } }

@media (max-width: 700px) {
  .work-directory {
    min-height: calc(100dvh - 7rem);
    margin-inline: calc(var(--sv-gutter, var(--sv-space-4)) * -1);
    width: calc(100% + var(--sv-gutter, var(--sv-space-4)) * 2);
  }
  .shareos-directory { min-height: calc(100dvh - 7rem); }
  .directory-heading { align-items: flex-start; padding: 0 var(--sv-space-3) var(--sv-space-4); }
  .directory-heading h1 { font-size: var(--sv-text-h2); }
  .directory-heading p { display: none; }
  .directory-secondary-action { min-height: 2.75rem; padding-inline: var(--sv-space-3); }
  .directory-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--sv-space-2) var(--sv-space-3) var(--sv-space-3);
    border-inline: 0;
    border-radius: 0;
  }
  .directory-search { grid-column: 1 / -1; }
  .directory-search input { min-height: 2.75rem; font-size: max(1rem, 16px); }
  .directory-filter { min-height: 2.75rem; }
  .directory-frame {
    height: calc(100dvh - 13.5rem);
    min-height: 24rem;
    display: block;
    border-inline: 0;
    border-radius: 0;
  }
  .directory-roster, .directory-detail { width: 100%; height: 100%; border: 0; }
  .directory-detail { display: none; padding: var(--sv-space-4); }
  .shareos-directory.is-detail .directory-heading,
  .shareos-directory.is-detail .directory-toolbar { display: none; }
  .shareos-directory.is-detail .directory-frame { height: calc(100dvh - 7rem); border-top: 0; }
  .shareos-directory.is-detail .directory-roster { display: none; }
  .shareos-directory.is-detail .directory-detail { display: block; }
  .directory-back { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .directory-row { min-height: 4rem; }
  .directory-facts { grid-template-columns: minmax(0, 1fr); gap: var(--sv-space-1); }
  .directory-facts dd + dt { margin-top: var(--sv-space-2); }
  .directory-state { min-height: calc(100dvh - 8rem); border-inline: 0; border-radius: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .directory-row, .directory-filter, .directory-back {
    transition: background-color var(--sv-dur-fast) var(--sv-ease-out), color var(--sv-dur-fast) var(--sv-ease-out);
  }
}
@media (prefers-reduced-motion: reduce) {
  .directory-progress { animation: none; }
}
.directory-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-3); }
.directory-profile-form { display: grid; gap: var(--sv-space-4); max-width: 44rem; }
.directory-profile-form h2 { font-size: var(--sv-text-h2); font-weight: 500; letter-spacing: var(--sv-tracking-heading); }
.directory-profile-form h2:focus { outline: none; }
.directory-field { display: grid; gap: var(--sv-space-2); color: var(--sv-ink-secondary); font-size: var(--sv-text-small); }
.directory-field input, .directory-field textarea {
  width: 100%;
  padding: var(--sv-space-2) var(--sv-space-3);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--workspace-radius-control, 10px);
  background: var(--sv-surface);
  color: var(--sv-ink);
  font: inherit;
  font-size: var(--sv-text-body, 15px);
  resize: vertical;
}
.directory-field input:focus-visible, .directory-field textarea:focus-visible { outline: 2px solid var(--sv-focus, currentColor); outline-offset: 1px; }
.directory-secondary-action.directory-danger-action { color: var(--sv-danger); }
.directory-primary-action.directory-danger-action { background: var(--sv-danger); border-color: var(--sv-danger); color: var(--sv-surface); }
.directory-confirm {
  display: grid;
  gap: var(--sv-space-3);
  max-width: 36rem;
  margin-top: var(--sv-space-6);
  padding: var(--sv-space-4);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--workspace-radius-control, 10px);
}
.directory-confirm .directory-actions { margin-top: 0; }