/* Collaboranker — /browse-boards (public board directory) styles.
   Loaded alongside welcome.css (shared tokens/nav/eyebrow/section-heading/
   footer-brand) — see browse_boards.html's head comment for why this and
   welcome.css are both external files rather than inline styles: the
   app's Content-Security-Policy has no 'unsafe-inline' for style-src (see
   CONTENT_SECURITY_POLICY in app.py). */

.directory-wrap{ max-width:820px; margin:0 auto; padding:56px 32px 120px; }
.directory-lede{ margin-bottom:32px; }

/* ---------- search box ---------- */
.search-box{ position:relative; margin-bottom:28px; }
.search-icon{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--ink-dim); pointer-events:none; }
.search-input{
  width:100%; background:var(--bg-raised); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); font-family:'Inter',sans-serif; font-size:15px; padding:13px 16px 13px 41px; outline:none;
}
.search-input::placeholder{ color:var(--ink-dim); }
.search-input:focus{ border-color:var(--flag); }

/* ---------- result count + sort toggle ---------- */
.sort-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.result-count{ font-size:11px; letter-spacing:0.1em; color:var(--ink-dim); text-transform:uppercase; }
.sort-toggle{ display:flex; align-items:center; gap:8px; }
.sort-label{ font-size:11px; color:var(--ink-dim); margin-right:2px; }
.sort-btn{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:11px; letter-spacing:0.03em;
  border:1px solid var(--line); border-radius:6px; padding:6px 11px; background:var(--bg);
  color:var(--ink-dim); cursor:pointer; transition:border-color 0.1s, color 0.1s;
}
.sort-btn:hover{ border-color:var(--flag-dim); color:var(--ink); }
.sort-btn.is-active{ border-color:var(--flag); color:var(--flag-bright); background:rgba(91,135,201,0.1); }

/* ---------- board list ---------- */
.board-list{ display:flex; flex-direction:column; gap:10px; }
.board-row-link{
  display:flex; align-items:center; gap:16px; padding:16px 18px; border:1px solid var(--line);
  border-radius:10px; background:var(--bg-raised); text-decoration:none; transition:border-color 0.12s;
}
.board-row-link:hover{ border-color:var(--flag-dim); }
.board-rank{ font-family:'Oswald',sans-serif; font-weight:600; font-size:20px; color:var(--ink-dim); width:28px; text-align:center; flex-shrink:0; }
.board-info{ flex:1; min-width:0; }
.board-name-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:5px; }
.board-name{ font-family:'Oswald',sans-serif; font-weight:600; font-size:16px; text-transform:uppercase; letter-spacing:0.01em; color:var(--ink); }
.board-public-tag{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--flag-bright); border:1px solid var(--flag-dim); border-radius:5px; padding:2px 7px;
}
.board-week-tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-dim); }
.board-stats{ text-align:right; flex-shrink:0; }
.board-stats-primary{ font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; color:var(--ink); }
.board-stats-secondary{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-dim); margin-top:2px; }
.board-row-chevron{ flex-shrink:0; color:var(--ink-dim); }

/* ---------- empty / error state ---------- */
.empty-state{ text-align:center; padding:48px 20px; color:var(--ink-dim); font-family:'Inter',sans-serif; font-size:14px; line-height:1.6; }

.directory-footnote{ font-size:11px; color:var(--ink-dim); line-height:1.6; margin-top:40px; padding-top:24px; border-top:1px solid var(--line); }
.directory-footer-brand{ margin-top:56px; }

@media (max-width: 560px){
  .sort-row{ flex-direction:column; align-items:flex-start; }
  .board-row-link{ flex-wrap:wrap; }
  .board-stats{ text-align:left; }
}