:root{
  --card-r:12px;
  --shadow-sm:0 2px 6px rgba(0,0,0,.06);
}

/* Header area */
.pub-hero{ margin:18px 0 12px }
.pub-hero h1{ margin:0 0 6px }
.lead{ color:var(--muted) }

/* Toolbar */
.toolbar{
  display:grid; grid-template-columns:1fr 140px 220px 220px 100px;
  gap:10px; margin-top:12px;
}



/* --- Toolbar: make Clear always visible and accessible --- */
.toolbar .btn {                 /* keep your base .btn */
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
}

/* specific style for the Clear button */
.toolbar .btn-clear{
  background: #f1f5f9;                       /* light slate */
  border: 1px solid rgba(15,23,42,.18);
  color: #0f172a;                             /* readable text */
  border-radius: 10px;
}

.toolbar .btn-clear:hover{
  background: #e2e8f0;
}

.toolbar .btn-clear:focus{
  outline: 2px solid #94a3b8;
  outline-offset: 2px;
}

/* ensure inputs/selects don’t look disabled next to the button */
.toolbar input,
.toolbar select{
  background: #fff;
  color: var(--text);
}

/* optional: placeholder contrast */
.toolbar input::placeholder{
  color: color-mix(in srgb, var(--muted) 70%, #000 30%);
}





.toolbar input,.toolbar select,.toolbar .btn{
  height:40px; border:1px solid var(--line); border-radius:10px; padding:0 10px; background:#fff;
}
.btn{ cursor:pointer; box-shadow:var(--shadow-sm) }
.btn-ghost{ background:#fff }

/* Grid */
.pub-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:12px; margin-top:14px;
}

/* Card – now compact */
.pub-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--card-r);
  box-shadow:var(--shadow-sm); padding:14px; display:flex; flex-direction:column; gap:10px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pub-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  border-color:color-mix(in srgb, var(--brand) 20%, var(--line));
}

.pub-title{ margin:0; font-size:1.05rem; line-height:1.3 }
.pub-meta{ color:var(--muted); font-size:.95rem }

/* Authors row (avatars) */
.authors{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.author-avatars{ display:flex; align-items:center }
.avatar{
  width:28px; height:28px; border-radius:999px; border:1px solid #fff;
  box-shadow:0 1px 2px rgba(0,0,0,.15); object-fit:cover; background:#eef1f5;
  margin-right:-8px; /* stacked look */
}
.avatar[alt]{ /* no change; just keep alt for a11y */ }

.author-names{ color:var(--text); font-size:.92rem }
.author-names .sep{ color:var(--muted) }

.load-more-wrap{ display:flex; justify-content:center; margin:16px 0 24px }
.hidden{ display:none !important }

@media (max-width:880px){
  .toolbar{ grid-template-columns:1fr 1fr; grid-auto-rows:40px }
  .pub-grid{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
}