/* ==========================================================================
   Memofun — Shared components
   ========================================================================== */

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

header.app-header {
  padding-bottom: var(--space-2);
  text-align: center;
}

header.app-header .app-hero {
  padding-top: var(--space-2);
}

header.app-header .logo {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 800;
  color: var(--accent);
  margin-bottom: var(--space-1);
}

/* ---------- Hero mark — a one-time, load-only peek: the app icon flips
   to a star and back, the same scaleX squash-and-release used by the
   study screen's real card flip (see .flashcard.flip-out below), so the
   home screen previews the flip motif before the person ever studies a
   card. Purely decorative (aria-hidden in the markup); neutralized to an
   instant no-op by the sitewide prefers-reduced-motion rule since it
   starts and ends on the same frame (the icon). ---------- */
.hero-mark {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto;
}

.hero-mark-front,
.hero-mark-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Base transform matches each face's own 0% keyframe, so the very first
   paint (before the animation engine applies its first frame) can't
   show both faces overlapping. */
.hero-mark-front { transform: scaleX(1); animation: heroMarkFront 2.6s var(--ease) 1; }
.hero-mark-back { font-size: 40px; transform: scaleX(0); animation: heroMarkBack 2.6s var(--ease) 1; }

@keyframes heroMarkFront {
  0%, 15% { transform: scaleX(1); }
  25%, 75% { transform: scaleX(0); }
  85%, 100% { transform: scaleX(1); }
}

@keyframes heroMarkBack {
  0%, 25% { transform: scaleX(0); }
  35%, 65% { transform: scaleX(1); }
  75%, 100% { transform: scaleX(0); }
}

header.app-header .tagline {
  color: var(--color-text-soft);
  font-size: var(--text-base);
  max-width: 560px;
  margin: 0 auto;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2);
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---------- Language selector (present in the header, like Apptonomia's
   idioma-selector — a language switch is a day-one decision the end
   user may need, not a "support" setting tucked away) ---------- */

.language-selector {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
}

.btn-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.btn-lang[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------- Stars ---------- */

.stars {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 18px 6px 14px;
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  color: var(--color-star);
  background: var(--accent-2-soft);
  border: 2px solid var(--accent-2-soft);
  border-radius: var(--radius-pill);
}

.stars .stars-icon {
  position: relative;
  display: inline-block;
  font-size: var(--text-large);
  line-height: 1;
}

/* Small sparkle riding the main star — a static texture, not a
   per-star counter (the total only ever grows, see assets/js/storage.js,
   so one glyph per star would grow without bound). */
.stars .stars-icon .spark {
  position: absolute;
  top: -2px;
  right: -8px;
  font-size: 10px;
  color: var(--accent-2);
}

.stars .stars-count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-large);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--button-min);
  min-width: var(--button-min);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: #FFFFFF;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}

.btn:hover { filter: brightness(1.08); transform: scale(1.03); }
.btn:active { transform: scale(0.98); }
.btn:disabled,
.btn.locked { opacity: 0.5; cursor: not-allowed; }

.btn.secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

.btn.icon {
  padding: var(--space-2);
  font-size: var(--text-large);
}

/* Pressed/speaking state for the 🔊 listen button (Apptonomia's
   btn-audio[aria-pressed="true"] pattern). */
