/* The homestead pets (M12, track U): the pets' panel, the stray's welcome, coat swatches; and the
   hearth's M12 leftovers (the cottage's panel, the hopper block on a machine's panel). */

/* a pet's card: its portrait, name, hearts and favourite; tap to open coats, hats and beds */
.pt-panel .list { gap: 8px; }
.pt-card { padding: 8px 10px; border-radius: 10px; background: #fffaf0; border: 2px solid var(--paper2); }
.pt-card.open { border-color: #e8a0b0; background: #fff6f4; }
.pt-head { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.pt-head .grow { flex: 1; min-width: 0; }
.pt-pic { image-rendering: pixelated; flex: none; background: radial-gradient(circle at 50% 70%, #fff2d8 40%, #f4e2c4 70%); border-radius: 50%; padding: 2px; }
.pt-fav { font-size: 13px; color: #b0405a; margin-top: 2px; }
.pt-more { margin-top: 6px; }
.pt-more h4 { margin: 10px 0 4px; }
.pt-more .btns { flex-wrap: wrap; gap: 6px; }
.pt-shares { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.pt-share { font-size: 12.5px; padding: 2px 8px; border-radius: 12px; background: #f4ece0; }
.pt-share.fav { background: #ffe4ea; font-weight: 600; }
.pt-share b { font-weight: 400; letter-spacing: -2px; }
.pt-keeps { margin-top: 12px; padding-top: 6px; border-top: 2px dashed var(--paper2); }
.pt-keeps .row { gap: 8px; align-items: center; }

/* coat (and colour) swatches: two-tone, with a name under */
.pt-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.pt-swatch { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 62px; padding: 4px 2px; font-size: 11px; line-height: 1.15; border-radius: 8px; border: 2px solid transparent; background: #f8f0e4; cursor: pointer; }
.pt-swatch span { width: 30px; height: 18px; border-radius: 6px; border: 2px solid rgba(0,0,0,0.25); background: linear-gradient(135deg, var(--a) 45%, var(--b) 45%, var(--b) 70%, var(--c) 70%); }
.pt-swatch.on { border-color: #e2445c; background: #fff0f0; }
.pt-swatch:disabled { opacity: 0.55; cursor: default; }

/* the stray's welcome */
.pt-stray .pt-head { cursor: default; margin: 6px 0; }
.pt-stray input { width: 100%; margin: 8px 0; font-size: 16px; }

/* the cottage's panel, and a machine's hopper */
.hh-cottage h4 { margin: 10px 0 2px; }
.hh-hopper { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #fff8ec; border: 2px dashed #d8b070; }
.hh-hopper h4 { margin: 0 0 4px; }
.hh-hopper .btn { margin: 4px 4px 0 0; }
.hh-hopper .ico.tiny { width: 16px; height: 16px; vertical-align: middle; image-rendering: pixelated; }

@media (max-width: 520px) {
  .pt-swatch { width: 54px; font-size: 10.5px; }
  .pt-head { gap: 8px; }
}