.directory-page{min-height:100dvh}.directory-page .directory-shell{display:block;flex:1;width:100%;max-width:1200px;margin:0 auto;padding:20px 24px 52px}.directory-intro{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.directory-kicker{margin:0 0 4px;font:700 10px/1.4 'IBM Plex Mono',monospace;letter-spacing:1.3px;color:var(--blue)}.directory-intro h1{font-size:26px;line-height:1.2;letter-spacing:-.7px}.directory-count{flex-shrink:0;font-size:11px;font-weight:700;color:var(--blue);background:#eaf1ff;padding:6px 10px;border-radius:999px}.directory-controls{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:8px;align-items:end}.directory-controls label{display:grid;gap:4px;font-size:11px;font-weight:700;color:var(--muted)}.directory-controls input,.directory-controls select{height:36px;min-width:0;width:100%;padding:0 9px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font:inherit;font-size:12px}.directory-controls input:focus-visible,.directory-controls select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.submit-project{height:36px;padding:0 11px;border:1px solid var(--blue);border-radius:6px;background:var(--blue);color:#fff;font-size:11px;font-weight:700}.directory-filters{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;padding:9px 0 2px;scrollbar-width:thin}.directory-filters button{white-space:nowrap;flex-shrink:0;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:11px;font-weight:600}.directory-filters button.selected{background:var(--blue);border-color:var(--blue);color:white}.directory-status{margin:9px 0;color:var(--muted);font-size:11px}.directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.project-card{min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:8px;background:var(--surface);box-shadow:0 3px 12px #1e3a5f08}.project-preview{height:88px;display:grid;place-items:center;border-bottom:1px solid var(--border)}.project-preview span{display:grid;place-items:center;width:50px;height:50px;border:1px solid #ffffff80;border-radius:13px;background:#ffffffd9;box-shadow:0 7px 16px #14213d1a;font:700 18px 'IBM Plex Mono',monospace;color:#1e3a5f}.project-preview.blue{background:linear-gradient(135deg,#dae9ff,#b4ccff)}.project-preview.violet{background:linear-gradient(135deg,#e6dfff,#c8b9ef)}.project-preview.teal{background:linear-gradient(135deg,#dcf6ef,#a8dfd0)}.project-preview.orange{background:linear-gradient(135deg,#fff0cf,#ffd1ad)}.project-preview.sky{background:linear-gradient(135deg,#dbf4ff,#acdfff)}.project-preview.green{background:linear-gradient(135deg,#e1f3d8,#bde2b5)}.project-body{padding:11px;display:flex;flex-direction:column;min-height:153px}.project-category{font-size:10px;color:var(--blue);font-weight:700}.project-body h2{margin:5px 0 4px;font-size:15px;line-height:1.3}.project-body h2 a{color:var(--text);text-decoration:none}.project-body h2 a:hover{color:var(--blue)}.project-body p{margin:0;font-size:11px;line-height:1.5;color:var(--muted);flex:1}.project-meta{display:flex;gap:7px;align-items:center;margin-top:7px;color:var(--muted);font-size:10px}.project-meta span:first-child{color:#ad7410;font-weight:700}.rank-badge{margin-left:auto;color:var(--blue);font-weight:700}.project-actions{display:flex;align-items:center;justify-content:space-between;margin-top:7px}.project-action{font-size:11px;font-weight:700;color:var(--blue);text-decoration:none}.review-action{padding:4px 7px;border:1px solid var(--border);border-radius:5px;color:var(--muted);font-size:10px}.review-action:hover{border-color:var(--blue);color:var(--blue)}.directory-empty{border:1px dashed var(--border);border-radius:8px;padding:24px;text-align:center;background:var(--surface)}.directory-empty[hidden]{display:none}.directory-empty h2{font-size:18px}.directory-empty p{color:var(--muted);font-size:12px}.directory-empty button{background:var(--blue);color:white;padding:8px 11px;border-radius:6px;font-weight:600;font-size:11px}.directory-submit{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:13px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}.directory-submit h2{margin:0 0 4px;font-size:16px}.directory-submit p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}.dark .directory-count{background:#243754;color:#a7c2ff}.dark .project-preview span{background:#ffffffd9;color:#1e3a5f}dialog{width:min(520px,calc(100% - 24px));padding:0;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);box-shadow:0 20px 70px #10203a33}dialog::backdrop{background:#10203a66}dialog form{display:grid;gap:9px;padding:15px}dialog .dialog-head{display:flex;align-items:center;justify-content:space-between}dialog h2{margin:0;font-size:18px}dialog .dialog-close{font-size:22px;color:var(--muted);line-height:1}dialog .dialog-help{margin:0;color:var(--muted);font-size:11px}dialog label{display:grid;gap:4px;font-size:11px;font-weight:700;color:var(--muted)}dialog input,dialog textarea,dialog select{width:100%;padding:7px 8px;border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--text);font:inherit;font-size:12px}dialog textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.form-status{min-height:15px;margin:0;color:var(--blue);font-size:11px}@media(max-width:850px){.directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.directory-page .directory-shell{padding:16px 12px 40px}.directory-intro{margin-bottom:12px}.directory-intro h1{font-size:22px}.directory-kicker{font-size:9px}.directory-count{font-size:10px;padding:5px 8px}.directory-controls{grid-template-columns:1fr 1fr}.directory-search{grid-column:1/-1}.directory-controls>.submit-project{grid-column:1/-1}.directory-grid{grid-template-columns:1fr;gap:7px}.project-card{display:grid;grid-template-columns:78px minmax(0,1fr)}.project-preview{height:100%;min-height:138px;border-bottom:0;border-right:1px solid var(--border)}.project-preview span{width:43px;height:43px;font-size:16px}.project-body{min-height:138px;padding:9px}.project-body h2{font-size:14px;margin:4px 0}.project-body p{font-size:10px}.directory-submit{display:block;padding:12px}.directory-submit .submit-project{margin-top:9px;width:100%}.form-row{grid-template-columns:1fr}}@media print{.directory-controls,.directory-filters,.directory-submit{display:none}.directory-grid{grid-template-columns:repeat(2,1fr)}}
.seo-preview{display:grid;gap:10px;min-width:min(560px,82vw);font-size:.9rem}.seo-preview img{width:100%;max-height:180px;object-fit:cover;border-radius:8px;background:#f3f5f7}.seo-preview h3{margin:0;font-size:1.15rem}.seo-preview p{margin:0;color:#4d5660;line-height:1.6}.seo-preview a{color:#2364d2;overflow-wrap:anywhere}.seo-preview small{color:#77818d}.project-actions{flex-wrap:wrap}
.upvote-action{display:inline-flex;align-items:center;gap:3px;padding:4px 7px;border:1px solid #f0b429;border-radius:5px;background:#fff8e5;color:#a56a00;font-size:10px;font-weight:700}.upvote-action:hover,.upvote-action.voted{background:#f0b429;color:#fff}.upvote-action:disabled{opacity:.55;cursor:wait}.upvote-action b{font-size:11px}.project-actions{justify-content:flex-start;gap:5px}.project-action{margin-right:auto}
.project-card{position:relative}.project-hover-preview{position:absolute;z-index:4;left:9px;right:9px;bottom:calc(100% + 7px);padding:9px 10px;border:1px solid var(--border);border-radius:7px;background:var(--surface);box-shadow:0 12px 30px #10203a26;color:var(--muted);font-size:11px;line-height:1.45;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .16s ease,transform .16s ease}.project-hover-preview.visible{opacity:1;transform:none}.project-hover-preview::after{content:"";position:absolute;left:20px;bottom:-6px;width:10px;height:10px;background:var(--surface);border-right:1px solid var(--border);border-bottom:1px solid var(--border);transform:rotate(45deg)}@media(max-width:600px){.project-hover-preview{display:none}}

.directory-more,.directory-error button{display:block;margin:16px auto 0;padding:9px 14px;border:1px solid var(--blue);border-radius:6px;background:var(--surface);color:var(--blue);font-size:12px;font-weight:700;cursor:pointer}.directory-more[hidden],.directory-error[hidden]{display:none}.directory-error{margin:16px 0;padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--surface);text-align:center}.directory-error p{margin:0;color:var(--muted);font-size:12px}

/* Live site previews in the directory */
.directory-grid{gap:14px}
.project-card{display:block;box-shadow:0 3px 14px #1e3a5f0a}
.project-preview{position:relative;display:block;width:100%;height:auto;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--border);background:#eaf0f8}
.project-preview iframe{position:absolute;top:0;left:0;width:1200px;max-width:none;border:0;transform-origin:top left;pointer-events:none;background:transparent}
.project-preview-link{position:absolute;z-index:2;inset:0;display:flex;align-items:flex-end;padding:10px;text-decoration:none}
.project-preview-link:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.project-preview .project-preview-label{display:inline-block;width:auto;height:auto;padding:6px 9px;border:1px solid var(--border);border-radius:5px;background:var(--surface);box-shadow:0 2px 8px #14213d20;color:var(--blue);font-size:11px;font-weight:700;line-height:1.3;font-family:inherit}
.project-body{min-height:166px}
.project-body h2{margin:6px 0;font-size:15px}
.project-body h2 a:focus-visible,.project-action:focus-visible,.project-external:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.project-actions{flex-wrap:wrap;gap:8px;margin-top:10px}
.project-action{margin-right:auto}
.project-external{font-size:11px;font-weight:600;color:var(--muted);text-decoration:none}
.project-external:hover{color:var(--blue);text-decoration:underline}
@media(max-width:600px){.project-card{display:block}.project-preview{height:auto;min-height:0;aspect-ratio:16/10;border-right:0;border-bottom:1px solid var(--border)}.project-body{min-height:0;padding:12px}.project-body p{font-size:11px}}

/* Captured webpage thumbnails and numbered pages */
.project-preview .project-thumbnail{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.project-preview-missing{display:grid;place-items:center;background:linear-gradient(135deg,#dfeafe,#c9d9fa)}
.project-preview .project-preview-name{display:block;width:auto;height:auto;max-width:80%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#294d88;font-weight:700;font-size:22px;line-height:1.25;font-family:inherit;text-align:center;overflow-wrap:anywhere}
.directory-pagination{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:24px 0 8px}
.directory-pagination[hidden]{display:none}
.directory-pagination button{min-width:34px;min-height:34px;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-size:12px;font-weight:700;cursor:pointer}
.directory-pagination button:hover{border-color:var(--blue);color:var(--blue)}
.directory-pagination button[aria-current="page"]{border-color:var(--blue);background:var(--blue);color:#fff}
.directory-pagination button:disabled{opacity:.4;cursor:default}
.directory-page-numbers{display:flex;align-items:center;gap:5px}
.directory-page-numbers>span{padding:0 3px;color:var(--muted)}
@media(max-width:600px){.directory-pagination{gap:5px}.directory-pagination button{padding:5px 8px}.project-preview .project-preview-name{font-size:20px}}
.directory-pagination{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:42px!important;margin:20px 0 10px!important;padding:0!important;gap:8px!important}
.directory-pagination>button,.directory-pagination>.directory-page-numbers{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;margin:0!important;vertical-align:middle!important}
.directory-pagination>.directory-page-numbers{align-items:center!important;gap:5px!important}
.directory-pagination button{white-space:nowrap!important;line-height:1!important}
@media(max-width:600px){.directory-pagination{justify-content:space-between!important;gap:6px!important}.directory-pagination>button{padding:8px!important}.directory-page-numbers{gap:3px!important}.directory-page-numbers button{min-width:32px!important;padding:7px!important}}