/* Study55 LIVE density proof, rev2. QA fixture only, not adopted. Load after study55-live-compact.css.
   Selectors are the live46.js card classes, so the provider DOM and copy need no change.
   - Every width: the name has the whole text width to itself. The LIVE/未確認 badge and PROFILE
     share one supporting row under it, in the same place whatever the name length (no separator).
     .v8-live-identity is a plain div, so display:contents lets the badge join PROFILE's row.
   - Every width: viewer count and checked time are 13px and lighter. #d6cbdc on the #25192e
     button is about 10.7:1, and about 9.8:1 on the #2d2035 hover (WCAG formula on cascade values,
     not measured in a browser). The inherited #c3b6cb was already about 8.6:1. The weak point
     was the 11px size at 960px+.
   - Every width: Japanese names, titles and picture notes break between phrases, and a one- or
     two-character last line is avoided. No text is edited, hand-broken or clamped.
   - 960px+ paired cards (study32 two columns): the thumbnail sits beside the name and title as
     one header block, and the watch buttons run full-width underneath. The thumbnail is narrower
     than rev1 (about 152px at 1333, not 196px), so a long name or title gets more line length.
     Each card keeps its natural height, top-aligned in the row, so a shorter partner
     ends early instead of carrying an empty band above its buttons.
   - 960px+ single card: the wide row from the midwidth pass (thumbnail | name, title, buttons).
   Below 960px the midwidth container grid and the phone picture stacking are unchanged. */
body.s55 .v8-live :is(.v8-live-title,.v8-live-identity h3,.v8-live-image-note){word-break:auto-phrase;text-wrap:pretty}
body.s55 .v8-live .v8-live-person{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:2px 16px;min-height:0}
body.s55 .v8-live .v8-live-identity{display:contents}
body.s55 .v8-live .v8-live-identity h3{flex:1 0 100%;min-width:0}
body.s55 .v8-live .v8-live-watch-detail{font-size:13px;line-height:1.5;color:#d6cbdc}
body.s55 .v8-live .v8-live-watch-detail .ui-icon{width:14px;height:14px}

@media (min-width:960px){
 body.s55 .v8-live .v8-live-content{gap:16px;align-items:start}
 body.s55 .v8-live .v8-live-group{
  /* 28% of a 1333px card (544px inside) is 152px: an 86px-tall thumbnail, about the height of name, badge row and one title line.
     The text column is 376px, about 25 full-width characters of a 15px title. */
  --s55-live-thumb:clamp(144px,28%,176px);
  grid-template-columns:var(--s55-live-thumb) minmax(0,1fr);grid-template-rows:auto 1fr auto;
  column-gap:16px;row-gap:0;align-content:start;padding:16px;overflow:visible
 }
 body.s55 .v8-live .v8-live-picture{grid-column:1;grid-row:1/3;align-self:start;justify-self:stretch;width:100%;max-width:none;height:auto}
 body.s55 .v8-live .v8-live-person{grid-column:2;grid-row:1}
 body.s55 .v8-live .v8-live-identity h3{font-size:19px;line-height:1.45}
 body.s55 .v8-live .v8-live-profile{min-height:32px}
 body.s55 .v8-live .v8-live-title{grid-column:2;grid-row:2;align-self:start;margin:4px 0 0;padding:0;font-size:15px;line-height:1.65}
 /* 176px is the midwidth minimum. At 960px two destinations still sit side by side (196px each). */
 body.s55 .v8-live .v8-live-destinations{
  grid-column:1/-1;grid-row:3;align-self:start;margin:0;padding:14px 0 0;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,176px),1fr))
 }
 body.s55 .v8-live .v8-live-watch{min-height:56px;padding:9px 12px;gap:3px}
 body.s55 .v8-live .v8-live-watch-main{font-size:14px}

 /* One person on air: a full-width row, so the buttons stay in the text column and stay button-sized. */
 body.s55 .v8-live[data-state] .v8-live-content>.v8-live-group:only-child{
  --s55-live-thumb:288px;
  grid-template-columns:var(--s55-live-thumb) minmax(0,1fr);grid-template-rows:auto auto 1fr;
  gap:0 24px;padding:20px
 }
 body.s55 .v8-live[data-state] .v8-live-content>.v8-live-group:only-child .v8-live-picture{grid-column:1;grid-row:1/4;align-self:start;width:100%;max-width:none;height:auto}
 body.s55 .v8-live[data-state] .v8-live-content>.v8-live-group:only-child .v8-live-person{grid-column:2;grid-row:1;min-height:0;padding:0}
 body.s55 .v8-live[data-state] .v8-live-content>.v8-live-group:only-child .v8-live-title{grid-column:2;grid-row:2;margin:4px 0 0;padding:0;font-size:16px}
 body.s55 .v8-live[data-state] .v8-live-content>.v8-live-group:only-child .v8-live-destinations{
  grid-column:2;grid-row:3;align-self:start;padding:14px 0 0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),280px))
 }
}