/* Gedicht merken -- "Der Streit" (Issue #186). Ruhiger Papierstil wie
   textDetective.css, keine Spielbildschirm-Optik: das genaue Betrachten und
   Sprechen ist hier die Lernhandlung. */
.poem-memory-view {
  height: 100%;
  overflow-y: auto;
  background: var(--paper-light);
  color: var(--ink-primary);
  padding: calc(var(--safe-top) + 20px) calc(var(--safe-right) + 20px) calc(var(--safe-bottom) + 20px) 20px;
}

.poem-memory-note {
  color: var(--ink-secondary);
  line-height: 1.5;
  margin: 4px 0 12px;
}

.poem-memory-stanza-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.poem-memory-stanza-button {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--paper-shadow);
  border-radius: 8px;
  background: var(--paper-warm);
  color: var(--ink-primary);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}

.poem-memory-step,
.poem-memory-reading {
  max-width: 560px;
}

/* Feste 3:2-Bildflaeche, immer object-fit: contain -- kein Beschnitt, keine
   Layoutspruenge beim Laden (Issue: "Die Bildflaeche behaelt beim Laden
   ihre Groesse"). */
.poem-memory-image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-warm);
  border: 1px solid var(--paper-shadow);
  margin-bottom: 12px;
}

.poem-memory-image-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: poem-memory-fade-in 0.4s ease;
}

.poem-memory-image-img[hidden] {
  display: none;
}

/* Neutraler Fallback bei fehlendem/nicht ladbarem Bildzustand (Issue: "bei
   fehlendem Bildzustand neutraler Fallback mit Versnummer/erstem Wort, kein
   Absturz"). */
.poem-memory-image-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 12px;
}

.poem-memory-image-fallback[hidden] {
  display: none;
}

@keyframes poem-memory-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.poem-memory-line {
  min-height: 44px;
  margin-bottom: 12px;
}

.poem-memory-line-text {
  font-size: 19px;
  line-height: 1.6;
  margin: 0;
}

.poem-memory-controls,
.poem-memory-nav-row,
.poem-memory-recording-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.poem-memory-primary-button,
.poem-memory-secondary-button,
.poem-memory-exit-button {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
}

.poem-memory-primary-button {
  border: 1px solid var(--wood-warm);
  background: var(--wood-warm);
  color: var(--paper-light);
  font-weight: 600;
}

.poem-memory-secondary-button {
  border: 1px solid var(--paper-shadow);
  background: var(--paper-light);
  color: var(--ink-primary);
}

.poem-memory-exit-button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-secondary);
  margin-top: 8px;
}

.poem-memory-recording {
  margin: 8px 0;
  padding: 10px;
  border: 1px dashed var(--paper-shadow);
  border-radius: 8px;
}

/* Aufnahmestatus nicht nur farblich (Issue) -- eigener Text statt reinem
   Farbpunkt. */
.poem-memory-recording-status {
  color: var(--ink-primary);
  font-weight: 600;
  margin: 0 0 8px;
}

.poem-memory-text-check {
  max-width: 560px;
}

.poem-memory-text-check-line {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 6px;
  white-space: pre-line;
}

@media (max-width: 640px) {
  .poem-memory-line-text {
    font-size: 17px;
  }
}