/* Reusable pieces. Every one of them is rendered in every state on
 * design.html, so the whole system can be reviewed without playing through
 * a week of the app.
 *
 * Reads only from tokens.css. No raw values here.
 */

/* --- Card -----------------------------------------------------------------
 * The word card is the app. Everything else is scaffolding around it.
 */

.card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: transform var(--speed-normal) var(--ease-bounce),
    box-shadow var(--speed-normal) var(--ease-out);
}

.card--raised {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card--right {
  box-shadow: var(--shadow-glow-right);
}

.card--wrong {
  /* A slow settle rather than a shake. The card is disappointed with itself,
   * not angry with the user. */
  animation: card-settle var(--speed-slow) var(--ease-bounce);
}

@keyframes card-settle {
  0% {
    transform: translateY(-6px) rotate(-0.6deg);
  }
  60% {
    transform: translateY(2px) rotate(0.3deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

.card__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-2);
}

.card__definition {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

.card__term {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent-deep);
  line-height: var(--leading-tight);
}

.card__body {
  margin-top: var(--space-4);
  color: var(--color-ink-soft);
}

.card__example {
  margin-top: var(--space-4);
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent-soft);
  font-style: italic;
  color: var(--color-ink-soft);
}

/* --- Mnemonic -------------------------------------------------------------
 * Visually distinct from the definition. This is the fun bit, and it should
 * look like the fun bit.
 */

.mnemonic {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-gold-soft);
  border-radius: var(--radius-lg);
  color: var(--color-ink);
}

.mnemonic__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a7a1f;
  margin-bottom: var(--space-2);
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  min-height: 3rem;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: transform var(--speed-fast) var(--ease-bounce),
    box-shadow var(--speed-fast) var(--ease-out),
    background-color var(--speed-fast) var(--ease-out);
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--color-accent);
  color: #fff;
  box-shadow: var(--shadow-glow-accent);
}

.btn--primary:hover:not(:disabled) {
  background: var(--color-accent-deep);
}

.btn--soft {
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
}

.btn--soft:hover:not(:disabled) {
  background: #ffd7c4;
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink-soft);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--color-surface-sunken);
  color: var(--color-ink);
}

.btn--block {
  width: 100%;
}

/* --- Answer field --------------------------------------------------------- */

.answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.answer__input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--color-line-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  transition: border-color var(--speed-fast) var(--ease-out),
    box-shadow var(--speed-fast) var(--ease-out);
}

.answer__input::placeholder {
  color: var(--color-ink-faint);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.answer__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.answer__input--right {
  border-color: var(--color-right);
  box-shadow: 0 0 0 4px var(--color-right-soft);
}

.answer__input--wrong {
  border-color: var(--color-wrong);
  box-shadow: 0 0 0 4px var(--color-wrong-soft);
}

.answer__hint {
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  padding-left: var(--space-4);
}

/* --- Verdict --------------------------------------------------------------
 * The message after an answer. Three states, three temperatures.
 */

.verdict {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  animation: verdict-pop var(--speed-normal) var(--ease-bounce);
}

@keyframes verdict-pop {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.verdict--right {
  background: var(--color-right-soft);
  color: #237a58;
}

.verdict--close {
  background: var(--color-gold-soft);
  color: #8a6a12;
}

.verdict--wrong {
  background: var(--color-wrong-soft);
  color: #b8455a;
}

.verdict__icon {
  font-size: var(--text-xl);
  line-height: 1;
}

/* --- Badges and pills ----------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.03em;
}

.pill--category {
  background: var(--color-brand-soft);
  color: #6b5b96;
}

.pill--rare {
  background: var(--color-gold-soft);
  color: #9a7a1f;
}

.pill--streak {
  background: var(--color-gold);
  color: #6b4c00;
}

/* --- Progress -------------------------------------------------------------
 * Seven dots, one per day of the week. Small, glanceable, no numbers.
 */

.progress {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.progress__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-line-strong);
  transition: background-color var(--speed-normal) var(--ease-out),
    transform var(--speed-normal) var(--ease-bounce);
}

.progress__dot--done {
  background: var(--color-right);
}

.progress__dot--missed {
  background: var(--color-wrong);
}

.progress__dot--today {
  background: var(--color-accent);
  transform: scale(1.35);
}

/* --- Settings -------------------------------------------------------------
 * Chips rather than checkboxes for the categories: the choice is a small set
 * of tags, and a tapped chip reads as chosen at a glance on a phone.
 */

.setting {
  margin-top: var(--space-5);
}

.setting:first-child {
  margin-top: var(--space-4);
}

.setting__label {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-1);
}

.setting__help {
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  margin-bottom: var(--space-3);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: transform var(--speed-fast) var(--ease-bounce),
    background-color var(--speed-fast) var(--ease-out),
    border-color var(--speed-fast) var(--ease-out);
}

.chip:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.chip[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.chip__count {
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  opacity: 0.75;
}

/* --- Toggle ---------------------------------------------------------------
 * The native checkbox stays in the DOM and keeps the keyboard and screen
 * reader behaviour; only its appearance is replaced.
 */

.toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle__track {
  flex: 0 0 auto;
  width: 3rem;
  height: 1.75rem;
  padding: 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-line-strong);
  transition: background-color var(--speed-normal) var(--ease-out);
}

.toggle__knob {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed-normal) var(--ease-bounce);
}

.toggle input:checked + .toggle__track {
  background: var(--color-accent);
}

.toggle input:checked + .toggle__track .toggle__knob {
  transform: translateX(1.25rem);
}

.toggle input:focus-visible + .toggle__track {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.toggle__text {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
}

/* --- Empty and loading states --------------------------------------------- */

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--color-ink-soft);
}

.state__art {
  font-size: var(--text-3xl);
  opacity: 0.7;
}

.state__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}

.spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--color-accent-soft);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-pill);
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}