/* Daily Life Doc, round 8: a Photo or Recording answer of an action (docs/build/r8/PLAN.md change 4).
   The block under a line of Today (js/today/parts-media.js): the day's photos side by side (round 9: several photos a
   day, in a strip that scrolls sideways, with a small + at the end that stays in view), or the player with the
   heard words.
   The small sheet with Camera and Photo (js/ui/photo-sheet.js) and the small sheet that records
   (js/ui/record-sheet.js). The picture's button is a `.ph-t` (css/lines.css) and the player is `.vn` (css/ui.css);
   only what differs is here. Tokens, the type scale and the durations come from css/base.css. Nothing is boxed: a
   button is a soft tint, never a border. */

/* Under a line */
.mm { margin: 4px 0 6px; animation: dd-fade 260ms ease both; }
.ph-t.mm-ph { width: 72px; height: 72px; border-radius: 14px; cursor: pointer; }
.ph-t.mm-ph::after { content: none; }
/* The strip is kept between paints of the row (js/today/parts-media.js): it must not fade in again at every paint;
   a strip that is new rises in by DD.motion.add, a new photo rises in on its own. */
.mm-photo { margin: 6px 0 8px; animation: none; min-width: 0; }
.mm-strip { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-right: 52px; }
.mm-strip::-webkit-scrollbar { display: none; }
.mm-strip > .ph-t { scroll-snap-align: start; }
/* A photo still being stored stands at once from the device's own copy, a little faint. */
.ph-t.mm-ph.is-wait img { opacity: .55; }
/* The + adds another photo the same day. It sticks to the right end of the strip, so the + stays in view however
   many photos the day holds; the photos slide under a short fade at its left. */
.mm-add { position: sticky; right: 0; flex: none; width: 44px; height: 72px; border-radius: 14px; display: grid; place-items: center;
  background: var(--soft); color: var(--ink2); transition: transform var(--m-press) var(--ease-out); }
.mm-add::before { content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 14px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--surface)); }
.mm-add:active { transform: scale(0.94); }
.mm-add svg { width: 20px; height: 20px; }
.tp-row.tinted .mm-add::before { background: none; }
/* The list of days on a value's own page: the day's photos side by side (js/exp/progress-photos.js). */
.xph-row { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mm-recording .vn { max-width: 264px; min-height: 36px; }
.mm-w { margin-top: 4px; font-size: var(--t-sm); line-height: 20px; color: var(--ink2); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
/* The picture or the player IS the answer on Today: the line does not also say "Photo". */
.tp-row .cc[data-type="photo"].is-set, .tp-row .cc[data-type="recording"].is-set,
.tp-row .cc-sp:has(+ .cc[data-type="photo"].is-set), .tp-row .cc-sp:has(+ .cc[data-type="recording"].is-set) { display: none; }

/* The sheet of a Photo action: two ways, side by side */
.mm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-two button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; border-radius: 20px;
  background: var(--soft); font-size: var(--t-s); font-weight: 500; color: var(--ink);
  transition: transform var(--m-press) var(--ease-out), background-color var(--m-step) ease; }
.mm-two button:active { transform: scale(0.96); }
.mm-two button svg { width: 26px; height: 26px; color: var(--ink); }

/* The sheet of a Recording action: the day's recording, then one round button, the length and the heard words */
.mr { display: flex; flex-direction: column; align-items: center; }
.mr-have { align-self: stretch; margin-bottom: 22px; padding: 12px 14px; border-radius: 18px; background: var(--soft); }
.mr-have .vn { max-width: none; }
.mr-have .vn-b { background: var(--surface); }
.mr-have .mm-w { margin-top: 8px; display: block; max-height: 30vh; overflow-y: auto; scrollbar-width: none; color: var(--ink); }
.mr-b { position: relative; flex: none; width: 76px; height: 76px; margin-top: 4px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nav); color: var(--on-nav);
  transition: transform var(--m-press) var(--ease-out), background-color var(--m-step) ease, opacity var(--m-step) ease; }
.mr-b svg { width: 30px; height: 30px; }
.mr-b:active { transform: scale(0.94); }
.mr-b[disabled] { opacity: .5; }
.mr[data-state="connecting"] .mr-b { animation: dd-wait 1100ms ease-in-out infinite; }
.mr[data-state="listening"] .mr-b { background: var(--ink); color: var(--on-ink); }
.mr[data-state="listening"] .mr-b svg { fill: currentColor; }
.mr[data-state="listening"] .mr-b::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--ink); opacity: .3; z-index: -1; animation: mr-ring 1600ms var(--ease-out) infinite; }
@keyframes mr-ring { from { transform: scale(1); opacity: .32; } to { transform: scale(1.7); opacity: 0; } }
.mr-s { margin-top: 12px; min-height: 24px; font-size: var(--t-m); font-weight: 500; line-height: 24px; color: var(--ink2); }
.mr[data-state="listening"] .mr-s { color: var(--ink); font-weight: 600; }
.mr-t { align-self: stretch; margin-top: 6px; max-height: 110px; overflow-y: auto; scrollbar-width: none;
  font-size: var(--t-s); line-height: 22px; color: var(--ink2); text-align: center; overflow-wrap: anywhere; }
/* Room for two lines of heard words only while the sheet records, so the sheet does not jump when the first words arrive. */
.mr-t:empty { display: none; }
.mr[data-state="listening"] .mr-t, .mr[data-state="finishing"] .mr-t { display: block; min-height: 44px; }
.mr-t::-webkit-scrollbar, .mr-have .mm-w::-webkit-scrollbar { display: none; }
.mr + .sh-actions { margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  .mm, .mr[data-state="connecting"] .mr-b, .mr[data-state="listening"] .mr-b::before { animation: none; }
  .mm-two button, .mr-b, .mm-add { transition: none; }
}