/* Canonical Library secondary-page shell.
 * Design Picks is the source of truth for Case Library, UI Vocabulary and
 * Design Picks itself. All three pages share the same geometry and controls.
 */
body.directory-page {
  --directory-primary: #18a957;
  --directory-primary-bg: #eaf7ef;
  --directory-text: #1f1f1f;
  --directory-secondary: #666;
  --directory-tertiary: #8c8c8c;
  --directory-border: #e5e5e5;
  --directory-fill: #f5f5f5;
  --directory-surface: #fff;
  --directory-radius: 8px;
  --directory-shell-radius: 12px;
  --directory-shadow: 0 6px 20px rgba(0,0,0,.045);
  --directory-floating-search-width: 420px;
  --directory-floating-search-rest: 46px;
  margin: 0;
  background: #f5f6f7;
  color: var(--directory-text);
}

body.directory-page *,
body.directory-page *::before,
body.directory-page *::after { box-sizing: border-box; }

body.directory-page .directory-page-main {
  width: 100%;
  margin: 0;
  padding: 20px 36px 96px;
}

/* Canonical hero ------------------------------------------------------- */
body.directory-page .directory-hero {
  display: grid;
  grid-template-columns: minmax(0,2.7fr) minmax(340px,.95fr);
  gap: 22px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.directory-page .directory-hero-copy,
body.directory-page .directory-hero-overview {
  min-width: 0;
  min-height: 318px;
  overflow: hidden;
  border: 1px solid var(--directory-border);
  border-radius: var(--directory-shell-radius);
  background: var(--directory-surface);
  box-shadow: 0 8px 28px rgba(0,0,0,.04);
}

body.directory-page .directory-hero-copy {
  display: block;
  padding: 38px 48px 36px;
}

body.directory-page .eyebrow,
body.library-page .kicker {
  margin: 0;
  color: var(--directory-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .055em;
}

body.directory-page .directory-hero h1 {
  margin: 10px 0 0;
  color: var(--directory-text);
  font-family: inherit;
  font-size: clamp(42px,3.5vw,58px);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1.04;
}

html[lang="zh-CN"] body.directory-page .directory-hero h1 {
  font-family: var(--font-display-cjk), var(--font-sans-cjk), sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
}

body.directory-page .directory-hero-copy > p:not(.eyebrow):not(.kicker) {
  max-width: 900px;
  margin: 17px 0 0;
  color: var(--directory-secondary);
  font-size: 15px;
  line-height: 1.6;
}

body.directory-page .directory-hero-overview {
  padding: 24px 28px;
  color: inherit;
  text-decoration: none;
}

body.directory-page .directory-hero-overview > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--directory-border);
  color: var(--directory-secondary);
  font-size: 13px;
  font-weight: 600;
}

body.directory-page .directory-hero-overview > header small {
  color: var(--directory-tertiary);
  font-size: 10px;
  font-weight: 500;
}

body.directory-page .directory-primary-stat {
  display: grid;
  gap: 6px;
  padding: 24px 0 20px;
}
body.directory-page .directory-primary-stat strong { font-size: 48px; font-weight: 520; letter-spacing: -.045em; line-height: 1; }
body.directory-page .directory-primary-stat span { color: var(--directory-secondary); font-size: 13px; }

body.directory-page .directory-hero-overview dl {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 0;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--directory-border);
}
body.directory-page .directory-hero-overview dl > div { min-width: 0; padding: 0 14px; border-right: 1px solid var(--directory-border); }
body.directory-page .directory-hero-overview dl > div:first-child { padding-left: 0; }
body.directory-page .directory-hero-overview dl > div:last-child { padding-right: 0; border-right: 0; }
body.directory-page .directory-hero-overview dt { color: var(--directory-tertiary); font-size: 10px; }
body.directory-page .directory-hero-overview dd { margin: 7px 0 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }

body.library-page .stats-panel {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-content: center;
  padding: 24px 28px;
}
body.library-page .stats-panel > span { display: grid; gap: 7px; align-content: center; min-height: 92px; padding: 0 18px; border-right: 1px solid var(--directory-border); text-align: left; }
body.library-page .stats-panel > span:last-child { border-right: 0; }
body.library-page .stats-panel small { color: var(--directory-tertiary); font-size: 10px; }
body.library-page .stats-panel strong { font-size: 32px; font-weight: 520; }

/* Canonical directory card -------------------------------------------- */
body.directory-page .directory-section { padding-top: 14px; }

/* Search is visually detached into one shared bottom dock. The toolbar now
 * holds only each page's secondary controls (sort, result count, sync, etc.). */
