/* Layout per view. Components live in components.css; this file only decides
 * where they sit and how a view enters.
 *
 * Reads only from tokens.css. No raw values here.
 */

.shell {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 100dvh;
}

/* --- Header --------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
}

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

.topbar__greeting {
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
}

/* --- Views ---------------------------------------------------------------
 * Only one is visible at a time. Each arrives with a small rise so a change
 * of view is felt rather than just seen.
 */

.view {
  display: none;
  flex-direction: column;
  gap: var(--space-5);
}

.view[data-active="true"] {
  display: flex;
  animation: view-enter var(--speed-slow) var(--ease-bounce);
}

@keyframes view-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- View: today's new word ---------------------------------------------- */

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

.view-word__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.view-word__actions .btn {
  flex: 1 1 10rem;
}

/* --- View: quiz ----------------------------------------------------------- */

.view-quiz__prompt {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.view-quiz__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* --- View: weekly quiz ---------------------------------------------------- */

.view-week__counter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
}

.view-week__counter strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-ink);
}

/* --- View: done for today ------------------------------------------------- */

.view-done {
  align-items: center;
  text-align: center;
}

.view-done__summary {
  display: flex;
  gap: var(--space-5);
  justify-content: center;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 5rem;
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent-deep);
  line-height: 1;
}

.stat__label {
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  margin-top: auto;
  padding-top: var(--space-5);
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
}

/* --- Wider screens -------------------------------------------------------
 * The app is designed phone-first. On a desktop it stays one comfortable
 * column rather than stretching; a single word card has no use for 1200px.
 */

@media (min-width: 48rem) {
  .shell {
    padding-top: var(--space-7);
    gap: var(--space-6);
  }

  .card {
    padding: var(--space-7);
  }
}