/* End-of-day answer key: one collapsible card per prompt, each in its own era's
   styling (the card carries data-era, so the era's colour and font tokens apply). */

.answer-key { margin: 22px 0 0; }
.key-title { margin: 0 0 10px; font: 800 1.5rem/1.1 "Big Shoulders Display", "Arial Narrow", sans-serif; color: var(--on-bg); }
.key-items { display: grid; gap: 10px; }

.key-item {
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-body);
  border: var(--panel-border);
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
}
[data-era="1990s"].key-item { border-color: #ffffff #808080 #808080 #ffffff; }

.key-sum {
  display: grid; grid-template-columns: 1.6rem 1fr auto 12px; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer; list-style: none;
}
.key-sum::-webkit-details-marker { display: none; }
.key-sum::after { /* disclosure chevron */
  content: ""; grid-column: 4; grid-row: 1; justify-self: center;
  width: 8px; height: 8px; margin-top: -4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform 0.2s ease; opacity: 0.7;
}
.key-item[open] > .key-sum::after { transform: rotate(-135deg); margin-top: 4px; }
.key-sum:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.key-emoji { font-size: 1.15rem; }
.key-head { display: grid; gap: 2px; min-width: 0; }
.key-q {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-size: 1.02rem; line-height: 1.2;
}
.key-you { font-size: 0.84rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-pts { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

.key-body { padding: 0 14px 12px; }
.key-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.key-list li {
  display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 8px; align-items: baseline;
  padding: 6px 8px; border-radius: calc(var(--radius) * 0.4);
}
.key-list li.mine { background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.key-list li.pinned { margin-top: 6px; border-top: 1px dashed var(--line); padding-top: 8px; }
.k-rank { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.k-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.k-sub { display: block; font-weight: 400; font-size: 0.8rem; color: var(--muted); }
.k-tag { font-size: 0.75rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.key-yours { margin: 8px 0 0; padding: 6px 8px; font-size: 0.88rem; border-radius: calc(var(--radius) * 0.4);
  background: color-mix(in srgb, var(--ink) 6%, transparent); }
.key-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.key-source { font-size: 0.78rem; color: var(--muted); }
.key-more {
  border: 1px solid currentColor; background: transparent; color: var(--ink);
  border-radius: var(--radius-btn); padding: 6px 12px; min-height: 36px; font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.key-more:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* opening a card: rows slide in (plain fade under reduced motion) */
.key-item[open] .key-list li { animation: key-row 0.25s ease-out both; }
.key-item[open] .key-list li:nth-child(2) { animation-delay: 30ms; }
.key-item[open] .key-list li:nth-child(3) { animation-delay: 60ms; }
.key-item[open] .key-list li:nth-child(4) { animation-delay: 90ms; }
.key-item[open] .key-list li:nth-child(n + 5) { animation-delay: 120ms; }
@keyframes key-row { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .key-item[open] .key-list li { animation: plain-fade 0.2s ease-out both; animation-delay: 0s; }
  .key-sum::after { transition: none; }
}