:root{
  --success-text:#256b60;
  --danger-text:#b42318;
  --warn-text:#8a5a12;
  --neutral-text:#4b5563;
  --blue:#1a2b4a;
}
/* Sans body, serif headings — same as the review board, so the rows, buttons
   and controls here match it. Scoped to the content: the masthead and side nav
   keep bold.css's type, as on every other page. */
main{font-family:var(--sans); font-size:15.5px; line-height:1.55;}
main button{font-family:inherit;}
/* ---------- hero ---------- */
.hero{max-width:var(--content-max); margin:0 auto; padding:64px var(--gutter) 10px;}
.hero h1{font-size:clamp(30px, 5vw, 44px); line-height:1.14; overflow-wrap:break-word; max-width:var(--article-max); text-wrap:balance;}
/* ---------- article ---------- */
main{max-width:var(--content-max); margin:0 auto; padding:8px var(--gutter) 24px;}
/* ---------- actions: list/grid toggle left, register button right ---------- */
.actions{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:28px;}
/* The review board's button (audit-board.css .btn / .btn-primary), so
   "+ Add new project" looks like "+ Register paper". */
.btn{
  font-family:inherit; font-weight:600; font-size:14px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:9px 16px; cursor:pointer; white-space:nowrap;
}
.btn:hover{border-color:var(--blue); color:var(--blue);}
.btn:disabled{color:var(--muted); opacity:.5; cursor:default;}
.btn:disabled:hover{border-color:var(--line); color:var(--muted);}
.btn-primary{background:var(--blue); color:#fff; border-color:var(--blue);}
.btn-primary:hover{background:#0f1c33; border-color:#0f1c33; color:#fff;}
.btn-primary:disabled{background:var(--surface); color:var(--muted); border-color:var(--line); opacity:.5;}
.btn-primary:disabled:hover{background:var(--surface); border-color:var(--line); color:var(--muted);}
a.btn{display:inline-block; text-decoration:none;}
main .btn-text{
  font-family:var(--sans); font-size:13px; color:var(--accent); background:none; border:none; padding:0;
  cursor:pointer; text-decoration:underline; text-decoration-color:rgba(26,43,74,.32); text-underline-offset:2px;
}
main .btn-text:hover{text-decoration-color:currentColor;}
/* ---------- search and filters ---------- */
.filters{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:20px;}
.filters input[type="search"], .filters select{
  font-family:var(--sans); font-size:14px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px;
}
.filters input[type="search"]{flex:1 1 240px; min-width:0;}
.filters select{flex:0 1 200px; min-width:0; max-width:100%;}
.filters [hidden]{display:none;}
/* ---------- tabs (same as the Collaboration Week page's) ---------- */
.tabs{display:flex; gap:28px; border-bottom:1px solid var(--line); margin-top:20px;}
.tab{
  font-family:var(--sans); font-size:14px; font-weight:500; color:var(--muted);
  background:none; border:none; border-bottom:2px solid transparent;
  padding:10px 2px; margin-bottom:-1px; cursor:pointer;
}
.tab:hover{color:var(--ink);}
.tab.active{color:var(--ink); font-weight:600; border-bottom-color:var(--accent);}
.proj-count{margin-left:6px; font-weight:400; color:var(--muted);}
/* ---------- view toggle ---------- */
.view-toggle{display:flex; border:1px solid var(--line);}
.view-btn{
  font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink-soft);
  background:none; border:none; padding:5px 14px; cursor:pointer;
}
.view-btn + .view-btn{border-left:1px solid var(--line);}
.view-btn:hover{color:var(--accent);}
.view-btn[aria-pressed="true"]{background:var(--wash); color:var(--accent); font-weight:600;}
.view-btn:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
/* ---------- projects (same rows as the profile page) ---------- */
.proj-list{list-style:none; margin:0; padding:0;}
.proj-list.tab-panel{margin-top:16px;}
.proj-list li{padding:12px 0; border-bottom:1px solid rgba(26,43,74,0.08);}
.proj-list li{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.proj-main{min-width:0;}
.proj-title{font-size:16px; font-weight:600;}
.proj-meta{display:block; margin-top:2px; font-family:var(--sans); font-size:13px; color:var(--muted);}
.proj-meta a{color:inherit;}
.proj-keywords{display:flex; flex-wrap:wrap; gap:4px 6px; margin-top:8px;}
.kw-tag{
  font-family:var(--sans); font-size:12px; color:var(--ink-soft); background:var(--wash);
  border:none; border-radius:10px; padding:1px 9px; cursor:pointer;
}
.kw-tag:hover{background:rgba(26,43,74,.14);}
.kw-tag.active{background:var(--accent); color:#fff;}
.kw-tag:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.proj-badges{display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:8px;}
.badge{
  font-family:var(--sans); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
  border:1px solid currentColor; padding:2px 7px; color:var(--neutral-text);
}
.badge-stage{color:var(--accent);}
.badge-review-approved, .badge-rebuttal-sent, .badge-outcome-accepted{color:var(--success-text);}
.badge-review-changes_requested, .badge-outcome-rejected{color:var(--danger-text);}
.badge-review-in_review, .badge-rebuttal-writing{color:var(--warn-text);}
.badge-rebuttal-waiting, .badge-outcome-withdrawn{color:var(--neutral-text);}
.join-btn{
  flex:none; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--accent);
  background:none; border:1px solid var(--accent); padding:6px 14px; cursor:pointer;
}
.join-btn:hover{background:var(--accent); color:#fff;}
.join-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.join-btn:disabled{opacity:.55; cursor:default;}
.join-btn:disabled:hover{background:none; color:var(--accent);}
.join-wrap{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.join-msg{font-family:var(--sans); font-size:13px; color:var(--muted); max-width:220px; text-align:right;}
.join-msg:empty{display:none;}
.proj-abstract{
  margin:8px 0 0; font-size:15px; color:var(--ink-soft);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.proj-empty{margin:0; font-family:var(--sans); font-size:14px; color:var(--muted);}
.proj-msg{font-family:var(--sans); font-size:14px; color:var(--muted); margin:14px 0 0;}
.proj-msg[hidden], #projects[hidden]{display:none;}
/* ---------- grid ---------- */
#projects[data-view="grid"] .proj-list{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px;
}
#projects .proj-list[hidden]{display:none;}
#projects[data-view="grid"] .proj-list li{
  padding:16px; border:1px solid var(--line); border-bottom:1px solid var(--line);
  flex-direction:column; align-items:flex-start; justify-content:flex-start;
}
/* Cards in a row stretch to equal height; the text takes the slack so the
   button lands bottom-left on every card, whatever its title or badges. */
#projects[data-view="grid"] .proj-main{flex:1 1 auto; align-self:stretch;}
#projects[data-view="grid"] .join-wrap{margin-top:14px; align-items:flex-start;}
#projects[data-view="grid"] .join-msg{text-align:left;}
#projects[data-view="grid"] .proj-list li.proj-none{grid-column:1 / -1; padding:0; border:none;}
@media (max-width:820px){
  .hero{padding:44px var(--gutter) 8px;}
}