/* PCI Project Directory — scoped under .pci-dir. Same brand tokens as the
   heat map (IBM Plex, navy/gold/forest). Cards are rendered by pci-directory.js. */

.pci-dir{
  --navy:#0B1F33; --gold:#C8A24B; --lightgold:#EAD9A8; --green:#2F5D4A; --green-bg:#DCEFE3;
  --amber:#7A5A12; --amber-bg:#F6EBCC; --red:#8A3B35; --red-bg:#F6E1DE; --slate:#5B6B7A; --slate-bg:#ECEEF1;
  --gray:#5B6B7A; --hair:#E4E8EC; --tint:#EEF2F4; --white:#FFFFFF;
  font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--navy); max-width:1180px; margin:0 auto; padding:0 16px; box-sizing:border-box;
}
.pci-dir *,.pci-dir *::before,.pci-dir *::after{box-sizing:border-box}
.pci-dir [hidden]{display:none!important}

/* header */
.pci-dir .pcid-eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.pci-dir .pcid-title{font-family:'IBM Plex Serif',Georgia,serif;font-size:clamp(24px,3vw,32px);font-weight:600;line-height:1.15;margin:0 0 8px;color:var(--navy)}
.pci-dir .pcid-sub{font-size:14px;line-height:1.55;color:var(--gray);margin:0;max-width:820px}
.pci-dir .pcid-stale{margin:10px 0 0;font-size:12.5px;color:var(--amber);background:var(--amber-bg);border-radius:8px;padding:8px 12px;display:inline-block}

/* toolbar */
.pci-dir .pcid-toolbar{
  margin:22px 0 10px;display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr));gap:8px;
  background:var(--white);border:1px solid var(--hair);border-radius:12px;padding:10px;
  position:sticky;top:0;z-index:5;box-shadow:0 6px 18px -14px rgba(11,31,51,.35);
}
@media (max-width:900px){.pci-dir .pcid-toolbar{grid-template-columns:1fr 1fr}.pci-dir .pcid-q{grid-column:1 / -1}}
.pci-dir .pcid-toolbar input,.pci-dir .pcid-toolbar select{
  width:100%;font:500 13.5px 'IBM Plex Sans',sans-serif;color:var(--navy);background:var(--tint);
  border:1px solid transparent;border-radius:8px;padding:10px 12px;outline:0;
}
.pci-dir .pcid-toolbar select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%230B1F33' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;cursor:pointer}
.pci-dir .pcid-toolbar input:focus,.pci-dir .pcid-toolbar select:focus{border-color:var(--gold);background-color:var(--white)}
.pci-dir .pcid-count{font:600 12px 'IBM Plex Mono',monospace;color:var(--gray);margin:0 0 14px;letter-spacing:.04em}

