/* Photos, drawings, empty states and the shared card look (P6-F4). Colours come from the app tokens. */
:root { --tile-light: #f6f7f8; }

/* One card style for Food, Training, Progress and Today */
.card, .pcard, .item { box-shadow: 0 1px 2px var(--soft), 0 6px 16px -10px var(--shadow); }
.nu-slot-name, .nu-opt-name, .tr-ex-name, .item .ttl, .pcard b { font-weight: 700; letter-spacing: -0.01em; }
.pcard { padding: 16px; }

/* Image boxes: a fixed ratio, so nothing jumps while loading */
.tm-imgbox, .tm-tile { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--card2); position: relative; min-width: 0; }
.tm-img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.2s ease; }
.tm-img.in { opacity: 1; }
.tm-tile { display: grid; place-content: center; justify-items: center; gap: 6px; padding: 8px; color: var(--muted); font-size: 12px; text-align: center; }
.tm-ico { width: 28px; height: 28px; flex: none; }
@media (prefers-reduced-motion: reduce) {
  .tm-img { transition: none; opacity: 1; }
}

/* Food */
.nu-photo { margin-bottom: 2px; border: 0; }
.nu-hero { aspect-ratio: 16 / 9; border-radius: var(--r); margin-bottom: 12px; }
.nu-thumb { width: 64px; height: 64px; aspect-ratio: 1; flex: none; border-radius: 12px; }
.nu-thumb .tm-img { object-fit: cover; }
button.card.nu-slot.has-thumb { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: start; }
button.card.nu-slot.has-thumb > .tm-imgbox, button.card.nu-slot.has-thumb > .tm-tile { grid-column: 1; grid-row: 1 / span 4; }
button.card.nu-slot.has-thumb > :not(.tm-imgbox):not(.tm-tile) { grid-column: 2; }
.nu-prow.has-thumb .nu-prow-main { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.nu-prow.has-thumb .nu-prow-main > .tm-imgbox, .nu-prow.has-thumb .nu-prow-main > .tm-tile { grid-column: 1; grid-row: 1 / span 4; }
.nu-prow.has-thumb .nu-prow-main > :not(.tm-imgbox):not(.tm-tile) { grid-column: 2; }
.tm-tile.nu-thumb span, .tm-tile.tm-rowthumb span, .tm-tile.tr-thumb span { display: none; }

/* Today meal rows */
.tm-rowthumb { width: 44px; height: 44px; aspect-ratio: 1; flex: none; border-radius: 10px; }
.item.is-done .tm-rowthumb { opacity: 0.6; }

/* Training: drawings on a light tile in both themes */
.tr-ex-head { display: flex; align-items: center; gap: 12px; }
.tr-ex-head .tr-ex-name { flex: 1; min-width: 0; }
.tr-thumb { width: 64px; height: 64px; aspect-ratio: 1; flex: none; border-radius: 12px; }
.tm-imgbox.tr-thumb, .tm-imgbox.tr-big { background: var(--tile-light); }
.tm-imgbox.tr-thumb .tm-img, .tm-imgbox.tr-big .tm-img { object-fit: contain; padding: 4px; box-sizing: border-box; }
.tr-big { max-height: 240px; margin-bottom: 10px; }
.tm-tile.tr-big { aspect-ratio: auto; height: 120px; margin-bottom: 10px; }

/* Empty states */
.tm-empty { display: grid; justify-items: center; gap: 8px; padding: 22px 12px; text-align: center; color: var(--muted); }
.tm-empty p { margin: 0; font-size: 14px; }
.tm-empty .tm-ico { width: 32px; height: 32px; }
.tm-empty-act { min-height: 44px; }
.pcard.pempty { cursor: default; align-content: start; }
.pcard.pempty:active { transform: none; }
.pcard.pempty .tm-empty { padding: 6px 0 0; gap: 6px; justify-items: start; text-align: left; }
.pcard.pempty .tm-ico { width: 26px; height: 26px; }
.chart-empty.tm-empty { padding: 24px 12px; }

/* Exercise detail: photo and drawing side by side when both exist (D57) */
.tm-pics { display: grid; gap: 8px; }
.tm-pics.n2 { grid-template-columns: 1fr 1fr; }