.directory-page {
  --directory-ink: var(--foreground, var(--ink));
  --directory-surface: var(--card, var(--surface));
  --directory-panel: var(--panel, var(--surface));
  --directory-border: var(--border, var(--line));
  --directory-control: var(--control, var(--card));
  --directory-control-border: var(--control-border, var(--line));
  --directory-primary: var(--primary, var(--accent));
  --directory-tint: var(--primary-soft, var(--tint));
  --directory-on-primary: var(--on-primary, var(--button-text));
  color:var(--directory-ink); width:100%; min-width:0; margin:0; padding:0;
  font:inherit; font-family:var(--font); line-height:1.5;
}
.directory-page h1 { font-size:var(--page-title, 1.875rem); font-weight:650; letter-spacing:-.035em; line-height:1.25; margin:.25rem 0 .5rem; }
.directory-page h2 { font-size:var(--text-title, 1.0625rem); font-weight:600; letter-spacing:-.02em; margin:1.75rem 0 .75rem; }
.directory-page p { margin: .3rem 0; }
.directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.directory-heading p, .directory-hint, .directory-person p { color:var(--muted); font-size:var(--text-label, .8125rem); }
.directory-heading .directory-eyebrow { color:var(--directory-primary); font-size:var(--text-micro, .75rem); font-weight:650; letter-spacing:.05em; }
.directory-field { display: flex; flex-direction: column; gap: .4rem; font-size: .85rem; font-weight: 600; }
.directory-page input:not([type=checkbox]), .directory-page select { min-height:2.75rem; border:1px solid var(--directory-control-border); border-radius:var(--app-radius-control); background:var(--directory-control); color:var(--directory-ink); padding:.65rem .8rem; font:inherit; width:100%; box-sizing:border-box; }
.directory-page input[type=checkbox] { width:1.2rem; height:1.2rem; accent-color:var(--directory-primary); }
.directory-page input:focus-visible, .directory-page select:focus-visible, .directory-page button:focus-visible, .directory-page summary:focus-visible { outline:3px solid var(--directory-primary); outline-offset:3px; }
.directory-button { border:1px solid var(--directory-control-border); border-radius:var(--app-radius-control); background:var(--directory-control); color:var(--directory-ink); min-height:2.75rem; padding:.625rem 1rem; font:600 var(--text-label, .8125rem)/1.5 var(--font); cursor:pointer; }
.directory-button:hover:not(:disabled) { background:var(--elevated, var(--tint)); border-color:var(--directory-primary); }
.directory-button.primary { background:var(--directory-primary); border-color:var(--directory-primary); color:var(--directory-on-primary); }
.directory-button.primary:hover:not(:disabled) { background:var(--primary-hover, var(--accent)); }
.directory-button:active { transform: scale(.98); }
.directory-button:disabled { opacity: .5; cursor: default; }
.directory-company-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr)); gap:1rem; margin:1.5rem 0; }
.directory-page > .directory-field { max-width:30rem; }
.directory-page > .directory-editor + .directory-button { margin-top:1rem; }
.directory-company-grid button { text-align:left; white-space:pre-line; padding:1.5rem; line-height:2; border:1px solid var(--directory-border); border-radius:var(--app-radius-panel); background:var(--directory-surface); font-size:var(--text-body, .9375rem); }
.directory-company-grid button::first-line { font-size:1.125rem; font-weight:650; }
.directory-section-heading { display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline; justify-content:space-between; }
.directory-employees { display: grid; gap: .75rem; margin-top: 1rem; }
.directory-page .customer-employee { display:block; background:var(--directory-surface); border:1px solid var(--directory-border); border-radius:var(--app-radius-panel); padding:1.25rem; }
.directory-person { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.directory-person > div { flex: 1; min-width: 12rem; overflow-wrap: anywhere; }
.directory-avatar { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; background:var(--directory-tint); color:var(--directory-primary); font-weight:650; }
.directory-status, .directory-role { font-size:var(--text-micro, .75rem); border-radius:2rem; padding:.3rem .7rem; background:var(--directory-panel); }
.directory-status.pending { color:var(--warn, #935400); background:var(--warn-soft, #fff3d6); }
.directory-status.active { color:var(--run, #176a31); background:var(--run-soft, #e9f6ed); }
.directory-status.disabled { color:var(--muted); }
.directory-editor { margin-top:1rem; background:var(--directory-surface); border:1px solid var(--directory-border); border-radius:var(--app-radius-control); padding:.9rem 1rem; }
.directory-editor > summary, .directory-removal > summary { cursor:pointer; min-height:2.75rem; align-content:center; font-weight:600; }
.directory-editor[open] > summary { margin-bottom: 1rem; }
.directory-fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap: 1rem; }
.directory-hint, .directory-notice { font-size: .85rem; padding: .75rem 0; }
.directory-removal { color:var(--destructive, #b42318); margin-top:1rem; font-size:.85rem; }
.directory-removal .directory-button { color:inherit; border-color:var(--destructive-border, currentColor); }
.directory-removal p { padding: .6rem 0; }
.directory-sites { border: 0; padding: 1rem 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.directory-empty { padding:2rem 0; color:var(--muted); }
body[data-tab=management] { background:var(--surface); color:var(--ink); }
body[data-tab=management] #customer-content { max-width: 90rem; padding: 1rem 1rem 7rem; }
@media(max-width: 600px) { .directory-heading { align-items: start; flex-direction: column; } .directory-person > div { min-width: calc(100% - 4rem); } .directory-page .customer-employee { padding: 1rem; } }
@media(prefers-reduced-motion: reduce) { .directory-button:active { transform: none; } }