/* A directory extends the navigation rail without replacing the current workspace. */
:root {
  --directory-width:320px;
  --directory-surface:#faf8f7d9;
  --directory-card:#fffdfab8;
  --directory-line:#dfe1e3;
  --directory-ink:#303c43;
  --directory-muted:#6c7a82;
  --directory-hover:#f0f3f5;
  --directory-selected:linear-gradient(120deg,#f3dce8 0%,#f4eeee 43%,#d6edf6 100%);
  --directory-glow-pink:#f7dbea88;
  --directory-glow-blue:#cceafb99;
  --directory-glow-cream:#fff7e999;
  --directory-shadow:#536d7b18;
  --directory-active-ink:#35434b;
  --directory-ease:cubic-bezier(.22,.68,0,1);
}
html[data-theme="dark"] {
  --directory-surface:#191d20c9;
  --directory-card:#2a2e31b8;
  --directory-line:#ffffff18;
  --directory-ink:#f2f1ef;
  --directory-muted:#b0b7bd;
  --directory-hover:#353a3e;
  --directory-selected:linear-gradient(120deg,#e7d4dd 0%,#e1dfe0 43%,#c9e1ec 100%);
  --directory-glow-pink:#bd94a41c;
  --directory-glow-blue:#86bbd224;
  --directory-glow-cream:#cfc0a515;
  --directory-shadow:#0003;
}
#navigation-directory.navigation-directory {
  position:fixed;inset:10px;margin:0;width:calc(100% - 20px);max-width:none;
  height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);padding:0;
  border:1px solid var(--directory-line);border-radius:24px;
  background:radial-gradient(ellipse at 100% 0,var(--directory-glow-blue),transparent 56%),radial-gradient(ellipse at 0 75%,var(--directory-glow-pink),transparent 58%),radial-gradient(ellipse at 0 0,var(--directory-glow-cream),transparent 50%),var(--directory-surface);
  color:var(--directory-ink);box-shadow:8px 0 35px var(--directory-shadow),inset 0 1px #ffffff18;
  -webkit-backdrop-filter:blur(24px) saturate(1.12);backdrop-filter:blur(24px) saturate(1.12);
  flex-direction:column;overflow:hidden;z-index:20;
}
#navigation-directory.navigation-directory:not([open]),
#navigation-directory.navigation-directory[hidden] {display:none}
#navigation-directory.navigation-directory[open]:not([hidden]) {display:flex}
#navigation-directory::backdrop {background:#10182080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
/* WebKit can leave the page sharp behind a top-layer dialog. Blur the inert
   page surfaces as well, while keeping the modal itself and its text crisp. */