.btn.icon[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Same treatment for the "pin this course" toggle on the subject screen. */
.btn.secondary[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.btn-row {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Buttons need the full 64px touch target on touch devices, but that
   wastes vertical space on a tall desktop viewport with a mouse —
   same rule Apptonomia applies. */
@media (min-height: 720px) {
  .btn {
    min-height: 40px;
    min-width: 40px;
    padding: 6px 18px;
    font-size: var(--text-small);
  }
}

/* ---------- Course / subject navigation (home screen) ---------- */

.section-heading {
  font-size: var(--text-large);
  font-weight: var(--weight-strong);
  margin: var(--space-3) 0 var(--space-1);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-3) 0 var(--space-1);
}

.section-header .section-heading { margin: 0; }

.quick-access { margin-bottom: var(--space-3); }

.quick-access-label {
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
  color: var(--color-text-soft);
  margin: 0 0 var(--space-1);
}

.quick-access .deck-card {
  max-width: 320px;
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- Deck grid ---------- */

/* Wider column for the home screen's deck grid only — reading-heavy
   screens (study card, settings) keep the narrower .container so line
   length stays good for Easy Read. Chained with .container for higher
   specificity than the plain .container rule in base.css, regardless of
   stylesheet order. */
.container.container-wide { max-width: var(--container-max-wide); }

.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-4);
}

.deck-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  min-height: calc(var(--button-min) * 2);
  cursor: pointer;
  text-decoration: none;
  color: var(--color-text);
}

.deck-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }

/* Devices with a real pointer only — a hover tilt would just be stuck
   "on" after a tap on touchscreens. */
@media (hover: hover) {
  .deck-card {
    transition: transform var(--motion-normal) var(--ease),
      box-shadow var(--motion-normal) var(--ease),
      border-color var(--motion-normal) var(--ease);
  }
  .deck-card:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: var(--shadow-lg); }
}

.deck-card .deck-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 32px;
  line-height: 1;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 2px solid var(--accent);
}

/* Badge color cycles per deck (same index app.js already uses to cycle
   the emoji icon) — purely decorative variety, like different-colored
   stickers for different topics. Never used behind text. */
.deck-card.badge-b .deck-icon { background: var(--accent-2-soft); border-color: var(--accent-2); }
.deck-card.badge-c .deck-icon { background: var(--sticker-c-soft); border-color: var(--sticker-c); }
.deck-card.badge-d .deck-icon { background: var(--sticker-d-soft); border-color: var(--sticker-d); }

.deck-card h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  margin: 0;
}

.deck-card .deck-meta {
  font-size: var(--text-small);
  color: var(--color-text-soft);
}

/* "Peeled corner" completion stamp — a folded-paper triangle with a
   star tucked under it, replacing a flat badge chip. */
.deck-card .deck-stamp {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-top-right-radius: var(--radius);
}

.deck-card .deck-stamp::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 44px 44px 0;
  border-color: transparent var(--accent-2-soft) transparent transparent;
}

.deck-card .deck-stamp::after {
  content: '⭐';
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 16px;
}

.empty-state {
  text-align: center;
  color: var(--color-text-soft);
  padding: var(--space-4);
  font-size: var(--text-base);
}

/* ---------- Flashcard (tools/study) ---------- */

.flashcard-wrap {
  padding: var(--space-2) 0;
}

