/* Cards.
   Flat geometric shapes, never illustration. The abstraction is the style.

   Two riso devices do the work:
   1. Misregistration. The fill plate is offset from the line plate by a couple
      of pixels, per card and stable, so it reads as printing not animation.
   2. Feelings print in the second ink only. A table crowding with unprocessed
      grief visibly shifts colour, which makes the central mechanic legible at
      a glance before any number is read. */

.card {
  --plate: var(--ink-a);
  --fill: var(--ink-a-10);

  position: relative;
  isolation: isolate;
  width: 11rem;
  min-height: 8.5rem;
  padding: var(--space-2) var(--space-2) 1.5rem;
  border: 1.5px solid var(--plate);
  background: transparent;
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--duration) var(--ease);
}

/* The fill plate, printed slightly out of register. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fill);
  mix-blend-mode: multiply;
  transform: translate(var(--mis-x, 1px), var(--mis-y, 1px));
}

.card:hover,
.card:focus-visible {
  transform: rotate(0deg) translate(-2px, -3px);
}

.card:hover::before {
  transform: translate(calc(var(--mis-x, 1px) * 2), calc(var(--mis-y, 1px) * 2));
}

.card.is-dragging {
  opacity: 0.4;
}

.card__kind {
  margin: 0 0 var(--space-1);
  font-family: var(--face-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--plate);
  opacity: 0.55;
}

.card__title {
  margin: 0 0 var(--space-1);
  font-family: var(--face-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.card__text {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--ink-a-70);
}

.card__put {
  position: absolute;
  right: var(--space-1);
  bottom: var(--space-1);
  padding: 2px 5px;
  border: 0;
  background: transparent;
  color: var(--ink-a-45);
  font-family: var(--face-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration) var(--ease), color var(--duration) var(--ease);
}

.card:hover .card__put,
.card:focus-within .card__put {
  opacity: 1;
}

.card__put:hover {
  color: var(--ink-b);
}

/* ------------------------------------------------------- the second ink */

.card--feeling {
  --plate: var(--ink-b);
  --fill: var(--ink-b-20);
  border-width: 2px;
}

.card--feeling .card__title {
  color: var(--ink-b);
}

.card--feeling .card__text {
  color: color-mix(in srgb, var(--ink-b) 75%, var(--ink-a));
}

/* Feelings cannot be put down. There is no affordance because there is no
   action, and the missing button is the point. */

/* --------------------------------------------------------- other plates */

.card--understanding {
  border-width: 2px;
  border-style: double;
  --fill: transparent;
}

.card--understanding .card__title {
  font-style: italic;
}

.card--memory {
  --fill: transparent;
  border-style: solid;
  border-color: var(--ink-a-45);
}

/* People get a headstone arch. The radius has to stay small enough that the
   curve clears the title, or it reads as a rendering bug rather than a shape. */
.card--person {
  --fill: transparent;
  border-radius: 3.5rem 3.5rem 2px 2px;
  padding-top: 1.5rem;
  text-align: center;
}

.card--person .card__put {
  right: 50%;
  transform: translateX(50%);
}

.card--room {
  --fill: var(--ink-a-20);
}

.card--object {
  --fill: var(--ink-a-10);
}