body.directory-page .directory-toolbar {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 12px;
  align-items: center;
  min-height: 58px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--directory-border);
  border-radius: var(--directory-shell-radius);
  background: var(--directory-surface);
  box-shadow: var(--directory-shadow);
}

body.directory-page .search-field {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}
body.directory-page .search-field:focus-within { border-color: var(--directory-primary); box-shadow: 0 0 0 2px rgba(24,169,87,.12); }
body.directory-page .search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--directory-text); font-size: 13px; }
body.directory-page .search-field input::placeholder { color: #bfbfbf; }
body.directory-page .search-field kbd { color: var(--directory-tertiary); font-size: 9px; }

/* Shared floating search. Existing inputs remain in place for their current
 * JS bindings; desktop pointers see a tiny resting button that expands only
 * when hovered or focused. Touch layouts stay directly usable. */
body.directory-page .directory-toolbar > .search-field {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(var(--directory-floating-search-width), calc(100vw - 32px));
  min-height: 50px;
  justify-content: flex-start;
  padding: 0 14px;
  border: 1px solid rgba(31,31,31,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 28px rgba(0,0,0,.11), 0 2px 7px rgba(0,0,0,.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateX(-50%);
  overflow: hidden;
  transition: width .18s ease, padding .18s ease, gap .18s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
body.directory-page .directory-toolbar > .search-field:focus-within {
  border-color: var(--directory-primary);
  box-shadow: 0 12px 30px rgba(0,0,0,.13), 0 0 0 3px rgba(24,169,87,.11);
}
body.directory-page .directory-toolbar > .search-field input {
  min-width: 0;
  font-size: 13px;
}
body.directory-page .directory-toolbar > .search-field > svg,
body.directory-page .directory-toolbar > .search-field .search-icon { flex: 0 0 auto; }
body.directory-page .directory-toolbar > .search-field kbd {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid var(--directory-border);
  border-radius: 6px;
  background: #fafafa;
  color: var(--directory-tertiary);
  font-size: 9px;
}
body.directory-page:has(dialog[open]) .directory-toolbar > .search-field { opacity: 0; pointer-events: none; }

@media (hover:hover) and (pointer:fine) {
  body.directory-page .directory-toolbar > .search-field {
    width: var(--directory-floating-search-rest);
    min-height: var(--directory-floating-search-rest);
    height: var(--directory-floating-search-rest);
    justify-content: center;
    gap: 0;
    padding: 0 13px;
    cursor: pointer;
  }
  body.directory-page .directory-toolbar > .search-field input {
    width: 0;
    flex: 0 0 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
  }
  body.directory-page .directory-toolbar > .search-field kbd { display: none; }
  body.directory-page .directory-toolbar > .search-field:hover,
  body.directory-page .directory-toolbar > .search-field:focus-within {
    width: min(var(--directory-floating-search-width), calc(100vw - 32px));
    justify-content: flex-start;
    gap: 9px;
    padding: 0 14px;
    cursor: text;
  }
  body.directory-page .directory-toolbar > .search-field:hover input,
  body.directory-page .directory-toolbar > .search-field:focus-within input {
    width: 100%;
    flex: 1 1 auto;
    opacity: 1;
    pointer-events: auto;
  }
  body.directory-page .directory-toolbar > .search-field:hover kbd,
  body.directory-page .directory-toolbar > .search-field:focus-within kbd { display: inline-block; }
}

body.directory-page .directory-toolbar-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; justify-self: end; gap: 10px; }
body.directory-page .directory-result-count { margin: 0; justify-self: end; color: var(--directory-secondary); font-size: 12px; }

body.vocabulary-page .sort-control { display: inline-flex; min-height: 38px; align-items: center; gap: 8px; padding: 0 10px; border-radius: 7px; background: var(--directory-fill); color: var(--directory-secondary); font-size: 11px; }
body.vocabulary-page .sort-control select { min-height: 32px; border: 0; outline: 0; background: transparent; color: var(--directory-text); font-size: 12px; }
body.vocabulary-page .share-view-button { min-height: 38px; padding: 0 13px; border: 1px solid var(--directory-border); border-radius: 6px; background: #fff; color: var(--directory-primary); font-size: 12px; }

body.directory-page .directory-layout {
  display: grid;
  grid-template-columns: 224px minmax(0,1fr);
  gap: 16px;
  align-items: start;
}

body.directory-page .directory-sidebar {
  position: sticky;
  top: 86px;
  overflow: hidden;
  align-self: start;
  padding: 18px;
  border: 1px solid var(--directory-border);
  border-radius: var(--directory-shell-radius);
  background: var(--directory-surface);
  box-shadow: var(--directory-shadow);
}

body.directory-page .filter-sidebar-head,
body.vocabulary-page .taxonomy-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--directory-text);
  font-size: 13px;
  font-weight: 600;
}
body.directory-page .filter-sidebar-head p { margin: 0; }
body.directory-page .filter-sidebar-head small,
body.vocabulary-page .taxonomy-heading span:last-child { display: grid; min-width: 24px; height: 24px; place-items: center; border-radius: 4px; background: var(--directory-fill); color: var(--directory-tertiary); font-size: 10px; font-weight: 500; }

body.library-page .category-nav,
body.vocabulary-page .taxonomy nav { display: grid; gap: 2px; margin: 0; }

body.library-page .category-link,
body.vocabulary-page .taxonomy-link { display: grid; grid-template-columns: 14px minmax(0,1fr) auto; min-height: 34px; align-items: center; gap: 8px; width: 100%; padding: 0 5px; border: 0; border-radius: 5px; background: transparent; color: var(--directory-secondary); font-size: 12px; text-align: left; }
body.library-page .category-link::before,
body.vocabulary-page .taxonomy-link::before { width: 14px; height: 14px; border: 1px solid #d9d9d9; border-radius: 3px; content: ""; }
body.library-page .category-link b,
body.vocabulary-page .taxonomy-link b { color: var(--directory-tertiary); font-size: 10px; }
body.library-page .category-link:hover,
body.vocabulary-page .taxonomy-link:hover { background: var(--directory-fill); color: var(--directory-text); }
body.library-page .category-link.is-active,
body.vocabulary-page .taxonomy-link.is-selected { color: var(--directory-text); font-weight: 600; }
body.library-page .category-link.is-active::before,
body.vocabulary-page .taxonomy-link.is-selected::before { border-color: var(--directory-primary); background: var(--directory-primary); box-shadow: inset 0 0 0 3px #fff; }

body.vocabulary-page .taxonomy-note,
body.library-page .sidebar-skills,
body.library-page .sidebar-resources,
body.library-page .sidebar-social,
body.library-page .sidebar-note { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--directory-border); }
body.vocabulary-page .taxonomy-note strong,
body.library-page .sidebar-skills-heading p,
body.library-page .sidebar-social p { font-size: 10px; font-weight: 600; }
body.vocabulary-page .taxonomy-note p,
body.vocabulary-page .taxonomy-note span,
body.library-page .sidebar-skills > a,
body.library-page .sidebar-resources button,
body.library-page .sidebar-social a { font-size: 10px; }
body.library-page .sidebar-skills small,
body.library-page .sidebar-resources small,
body.library-page .sidebar-social small { font-size: 9px; }

body.directory-page .directory-content { min-width: 0; padding: 0; }

/* Result cards begin immediately after the sidebar. The old per-category
 * heading/summary navigation is intentionally removed from the visible UI. */
body.vocabulary-page .results-heading,
body.vocabulary-page .results-summary { display: none !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; border: 0 !important; }

body.library-page .catalog-bar { display: flex; min-height: 54px; align-items: end; justify-content: space-between; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--directory-border); }
body.library-page .catalog-bar h2 { margin: 6px 0 0; color: var(--directory-text); font-size: 24px; font-weight: 650; letter-spacing: -.03em; }
body.library-page .demo-gallery,
body.vocabulary-page .entry-grid { gap: 16px; }
body.library-page .demo-card,
body.vocabulary-page .entry-card-face { border-color: var(--directory-border); border-radius: var(--directory-radius); background: var(--directory-surface); box-shadow: var(--directory-shadow); }
body.library-page .demo-card:hover,
body.vocabulary-page .entry-card:hover .entry-card-face { border-color: #cfcfcf; box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
body.library-page .demo-card-body { background: var(--directory-surface); }

@media (max-width:1180px) {
  body.directory-page .directory-hero { grid-template-columns: 1fr; gap: 14px; }
  body.directory-page .directory-hero-copy,
  body.directory-page .directory-hero-overview { min-height: auto; }
  body.directory-page .directory-layout { grid-template-columns: 205px minmax(0,1fr); }
}

@media (max-width:820px) {
  body.directory-page .directory-page-main { padding: 16px 16px 92px; }
  body.directory-page .directory-toolbar { grid-template-columns: 1fr; border-radius: 10px; }
  body.directory-page .directory-toolbar-actions,
  body.directory-page .directory-result-count { justify-self: end; justify-content: flex-end; }
  body.directory-page .directory-toolbar > .search-field {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: min(360px, calc(100vw - 24px));
    min-height: 48px;
  }
  body.directory-page .directory-layout { display: block; }
  body.directory-page .directory-sidebar { position: static; margin-bottom: 16px; border-radius: 10px; }
  body.library-page .category-nav,
  body.vocabulary-page .taxonomy nav { display: flex; gap: 8px; overflow-x: auto; }
  body.library-page .category-link,
  body.vocabulary-page .taxonomy-link { display: inline-flex; width: auto; min-height: 36px; flex: 0 0 auto; padding: 0 12px; border: 1px solid var(--directory-border); border-radius: 999px; background: #fff; white-space: nowrap; }
  body.library-page .category-link::before,
  body.vocabulary-page .taxonomy-link::before { display: none; }
  body.library-page .category-link.is-active,
  body.vocabulary-page .taxonomy-link.is-selected { border-color: var(--directory-text); background: var(--directory-text); color: #fff; }
  body.library-page .sidebar-skills,
  body.library-page .sidebar-resources,
  body.library-page .sidebar-social,
  body.library-page .sidebar-note,
  body.vocabulary-page .taxonomy-note { display: none; }
}

@media (max-width:620px) {
  body.directory-page .directory-hero-copy { padding: 28px 22px 26px; }
  body.directory-page .directory-hero-overview { padding: 22px; }
  body.directory-page .directory-hero h1 { font-size: clamp(34px,11vw,48px); }
  body.directory-page .directory-hero-overview dl { grid-template-columns: 1fr 1fr; gap: 18px; }
  body.directory-page .directory-hero-overview dl > div { padding: 0; border-right: 0; }
  body.directory-page .directory-hero-overview dl > div:last-child { grid-column: 1/-1; }
  body.directory-page .directory-toolbar-actions { flex-wrap: wrap; width: 100%; }
  body.vocabulary-page .sort-control,
  body.vocabulary-page .share-view-button { width: 100%; }
  body.vocabulary-page .sort-control select { flex: 1; }
  body.vocabulary-page .entry-grid,
  body.library-page .demo-gallery { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion:reduce) {
  body.directory-page .demo-card,
  body.directory-page .entry-card,
  body.directory-page .category-link,
  body.directory-page .taxonomy-link,
  body.directory-page .directory-toolbar > .search-field,
  body.directory-page .directory-toolbar > .search-field input { transition: none; }
}

/* Flat knowledge-directory shell --------------------------------------
 * The page chrome itself should not read as cards. Real content objects
 * (case cards, vocabulary cards and Skill/Web cards) intentionally keep
 * their card treatment and interactions.
 */
body.directory-page .directory-toolbar {
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.directory-page .directory-toolbar > :not(.search-field) {
  display: none !important;
}

body.library-page .catalog-bar {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.directory-page .directory-section { padding-top: 22px; }

body.directory-page .directory-hero {
  gap: 30px !important;
  border-bottom: 1px solid var(--directory-border) !important;
}

body.directory-page .directory-hero-copy,
body.directory-page .directory-hero-overview {
  min-height: 286px;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.directory-page .directory-hero-copy {
  padding: 34px 40px 34px 0 !important;
}

body.directory-page .directory-hero-overview {
  padding: 34px 0 34px 30px !important;
  border-left: 1px solid var(--directory-border) !important;
}

body.directory-page .directory-sidebar {
  overflow: visible;
  padding: 6px 18px 6px 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--directory-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.directory-page .filter-sidebar-head small,
body.vocabulary-page .taxonomy-heading span:last-child {
  background: transparent !important;
  border: 1px solid var(--directory-border);
}

/* Library overview is intentionally one concise metric, not a statistics card. */
body.library-page .stats-panel {
  grid-template-columns: 1fr !important;
  padding: 0 !important;
}
body.library-page .stats-panel > span {
  padding: 0 !important;
  border: 0 !important;
}
body.library-page .stats-panel > span:nth-child(n + 2) { display: none !important; }
body.library-page .stats-panel strong {
  font-family: var(--font-number) !important;
  font-size: 48px !important;
  font-variant-numeric: var(--number-font-variant) !important;
  font-feature-settings: var(--number-font-features) !important;
  letter-spacing: -.045em !important;
  line-height: 1 !important;
}

@media (max-width: 900px) {
  body.directory-page .directory-hero { gap: 0 !important; }
  body.directory-page .directory-hero-copy {
    min-height: 0;
    padding: 28px 0 24px !important;
  }
  body.directory-page .directory-hero-overview {
    min-height: 0 !important;
    padding: 22px 0 28px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--directory-border) !important;
  }
  body.directory-page .directory-sidebar {
    padding: 0 0 16px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--directory-border) !important;
  }
}