/* A fit-screen (theme.css): the rune board and the results on the left, the
   results scrolling, and the options beside them. */
.finder-board { margin-bottom: 16px; }
.stash { justify-self: start; max-width: 100%; }
.finder-controls { align-self: start; }
@media not ((min-width: 1101px) and (min-height: 600px)) {
  .finder-controls { margin-bottom: 20px; }
  .finder-filters { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 16px; }
  .finder-filters label.checkbox { grid-column: 1 / -1; }
}
.finder-controls { display: flex; flex-direction: column; gap: 14px; }
.finder-controls .hint { margin: 0 0 8px; }
.finder-controls .segmented-options { flex-wrap: nowrap; }
.finder-controls .segmented label { padding: 5px 12px; white-space: nowrap; }
.finder-controls label.checkbox { font-weight: 400; }

.finder-filters { display: grid; gap: 0; margin-top: 6px; }
.finder-filters .field { margin-bottom: 12px; }

/* ---- Results ---- */

.finder-results { display: flex; flex-direction: column; gap: 24px; }
.finder-status { margin: 0; padding: 10px 14px; background: var(--tooltip); border: 1px solid #3b3b3b; }
.finder-status .link-button { margin-left: 12px; }
.finder-empty { margin: 0; color: var(--text-dim); }

.rw-group h2 { font-size: var(--step-2); margin-bottom: 12px; }
.rw-count { font-family: var(--font-body); font-size: var(--step-0); color: var(--text-dim); }
.rw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 10px; }

.rw-result {
  padding: 14px 16px;
  background: var(--tooltip);
  border: 1px solid #3b3b3b;
  font-variant-numeric: lining-nums tabular-nums;
}
.rw-result header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rw-name { font-size: var(--step-1); color: var(--q-unique); text-decoration: none; }
.rw-name:hover { text-decoration: underline; }
.rw-level { font-size: var(--step--1); color: var(--text-dim); }
.rw-level.req { color: var(--q-red); }
.rw-goes { margin: 2px 0 8px; font-size: var(--step--1); color: var(--text-dim); }

.rune-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; }
.rune-chips li { padding: 1px 8px; border: 1px solid; border-radius: 999px; font-size: var(--step--1); }
.rune-chips .have { color: var(--q-crafted); border-color: rgb(255 168 0 / 0.4); }
.rune-chips .missing { color: var(--q-red); border-color: rgb(255 90 90 / 0.4); border-style: dashed; }

.rw-ready { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rw-ready li { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--q-normal); }
.rw-ready .button { padding: 5px 14px; white-space: nowrap; }
.rw-need { margin: 0; color: var(--q-magic); }
.rw-missing { margin: 0; color: var(--q-red); }