/* featured strip */
.pci-dir .pcid-featured{margin:0 0 22px;padding:14px;border:1px solid var(--lightgold);border-radius:14px;background:linear-gradient(180deg,#FFFBF0,#FFF)}
.pci-dir .pcid-featured h3{font-family:'IBM Plex Serif',Georgia,serif;font-size:18px;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.pci-dir .pcid-featured h3 span{font:600 10.5px 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);background:var(--amber-bg);border-radius:6px;padding:4px 8px}

/* grid + card */
.pci-dir .pcid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.pci-dir .pcid-card{
  background:var(--white);border:1px solid var(--hair);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;position:relative;
}
.pci-dir .pcid-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(11,31,51,.45)}
.pci-dir .pcid-card.is-paid{border-color:var(--gold)}
.pci-dir .pcid-card.plan-3{box-shadow:0 0 0 2px var(--lightgold)}
.pci-dir .pcid-paid{font:600 10.5px 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);background:var(--amber-bg);padding:6px 14px}
.pci-dir .pcid-photo{height:150px;background:var(--tint) center/cover no-repeat}
.pci-dir .pcid-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.pci-dir .pcid-badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.pci-dir .pcid-st{font:700 10.5px 'IBM Plex Mono',monospace;letter-spacing:.05em;text-transform:uppercase;border-radius:6px;padding:4px 8px}
.pci-dir .pcid-st.st-approved{color:#1E5E3E;background:var(--green-bg)}
.pci-dir .pcid-st.st-legacy{color:#1E5E3E;background:#EAF4EC;border:1px dashed #9CC7AB}
.pci-dir .pcid-st.st-process{color:var(--amber);background:var(--amber-bg)}
.pci-dir .pcid-st.st-rejected{color:var(--red);background:var(--red-bg)}
.pci-dir .pcid-st.st-none{color:var(--slate);background:var(--slate-bg)}
.pci-dir .pcid-stage{font-size:11.5px;color:var(--gray)}
.pci-dir .pcid-card h3{font-family:'IBM Plex Serif',Georgia,serif;font-size:17.5px;font-weight:600;line-height:1.25;margin:0 0 2px;color:var(--navy)}
.pci-dir .pcid-dev{font-size:12.5px;color:var(--gray);margin:0 0 10px}
.pci-dir .pcid-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.pci-dir .pcid-chip{font-size:11.5px;font-weight:600;color:var(--navy);background:var(--tint);border-radius:999px;padding:4px 10px}
.pci-dir .pcid-chip abbr{text-decoration:none;font-weight:500;color:var(--gray);border-bottom:1px dotted var(--gray);cursor:help}
.pci-dir .pcid-chip.is-verified{background:var(--green-bg);color:#1E5E3E}
.pci-dir .pcid-chip.is-verified abbr{color:#1E5E3E;border:0}
.pci-dir .pcid-facts{margin:0 0 8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pci-dir .pcid-facts div{background:var(--tint);border-radius:8px;padding:7px 9px}
.pci-dir .pcid-facts dt{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.pci-dir .pcid-facts dd{margin:2px 0 0;font:600 13px 'IBM Plex Mono',monospace;color:var(--navy)}
.pci-dir .pcid-blurb{font-size:12.5px;line-height:1.5;color:#33424F;margin:0 0 8px}
.pci-dir .pcid-site{font-size:12.5px;font-weight:600;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--gold);align-self:flex-start;margin-bottom:8px}
.pci-dir .pcid-reg{font:500 11px 'IBM Plex Mono',monospace;color:var(--gray);margin:auto 0 12px;line-height:1.5}
.pci-dir .pcid-actions{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;border-top:1px solid var(--hair);padding-top:12px}
.pci-dir .pcid-btn{text-decoration:none;font-size:12.5px;font-weight:700;color:var(--white);background:var(--navy);border-radius:8px;padding:8px 12px;transition:background .15s}
.pci-dir .pcid-btn:hover{background:#1F3D5C;color:var(--white)}
.pci-dir .pcid-link{font-size:12px;font-weight:600;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--hair)}
.pci-dir .pcid-link:hover{border-color:var(--gold)}
.pci-dir .pcid-claim{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--amber);text-decoration:none}
.pci-dir .pcid-claim:hover{text-decoration:underline}
.pci-dir .pcid-empty{text-align:center;color:var(--gray);padding:40px 0;font-size:14px}
.pci-dir .pcid-more-wrap{text-align:center;margin:20px 0 0}
.pci-dir .pcid-more{font:700 13.5px 'IBM Plex Sans',sans-serif;color:var(--navy);background:var(--white);border:1px solid var(--navy);border-radius:10px;padding:11px 22px;cursor:pointer;transition:all .15s}
.pci-dir .pcid-more:hover{background:var(--navy);color:var(--white)}
.pci-dir .pcid-noscript{font-size:13px;line-height:1.6}

/* legal */
.pci-dir .pcid-legal{margin:28px 0 0;background:var(--navy);color:#C7D2DC;font-size:11.5px;line-height:1.6;padding:14px 18px;border-radius:12px}
.pci-dir .pcid-legal strong{color:var(--white)}

.pci-dir a:focus-visible,.pci-dir button:focus-visible,.pci-dir select:focus-visible,.pci-dir input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pci-dir *{transition:none!important}}