/* Activity cards and the deck (js/activityCard.js).
   A card is the activity's tile, its title centred, and its rating in two corners on a chip
   that runs green (0) to red (10). The number is always written on the chip, so the colour is
   never the only thing saying how hard a card is. Every chip passes AA with the dark numeral. */

.acCard {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 18px rgba(42, 39, 68, 0.08);
  color: var(--bia-fg);
  font-family: inherit;
  text-align: center;
}
/* A title is never cut off. Cards have a min-height, not a height: the sizes below fit the
   longest titles in the catalog, and anything longer (a long translation) grows the card
   instead of being clipped. The top and bottom padding only clears the corner chips; the
   sides are kept narrow so the title gets the width. */
.acCard-lg {
  width: 216px;
  min-height: 292px;
  padding: 50px 12px;
  gap: 10px;
  border-radius: 22px;
}
.acCard-sm {
  width: 104px;
  min-height: 150px;
  padding: 26px 4px;
  gap: 5px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(42, 39, 68, 0.07);
}
.acArt { display: flex; justify-content: center; flex: 0 0 auto; }
.acTitle {
  display: block;
  margin: 0;
  max-width: 100%;
  font-weight: 600;
  color: var(--bia-fg);
  overflow-wrap: break-word;
  hyphens: auto;
}
.acCard-lg .acTitle { font-size: 17px; line-height: 1.3; }
.acCard-lg.acLen-l .acTitle { font-size: 16px; line-height: 1.28; }
.acCard-sm .acTitle { font-size: 11px; line-height: 1.2; }

/* A long title takes the whole face and the (smaller) tile moves to the free top corner: top
   right beside the rating chip, or top left on a card with no chips, where the pick tick
   holds the top right. */
.acLen-l .acArt { position: absolute; }
.acCard-lg.acLen-l .acArt { top: 12px; right: 12px; }
.acCard-md.acLen-l .acArt { top: 10px; right: 10px; }
.acCard-sm.acLen-l .acArt { top: 4px; right: 4px; }
.acCard-sm.acLen-l { padding-top: 31px; }
.acCard-lg.acNoCorners.acLen-l .acArt { right: auto; left: 12px; }
.acCard-md.acNoCorners.acLen-l .acArt { right: auto; left: 10px; }
.acCard-sm.acNoCorners.acLen-l .acArt { right: auto; left: 4px; }

/* Corner index, top left and bottom right like a playing card. Not rotated: upside down a 6
   reads as a 9. */
.acCorner { position: absolute; display: flex; }
.acCard-lg .acCorner { top: 12px; left: 12px; }
.acCard-lg .acCornerBottom { top: auto; left: auto; bottom: 12px; right: 12px; }
.acCard-sm .acCorner { top: 5px; left: 5px; }
.acCard-sm .acCornerBottom { top: auto; left: auto; bottom: 5px; right: 5px; }

