/* Playhouse 1.17: archive options, complete member friend rosters, and uncropped mobile headliner. */

/* ARCHIVES — selector outranks historical global .mm-archive-grid mobile rules. */
body.mm-playhouse .mm-archive-grid.mm-archive-layout-grid-2,
body.mm-playhouse .mm-archive-grid.mm-archive-layout-grid-3,
body.mm-playhouse .mm-archive-grid.mm-archive-layout-grid-4 {
  display:grid;
  gap:clamp(12px,1.7vw,21px);
  margin-top:22px;
  min-width:0;
}
body.mm-playhouse .mm-archive-grid.mm-archive-layout-grid-2 {grid-template-columns:repeat(2,minmax(0,1fr))}
body.mm-playhouse .mm-archive-grid.mm-archive-layout-grid-3 {grid-template-columns:repeat(3,minmax(0,1fr))}
body.mm-playhouse .mm-archive-grid.mm-archive-layout-grid-4 {grid-template-columns:repeat(4,minmax(0,1fr))}
body.mm-playhouse .mm-archive-grid .mm-post-card {min-width:0;transition:border-color .18s,transform .18s}
body.mm-playhouse .mm-archive-grid .mm-post-card:focus-visible {outline:3px solid var(--mm-accent);outline-offset:3px}
body.mm-playhouse .mm-archive-grid.mm-archive-layout-grid-4 .mm-post-card-copy {padding:13px}
body.mm-playhouse .mm-archive-grid.mm-archive-layout-grid-4 .mm-post-card-copy h3 {font-size:clamp(15px,1.4vw,18px)!important;line-height:1.25!important}
body.mm-playhouse .mm-archive-grid.mm-archive-layout-grid-4 .mm-post-card-copy p {font-size:11px}
body.mm-playhouse .mm-archive-grid.mm-archive-layout-list {
  display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:22px;
}
body.mm-playhouse .mm-archive-grid.mm-archive-layout-list .mm-post-card {
  display:grid;grid-template-columns:minmax(180px,32%) minmax(0,1fr);min-height:165px;
  align-items:stretch;
}
body.mm-playhouse .mm-archive-grid.mm-archive-layout-list .mm-post-thumb {width:100%;height:100%;aspect-ratio:auto;min-height:165px}
body.mm-playhouse .mm-archive-grid.mm-archive-layout-list .mm-post-thumb img {width:100%!important;height:100%!important;object-fit:cover!important}
body.mm-playhouse .mm-archive-grid.mm-archive-layout-list .mm-post-card-copy {padding:clamp(16px,2.2vw,25px);display:flex;flex-direction:column;justify-content:center;min-width:0}
body.mm-playhouse .mm-archive-grid.mm-archive-layout-list .mm-post-card-copy h3 {font-size:clamp(20px,2.4vw,28px)!important;line-height:1.2!important}
body.mm-playhouse .mm-archive-grid.mm-archive-layout-list .mm-post-card-copy p {font-size:13px;line-height:1.55}

