/* Shared or Private at a glance: a green or amber stripe down a card's left edge. The
   stripe is never the only sign: Private items also show a lock and the word Private. */
.stripe-shared { border-left: 5px solid #2f9e6e; }
.stripe-private { border-left: 5px solid #e0a400; }

/* The selected card, while its item is open in the drawer. */
.card.is-selected { outline: 2px solid #485fc7; }

/* The item drawer: laid over the cards on the right, without dimming or moving them. */
.drawer {
  position: fixed;
  top: 3.25rem;
  right: 0;
  bottom: 0;
  width: min(420px, 95vw);
  background: #fff;
  z-index: 30;
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  padding: 1rem 1rem 3rem;
}

.shortcuts { border-bottom: 1px solid #e5e5e5; }

/* A Character's ability scores: a bar out of 20 each, green when strong (16 and over) and
   red when weak (8 and under). The score is always written beside the bar as well. */
.abilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 1rem; }
.abilities.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 0.75rem; margin-top: 0.5rem; font-size: 0.75rem; }
.ability { display: flex; align-items: center; gap: 0.4rem; }
.ability dt { width: 2.2rem; font-weight: 600; }
.ability dd { display: flex; flex: 1; align-items: center; gap: 0.4rem; margin: 0; }
.ability .progress { flex: 1; margin: 0; height: 0.5rem; }
.ability .ability-score { white-space: nowrap; }
.ability.is-strong .progress { --bulma-progress-value-background-color: #2f9e6e; }
.ability.is-weak .progress { --bulma-progress-value-background-color: #cc0f35; }
.ability.is-middling .progress { --bulma-progress-value-background-color: #485fc7; }