body:has(#navigation-directory:modal)>:is(.shell,.site-header,#navigation) {filter:blur(8px)}
#navigation-directory *,#navigation-directory *::before,#navigation-directory *::after {box-sizing:border-box}
#navigation-directory button,#navigation-directory input {font:inherit}
#navigation-directory button {cursor:pointer}
#navigation-directory button:disabled {cursor:default;opacity:.5}
#navigation-directory button:focus-visible,#navigation-directory input:focus-visible {outline:2px solid #88afc2;outline-offset:3px}
#navigation-directory svg {display:block;width:18px;height:18px;flex:none}
#navigation-directory .directory-scroll {display:flex;flex:1;flex-direction:column;min-height:0;padding:20px 16px 14px;overflow:hidden}
#navigation-directory .directory-metrics {display:grid;flex:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--directory-line)}
#navigation-directory .directory-metrics:empty {display:none}
#navigation-directory .directory-metric {display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-width:0;min-height:100px;margin:0;padding:14px 12px 12px;border:1px solid var(--directory-line);border-radius:24px;background:linear-gradient(145deg,#b0d2e327,transparent 90%),var(--directory-card);color:var(--directory-ink);text-align:left;box-shadow:inset 0 1px #ffffff12;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
#navigation-directory .directory-metric[data-tone="pink"] {background:linear-gradient(145deg,#dfb7c52c,transparent 90%),var(--directory-card)}
#navigation-directory .directory-metric[data-tone="cream"] {background:linear-gradient(145deg,#e3d5b52c,transparent 90%),var(--directory-card)}
#navigation-directory .directory-metric[data-tone="muted"] {background:linear-gradient(145deg,#bcc5c71f,transparent 90%),var(--directory-card)}
#navigation-directory .directory-metric>span {display:flex;align-items:flex-start;gap:6px;font-size:11px;line-height:1.35;color:var(--directory-muted)}
#navigation-directory .directory-metric>span::before {content:"";flex:none;width:9px;height:9px;margin-top:2px;border:1px solid #8cafc0;border-radius:3px}
#navigation-directory .directory-metric[data-tone="pink"]>span::before {border-color:#c19bac}
#navigation-directory .directory-metric[data-tone="cream"]>span::before {border-color:#bcab89}
#navigation-directory .directory-metric[data-tone="muted"]>span::before {border-color:#93a09f}
#navigation-directory .directory-metric>strong {align-self:flex-end;max-width:100%;font-size:31px;font-weight:500;line-height:1.1;letter-spacing:-1px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#navigation-directory .directory-metric[data-value-size="compact"]>strong {font-size:22px;letter-spacing:-.8px}
#navigation-directory .directory-metric[data-value-size="small"]>strong {font-size:18px;letter-spacing:-.65px}
#navigation-directory .directory-metric[data-value-size="smallest"]>strong {font-size:14px;letter-spacing:-.4px}
#navigation-directory .directory-metric:hover:not(:disabled) {border-color:#9bb6c3;box-shadow:inset 0 1px #ffffff35,0 5px 14px var(--directory-shadow);transform:translateY(-1px)}
#navigation-directory .directory-metric[aria-pressed="true"] {border-color:#afbec7;background:var(--directory-selected);color:var(--directory-active-ink);box-shadow:inset 0 1px #ffffff75,0 5px 15px var(--directory-shadow)}
#navigation-directory .directory-metric[aria-pressed="true"]>span {color:#53656f}
#navigation-directory .directory-heading {display:flex;flex:none;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
#navigation-directory .directory-heading>div {min-width:0}
#navigation-directory .directory-heading h2 {margin:0;font-size:21px;font-weight:600;line-height:1.25;letter-spacing:-.6px;overflow-wrap:anywhere}
#navigation-directory .directory-heading p {margin:5px 0 0;color:var(--directory-muted);font-size:11px;line-height:1.4;overflow-wrap:anywhere}
#navigation-directory .directory-round {display:grid;place-items:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid var(--directory-line);border-radius:50%;background:var(--directory-card);color:var(--directory-muted);box-shadow:none}
#navigation-directory .directory-round:hover {background:var(--directory-hover);color:var(--directory-ink)}
#navigation-directory .directory-round svg {width:15px;height:15px}
#navigation-directory .directory-search {display:flex;flex:none;align-items:center;gap:9px;width:100%;min-height:46px;margin:0 0 12px;padding:0 13px;border:1px solid var(--directory-line);border-radius:999px;background:var(--directory-card);color:var(--directory-muted)}
#navigation-directory .directory-search:focus-within {border-color:#88afc2;box-shadow:0 0 0 3px #88afc217}
#navigation-directory .directory-search svg {width:15px;height:15px}
#navigation-directory .directory-search input {display:block;width:100%;min-width:0;min-height:44px;margin:0;padding:8px 0;border:0;border-radius:0;background:transparent;color:var(--directory-ink);font-size:16px;box-shadow:none;outline:none}
#navigation-directory .directory-search input::placeholder {color:var(--directory-muted)}
#navigation-directory .directory-search input:focus-visible {outline:none}
#navigation-directory [data-directory-filter-label] {flex:none}
#navigation-directory [data-directory-filter-label]:empty {display:none}
#navigation-directory .directory-active-filter {display:flex;align-items:center;gap:8px;width:fit-content;max-width:100%;margin:0 0 14px;padding:4px 5px 4px 12px;border:1px solid #a4bac454;border-radius:999px;background:var(--directory-selected);color:var(--directory-active-ink);font-size:11px;line-height:1.3}
#navigation-directory .directory-active-filter>span {min-width:0;overflow-wrap:anywhere}
#navigation-directory .directory-active-filter button {display:grid;place-items:center;flex:none;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:50%;background:#ffffff60;color:inherit;box-shadow:none}
#navigation-directory .directory-active-filter svg {width:13px;height:13px}
#navigation-directory .directory-items {display:grid;flex:1;grid-auto-rows:max-content;align-content:start;gap:9px;min-width:0;min-height:0;padding:3px 4px 4px;margin:-3px -4px -4px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--directory-line) transparent}
#navigation-directory .directory-card {display:flex;flex-direction:column;gap:12px;width:100%;min-width:0;min-height:110px;margin:0;padding:14px;border:1px solid var(--directory-line);border-radius:25px;background:var(--directory-card);color:var(--directory-ink);text-align:left;box-shadow:inset 0 1px #ffffff09;transition:background .18s,border-color .18s,box-shadow .18s}
#navigation-directory .directory-card:hover {background:var(--directory-hover);border-color:#879daa}
#navigation-directory .directory-card.is-selected {background:var(--directory-selected);border-color:#b1c3cc;color:var(--directory-active-ink);box-shadow:inset 0 1px #ffffff60,0 5px 18px var(--directory-shadow)}
#navigation-directory .directory-card.is-selected small,#navigation-directory .directory-card.is-selected .directory-card-detail,#navigation-directory .directory-card.is-selected .directory-card-arrow {color:#53656f}
#navigation-directory .directory-card.is-selected .directory-card-detail {border-color:#798f9b38}
#navigation-directory .directory-card.is-selected .directory-badge {color:#35434b;background:#9bb5c22c}
#navigation-directory .directory-card-heading {display:flex;align-items:center;gap:9px;min-width:0;width:100%}
#navigation-directory .directory-avatar {display:grid;place-items:center;flex:none;width:38px;height:38px;overflow:hidden;border:1px solid #ffffff45;border-radius:50%;background:linear-gradient(135deg,#eadce4,#c4deea);color:#455d6a}
#navigation-directory .directory-avatar img {display:block;width:100%;height:100%;object-fit:cover}
#navigation-directory .directory-avatar svg {width:21px;height:21px}
#navigation-directory .directory-avatar[data-kind="supplier"] {background:linear-gradient(135deg,#efe5d5,#e8d8e1);color:#79616c}
#navigation-directory .directory-card-copy {display:grid;gap:4px;min-width:0;flex:1}
#navigation-directory .directory-card strong {display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;line-height:1.25}
#navigation-directory .directory-card small {display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:400;line-height:1.4;color:var(--directory-muted)}
#navigation-directory .directory-card-arrow {align-self:flex-start;flex:none;color:var(--directory-muted)}
#navigation-directory .directory-card-arrow svg {width:15px;height:15px}
#navigation-directory .directory-card-detail {display:flex;align-items:center;justify-content:space-between;gap:7px;min-width:0;min-height:29px;width:100%;padding:6px 8px;border:1px solid var(--directory-line);border-radius:999px;color:var(--directory-muted);font-size:9px;line-height:1.2}
#navigation-directory .directory-card-detail>span:first-child {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#navigation-directory .directory-badge {flex:none;max-width:48%;padding:4px 6px;border-radius:999px;background:#96bec526;color:var(--directory-ink);font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#navigation-directory .directory-badge[data-tone="warning"] {background:#dcc5a52c}
#navigation-directory .directory-badge[data-tone="muted"] {background:#b4beb820;color:var(--directory-muted)}
#navigation-directory .directory-supplier .directory-card-copy>strong {font-size:15px;white-space:normal;overflow-wrap:anywhere}
#navigation-directory .directory-supplier .directory-card-copy>small {font-size:12px}
#navigation-directory .directory-supplier-purchases {display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:16px;width:100%;padding-top:12px;border-top:1px solid var(--directory-line)}
#navigation-directory .directory-supplier-purchases>span {display:flex;flex-direction:column;gap:5px;min-width:0}
#navigation-directory .directory-supplier-purchases small {font-size:13px;line-height:1.35;white-space:normal;overflow:visible}
#navigation-directory .directory-supplier-purchases strong {font-size:20px;line-height:1.25;font-weight:650;font-variant-numeric:tabular-nums;white-space:normal;overflow:visible;overflow-wrap:anywhere}
#navigation-directory .directory-supplier-meta {display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
#navigation-directory .directory-supplier .directory-badge {max-width:100%;padding:4px 8px;font-size:11px;line-height:1.3}
#navigation-directory .directory-supplier-note {flex:1;min-width:120px;color:var(--directory-ink);font-size:13px;line-height:1.4}
#navigation-directory .directory-supplier .directory-card-detail {padding:9px;border-radius:14px;font-size:13px;line-height:1.4}
#navigation-directory .directory-person {display:grid;grid-template-columns:42px minmax(0,1fr) 34px;grid-template-rows:1fr;align-items:center;column-gap:10px;row-gap:0;height:82px;min-height:82px;padding:10px 12px;border-radius:25px;position:relative}
#navigation-directory .directory-person .directory-avatar {width:42px;height:42px}
#navigation-directory .directory-person-copy {display:flex;flex-direction:column;gap:3px;min-width:0}
#navigation-directory .directory-person-copy>strong {font-size:14px;font-weight:500;line-height:1.25}
#navigation-directory .directory-person-copy>small {font-size:12px;line-height:1.35}
#navigation-directory .directory-person-copy>.directory-person-activity {font-size:12px;font-variant-numeric:tabular-nums}
#navigation-directory .directory-person-counters {position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#navigation-directory .directory-person-ring {display:grid;place-items:center;width:34px;height:34px;border:3px solid #9ec8d6;border-right-color:#d7b7c8;border-radius:50%;color:var(--directory-ink);box-shadow:inset 0 0 0 3px var(--directory-card)}
#navigation-directory .directory-person-ring[data-tone="muted"] {border-color:#7b8b90;border-right-color:#aeb2a8;color:var(--directory-muted)}
#navigation-directory .directory-person-ring[data-tone="warning"] {border-right-color:#c6a777}
#navigation-directory .directory-person-ring svg {width:17px;height:17px}
#navigation-directory .directory-person.is-selected .directory-person-ring {background:#edf4f4;color:#405761;border-color:#edf4f4;box-shadow:none}
#navigation-directory .directory-person-detail {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#navigation-directory .directory-empty,#navigation-directory .directory-state {margin:0;padding:24px 12px;color:var(--directory-muted);font-size:12px;line-height:1.5;text-align:center}
#navigation-directory .directory-state p {margin:0 0 12px}
#navigation-directory .directory-state button {min-height:44px;padding:8px 14px;border:1px solid var(--directory-line);border-radius:999px;background:var(--directory-card);color:var(--directory-ink);font-size:12px}
#navigation-directory .directory-footer {display:flex;align-items:center;gap:10px;flex:none;padding:13px 16px max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--directory-line);background:linear-gradient(115deg,var(--directory-glow-pink),var(--directory-glow-blue)),var(--directory-surface)}
#navigation-directory .directory-open-page {display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1;min-width:0;min-height:44px;padding:9px 13px;border:1px solid var(--directory-line);border-radius:999px;background:var(--directory-card);color:var(--directory-ink);font-size:12px}
#navigation-directory .directory-open-page:is(:hover,:focus-visible,:active) {background:var(--directory-selected);color:var(--directory-active-ink);border-color:#afbec7}
#navigation-directory .directory-open-page svg {width:15px;height:15px}
#navigation .desktop-nav-link[aria-expanded="true"] {background:var(--desktop-rail-accent);color:#354752;border-color:#91b3c1;box-shadow:0 0 0 3px #98bdcf1a}
@media screen and (min-width:1180px) {
  #navigation-directory.navigation-directory {inset:0 auto 0 var(--desktop-rail-width,74px);width:var(--directory-width);height:100dvh;max-height:100dvh;border:1px solid var(--directory-line);border-left:0;border-radius:0 30px 30px 0}
  body:not(.camera-mode)>.shell,body:not(.camera-mode)>.site-header {transition:margin-left .24s var(--directory-ease),margin-right .24s var(--directory-ease)}
  body.directory-open:not(.camera-mode):has(#navigation:not([hidden]))>.shell {width:auto;margin-left:calc(var(--desktop-rail-width,74px) + var(--directory-width));padding-inline:var(--desktop-page-gutter,24px)}
  body.directory-open:not(.camera-mode):has(#navigation:not([hidden]))>.site-header {margin-left:calc(var(--desktop-rail-width,74px) + var(--directory-width) + var(--desktop-page-gutter,24px));margin-right:var(--desktop-page-gutter,24px)}
  body.directory-open:not(.camera-mode):has(#navigation:not([hidden])):has(.doctor-profile-reference)>.shell {margin-left:calc(var(--desktop-rail-width,74px) + var(--directory-width));padding:0}
}
@media screen and (min-width:1440px) {
  :root {--directory-width:360px}
  #navigation-directory .directory-scroll {padding-inline:18px}
  #navigation-directory .directory-footer {padding-inline:18px}
  #navigation-directory .directory-person {grid-template-columns:44px minmax(0,1fr) 36px;padding-inline:12px}
  #navigation-directory .directory-person .directory-avatar {width:44px;height:44px}
  #navigation-directory .directory-person-ring {width:36px;height:36px}
}
@media screen and (max-width:359px) {
  #navigation-directory .directory-scroll {padding:16px 14px 12px}
  #navigation-directory .directory-footer {padding-inline:14px}
}
@media screen and (max-height:540px) {
  #navigation-directory .directory-scroll {padding-top:12px;padding-bottom:10px}
  #navigation-directory .directory-heading {margin-bottom:8px}
  #navigation-directory .directory-heading p {margin-top:3px}
  #navigation-directory .directory-search {margin-bottom:8px}
  #navigation-directory .directory-active-filter {margin-bottom:8px;padding-block:0}
  #navigation-directory .directory-metrics {gap:6px;margin-top:8px;padding-top:8px}
  #navigation-directory .directory-metric {flex-direction:row;align-items:center;gap:6px;min-height:44px;padding:7px 9px;border-radius:14px}
  #navigation-directory .directory-metric>span {min-width:0;font-size:10px}
  #navigation-directory .directory-metric>span::before {display:none}
  #navigation-directory .directory-metric>strong {align-self:auto;flex:none;max-width:70%;font-size:19px;letter-spacing:-.4px}
  #navigation-directory .directory-metric[data-value-size="compact"]>strong {font-size:16px}
  #navigation-directory .directory-metric[data-value-size="small"]>strong {font-size:14px}
  #navigation-directory .directory-metric[data-value-size="smallest"]>strong {font-size:12px}
  #navigation-directory .directory-footer {padding-top:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce) {
  #navigation-directory *,body:not(.camera-mode)>.shell,body:not(.camera-mode)>.site-header {transition:none!important;animation:none!important}
}
