/* ---------- library choices ---------- */

.choices { width: min(560px, 100%); display: flex; flex-direction: column; gap: 14px; animation: rise 0.25s var(--ease); }
.choices-head { margin: 0; text-align: center; font: 400 22px/1.3 var(--serif); }
.choice-list { display: flex; flex-direction: column; gap: 8px; }
.choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.choice:hover, .choice:focus-visible { border-color: var(--accent); outline: none; }
.choice:active { transform: scale(0.99); }
.choice .n {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font: 13px var(--mono);
}
.choice .body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.choice .t { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.choice .p { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.choice.new { box-shadow: none; background: transparent; border-style: dashed; }
.choice.new .n { background: transparent; color: var(--accent); font-size: 16px; }