/* Study55 idle LIVE row v2. Candidate proposal, not adopted. Load after study55-live-density.css.
   Pairs with the candidate renderer live55.js (live46.js is unchanged). Layout and colour only:
   no text, no images, no CSS-generated content; all words come from live55.js.

   When it applies (from live55.js):
   - #on-air[data-state] = loading | empty | unknown | stale | live.
   - div.v8-live-empty (svg.v8-live-empty-icon, div.v8-live-empty-copy > h3 + p, and
     a.v8-live-empty-link except while loading) is built ONLY when there are no stream groups.
     Live, and unknown/stale with last-known streams, render article.v8-live-group cards. The
     density v2 card layout is unchanged; only these rules reach the card states: the heading
     state block and the repeated per-link line under unknown/stale, the one-column grid of an
     unconfirmed card without a picture, and the busy retry.
   - #v8-live-status is the one live region. Beside the idle row it shows only the timestamp
     (.s55-live-shown); the sentence the row already draws is .s55-live-sr there.
   - .v8-live-foot (note + retry) is [hidden] unless it has something to add (also in the
     initial HTML). No transient line: the Twitch cross-check is silent unless it fails.
   So "no cards" is #on-air:has(> #v8-live-content > .v8-live-empty). The static p.v8-live-empty
   shown before the first render (and with JavaScript off) gets the band colour only. */

/* Read by screen readers, not drawn. */
body.s55 #on-air .s55-live-sr{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* study-wide display rules would otherwise override [hidden] on the flex foot */
body.s55 #on-air > .v8-live-foot[hidden],body.s55 #on-air #v8-live-note[hidden]{display:none}

/* Heading: LIVE and the timestamp share one row at every width (was a lone line under LIVE
   below 520px). Long status text beside cards is not affected: that only happens with cards. */
body.s55 #on-air:has(> #v8-live-content > .v8-live-empty) > .v8-live-heading{
 position:relative;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px
}
body.s55 #on-air:has(> #v8-live-content > .v8-live-empty) > .v8-live-heading > .v8-live-status{
 margin:0 0 0 auto;padding:0;min-width:0;text-align:right;overflow-wrap:anywhere
}

/* The strip */
body.s55 #on-air > #v8-live-content > .v8-live-empty{
 position:relative;min-height:0;margin:0;padding:12px 14px;border:0;
 background:#17171b;color:#d9d2dc;font-size:14px;line-height:1.7
}
/* Below 960px: [mark] LABEL ........ MEMBER CHANNELS / sentence under the label.
   The first row is 44px with or without the link, so CHECKING -> result does not shift. */
body.s55 #on-air > #v8-live-content > div.v8-live-empty{
 display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:0;padding:0 14px 10px
}
/* Only the loading sweep uses the old top edge; the idle accent bar is not needed. */
body.s55 #on-air:not([data-state="loading"]) > #v8-live-content > .v8-live-empty::before{content:none}
body.s55 #on-air > #v8-live-content > .v8-live-empty .v8-live-empty-copy{display:contents}
body.s55 #on-air > #v8-live-content > .v8-live-empty .v8-live-empty-icon{
 flex:0 0 22px;width:22px;height:22px;margin:0;color:#d8b66a
}
body.s55 #on-air > #v8-live-content > .v8-live-empty .v8-live-empty-copy h3{
 flex:1 1 0;min-width:0;min-height:44px;display:flex;align-items:center;margin:0;
 color:#e6cc92;font:600 16px/1.3 var(--display);letter-spacing:.06em;overflow-wrap:anywhere
}
body.s55 #on-air > #v8-live-content > .v8-live-empty .v8-live-empty-copy p{
 order:2;flex:1 0 100%;max-width:none;margin:0;padding:0 0 0 32px;
 color:#d9d2dc;font-size:14px;line-height:1.7;word-break:auto-phrase;text-wrap:pretty
}
body.s55 #on-air > #v8-live-content > .v8-live-empty .v8-live-empty-link{
 order:1;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 0 0 auto;padding:0;
 border:0;color:#e3c47f;font:600 14px/1.3 var(--display);letter-spacing:.05em;text-decoration:none;white-space:nowrap
}
body.s55 #on-air > #v8-live-content > .v8-live-empty .v8-live-empty-link>.ui-icon{width:17px;height:17px;margin:0}
body.s55 #on-air > #v8-live-content > .v8-live-empty .v8-live-empty-link>.ui-icon:last-child{width:12px;height:12px;margin:0}
/* Colour only on hover: nothing moves. */
body.s55 #on-air > #v8-live-content > .v8-live-empty .v8-live-empty-link:hover{color:#fff0c8;text-decoration:underline;text-underline-offset:4px}