/* PROFILE FRIENDS TAB — illustrated, keyboard-friendly roster cards. */
body.mm-playhouse .mm-member-virtual-page .mm-social-friend-panel {min-width:0;overflow:hidden}
body.mm-playhouse .mm-member-virtual-page .mm-social-friends-heading {display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:20px}
body.mm-playhouse .mm-member-virtual-page .mm-social-friends-heading h2 {margin:5px 0 6px!important;font-size:clamp(24px,2.6vw,31px)!important}
body.mm-playhouse .mm-member-virtual-page .mm-social-friends-heading p {margin:0!important;font-size:12px!important;line-height:1.5!important;color:var(--mm-muted)!important}
body.mm-playhouse .mm-member-virtual-page .mm-social-friends-manage {display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:9px 12px;border:1px solid var(--mm-border);border-radius:10px;color:var(--mm-accent)!important;font-size:11px;font-weight:800;text-decoration:none!important}
body.mm-playhouse .mm-member-virtual-page .mm-social-friends-manage:hover {background:var(--mm-card-2)}
body.mm-playhouse .mm-member-virtual-page .mm-social-friends-roster {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
body.mm-playhouse .mm-member-virtual-page .mm-social-friend-card {
  display:flex;align-items:center;gap:12px;min-width:0;padding:13px;
  border:1px solid var(--mm-border);border-radius:14px;
  background:linear-gradient(125deg,color-mix(in srgb,var(--mm-accent) 5%,var(--mm-card-2)),var(--mm-card-2));
  color:var(--mm-text)!important;text-decoration:none!important;transition:border-color .15s,transform .15s,background .15s;
}
body.mm-playhouse .mm-member-virtual-page .mm-social-friend-card:hover {border-color:var(--mm-accent);transform:translateY(-2px)}
body.mm-playhouse .mm-member-virtual-page .mm-social-friend-card:focus-visible,
body.mm-playhouse .mm-member-virtual-page .mm-social-friends-pagination a:focus-visible {outline:3px solid var(--mm-accent);outline-offset:2px}
body.mm-playhouse .mm-member-virtual-page .mm-social-friend-card-avatar {display:grid;place-items:center;flex:0 0 76px;width:76px;height:76px;border:1px solid color-mix(in srgb,var(--mm-accent) 28%,var(--mm-border));border-radius:16px;background:var(--mm-surface);overflow:visible}
body.mm-playhouse .mm-member-virtual-page .mm-social-friend-card-avatar img.mm-social-friend-avatar {display:block;width:64px!important;height:64px!important;object-fit:cover;border-radius:14px!important}
body.mm-playhouse .mm-member-virtual-page .mm-social-friend-card-copy {display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
body.mm-playhouse .mm-member-virtual-page .mm-social-friend-card-copy strong {font-size:14px;line-height:1.25;color:var(--mm-text);overflow-wrap:anywhere}
body.mm-playhouse .mm-member-virtual-page .mm-social-friend-card-copy small {font-size:11px;color:var(--mm-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.mm-playhouse .mm-member-virtual-page .mm-social-friend-card-arrow {align-self:center;color:var(--mm-accent);font-size:16px}
body.mm-playhouse .mm-member-virtual-page .mm-social-friends-empty {display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:28px 18px;border:1px dashed var(--mm-border);border-radius:14px;background:var(--mm-card-2)}
body.mm-playhouse .mm-member-virtual-page .mm-social-friends-empty>span {font-size:30px;color:var(--mm-accent)}
body.mm-playhouse .mm-member-virtual-page .mm-social-friends-empty strong {color:var(--mm-text);font-size:17px}
body.mm-playhouse .mm-member-virtual-page .mm-social-friends-empty p {max-width:320px;margin:0!important;color:var(--mm-muted)!important;font-size:12px!important}
body.mm-playhouse .mm-member-virtual-page .mm-social-friends-empty a {color:var(--mm-accent)!important;font-size:12px;font-weight:800;text-decoration:none!important}
body.mm-playhouse .mm-member-virtual-page .mm-social-friends-pagination {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:20px;color:var(--mm-muted);font-size:12px}
body.mm-playhouse .mm-member-virtual-page .mm-social-friends-pagination a {padding:9px 12px;border:1px solid var(--mm-border);border-radius:9px;background:var(--mm-card-2);color:var(--mm-accent)!important;text-decoration:none!important;font-weight:800}
/* Existing mutual-friends mini grid remains separate and can still be displayed below. */

/* DEDICATED FRIEND REQUESTS PAGE — larger avatars, card-style actions. */
body.mm-playhouse .mm-friends-management .mm-member-panel {min-width:0;border-radius:16px}
body.mm-playhouse .mm-friends-management .mm-friends-roster .mm-social-member-row {background:var(--mm-card-2)}
body.mm-playhouse .mm-friends-management :is(.mm-friends-roster,.mm-friends-requests,.mm-friends-sent) .mm-social-member-row {
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:9px 0;padding:12px;border:1px solid var(--mm-border);border-radius:12px;
}
body.mm-playhouse .mm-friends-management .mm-social-member-info {flex:1 1 160px}
body.mm-playhouse .mm-friends-management .mm-social-member-info strong {color:var(--mm-text);font-size:14px}
body.mm-playhouse .mm-friends-management .mm-social-small-avatar {width:52px!important;height:52px!important;flex-basis:52px!important;border-radius:13px!important}
body.mm-playhouse .mm-friends-management .mm-social-inline-actions {margin:0;gap:8px}
body.mm-playhouse .mm-friends-management .mm-social-inline-actions :is(a,button) {min-height:35px;display:inline-flex;align-items:center;justify-content:center}
body.mm-playhouse .mm-friends-management .mm-friends-roster .mm-social-soft-button[href*="/messages/"] {color:var(--mm-accent)!important}

/* FEATURED STORY — use the image's full intrinsic aspect ratio on phones/tablets.
   Previous cover+fixed-height treatments clipped artwork, including 700x400 art. */
@media (max-width: 840px) {
  body.mm-playhouse .mm-play-lead-story {display:flex;flex-direction:column;min-width:0;min-height:0;width:100%;overflow:hidden}
  body.mm-playhouse .mm-play-lead-image {display:block;flex:0 0 auto;width:100%;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;overflow:visible;background:var(--mm-surface)}
  body.mm-playhouse .mm-play-lead-image>img {display:block;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;object-fit:contain!important;object-position:center!important;transform:none}
  body.mm-playhouse .mm-play-lead-copy {min-width:0;justify-content:flex-start;padding:clamp(17px,4vw,25px)}
}
@media (max-width: 900px) {
  body.mm-playhouse .mm-archive-grid.mm-archive-layout-grid-3,
  body.mm-playhouse .mm-archive-grid.mm-archive-layout-grid-4 {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 620px) {
  body.mm-playhouse .mm-archive-grid.mm-archive-layout-grid-2,
  body.mm-playhouse .mm-archive-grid.mm-archive-layout-grid-3,
  body.mm-playhouse .mm-archive-grid.mm-archive-layout-grid-4 {grid-template-columns:minmax(0,1fr)}
  body.mm-playhouse .mm-archive-grid.mm-archive-layout-list .mm-post-card {display:flex;flex-direction:column;min-height:0}
  body.mm-playhouse .mm-archive-grid.mm-archive-layout-list .mm-post-thumb {height:auto;min-height:0;aspect-ratio:16/9}
  body.mm-playhouse .mm-archive-grid.mm-archive-layout-list .mm-post-card-copy {padding:15px 17px}
  body.mm-playhouse .mm-archive-grid.mm-archive-layout-list .mm-post-card-copy h3 {font-size:20px!important}
  body.mm-playhouse .mm-member-virtual-page .mm-social-friends-heading {align-items:flex-start;flex-direction:column;gap:12px}
  body.mm-playhouse .mm-member-virtual-page .mm-social-friends-roster {grid-template-columns:minmax(0,1fr)}
  body.mm-playhouse .mm-member-virtual-page .mm-social-friend-card {padding:10px 12px}
  body.mm-playhouse .mm-member-virtual-page .mm-social-friend-card-avatar {width:76px;height:76px;flex-basis:76px}
  body.mm-playhouse .mm-friends-management :is(.mm-friends-roster,.mm-friends-requests,.mm-friends-sent) .mm-social-member-row {align-items:flex-start}
  body.mm-playhouse .mm-friends-management .mm-social-inline-actions {justify-content:flex-start;width:100%;padding-left:64px}
  body.mm-playhouse .mm-play-lead-copy {padding:18px 17px 22px}
  body.mm-playhouse .mm-play-lead-copy strong {font-size:clamp(21px,5.7vw,26px);line-height:1.22}
}
@media (prefers-reduced-motion: reduce) {
  body.mm-playhouse .mm-social-friend-card,
  body.mm-playhouse .mm-archive-grid .mm-post-card {transition:none}
}