/* Match the expanded directory to the login hero and the selected portal palette. */
.public-directory-body {
  min-height: 100vh;
  color: #f4f8ff;
  background:
    radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--login-glow) 65%, transparent), transparent 44%),
    linear-gradient(145deg, var(--login-deep), var(--login-mid));
}

.public-directory-ai-background {
  background-image:
    linear-gradient(105deg,
      color-mix(in srgb, var(--login-deep) 82%, transparent) 0%,
      color-mix(in srgb, var(--login-deep) 56%, transparent) 48%,
      color-mix(in srgb, var(--login-mid) 18%, transparent) 100%),
    url("images/login-hero.png");
  background-size: cover;
  background-position: center 54%;
  filter: var(--login-art-filter, none);
  opacity: .88;
}

.public-directory-ai-background svg { opacity: .24; }
.public-directory-header .showcase-brand,
.public-directory-header .showcase-brand small { color: #fff; }
.public-directory-header .showcase-brand b { color: var(--login-highlight); }
.public-directory-intro h1,
.public-directory-card h2,
.public-directory-name { color: #f5f8ff; }
.public-directory-intro p,
.public-directory-kind,
.public-directory-card-label,
.public-directory-footer { color: #c4d5e9; }
.public-directory-eyebrow,
.public-directory-footer a { color: var(--login-highlight); }
.public-directory-eyebrow i {
  background: var(--login-highlight);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--login-highlight) 18%, transparent);
}
.public-directory-login,
.language-toggle {
  color: #f5f8ff;
  border-color: color-mix(in srgb, var(--login-highlight) 40%, #ffffff);
  background: color-mix(in srgb, var(--login-deep) 56%, transparent);
}
.public-directory-login:hover,
.language-toggle:hover {
  color: #fff;
  border-color: var(--login-highlight);
  background: color-mix(in srgb, var(--login-deep) 74%, transparent);
}
.public-directory-card {
  border-color: color-mix(in srgb, var(--login-highlight) 32%, #ffffff);
  background: linear-gradient(145deg, color-mix(in srgb, var(--login-deep) 72%, transparent), color-mix(in srgb, var(--login-mid) 60%, transparent));
  box-shadow: 0 24px 68px #03132670, inset 0 1px 0 #ffffff25;
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
.public-directory-card > header,
.public-directory-card > footer { border-color: #ffffff2b; }
.public-directory-count {
  color: #fff;
  border-color: color-mix(in srgb, var(--login-highlight) 38%, transparent);
  background: color-mix(in srgb, var(--login-highlight) 18%, transparent);
}
.public-directory-tree ul { border-color: color-mix(in srgb, var(--login-highlight) 48%, transparent); }
.public-directory-tree ul > li:before { background: color-mix(in srgb, var(--login-highlight) 48%, transparent); }
.public-directory-row {
  border-color: #ffffff2d;
  background: color-mix(in srgb, var(--login-deep) 56%, #ffffff12);
}
.public-directory-row:hover {
  border-color: color-mix(in srgb, var(--login-highlight) 70%, transparent);
  background: color-mix(in srgb, var(--login-mid) 76%, transparent);
  box-shadow: 0 8px 22px #03132642;
}
.public-directory-root > .public-directory-row {
  border-color: color-mix(in srgb, var(--login-highlight) 50%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--login-highlight) 18%, var(--login-deep)), color-mix(in srgb, var(--login-mid) 72%, transparent));
}
.public-directory-root-icon,
.public-directory-node-icon,
.public-directory-node.is-folder > .public-directory-row .public-directory-node-icon {
  color: #fff;
  background: color-mix(in srgb, var(--login-highlight) 25%, var(--login-deep));
}
.public-directory-root-icon { background: linear-gradient(145deg, var(--login-mid), var(--login-highlight)); }
.public-directory-empty { color: #d3e0ef; }

@media (max-width: 640px) {
  .public-directory-ai-background { background-position: 58% center; }
  .public-directory-card { background: color-mix(in srgb, var(--login-deep) 82%, transparent); }
}