.acNum {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #1d1b2e;
  /* Unrated: an empty dashed slot where the number will land. */
  border: 1.5px dashed #c9c6da;
  background: transparent;
}
.acCard-lg .acNum { min-width: 32px; height: 32px; padding: 0 6px; border-radius: 9px; font-size: 16px; }
.acCard-sm .acNum { min-width: 20px; height: 20px; padding: 0 4px; border-radius: 6px; font-size: 11px; }
.acNum.acR0, .acNum.acR1, .acNum.acR2, .acNum.acR3, .acNum.acR4, .acNum.acR5,
.acNum.acR6, .acNum.acR7, .acNum.acR8, .acNum.acR9, .acNum.acR10 {
  border: 1px solid rgba(29, 27, 46, 0.16);
}
.acNum.acR0  { background: #73de8d; }
.acNum.acR1  { background: #73de75; }
.acNum.acR2  { background: #88de73; }
.acNum.acR3  { background: #a0de73; }
.acNum.acR4  { background: #b8de73; }
.acNum.acR5  { background: #d1de73; }
.acNum.acR6  { background: #ded373; }
.acNum.acR7  { background: #debb73; }
.acNum.acR8  { background: #dea373; }
.acNum.acR9  { background: #de8b73; }
.acNum.acR10 { background: #de7373; }

/* A tappable card (in the deck). Lifts on hover and focus; transform only, so nothing reflows. */
button.acCard { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
button.acCard:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(42, 39, 68, 0.12); }
button.acCard:focus-visible { outline: 3px solid var(--bia-focus); outline-offset: 2px; }

/* The number landing in the corners. */
.acStamp .acNum { animation: acStampPop 0.36s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes acStampPop {
  from { transform: scale(1.5); }
  to   { transform: scale(1); }
}

/* The copy of the big card that flies into the deck. Positioned by activityCard.js. */
.acGhost {
  position: fixed;
  z-index: 1100;
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease;
}
.acLanded .acCard { animation: acLanded 0.45s ease; }
@keyframes acLanded {
  0%   { box-shadow: 0 0 0 3px rgba(108, 95, 192, 0.45); }
  100% { box-shadow: 0 3px 10px rgba(42, 39, 68, 0.07); }
}
.acDismiss { animation: acDismiss 0.26s ease forwards; }
@keyframes acDismiss {
  to { transform: translateY(24px) rotate(-4deg); opacity: 0; }
}

/* Two cards side by side (the goal tool's "which is harder" round). */
.acCard-md {
  width: 160px;
  min-height: 212px;
  padding: 16px 8px;
  gap: 8px;
  border-radius: 18px;
}
.acCard-md.acLen-l { padding-top: 44px; }
/* With rating corners (the card being rated, on a screen too short for the large card). */
.acCard-md:not(.acNoCorners) { padding: 42px 8px; }
.acCard-md .acCorner { top: 9px; left: 9px; }
.acCard-md .acCornerBottom { top: auto; left: auto; bottom: 9px; right: 9px; }
.acCard-md .acNum { min-width: 26px; height: 26px; padding: 0 5px; border-radius: 8px; font-size: 14px; }
.acCard-md .acTitle { font-size: 14px; line-height: 1.25; }

/* A toggle card, picked. The ring is an inset shadow and the tick sits in the corner, so being
   picked repaints the card without changing its size; aria-pressed carries it for screen
   readers, and the tick means it never rests on colour alone. */
.acPick {
  position: absolute;
  top: 7px;
  right: 7px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bia-accent);
  color: #fff;
}
.acCard.acPicked { box-shadow: inset 0 0 0 2.5px var(--bia-accent), 0 6px 16px -8px rgba(104, 83, 212, 0.45); }
.acCard.acPicked .acPick { display: inline-flex; }
button.acCard.acPicked:hover { box-shadow: inset 0 0 0 2.5px var(--bia-accent), 0 8px 18px rgba(42, 39, 68, 0.12); }
@media (forced-colors: active) {
  .acCard.acPicked { outline: 3px solid CanvasText; outline-offset: -3px; }
}

/* A hand of cards to tap, and a pair to choose between. */
.acHand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 10px auto 4px;
  max-width: 520px;
}
.acPair {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 10px auto 4px;
}

/* Cards leaving once sorted: up is counted in, down is set aside. */
.acSortUp   { animation: acSortUp 0.42s cubic-bezier(0.4, 0, 1, 1) forwards; }
.acSortDown { animation: acSortDown 0.42s cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes acSortUp {
  30%  { transform: translateY(6px); }
  100% { transform: translateY(-60px) scale(0.9); opacity: 0; }
}
@keyframes acSortDown {
  100% { transform: translateY(40px) scale(0.92); opacity: 0; }
}

/* The deck: one row, easiest on the left, scrolled inside itself rather than the page. */
.acDeck {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 6px 4px 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
/* Each slot is a flex box so its card stretches to the row's tallest: a long title makes every
   card in the deck a little taller rather than leaving one sticking out. */
.acDeckSlot { flex: 0 0 auto; display: flex; scroll-snap-align: center; }
/* A fanned deck (activityCard.js fanLayout): the cards overlap so the whole deck fits on one
   row. activityCard.js sets each card's negative left margin; the room above the row is for
   the raised card. touch-action lets a finger slide sideways along the row to raise each
   card in turn while a vertical swipe still scrolls the page. */
.acDeck.acFan {
  gap: 0;
  justify-content: center;
  overflow: visible;
  padding: 18px 0 8px;
  scroll-snap-type: none;
  touch-action: pan-y;
}
.acFan .acDeckSlot { position: relative; }
.acFan .acCard { transition: transform 0.18s ease, box-shadow 0.18s ease; box-shadow: -2px 2px 8px rgba(42, 39, 68, 0.10); }
.acFan button.acCard:hover { transform: none; box-shadow: -2px 2px 8px rgba(42, 39, 68, 0.10); }
.acFan .acDeckSlot.acPopped { z-index: 2; }
/* Once the cards overlap, each card is laid out from its left edge (rating corner, then the
   tile, then the start of the title), so the strip a covered card shows is its own face
   peeking out, not the middle of a centred title cut in half. Every card in the row gets the
   same layout, raised or not, so raising one never re-flows its text. */
.acFan.acOverlap .acCard {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 30px 6px 24px 7px;
  text-align: left;
}
.acFan.acOverlap .acLen-l .acArt { position: static; }
.acFan .acPopped .acCard,
.acFan .acPopped button.acCard:hover {
  transform: translateY(-16px);
  box-shadow: 0 12px 24px rgba(42, 39, 68, 0.20);
}

.acDeckEnds {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--bia-fg-muted, #57556b);
  padding: 0 4px;
}

@media (max-width: 480px) {
  .acCard-lg { width: 200px; min-height: 268px; padding: 48px 10px; }
  .acCard-lg .acTitle { font-size: 16px; }
  .acCard-lg.acLen-l .acTitle { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .acStamp .acNum, .acLanded .acCard, .acDismiss, .acSortUp, .acSortDown { animation: none; }
  .acGhost, button.acCard, .acFan .acCard { transition: none; }
}