/* ==========================================================================
   app-rolodex.css — the address book.

   NeXT put a letter strip down the edge of anything alphabetical, so that a
   list of two hundred names could be walked with the hand instead of the
   scroll wheel. The strip here is the same object: dead letters are sunk and
   unclickable, which is its own small piece of information.
   ========================================================================== */

/* ------------------------------------------------------------- letter strip */
.rdx-alpha {
  flex: 0 0 20px;
  display: flex; flex-direction: column;
  padding: 2px 0;
  overflow: hidden;
  background: var(--gray);
  border-right: 1px solid var(--lo);
  box-shadow: inset -1px 0 0 var(--hi);
}
.rdx-letter {
  flex: 1 1 0;
  min-height: 7px;
  padding: 0;
  font-family: var(--mono); font-size: 8.5px; line-height: 1;
  color: var(--lo);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.rdx-letter:hover { background: var(--ink); color: var(--paper); }
.rdx-letter.off { color: var(--gray-dk); cursor: default; }
.rdx-letter.off:hover { background: transparent; color: var(--gray-dk); }
.rdx-letter:focus-visible { outline: 1px solid var(--ink); outline-offset: -1px; }

/* -------------------------------------------------------------- the list */
.browser .col.rdx-list { flex: 0 0 208px; }
.browser .col.rdx-list .row .nm { flex: 1 1 auto; }
.browser .col.rdx-list .row.rdx-anon .nm {
  font-family: var(--mono); font-size: 10.5px; opacity: .78;
}
.browser .col.rdx-list .row.rdx-anon.sel .nm { opacity: 1; }

/* -------------------------------------------------------------- the card */
.rdx-card .pad { max-width: 52ch; }
.rdx-card h2.rdx-noname {
  font-family: var(--mono); font-size: 12px; font-weight: normal;
  color: var(--lo);
  word-break: break-all;
}
.rdx-card p.rdx-since {
  font-size: 11px; color: var(--lo);
  margin: 6px 0 0;
  font-style: italic;
}
.rdx-card .facts dd { word-break: break-word; }
.rdx-card p.rdx-note {
  font-size: 12px; line-height: 1.5;
  margin: 0;
  padding: 7px 9px;
  background: var(--paper);
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  border-right: 1px solid var(--hi); border-bottom: 1px solid var(--hi);
  max-width: 46ch;
}
.btn.rdx-jump { font-size: 11px; padding: 3px 8px; max-width: 100%;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* group control: a run of buttons that reads as one segmented switch */
.shelf .btn.rdx-group { padding: 4px 8px; font-size: 11px; }

/* ------------------------------------------------------------------ narrow */
@media (max-width: 860px) {
  .browser .col.rdx-list { flex: 0 0 150px; }
  .rdx-alpha { flex: 0 0 17px; }
  .rdx-letter { font-size: 7.5px; }
  .shelf .btn.rdx-group { padding: 4px 6px; font-size: 10px; }
}

/* The co-authors group: real people, read out of the bibliography, with
   nothing attached to them but the papers. */
.rdx-real .when { font-variant-numeric: tabular-nums; opacity: .6; }
.rdx-realnote p { max-width: 50ch; font-size: 12px; margin: 0 0 9px; }
.rdx-pubs { margin: 6px 0 12px; padding: 0; list-style: none; }
.rdx-pubs li {
  padding: 4px 0; border-bottom: 1px solid var(--lo);
  box-shadow: 0 1px 0 var(--hi);
}
.rdx-pt { display: block; font-size: 11.5px; }
.rdx-pv { display: block; font-family: var(--mono); font-size: 9.5px; opacity: .6; margin-top: 1px; }