/* The foot, when present, is the strip's last line: same surface, text column aligned
   (14 padding + 22 mark + 10 gap = 46). */
body.s55 #on-air:has(> #v8-live-content > .v8-live-empty) > .v8-live-foot{
 margin:0;padding:0 14px 12px 46px;gap:8px 16px;align-items:center;background:#17171b
}
body.s55 #on-air:has(> #v8-live-content > .v8-live-empty) > .v8-live-foot p{
 flex:1 1 220px;margin:0;color:#b3aab7;font-size:13px;line-height:1.75;word-break:auto-phrase;text-wrap:pretty
}
body.s55 #on-air:has(> #v8-live-content > .v8-live-empty) > .v8-live-foot button{
 min-height:44px;padding:0 14px;border:1px solid #6a5a3a;border-radius:0;background:transparent;
 color:#e9c77e;font-size:13px;line-height:1.3
}
body.s55 #on-air:has(> #v8-live-content > .v8-live-empty) > .v8-live-foot button:hover{border-color:#d8b66a;color:#fff0c8}

/* States differ by label, edge and mark shape (live55.js standbyIcon), not by colour alone.
   Checking keeps the renderer's sweep (gold on dark); UNAVAILABLE gets a rust edge and a struck
   mast; AWAITING UPDATE a cool grey edge and the clock, away from the brand gold of NONE LISTED. */
body.s55 #on-air[data-state="loading"] > #v8-live-content > .v8-live-empty::before{
 top:0;left:0;width:100%;background-image:linear-gradient(90deg,#2a2a2e 0%,#d8b66a 48%,#2a2a2e 70%)
}
body.s55 #on-air[data-state="loading"] > #v8-live-content > .v8-live-empty .v8-live-empty-copy h3{color:#cdbf9c}
body.s55 #on-air[data-state="loading"] > #v8-live-content > .v8-live-empty .v8-live-empty-icon{color:#8f846c}
body.s55 #on-air:is([data-state="unknown"],[data-state="stale"]) > #v8-live-content > .v8-live-empty,
body.s55 #on-air:is([data-state="unknown"],[data-state="stale"]):has(> #v8-live-content > .v8-live-empty) > .v8-live-foot{
 box-shadow:inset 3px 0 0 var(--s55-idle-edge)
}
body.s55 #on-air[data-state="unknown"]{--s55-idle-edge:#cf8a62;--s55-idle-label:#ecbc9c}
body.s55 #on-air[data-state="stale"]{--s55-idle-edge:#8f9aa6;--s55-idle-label:#d5d9de}
body.s55 #on-air:is([data-state="unknown"],[data-state="stale"]) > #v8-live-content > .v8-live-empty .v8-live-empty-copy h3{color:var(--s55-idle-label)}
body.s55 #on-air[data-state="unknown"] > #v8-live-content > .v8-live-empty .v8-live-empty-icon{color:#cf8a62}
body.s55 #on-air[data-state="stale"] > #v8-live-content > .v8-live-empty .v8-live-empty-icon{color:#aab3bd}
/* The strike through the mast is cut out of the strip surface so it stays legible at 22px. */
body.s55 #on-air > #v8-live-content > .v8-live-empty .v8-live-empty-gap{stroke:#17171b}

/* Last-known cards under unknown/stale: one global state block in the heading (English tag +
   one Japanese sentence), with the same edge colour as the idle row. The per-link line
   "現在の状態は未確認" repeated that sentence on every destination and is not drawn here;
   each link keeps its 確認する wording and checked time, each card its 未確認 badge. In live
   (including partial) nothing is hidden: there certainty differs per destination.
   The repeated line is the first of two detail spans on an unconfirmed link (live46 order). */
body.s55 #on-air:is([data-state="unknown"],[data-state="stale"]):not(:has(> #v8-live-content > .v8-live-empty)) > .v8-live-heading > .v8-live-status{
 max-width:36em;padding:2px 0 2px 12px;box-shadow:inset 3px 0 0 var(--s55-idle-edge);color:#ddd4df;line-height:1.7
}
body.s55 #on-air .v8-live-status > .s55-live-tag{
 display:block;color:var(--s55-idle-label,#e6cc92);font:600 15px/1.35 var(--display);letter-spacing:.06em
}
body.s55 #on-air:is([data-state="unknown"],[data-state="stale"]) .v8-live-group .v8-live-watch-detail > span:first-child:not(:last-child){display:none}
/* An unconfirmed card with no thumbnail has no picture link (live55.js qualifyLastKnown). The
   density/midwidth grids would keep its empty thumbnail column, so its text and buttons take the
   full width. Cards with a picture are unaffected. */
body.s55 #on-air .v8-live-group:not(:has(> .v8-live-picture)){grid-template-columns:minmax(0,1fr)}
body.s55 #on-air .v8-live-group:not(:has(> .v8-live-picture)) > :is(.v8-live-person,.v8-live-title,.v8-live-destinations){grid-column:1}

/* 960px+: one row, mark | label | sentence | action; the foot sits under the sentence.
   The label track is fixed so every state lines up: 164px holds AWAITING UPDATE at 16px. */
@media (min-width:960px){
 body.s55 #on-air > #v8-live-content > div.v8-live-empty{flex-wrap:nowrap;column-gap:16px;min-height:56px;padding:0 20px}
 body.s55 #on-air > #v8-live-content > .v8-live-empty .v8-live-empty-icon{flex-basis:24px;width:24px;height:24px}
 body.s55 #on-air > #v8-live-content > .v8-live-empty .v8-live-empty-copy h3{flex:0 0 164px}
 body.s55 #on-air > #v8-live-content > .v8-live-empty .v8-live-empty-copy p{order:0;flex:1 1 0;min-width:0;padding:0}
 body.s55 #on-air > #v8-live-content > .v8-live-empty .v8-live-empty-link{order:0}
 /* 20 padding + 24 mark + 16 gap + 164 label + 16 gap */
 body.s55 #on-air:has(> #v8-live-content > .v8-live-empty) > .v8-live-foot{padding:0 20px 14px 240px}
 body.s55 #on-air:has(> #v8-live-content > .v8-live-empty) > .v8-live-foot p{font-size:12px}
}

/* Narrow phones: the action follows the sentence instead of squeezing the label. */
@media (max-width:374px){
 body.s55 #on-air > #v8-live-content > .v8-live-empty .v8-live-empty-link{order:3;margin-left:32px}
}

/* Retry while its check runs (live55.js placeRetry): same box, still focusable, visibly inactive.
   Applies beside cards too. After the idle and study19 button rules so it wins at equal weight. */
body.s55 #on-air > .v8-live-foot > button#v8-live-retry[aria-disabled="true"],
body.s55 #on-air > .v8-live-foot > button#v8-live-retry[aria-disabled="true"]:hover{
 border-color:#4a4032;color:#a8997a;cursor:progress
}
/* The heading receives focus only when a retry it replaced disappears; ring for keyboard users. */
body.s55 #on-air > .v8-live-heading > h2:focus{outline:none}
body.s55 #on-air > .v8-live-heading > h2:focus-visible{outline:2px solid #d8b66a;outline-offset:5px}

@media (prefers-reduced-motion:reduce){
 body.s55 #on-air[data-state="loading"] > #v8-live-content > .v8-live-empty::before{animation:none;background-image:none;background-color:#8a7247}
}