.project-directory .directory-overview { display: grid; gap: 28px; }
.directory-source-notice { color: #e0b768; font-size: 12px; line-height: 1.7; }
.directory-source-notice:empty { display: none; }
.directory-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 12px; }
.directory-metric { min-height: 104px; padding: 16px; background: #16191e; border-top: 2px solid var(--metric-color,#69b9cb); }
.directory-metric strong { display: block; font-size: 38px; line-height: 1.1; font-weight: 300; color: var(--metric-color,#69b9cb); }
.directory-metric span { display: block; margin-top: 11px; font-size: 13px; color: var(--muted); }
.directory-lifecycles { display: flex; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.directory-panels { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(290px,100%),1fr)); gap: 24px; align-items: start; }
.directory-panel { border-top: 1px solid var(--line); padding-top: 16px; min-width: 0; }
.directory-panel h3 { font-size: 18px; font-weight: 500; color: #80bfce; margin: 0 0 12px; }
.directory-fact { display: block; width: 100%; text-align: left; padding: 10px 0; }
.directory-fact-title { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 16px; line-height: 1.5; }
.directory-fact-title time { font-size: 11px; color: var(--faint); flex-shrink: 0; }
.directory-fact-project { display: block; color: #82c1d0; font-size: 12px; margin-top: 4px; }
.directory-fact-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 5px; }
.directory-unverified { display: block; font-size: 11px; color: #e0b768; margin-top: 5px; }
.directory-empty { color: var(--faint); font-size: 13px; line-height: 1.7; padding: 12px 0; }
.directory-filter-bar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 0 0 20px; }
.directory-filter-bar button { min-height: 36px; font-size: 13px; color: var(--muted); border-bottom: 1px solid transparent; }
.directory-filter-bar button[aria-pressed="true"] { color: #87c6d3; border-bottom-color: currentColor; }
.directory-loaded { margin-left: auto; font-size: 11px; color: var(--faint); }
.directory-card-grid { display: grid; grid-template-columns: repeat(auto-fill,150px); grid-auto-rows: 150px; gap: 8px; align-content: start; }
.directory-project-card { display: block; position: relative; width: 150px; height: 150px; padding: 0; text-align: left; color: white; overflow: hidden; background: var(--directory-card-color,#286b9b); border: 0; perspective: 1000px; }
.directory-project-card:focus-visible { outline: 2px solid white; outline-offset: -4px; }
.directory-project-card:hover { filter: brightness(1.08); }
.directory-card-stage { display: block; position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 800ms cubic-bezier(.25,.1,.25,1); }
.directory-project-card[data-card-face="progress"] .directory-card-stage { transform: rotateX(180deg); }
.directory-card-front,.directory-card-back { position: absolute; inset: 0; padding: 15px; display: flex; flex-direction: column; backface-visibility: hidden; background: var(--directory-card-color,#286b9b); }
.directory-card-front { justify-content: flex-end; }
.directory-card-back { transform: rotateX(180deg); gap: 9px; }
.directory-card-number { position: absolute; right: 12px; top: 7px; font-size: 61px; line-height: 1; font-weight: 200; color: #ffffff2a; }
.directory-card-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; position: relative; font-size: 19px; font-weight: 600; line-height: 1.3; }
.directory-card-meta,.directory-card-status { display: block; font-size: 10px; line-height: 1.5; opacity: .8; margin-top: 4px; }
.directory-card-project { font-size: 11px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.directory-card-progress { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.5; font-weight: 600; }
.directory-card-date { margin-top: auto; font-size: 10px; opacity: .8; }
.directory-more { margin-top: 22px; }
@media(max-width:720px) { .directory-card-grid { gap: 6px; } .directory-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { .directory-card-stage { transition: none; } }