.flashcard-progress {
  text-align: center;
  color: var(--color-text-soft);
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

/* ---------- Progress bar — informational only, never a countdown or a
   pressure device (SPEC.md §2.3: no timers). ---------- */

.progress-bar {
  position: relative;
  height: 28px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.progress-bar .progress-fill {
  position: relative;
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 14px;
  transition: width var(--motion-normal) var(--ease);
}

/* A marker riding the leading edge of the fill — the fill's width
   already encodes real progress through a real sequence of cards, this
   just gives that number a game-like face. */
.progress-bar .progress-fill::after {
  content: '★';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #FFFFFF;
}

.progress-bar .progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
  color: var(--color-text);
}

.flashcard {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-height: 280px;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  touch-action: pan-y;
  transform: scaleX(1);
  transition: transform var(--motion-fast) var(--ease);
}

/* "The Flip" — the study screen's real reveal/next mechanic, whenever a
   new question or its answer appears. A 2D scaleX squash-and-release,
   deliberately not a 3D rotateY/perspective transform, to avoid the
   spatial disorientation a 3D flip can cause. tools/study/app.js toggles
   this class, swaps the content once the squash finishes, then removes
   it so the card releases back open. Neutralized to an instant swap
   site-wide by prefers-reduced-motion. */
.flashcard.flip-out { transform: scaleX(0); }

.flashcard .cara {
  font-size: var(--text-large);
  font-weight: var(--weight-strong);
  color: var(--color-text);
}

.flashcard hr {
  border: none;
  border-top: 2px solid var(--color-border);
  width: 100%;
  margin: var(--space-2) 0;
}

.flashcard .respuesta {
  font-size: var(--text-base);
  color: var(--color-text-soft);
}

.flashcard mark {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: var(--weight-medium);
}

.flashcard-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

/* ---------- Feedback zone ---------- */

.feedback-zone {
  min-height: var(--button-min);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border-radius: var(--radius);
  margin-top: var(--space-2);
  padding: var(--space-2);
}

.feedback-zone.success { background: var(--color-success-soft); color: var(--color-success); }
.feedback-zone.encourage { background: var(--color-encourage-soft); color: var(--color-encourage); }

/* ---------- Celebration overlay ---------- */

.celebration {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: rgba(250, 247, 242, 0.96);
  z-index: 999;
  text-align: center;
  padding: var(--space-3);
}

.celebration .emoji { font-size: 64px; animation: celebrate 0.6s ease; }
.celebration .message { font-size: var(--text-large); font-weight: var(--weight-strong); color: var(--color-success); }

@keyframes celebrate {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- End screen (persistent — no auto-redirect, the person
   decides when to leave: SPEC.md §2.7 autonomy) ---------- */

.end-screen {
  text-align: center;
  padding: var(--space-3) 0;
}

.end-screen .emoji-large {
  font-size: 72px;
  animation: celebrate 0.6s ease;
}

.end-screen .transfer-phrase {
  color: var(--color-text-soft);
  font-style: italic;
  max-width: 480px;
  margin: 0 auto var(--space-2);
}

/* ---------- Preference button group (Apptonomia's selector-pref /
   btn-pref: a role="group" of large toggle buttons instead of a native
   <select>, easier to operate for the target audience). ---------- */

.pref-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.btn-pref {
  min-height: var(--button-min);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.btn-pref[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Text-size options demonstrate the size they set directly in their own
   label, instead of relying on an icon — a stronger affordance than an
   arbitrary glyph for a "how big is this text" choice. */
#text-size-group .btn-pref[data-value="large"] { font-size: calc(var(--text-base) * 1.1); }
#text-size-group .btn-pref[data-value="extraLarge"] { font-size: calc(var(--text-base) * 1.25); font-weight: var(--weight-strong); }

/* ---------- Forms (settings) ---------- */

.field { margin-bottom: var(--space-2); text-align: left; }

.field label {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-1);
}

.field select,
.field input[type="file"] {
  width: 100%;
  min-height: var(--button-min);
  font-size: var(--text-base);
  font-family: inherit;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  color: var(--color-text);
}

.dropzone {
  border: 3px dashed var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-2);
  text-align: center;
  color: var(--color-text-soft);
  cursor: pointer;
}

.dropzone:hover,
.dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); }

.panel {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}

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

footer.app-footer {
  text-align: center;
  color: var(--color-text-tenue);
  font-size: var(--text-small);
  padding: var(--space-3) 0;
  border-top: 2px solid var(--color-border);
  margin-top: var(--space-4);
}

footer.app-footer a { color: var(--color-text-soft); }

@media (max-width: 560px) {
  header.app-header .logo { font-size: 30px; }
  .flashcard { min-height: 220px; padding-bottom: calc(var(--space-4) + var(--button-min)); }

  /* Sticky bottom bar for easier thumb reach. Padding-bottom on
     .flashcard above keeps a long answer's last line clear of it once
     scrolled fully. */
  .flashcard-controls {
    position: sticky;
    bottom: 0;
    background: var(--color-bg);
    border-top: 2px solid var(--color-border);
    margin-left: calc(-1 * var(--space-2));
    margin-right: calc(-1 * var(--space-2));
    padding: var(--space-2);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
    z-index: 10;
  }
}