/* Directory: the same three-color discovery language as the homepage. */
body.asnaf-gp-body.asnaf-arch-body { padding-bottom: 0; background: #fff; }
.directory { --dir-ink: #172c46; --dir-muted: #617084; --dir-line: #e3e9f0; font-family: "Asnaf UI", sans-serif; color: var(--dir-ink); padding-bottom: 4rem; background: linear-gradient(#fff 330px, #f7f9fc 720px); line-height: 1.8; }
.directory *, .directory *::before, .directory *::after { box-sizing: border-box; }
.directory h1, .directory h2, .directory h3, .directory p, .directory form { margin: 0; }
.directory svg { display: block; flex: none; }
.directory a, .directory button, .directory summary { -webkit-tap-highlight-color: transparent; }
.directory a:focus-visible, .directory button:focus-visible, .directory summary:focus-visible { outline: 3px solid #2858df; outline-offset: 4px; }
.directory input, .directory select, .directory button { font: inherit; }
.directory [hidden] { display: none !important; }
.dir-theme--all { --tone: #244969; --tone-dark: #183c59; --wash: #eff5f8; --soft: #dbe8ee; }
.dir-theme--web { --tone: #2858df; --tone-dark: #2449b4; --wash: #edf2ff; --soft: #dce6ff; --art-main: #3965e6; --art-light: #e0e9ff; --art-shade: #afc3ff; --art-white: #fff; --art-shadow: #14357c; }
.dir-theme--gov { --tone: #087e74; --tone-dark: #07695f; --wash: #eaf7f3; --soft: #d1eee4; --art-main: #16958a; --art-light: #d6f3e9; --art-shade: #9ad4c5; --art-white: #fff; --art-shadow: #064e49; }
.dir-theme--biz { --tone: #c24b27; --tone-dark: #a73c1c; --wash: #fff2e9; --soft: #ffe0cb; --art-main: #ef754b; --art-light: #ffe7d6; --art-shade: #f5b79c; --art-white: #fff; --art-shadow: #8c3417; }
.dir-wrap { width: min(80rem, calc(100% - 4rem)); margin-inline: auto; }
.dir-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding-block: 1.15rem; font-size: .66rem; line-height: 1.9; color: #738194; }
.dir-crumbs [aria-current] { color: #43566b; }
.dir-crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
.dir-crumbs a:hover { color: #2858df; }
.dir-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; gap: 1.5rem; min-height: 255px; padding: 2.25rem 2.5rem; border: 1px solid var(--soft); border-radius: 25px; background: radial-gradient(ellipse at 100% 0%, #ffffffd9, transparent 70%), var(--wash); overflow: clip; }
.dir-hero::after { content: ''; position: absolute; width: 90px; height: 4px; bottom: 0; right: 2.5rem; border-radius: 4px 4px 0 0; background: linear-gradient(to left, #2858df 33%, #159d8e 33% 66%, #ed9369 66%); }
.dir-hero__copy { position: relative; z-index: 1; }
.dir-eyebrow { display: flex; align-items: center; gap: .5rem; font-size: .69rem; color: var(--tone-dark); font-weight: 500; }
.dir-eyebrow > span { display: block; width: 6px; height: 6px; border-radius: 50%; flex: none; background: #edb744; box-shadow: 0 0 0 4px #edb7441a; }
.directory h1 { font-family: "Doran FaNum", sans-serif; font-size: clamp(1.9rem, 2.8vw, 2.8rem); font-weight: 800; line-height: 1.6; margin-top: .4rem; }
.directory .dir-lead { color: #5d7083; font-size: .8rem; line-height: 2.1; margin-top: .35rem; max-width: 37rem; }
.dir-hero__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.25rem; }
.dir-total { display: flex; align-items: center; gap: .65rem; font-size: .65rem; color: #5b7084; }
.dir-total strong { font-size: 1.55rem; line-height: 1.5; color: var(--tone); font-weight: 700; }
.dir-hero__foot a { display: inline-flex; align-items: center; gap: .7rem; min-height: 36px; padding-inline-start: 1.6rem; border-inline-start: 1px solid var(--soft); color: var(--tone-dark); font-size: .68rem; }
.dir-hero__art { position: relative; height: 210px; min-width: 0; align-self: center; }
.dir-orbit { position: absolute; width: 190px; height: 190px; left: calc(50% - 95px); top: -4px; border: 1px solid #a7c7d440; border-radius: 50%; box-shadow: 0 0 0 24px #ffffff35, 0 0 0 50px #ffffff25; }
.dir-hero__art .hd-art { display: block; width: 100%; height: auto; }
.dir-art-item { position: absolute; width: 57%; max-width: 240px; top: 12px; }
.dir-art-item.dir-theme--web { left: -7%; transform: rotate(-9deg); top: 31px; }
.dir-art-item.dir-theme--gov { right: -4%; transform: rotate(8deg); }
.dir-art-item.dir-theme--biz { left: 22%; top: 40px; z-index: 1; }
.dir-art-single { width: 265px; max-width: 100%; margin: -14px auto 0; }
.dir-art-label { display: flex; align-items: center; justify-content: center; gap: .5rem; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); padding: .5rem .85rem; border: 1px solid #dce7ed; border-radius: 30px; background: #ffffffed; white-space: nowrap; font-size: .6rem; color: #546c7e; z-index: 2; }
.dir-art-label svg { color: #087e74; }
.dir-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-block: 1.4rem 2.5rem; }
body.asnaf-arch-body .dir-type { display: flex; align-items: center; gap: .8rem; padding: 1.05rem 1rem; border: 1px solid var(--soft); border-radius: 15px; color: var(--dir-ink); background: #fff; min-width: 0; position: relative; transition: border-color .2s, background .2s; }
.dir-type__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--wash); color: var(--tone); }
.dir-type > span:nth-child(2) { min-width: 0; }
.dir-type strong { display: block; font-size: .77rem; font-weight: 700; }
.dir-type small { display: block; font-size: .61rem; color: #6a7d8e; margin-top: .25rem; }
.dir-type i { display: grid; place-items: center; margin-inline-start: auto; color: var(--tone); flex: none; }
body.asnaf-arch-body .dir-type[aria-current], body.asnaf-arch-body .dir-type:hover { border-color: var(--tone); background: var(--wash); }
.dir-type[aria-current] .dir-type__icon { color: #fff; background: var(--tone); }
.dir-layout { display: grid; grid-template-columns: 255px minmax(0, 1fr); align-items: start; gap: 1.65rem; scroll-margin-top: 9rem; }
.dir-sidebar { display: grid; gap: 1rem; min-width: 0; }
.dir-filters, .dir-browse { border: 1px solid var(--dir-line); border-radius: 17px; background: #fff; }
.directory summary { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 1.15rem; min-height: 60px; list-style: none; cursor: pointer; color: #314c65; font-weight: 700; font-size: .78rem; }
.directory summary::-webkit-details-marker { display: none; }
.directory summary > span { display: flex; align-items: center; gap: .55rem; }
.directory summary > span svg { color: #087e74; }
.directory details[open] > summary > svg { transform: rotate(180deg); }
.dir-filters__body { padding: .1rem 1.15rem 1.2rem; }
.dir-field { margin-bottom: 1.1rem; min-width: 0; }
.dir-field label { display: block; margin-bottom: .45rem; color: #566c80; font-size: .66rem; font-weight: 500; }
.directory .dir-field input, .directory .dir-field select { display: block; width: 100%; min-width: 0; height: 46px; border: 1px solid #dfe6ee; border-radius: 9px; background-color: #f8fafc; color: #334b64; padding: .5rem .65rem; font-family: "Asnaf UI", sans-serif; font-size: .68rem; box-shadow: none; }
.directory .dir-field input::placeholder { color: #7b8899; opacity: 1; font-size: .63rem; }
.directory .dir-field input:focus, .directory .dir-field select:focus { outline: 2px solid #2858df; outline-offset: 2px; background: #fff; }
body.asnaf-arch-body .directory .dir-submit { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 46px; padding: .7rem .85rem; border: 1px solid #2858df; border-radius: 10px; background: #2858df; color: #fff; cursor: pointer; font-family: inherit; font-size: .73rem; font-weight: 700; box-shadow: 0 4px 8px #2858df10; }
body.asnaf-arch-body .directory .dir-submit:hover { background: #214ac1; }
.dir-reset { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: .5rem; font-size: .67rem; color: #617084; }
.dir-reset:hover { color: #2858df; }
.dir-browse nav { max-height: 370px; overflow-y: auto; overscroll-behavior: contain; padding: 0 1.15rem 1rem; scrollbar-width: thin; }
.dir-browse nav a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; padding-block: .6rem; border-top: 1px solid #edf1f5; font-size: .68rem; }
.dir-browse nav a:hover { color: #2858df; }
.dir-browse nav small { font-size: .65rem; color: #728598; }
.dir-parent { display: flex; align-items: center; gap: .5rem; min-height: 50px; padding: .9rem; border: 1px solid var(--dir-line); border-radius: 12px; background: #fff; font-size: .69rem; }
.dir-parent svg { color: #087e74; }
.dir-invite { padding: 1.5rem; border-radius: 17px; background: #eaf5f1; border: 1px solid #d3e9df; }
.dir-invite__icon { display: grid; place-items: center; width: 46px; height: 46px; background: #fff; border-radius: 13px; color: #087e74; margin-bottom: .7rem; }
.directory .dir-invite h2 { font-family: "Doran FaNum", sans-serif; font-size: 1.6rem; font-weight: 800; line-height: 1.6; color: #1f4a46; }
.directory .dir-invite p { font-size: .68rem; color: #5e7a73; line-height: 2.1; margin-top: .7rem; }
.dir-invite a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; border-top: 1px solid #cce2d9; padding-top: .8rem; margin-top: 1rem; font-size: .73rem; font-weight: 700; color: #07695f; }
.dir-results { min-width: 0; }
.dir-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block: .2rem 1.25rem; }
.directory .dir-toolbar h2 { font-family: "Doran FaNum", sans-serif; font-size: 1.6rem; line-height: 1.6; font-weight: 800; margin-top: .25rem; }
.dir-toolbar .dir-eyebrow { font-size: .61rem; color: #708395; }
.dir-range { font-size: .67rem; color: #6c8094; flex: none; }
.dir-active { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.dir-active a { display: flex; align-items: center; gap: .7rem; min-width: 0; max-width: 100%; min-height: 40px; padding: .4rem .8rem; border: 1px solid #d6e2f2; border-radius: 8px; background: #edf2ff; color: #2449b4; font-size: .67rem; }
.dir-active a span { overflow-wrap: anywhere; }
.dir-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.dir-card { min-width: 0; background: linear-gradient(135deg, #fff 65%, var(--wash)); border: 1px solid var(--dir-line); border-top: 3px solid var(--soft); border-radius: 17px; transition: transform .2s, border-color .2s, box-shadow .2s; }
.dir-card:hover { transform: translateY(-3px); border-color: var(--tone); box-shadow: 0 10px 25px #172c4609; }
.dir-card__link { display: flex; flex-direction: column; height: 100%; min-width: 0; padding: 1.25rem; border-radius: 15px; }
.dir-card__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.dir-identity { display: grid; position: relative; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 15px; border: 1px solid var(--soft); background: var(--wash); color: var(--tone); overflow: hidden; }
.dir-identity img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 5px; }
.dir-badge { font-size: .59rem; font-weight: 500; border-radius: 6px; background: var(--wash); color: var(--tone-dark); padding: .3rem .5rem; white-space: nowrap; }
.directory .dir-card h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 3.8em; font-size: .86rem; line-height: 1.9; font-weight: 700; margin-block: 1rem .3rem; overflow-wrap: anywhere; }
.dir-card__category { min-height: 1.9em; color: #7c8b9a; font-size: .64rem; line-height: 1.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1.15rem !important; }
.dir-card__meta { display: flex; align-items: center; gap: .4rem; color: #61778a; font-size: .67rem; margin-top: auto; min-height: 25px; }
.dir-card__meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dir-card__meta [dir="ltr"] { font-family: system-ui, sans-serif; font-size: .72rem; }
.dir-card__meta svg { color: #899cac; }
.dir-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid #eaf0f4; color: var(--tone-dark); font-size: .64rem; }
.dir-card__foot i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--wash); color: var(--tone); }
.dir-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin-top: 2rem; }
.dir-pages .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: .5rem .8rem; border: 1px solid #dfe6ef; border-radius: 10px; background: #fff; font-size: .75rem; color: #415a74; }
.dir-pages .page-numbers.current { background: #2858df; border-color: #2858df; color: #fff; }
.dir-pages a:hover { border-color: #2858df; color: #2858df; }
.dir-pages .dots { border-color: transparent; background: transparent; min-width: 20px; padding-inline: .1rem; }
.dir-empty { display: flex; align-items: center; flex-direction: column; text-align: center; padding: 3.5rem 1.5rem; border: 1px dashed #cddde8; border-radius: 20px; background: #fff; }
.dir-empty > span { display: grid; place-items: center; width: 80px; height: 80px; background: #edf2ff; color: #2858df; border-radius: 24px; }
.directory .dir-empty h3 { font-family: "Doran FaNum", sans-serif; font-size: 1.8rem; margin-top: 1rem; }
.directory .dir-empty p { font-size: .8rem; color: #6b8092; margin-block: .6rem 1.6rem; }
.directory .dir-empty .dir-submit { width: auto; }
.dir-empty__all { display: inline-flex; align-items: center; min-height: 44px; font-size: .72rem; color: #617084; margin-top: .6rem; }
@media (max-width: 1200px) {
  .dir-layout { grid-template-columns: 235px minmax(0, 1fr); gap: 1.2rem; }
  .dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dir-type { gap: .55rem; }
  .dir-type i { display: none; }
  .dir-type strong { font-size: .72rem; }
  .dir-hero { padding-inline: 2rem; }
}
@media (max-width: 950px) {
  .dir-wrap { width: calc(100% - 2.5rem); }
  .dir-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dir-type i { display: grid; }
  .dir-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); padding: 1.75rem; }
  .dir-art-label { display: none; }
  .dir-hero__art { height: 170px; }
  .dir-art-item { width: 67%; }
  .dir-art-single { width: 235px; margin: 0 auto; }
  .dir-toolbar { align-items: flex-start; flex-direction: column; gap: .35rem; }
}
@media (max-width: 800px) {
  .dir-layout { grid-template-columns: minmax(0, 1fr); scroll-margin-top: 9rem; }
  .dir-invite { display: none; }
  .dir-sidebar { gap: .65rem; }
  .dir-filters__body form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem; }
  .dir-field { margin-bottom: .3rem; }
  .directory .dir-submit { align-self: end; }
  .dir-reset { margin: 0; }
  .dir-toolbar { flex-direction: row; align-items: center; }
  .dir-type strong { font-size: .8rem; }
  .dir-types { margin-bottom: 1.5rem; }
}
@media (max-width: 640px) {
  .dir-wrap { width: calc(100% - 2rem); }
  .directory { padding-bottom: 2.5rem; }
  .dir-crumbs { padding-block: .8rem; font-size: .61rem; }
  .dir-hero { display: block; min-height: 0; border-radius: 20px; padding: 1.4rem; }
  .dir-hero__art { display: none; }
  .directory h1 { font-size: 1.85rem; }
  .directory .dir-lead { font-size: .73rem; }
  .dir-hero .dir-eyebrow { font-size: .6rem; }
  .dir-hero__foot { gap: .7rem; margin-top: 1rem; }
  .dir-total { gap: .45rem; font-size: .58rem; }
  .dir-total strong { font-size: 1.35rem; }
  .dir-hero__foot a { padding-inline-start: .7rem; font-size: .59rem; gap: .35rem; }
  .dir-types { gap: .6rem; margin-top: 1rem; }
  body.asnaf-arch-body .dir-type { padding: .85rem .7rem; gap: .6rem; border-radius: 12px; }
  .dir-type__icon { width: 35px; height: 35px; border-radius: 10px; }
  .dir-type__icon svg { width: 20px; height: 20px; }
  .dir-type strong { font-size: .66rem; line-height: 1.9; }
  .dir-type small { font-size: .53rem; }
  .dir-type i { display: none; }
  .directory summary { padding: 1rem; min-height: 56px; }
  .dir-filters__body { padding: .1rem 1rem 1rem; }
  .dir-filters__body form { display: block; }
  .dir-field { margin-bottom: 1rem; }
  .dir-reset { margin-top: .5rem; }
  .dir-toolbar { align-items: flex-start; flex-direction: column; gap: .35rem; margin-top: .5rem; }
  .directory .dir-toolbar h2 { font-size: 1.5rem; }
  .dir-range { font-size: .63rem; }
  .dir-grid { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .dir-card__link { padding: 1.1rem; }
  .dir-card__top { gap: 1rem; }
  .dir-badge { font-size: .63rem; }
  .directory .dir-card h3 { min-height: 0; font-size: .9rem; margin-block: .8rem .25rem; }
  .dir-card__category { margin-bottom: .65rem !important; }
  .dir-card__foot { margin-top: .6rem; padding-top: .6rem; }
  .dir-empty { padding: 2rem 1rem; }
  .dir-empty p { font-size: .73rem; }
}
@media (max-width: 360px) {
  .dir-wrap { width: calc(100% - 1.5rem); }
  .dir-hero { padding: 1.15rem; }
  .directory h1 { font-size: 1.65rem; }
  .dir-type__icon { width: 30px; height: 30px; }
  .dir-type strong { font-size: .59rem; }
  .dir-type small { font-size: .5rem; }
  body.asnaf-arch-body .dir-type { gap: .4rem; padding-inline: .55rem; }
  .dir-hero__foot { gap: .4rem; }
  .dir-hero__foot a { padding-inline-start: .5rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .directory *, .directory *::before, .directory *::after { transition: none !important; animation: none !important; } }
