/* Card grid shared by /authors (similar researchers) and /author/<id>
   (publications): 5 per row, 4 rows = one page of 20. Fewer columns on
   narrower screens, where 5 would squeeze text onto many lines. */

.result-count { margin: .3rem 0 0; color: var(--text-muted); font-size: .8rem; }

/* The searched author's name in the results heading links to their page. */
.searched-author { color: var(--accent); font-weight: 600; text-decoration: none;
                   border-bottom: 1px dashed var(--link-underline); }
.searched-author:hover { border-bottom-style: solid; }
.result-empty, .result-error { padding: 1.5rem 0; color: var(--text-muted); }
.result-error { color: var(--error); }

.author-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
               gap: 12px; margin-top: 1rem; }
@media (max-width: 1100px) { .author-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .author-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .author-grid { grid-template-columns: 1fr; } }

.author-card { display: flex; flex-direction: column; gap: .35rem; padding: .8rem;
               border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface); min-width: 0; }
/* A whole card can be a link (similar researchers): no underline, and a
   visible hover/focus state so it reads as clickable. */
a.author-card { color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.author-card:hover { border-color: var(--accent-mid); box-shadow: 0 2px 8px var(--shadow); }
a.author-card:focus-visible { outline: 2px solid var(--accent-mid); outline-offset: 2px; }

.author-card-top { display: flex; justify-content: space-between; align-items: center;
                   color: var(--text-muted); font-size: .75rem; }
.author-card-rank { color: var(--text-muted); font-size: .75rem; }
.author-card-name { margin: 0; font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; }
.author-card-affil { margin: 0; color: var(--text-muted); font-size: .75rem; line-height: 1.3;
                     display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.author-card-stats { display: flex; justify-content: space-between; color: var(--text-muted); font-size: .75rem; margin-top: auto; }
.author-card-kw { min-height: 1.2rem; }

/* Match classes (authors.js MATCH_CLASSES). One green-to-grey family so
   "better" always looks greener; no red/amber, since a weak match is not an
   error. Each card sets --match-color, used by its top strip and its bar. */
.author-card { --match-color: var(--accent-mid); }
.match-card-perfect   { --match-color: var(--m-perfect-strip); }
.match-card-excellent { --match-color: var(--m-excellent-strip); }
.match-card-strong    { --match-color: var(--m-strong-strip); }
.match-card-good      { --match-color: var(--m-good-strip); }
.match-card-weak      { --match-color: var(--m-weak-strip); }
.author-card[class*="match-card-"] { border-top: 3px solid var(--match-color); }
.author-card[class*="match-card-"] .author-card-bar > span { background: var(--match-color); }

.match { cursor: help; display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .5rem .1rem .4rem;
         border-radius: 999px; font-size: .7rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.match-perfect   { background: var(--m-perfect-bg);   color: var(--m-perfect-text); }
.match-excellent { background: var(--m-excellent-bg); color: var(--m-excellent-text); }
.match-strong    { background: var(--m-strong-bg);    color: var(--m-strong-text); }
.match-good      { background: var(--m-good-bg);      color: var(--m-good-text); }
.match-weak      { background: var(--m-weak-bg);      color: var(--m-weak-text); }

/* 5-bar strength meter: rising bars, filled ones in the badge's text colour. */
.match-meter { display: inline-flex; align-items: flex-end; gap: 1.5px; height: .7rem; }
.match-meter > span { width: 3px; border-radius: 1px; background: currentColor; opacity: .25; }
.match-meter > span:nth-child(1) { height: 30%; }
.match-meter > span:nth-child(2) { height: 47%; }
.match-meter > span:nth-child(3) { height: 64%; }
.match-meter > span:nth-child(4) { height: 82%; }
.match-meter > span:nth-child(5) { height: 100%; }
.match-meter > span.on { opacity: 1; }

.result-bar { height: 2px; background: var(--track); }
.result-bar > span { display: block; height: 100%; background: var(--accent-mid); }
.author-card-bar { margin: 0; }

.result-kw { display: inline-block; margin: .3rem .3rem 0 0; padding: .05rem .45rem;
             border-radius: 999px; background: var(--surface-soft); color: var(--accent-text-soft); font-size: .75rem; }
.result-kw-none { font-style: italic; }
.result-coauthor { font-size: .7rem; color: var(--accent-mid); border: 1px solid var(--accent-mid);
                   border-radius: 3px; padding: 0 .3rem; }

/* Publication cards (/author/<id>) */
.pub-card-title { margin: 0; font-size: .9rem; line-height: 1.3; overflow-wrap: anywhere;
                  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pub-card-title a { color: var(--accent); text-decoration: none; }
.pub-card-title a:hover { text-decoration: underline; }
.pub-card-coauthors { margin: 0; margin-top: auto; color: var(--text-muted); font-size: .75rem; line-height: 1.35; }
.pub-card-coauthors a { color: var(--accent-mid); }

.pager { display: flex; justify-content: center; align-items: center; gap: 1rem;
         margin: 1.5rem 0; color: var(--text-secondary); font-size: .85rem; }
.pager button:disabled { opacity: .4; cursor: default; }

/* ---- Home page search (similarity.html / similarity.js) ------------------ */

/* Publication card, clickable as a whole: the title link's ::after covers the
   card, while author links inside sit above it and stay separately clickable. */
.pub-card { position: relative; transition: border-color .15s, box-shadow .15s; }
.pub-card .pub-card-title a::after { content: ""; position: absolute; inset: 0; }
.pub-card .pub-card-coauthors a { position: relative; z-index: 1; }
.pub-card:has(.pub-card-title a):hover { border-color: var(--accent-mid); box-shadow: 0 2px 8px var(--shadow); }
.pub-card .pub-card-title a:focus-visible { outline: none; }
.pub-card:has(.pub-card-title a:focus-visible) { outline: 2px solid var(--accent-mid); outline-offset: 2px; }

/* Search box and year inputs are styled here explicitly, so they do not depend
   on style.css (whose rules target other input types). */
.search-box { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
.search-box input,
.search-filters input[type="number"] {
  box-sizing: border-box; font: inherit; color: var(--text-strong); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.search-box input { flex: 1 1 22rem; max-width: 40rem; padding: .7rem 1rem; font-size: 1rem;
                    box-shadow: 0 1px 3px var(--shadow-soft); }
.search-box input::placeholder { color: var(--placeholder); }
.search-box input:focus,
.search-filters input[type="number"]:focus {
  outline: none; border-color: var(--accent-mid); box-shadow: 0 0 0 3px var(--focus-ring);
}
.search-box button { padding: .7rem 1.4rem; font: inherit; font-weight: 600; color: var(--on-accent);
                     background: var(--accent-strong); border: none; border-radius: 10px; cursor: pointer;
                     transition: background .15s; }
.search-box button:hover { background: var(--accent-strong-hover); }
.search-box button:focus-visible { outline: 2px solid var(--accent-mid); outline-offset: 2px; }

/* Year range: compact boxes without the browser's up/down spinners. */
.search-filters label { display: inline-flex; align-items: center; gap: .4rem; }
.search-filters input[type="number"] { width: 5.2rem; padding: .35rem .55rem; font-size: .85rem;
                                       text-align: center; -moz-appearance: textfield; }
.search-filters input[type="number"]::-webkit-outer-spin-button,
.search-filters input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


.search-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
                  gap: .6rem 1.2rem; margin: .9rem 0 .4rem; font-size: .85rem; color: var(--text-secondary); }
.inst-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.inst-chip { border: 1px solid var(--border); background: var(--surface); color: var(--accent-text-soft); border-radius: 999px;
             padding: .2rem .7rem; font-size: .78rem; cursor: pointer; }
.inst-chip[aria-pressed="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.link-button { background: none; border: none; color: var(--accent-mid); cursor: pointer; font-size: .8rem;
               text-decoration: underline; padding: 0; }

.name-matches { margin: 1rem 0 0; text-align: center; font-size: .85rem; color: var(--text-secondary); }
.name-matches a { display: inline-block; margin: .2rem .25rem; padding: .15rem .6rem; border-radius: 999px;
                  background: var(--surface-soft); color: var(--accent); text-decoration: none; }
.name-matches a:hover { background: var(--surface-soft-hover); }

.tabs { display: flex; justify-content: center; gap: .3rem; margin-top: 1.5rem; border-bottom: 1px solid var(--border-subtle); }
.tab { background: none; border: none; border-bottom: 3px solid transparent; border-radius: 0; padding: .55rem 1rem;
       font-size: .95rem; color: var(--text-secondary); cursor: pointer; margin-bottom: -1px; }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent-strong); font-weight: 600; }
.tab .count { display: inline-block; min-width: 1.6em; margin-left: .35rem; padding: 0 .4rem; border-radius: 999px;
              background: var(--surface-soft); color: var(--accent-text-soft); font-size: .75rem; font-weight: 600; }
.tab-note { text-align: center; color: var(--text-muted); font-size: .8rem; margin: .6rem 0 0; }

/* ---- /authors page: name suggestions, results header, filter toolbar ------ */

/* Suggestion dropdown under the name box. */
.combo-wrap { position: relative; flex: 1 1 22rem; max-width: 40rem; }
.combo-wrap input { width: 100%; max-width: none; }
.combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
              list-style: none; margin: 0; padding: .3rem; max-height: 22rem; overflow-y: auto;
              background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
              box-shadow: 0 8px 24px var(--shadow); text-align: left; }
.combo-option { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .7rem;
                border-radius: 8px; cursor: pointer; }
.combo-option:hover, .combo-option[aria-selected="true"] { background: var(--surface-soft); }
.combo-option .name { font-weight: 600; color: var(--accent); }
.combo-option .meta { font-size: .78rem; color: var(--text-muted); }
.combo-option.is-unmatchable .name { color: var(--text-secondary); font-weight: 500; }
.combo-empty { padding: .6rem .8rem; color: var(--text-muted); font-size: .85rem; }

/* "Researchers similar to X" with its actions. */
.results-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
                  gap: .5rem 1rem; margin-top: 1.5rem; }
.results-header h4 { margin: 0; font-size: 1.05rem; font-weight: 500; color: var(--text-secondary); }
.pill-link { padding: .45rem 1rem; border-radius: 10px; background: var(--surface-soft); color: var(--accent);
             font-size: .9rem; text-decoration: none; }
.pill-link:hover { background: var(--surface-soft-hover); }

/* Instant filters for the loaded results. */
.results-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
                   gap: .5rem 1rem; margin-top: 1rem; font-size: .85rem; }
.inst-chip .chip-count { margin-left: .3rem; opacity: .75; font-variant-numeric: tabular-nums; }
.inst-chip:disabled { opacity: .4; cursor: default; }