/* live.sir.gg: stream overlay pages (sits on top of /ui.css) */
@layer components {
  @media (width < 860px) { .tnav .links + .end { margin-inline-start: auto; } }
  .lv-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .lv-grid.tall { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  @media (width < 900px) { .lv-grid, .lv-grid.tall { grid-template-columns: minmax(0, 1fr); } }
  .lv-side { display: grid; gap: 1.25rem; }

  /* stand-in for the stream, with the real overlay page scaled onto it */
  .stage { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(160deg, #2c2f36, #1c1e22 70%); container-type: inline-size; }
  .stage.wide { aspect-ratio: 16 / 9; }
  .stage.tall { aspect-ratio: 9 / 16; max-block-size: 78vh; margin-inline: auto; inline-size: 100%; }
  .stage::after { content: attr(data-label); position: absolute; inset-inline-end: .9rem; inset-block-end: .7rem; font-family: var(--mono); font-size: .72rem; color: rgb(255 255 255 / .38); }
  .stage .ov { position: absolute; transform-origin: 0 0; transform: scale(var(--s, .3)); }
  .stage iframe { display: block; border: 0; color-scheme: normal; background: transparent; }
  .stage-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-block-start: .85rem; }

  .lv-steps { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; counter-reset: s; }
  .lv-steps li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; align-items: baseline; color: var(--body); font-size: .94rem; }
  .lv-steps li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; border: 1px solid var(--line-2); border-radius: 50%; font-size: .78rem; color: var(--fg); }
  .lv-steps b { color: var(--fg); font-weight: 500; }
  .lv-steps code, .lv-note code { font-family: var(--mono); font-size: .86em; color: var(--fg); }

  .lv-url { margin-block: 1.1rem .75rem; }
  .lv-url .affix > input { padding-inline-start: .8rem; font-size: .84rem; text-overflow: ellipsis; }
  .lv-url .btn { margin: 3px; }
  .lv-size { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .lv-size div { padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--r); }
  .lv-size span { display: block; font-size: .76rem; color: var(--muted); }
  .lv-size b { font-family: var(--mono); font-weight: 500; color: var(--fg); font-size: 1.05rem; }
  .lv-note { margin-block-start: .9rem; font-size: .86rem; color: var(--muted); }
  .lv-note b { color: var(--body); font-weight: 500; }
  .lv-note a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
  .lv-note a:hover { text-decoration-color: var(--fg); }
  .lv-h { font-size: 1rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
  .lv-note.lv-file { margin-block: .35rem 1rem; }

  /* live.sir.gg home: one card per platform */
  .lv-pick { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; }
  @media (width < 760px) { .lv-pick { grid-template-columns: minmax(0, 1fr); } }
  .lv-card { display: grid; grid-template-rows: 1fr auto; gap: 1rem; padding: 1rem; text-decoration: none; color: inherit; transition: border-color .18s; }
  .lv-card:hover { border-color: var(--line-3); }
  .lv-card .stage { pointer-events: none; }
  .lv-card .stage.tall { max-block-size: 26rem; inline-size: auto; }
  .lv-card h2 { font-size: 1.15rem; }
  .lv-card p { color: var(--muted); font-size: .9rem; margin-block-start: .2rem; }
  .lv-card .go { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
  .lv-card .go span { color: var(--fg); font-weight: 500; font-size: .9rem; white-space: nowrap; }
}