/* The achievements editor ------------------------------------------------- */

/* The achievements editor: a card per achievement, the open one grown in
   place under its row. The quiz's card (quiz-editor.css) — a piece of the
   game. The row lights up because it opens. */
.ach-card {
  /* One column that may be narrower than its content: a grid track's floor is
     the content's width, and a long rule on the head row was pushing every
     field under it out past the pane's edge. */
  grid-template-columns: minmax(0, 1fr);
}
.ach-card.on { border-color: color-mix(in oklab, var(--look-primary) 65%, transparent); }
.ach-row {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer;
  margin: -9px -11px; padding: 9px 11px; border-radius: var(--radius);
}
.ach-row:hover { background: color-mix(in oklab, var(--look-primary) 14%, transparent); }
.ach-row .aname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Squeezed, the rule gives way first and the name after it; the marker and
   the player count never do. */
.ach-row .hint { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 4 auto; }
.ach-row .warn, .ach-row .ach-count, .ach-row .ach-joy { flex-shrink: 0; }
/* The joy an achievement gives is a number worth looking at, so gold. */
.ach-joy { color: var(--num); font-weight: 700; font-size: 12px; white-space: nowrap; }
.ach-open .ach-chips-row { flex-wrap: wrap; }
.ach-chips-row button { white-space: nowrap; }
.ach-open { display: grid; gap: 6px; padding-top: 4px; border-top: 1px solid var(--border); }
.ach-open .row { flex-wrap: nowrap; }
.ach-open .cfg-text { flex: 1; min-width: 4rem; }
.ach-open .ach-icon-field { flex: 0 1 4rem; }
.ach-when { flex-wrap: wrap; }
.ach-when .cfg-text { flex: 0 1 9rem; }
.ach-when select { max-width: 12rem; }
/* The bin and the word, side by side: a picture alone is a button you press
   to find out about. */
.ach-delete { display: inline-flex; align-items: center; gap: 5px; }
/* Something to look at, not something broken: a story with a scene nothing
   leads to still runs. Crimson is danger and this is not that. */
.hint.warn { color: var(--accent); }