/* Shared visual language for the adoption and management cards. */
.pet-friend-card { --pet-scene: #fff0df; --pet-hill: #f4debd; --pet-chip: #fff3e5; --pet-chip-ink: #80501e; border-radius: 24px; background: #fffdf9; box-shadow: 0 5px 18px #5c3e2110; }
.pet-friend-card[data-tone="1"] { --pet-scene: #eaf5ee; --pet-hill: #cee5d7; --pet-chip: #eaf5ee; --pet-chip-ink: #36604a; }
.pet-friend-card[data-tone="2"] { --pet-scene: #f0edff; --pet-hill: #ddd6f7; --pet-chip: #f0edff; --pet-chip-ink: #61518c; }
.pet-friend-card[data-tone="3"] { --pet-scene: #ffedf0; --pet-hill: #f5d4dd; --pet-chip: #ffedf0; --pet-chip-ink: #8b4b60; }
.pet-friend-card[data-tone="4"] { --pet-scene: #eaf3ff; --pet-hill: #cfdff3; --pet-chip: #eaf3ff; --pet-chip-ink: #3e5b80; }
.pet-friend-card[data-tone="5"] { --pet-scene: #fff8da; --pet-hill: #eee2ae; --pet-chip: #fff8da; --pet-chip-ink: #756024; }
.pet-friend-card[data-tone="6"] { --pet-scene: #e9f5f4; --pet-hill: #c9e5e1; --pet-chip: #e9f5f4; --pet-chip-ink: #376763; }
.pet-friend-card .pet-friend-scene { position: relative; isolation: isolate; overflow: hidden; background: var(--pet-scene); min-height: 260px; padding: 40px 20px 16px; gap: 8px; justify-content: flex-start; }
.pet-friend-card .pet-friend-scene::before { content: ""; position: absolute; z-index: -1; width: 124px; height: 124px; top: 26px; border-radius: 50%; background: #ffffff90; }
.pet-friend-card .pet-friend-scene::after { content: ""; position: absolute; z-index: -2; inset: auto -15% -75px; height: 150px; border-radius: 50%; background: var(--pet-hill); }
.pet-friend-card .sex { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: 0; white-space: nowrap; }
.pet-friend-card .sex b { font-size: 17px; line-height: 1; }
.pet-friend-card .sex-f { background: #fff0f4; color: #9c375b; border: 1px solid #ebbdcc; }
.pet-friend-card .sex-m { background: #edf5ff; color: #346396; border: 1px solid #bdd3ed; }
.pet-friend-card .pet-friend-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.pet-friend-card .pet-friend-tags > span { padding: 5px 10px; background: var(--pet-chip); color: var(--pet-chip-ink); border: 1px solid var(--pet-hill); border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.pet-friend-card .pet-friend-description { background: #f7f5ef; border-radius: 14px; padding: 14px 16px; margin: 0; color: #514b43; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard.pet-friend-card { padding: 0; display: flex; flex-direction: column; min-width: 0; }
.pcard.pet-friend-card .pet-stage { margin: 0; }
.pcard.pet-friend-card .pet-stage canvas, .pet-friend-card .pet-friend-scene .catalog-thumb, .pet-friend-card .pet-friend-scene .catalog-thumb canvas { width: 96px; height: 96px; flex: none; }
.pcard.pet-friend-card .badge { top: 16px; left: 16px; padding: 5px 10px; border-radius: 999px; background: #ffffffdf; color: #61574c; border-color: #ffffff; font-size: 11px; }
.pet-card-body { padding: 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pcard.pet-friend-card .nm { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 26px; overflow-wrap: anywhere; }
.pcard.pet-friend-card .nm .sex { margin: 0; }
.pet-card-facts, .catalog-card-facts { display: flex; flex-wrap: wrap; gap: 6px 12px; color: #71665c; font-size: 12px; }
.pet-card-facts .bd { margin: 0; font-size: 12px; }
.pet-card-facts [hidden] { display: none; }
.pcard.pet-friend-card .profile-note { margin: 0; }
.pcard.pet-friend-card .status { margin-top: auto; padding-top: 14px; }
.pcard.pet-friend-card .pet-detail-link { margin-top: 0; border: 1px solid var(--pet-hill); border-radius: 12px; padding: 12px 16px; background: var(--pet-chip); color: var(--pet-chip-ink); }
.pcard.pet-friend-card .pet-detail-link:hover { border-color: var(--pet-chip-ink); }
.pet-friend-card a:focus-visible { outline: 3px solid #9c5938; outline-offset: -3px; }
.catalog-card.pet-friend-card .catalog-card-name > .sex { font-size: 12px; }
@media (max-width: 600px) { .pet-card-body { padding: 20px; } }

.pet-friend-card .pet-card-coat { margin: -6px 0 0; color: #71665c; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.pet-friend-card .pet-card-coat:empty, .pet-friend-card .pet-card-coat[hidden] { display: none; }

.pcard.pet-friend-card .status.waiting { align-self: flex-start; padding: 0; border: 0; }
.pcard.pet-friend-card .status.waiting::before { display: none; }
.pcard.pet-friend-card .pet-waiting-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--pet-hill); border-radius: 999px; background: var(--pet-chip); color: var(--pet-chip-ink); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.5; cursor: pointer; }
.pcard.pet-friend-card .pet-waiting-button::before { content: ""; flex: 0 0 18px; width: 18px; height: 18px; background-color: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pcard.pet-friend-card .pet-waiting-button:hover { border-color: var(--pet-chip-ink); }
.pcard.pet-friend-card .pet-waiting-button:focus-visible { outline: 3px solid var(--pet-chip-ink); outline-offset: 3px; }
.pcard.pet-friend-card .status[hidden] { display: none; }
.pcard.pet-friend-card.adopted-card .pet-detail-link { margin-top: auto; }

/* A quiet, non-interactive introduction from the little friend. */
.pet-friend-card .pet-speech { position: relative; width: 100%; max-width: 440px; margin-top: 4px; padding: 10px 14px; border: 1px solid var(--pet-hill); border-radius: 18px; background: #fffdf9; color: #514b43; box-shadow: 0 3px 10px #5c3e2108; }
.pet-friend-card .pet-speech::before { content: ""; position: absolute; top: -7px; left: calc(50% - 6px); width: 12px; height: 12px; background: #fffdf9; border-top: 1px solid var(--pet-hill); border-left: 1px solid var(--pet-hill); transform: rotate(45deg); }
.pet-friend-card .pet-speech-text { margin: 0; font-size: 14px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }