/* mamalist — layout only; components come from brand.css (README-mamalist.md).
   One item per screen: the stage fills the space, the actions sit in the
   lower third where a thumb reaches. */
body.mml-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
/* the card and its buttons travel together, packed into the thumb zone on
   phones and centred as one group on wider screens */
.mml {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  align-content: end;
  padding-top: 12px;
  padding-bottom: 0;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) { .mml { align-content: center; padding-bottom: 60px; } }
.mml__stage {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  animation: mml-in .12s ease;
}
.mml__card {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}
@keyframes mml-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mml__stage { animation: none; } }

.mml__img {
  width: min(60vw, 240px);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--mc-r-dense);
  background: var(--mc-surface);
}
.mml__cat { margin: 0 0 2px; }
.mml__name {
  font-family: var(--mc-font-heading);
  font-weight: 500;
  font-size: var(--mc-h3);
  margin: 0;
}
.mml__name:focus { outline: none; }
.mml__q { font-size: var(--mc-h4); margin: 12px 0 2px; }
.mml__text { font-size: .92rem; margin: 0; max-width: 34ch; }

.mml__actions {
  display: grid;
  gap: 12px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.mml__recorded {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .85rem;
  padding: 0 4px 2px;
}
.mml__count { text-align: center; margin: 4px 0 0; }
.mml__email { display: grid; gap: 12px; }
.mml__email .mc-input { width: 100%; box-sizing: border-box; }
.mml__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mml__err { color: var(--mc-error); font-size: .85rem; margin: 0; }
.mml__foot {
  font-family: var(--mc-font-body);
  text-align: center;
  margin: 0;
  padding: 10px 20px calc(14px + env(safe-area-inset-bottom));
  font-size: .72rem;
  line-height: 1.5;
  opacity: .55;
}