/* =============================================================================
   FORRE.NU — LIVE-RUMMET I NYA TEMAT                   themes/forre_ny/css/ny-live.css
   -----------------------------------------------------------------------------
   BYGGD 2026-10-21 ur design-proposals/nytt-forre-2026-10-20.html, riktning C
   (#rikt=c|sida=live|lage=kvall · lage=morgon · skarm=mobil).
   Markup: themes/forre_ny/views/pages/streaming/index.php · JS: ny-live.js.
   Laddas BARA på streaming (PulseAssets, forre_ny-raderna). Prefix nlv-.

   ★ BARA forre_pulse:s TOKENS. Plattformsbrickan är skalets .n-pfb (ny.css, NySkal::pfb) —
     märken och färger ur SocialBrandService.
   ★ INGEN LODRÄT LINJE. Studions steg skiljs med vågräta linjer.
   ★ INGA MÖRKA PLATTOR I LJUST LÄGE. Rutan bakom en tumnagel är --inset, inte
     svart — faller bilden bort syns personens avatar på ljus yta.
   ★ SCENEN ÄR STARTSIDANS SCEN, med tumnaglar i platserna (mockupens lay 'c').
     Startsidans .nh-stage ligger i ny-hem.css som inte laddas här.
   ============================================================================= */

.nlv [hidden]{display:none!important}
/* Ringen runt den som sänder ritas av .n-ring — sajtens statusring ([data-st-ring])
   ligger då inte ovanpå. Aldrig två ringar. */
.nlv .n-ring>.n-av{outline:0}
/* Sajtens statusring (blå = söker folk, grön = spelar) betyder något annat än
   "sänder" — i Live-rummet är den gröna ringen bara för den som sänder. */
.nlv [data-st-ring]{outline:0}
.nlv .lv{color:var(--live);font-weight:600}

/* plattformsbrickan är skalets .n-pfb (ny.css) */

/* ---------------------------------------------------------------- 1. RUBRIKEN */
.nlv-ph .np-meta .m{display:none}

/* "Namn gick live — visa": bara när pollen hittat någon ny. Grönt = live. */
.nlv-ny{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;margin:0 0 14px;border:0;border-radius:999px;background:var(--live-wash);color:var(--live);font:600 12.5px/1 var(--ui);cursor:pointer}
.nlv-ny i{font-size:13px}
.nlv-ny:hover{background:color-mix(in srgb,var(--live) 20%,var(--card))}

/* ---------------------------------------------------------------- 2. SCENEN */
.nlv-scen{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.nlv-sh{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2);min-height:26px}
.nlv-sh>b{color:var(--ink);font-size:14px}
.nlv-sh .sp{flex:1}
.nlv-lv{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--live);background:var(--live-wash);padding:5px 9px 5px 7px;border-radius:999px}
.nlv-lv i{width:7px;height:7px;border-radius:50%;background:var(--live)}
.nlv-sg{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;align-items:stretch}
.nlv-sg[data-n="0"]{grid-template-columns:1fr}

/* den stora rutan */
.nlv-big{display:flex;flex-direction:column;background:var(--inset);border-radius:10px;overflow:hidden;min-width:0}
.nlv-big .fr{position:relative;display:block;width:100%;aspect-ratio:16/9;background:var(--inset);border:0;padding:0;margin:0;cursor:pointer;overflow:hidden}
.nlv-big .fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nlv-big .fr .fb,.nlv-slot .th .fb{position:absolute;inset:0;display:grid;place-items:center}
.nlv-big .fr .pl{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;font-size:30px;opacity:0;transition:opacity .15s ease}
.nlv-big .fr:hover .pl,.nlv-big .fr:focus-visible .pl{opacity:1}
.nlv-tg{position:absolute;top:8px;font:700 10.5px/1 var(--ui);letter-spacing:.05em;border-radius:4px;padding:4px 6px;display:inline-flex;align-items:center}
.nlv-tg.lv{left:8px;background:var(--live);color:#fff}
[data-theme="dark"] .nlv-tg.lv{color:#06140d}
.nlv-tg.pf{left:52px;background:rgba(0,0,0,.55);color:#fff;letter-spacing:.02em;font-weight:600}
.nlv-tg.pf .n-pfb{margin-right:4px;vertical-align:0}
.nlv-big .inf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px}
.nlv-big .inf>div{min-width:0}
.nlv-big .inf b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nlv-big .inf small{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* de tre platserna bredvid */
.nlv-side{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;min-width:0}
.nlv-sg[data-n="2"] .nlv-side{grid-template-rows:repeat(2,minmax(0,1fr))}
.nlv-sg[data-n="1"] .nlv-side{grid-template-rows:minmax(0,1fr)}
/* Tumnageln växer med platsen: 37 % av bredden följer höjden platsen har
   (räknat för 1000–1360 px), max mockupens 210 px. */
.nlv-slot{display:grid;grid-template-columns:37% minmax(0,1fr);gap:12px;align-items:center;background:var(--inset);border-radius:10px;padding:10px;min-width:0;min-height:0;color:var(--ink);text-decoration:none}
.nlv-slot .th{display:block;position:relative;width:100%;max-width:210px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--card);border:0;padding:0;margin:0;cursor:pointer}
.nlv-slot .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nlv-slot .th .nlv-tg{top:5px;left:5px;font-size:9px;padding:3px 5px}
.nlv-slot .th.dash{background:transparent;border:1.5px dashed var(--line2);display:grid;place-items:center;color:var(--live);font-size:24px;cursor:default}
.nlv-slot .th.faces{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;place-items:center;cursor:default}
.nlv-slot.alla .th{cursor:pointer}
/* Färre än tre ansikten: en rad i mitten i stället för ett halvtomt rutnät. */
.nlv-slot .th.faces:not(:has(>:nth-child(3))){grid-template-rows:1fr}
.nlv-slot .tx{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.nlv-slot .tx b{font-size:13.5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nlv-slot .tx small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;line-height:1.35;color:var(--dim);max-width:100%}
.nlv-slot .tx small .n-pfb{vertical-align:-3px;margin-right:5px}
.nlv-slot .tx .n-btn{margin-top:6px}
.nlv-slot.cta{background:transparent;border:1px dashed var(--line2)}
.nlv-slot.alla{cursor:pointer}
.nlv-slot.alla:hover{background:var(--accent-wash)}
.nlv-slot .n-btn.g i{margin-left:2px}
.nlv-slot>.av{display:none}        /* mobilens ansikte i stället för tumnageln */

/* ---------------------------------------------------------------- 3. LISTAN + STUDION */
.nlv-g{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:20px;align-items:start;margin-top:20px}
.nlv-dir{padding-bottom:12px;scroll-margin-top:112px}
.nlv-dir .np-fh{flex-wrap:nowrap}
.nlv-dir .np-fh .n-dim{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nlv-dir .np-fh>.np-mseg{margin-left:auto;flex:none}
.nlv-sgh{display:flex;align-items:baseline;gap:8px;padding:14px 18px 8px}
.nlv-sgh b{font-size:13.5px;color:var(--ink)}
.nlv-sgh span{font:600 11.5px/1 var(--ui);color:var(--ink2);background:var(--inset);padding:3px 7px;border-radius:999px}
.nlv-sgh em{font-style:normal;font-size:12px;color:var(--dim);margin-left:4px}
.nlv-sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:0 18px 6px}
.nlv-strm{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:12px 8px 10px;border-radius:10px;background:var(--inset);min-width:0;color:var(--ink);text-decoration:none}
.nlv-strm:hover{background:var(--accent-wash)}
.nlv-strm.on{background:var(--live-wash)}
.nlv-strm.on:hover{background:color-mix(in srgb,var(--live) 18%,var(--card))}
.nlv-strm b{font-size:13px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nlv-strm .pfs{display:flex;gap:2px}
.nlv-strm .pfs .n-pfb{margin:0}
.nlv-strm small{font-size:11.5px;color:var(--dim);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.nlv-ing{margin:0;padding:6px 18px 8px;font-size:13px;color:var(--dim)}

/* Studion */
.nlv-studio{scroll-margin-top:112px}
/* #studio och #alla-som-sander får fokus (tabindex=-1) när man landar på ankaret —
   för skärmläsaren. En hel panel ska inte få en fokusram för det. */
.nlv-studio:focus,.nlv-dir:focus{outline:0}
.nlv-stp{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.nlv-stp .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--hd);background:var(--accent-wash);color:var(--accent-ink)}
.nlv-stp b{display:block;font-size:14px;color:var(--ink)}
.nlv-stp small{display:block;font-size:12.5px;color:var(--ink2);margin-top:3px;line-height:1.4}
.nlv-stp .pf3{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.nlv-stp .pf3 .n-pfb{margin-right:0}
.nlv-stp .pf3 .n-btn i.bi-check2{font-size:13px;margin-left:-2px}
.nlv-stp .ov3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:9px 0}
.nlv-stp .ov3 span{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border-radius:8px;background:var(--inset);min-width:0}
.nlv-stp .ov3 i{color:var(--accent-ink);font-size:15px}
.nlv-stp .ov3 b{font-size:12.5px}
.nlv-stp .ov3 em{font-style:normal;font-size:11px;color:var(--dim)}
.nlv-gl{padding:14px 18px 16px}
.nlv-gl .n-ml{margin-bottom:8px}
.nlv-gl ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink2);line-height:1.4}
.nlv-gl ol b{color:var(--ink)}

/* inbjudan när ingen sänder — bara mobilen (datorns Studio säger samma sak) */
.nlv-csec{display:none}
.nlv-cta{display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 10px;align-items:start;border:1px dashed var(--line2);border-radius:10px;padding:10px 12px}
.nlv-cta .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--live-wash);color:var(--live);font-size:16px;grid-row:span 2}
.nlv-cta b{display:block;font-size:13.5px}
.nlv-cta small{display:block;font-size:12px;color:var(--ink2);line-height:1.4;margin-top:2px}
.nlv-cta .ab{grid-column:2;display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}

/* ---------------------------------------------------------------- 4. SPELAREN */
html.nlv-modopen{overflow:hidden}
.nlv-mod{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:24px}
.nlv-mod .bg{position:absolute;inset:0;background:rgba(11,15,20,.72)}
.nlv-mod .dlg{position:relative;width:min(1100px,100%,calc((100vh - 140px) * 1.7778));background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.nlv-mod .hd{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.nlv-mod .hd b{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nlv-mod .hd .sp{flex:1}
.nlv-mod .pl{aspect-ratio:16/9;background:var(--inset)}
.nlv-mod iframe{width:100%;height:100%;border:0;display:block}

/* ---------------------------------------------------------------- 5. SMALARE DATORSKÄRMAR */
@media (max-width:1300px){
  .nlv-g{grid-template-columns:minmax(0,1fr) 380px}
  .nlv-stp .ov3{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:1180px){
  .nlv-dir .np-fh .n-dim{display:none}
}
@media (max-width:1000px){
  .nlv-g{grid-template-columns:minmax(0,1fr)}
  .nlv-sg{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .nlv-slot .tx small{-webkit-line-clamp:1}
  .nlv-shd{display:none}
}

/* ---------------------------------------------------------------- 6. MOBILEN (≤ 820, C.mLive) */
@media (max-width:820px){
  .nlv-ph{flex-direction:row;align-items:baseline;gap:10px;margin-bottom:12px}
  .nlv-ph>div:first-child{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
  .nlv-ph h1{font-size:25px;line-height:1.1}
  .nlv-ph .np-meta{margin:0;font-size:12.5px}
  .nlv-ph .np-meta .d{display:none}
  .nlv-ph .np-meta .m{display:inline}
  .nlv-ph .np-phr{display:none}

  .nlv-scen{padding:14px 12px;gap:12px}
  .nlv-shd{display:none}
  .nlv-sg{grid-template-columns:1fr}
  .nlv-side,.nlv-sg[data-n] .nlv-side{grid-template-rows:none;gap:8px}
  .nlv-slot{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"av b btn" "av s btn";column-gap:10px;row-gap:2px;padding:8px 10px}
  .nlv-slot>.th,.nlv-slot>.th.dash,.nlv-slot>.th.faces{display:none}
  .nlv-slot>.av{display:inline-flex;grid-area:av}
  .nlv-slot>.ic.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--live-wash);color:var(--live);font-size:16px}
  .nlv-slot>.n-fp.av>.n-av{box-shadow:0 0 0 2px var(--inset)}
  .nlv-slot>.n-fp.av>.n-av+.n-av{margin-left:-8px}
  .nlv-slot .tx{display:contents}
  .nlv-slot .tx>b{grid-area:b;align-self:end}
  .nlv-slot .tx>small{grid-area:s;align-self:start;-webkit-line-clamp:2}
  .nlv-slot .tx>.n-btn{grid-area:btn;margin:0}
  .nlv-slot.alla .tx>.n-btn{display:inline-flex}

  .nlv-csec{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
  .nlv-g{margin-top:12px;gap:12px}
  .nlv-dir{padding-bottom:8px}
  .nlv-dir .np-fh{padding:0 12px;height:auto;min-height:46px;flex-wrap:wrap;gap:6px}
  .nlv-dir .np-fh h2{padding:12px 0 0;flex:1 1 auto}
  .nlv-dir .np-fh .n-dim{display:none}
  .nlv-dir .np-fh>.np-mseg{margin:0 0 8px auto}
  .nlv-sgh{padding:12px 12px 6px;flex-wrap:wrap}
  .nlv-sgh em{flex-basis:100%;margin:2px 0 0}
  .nlv-sgrid{grid-template-columns:repeat(3,minmax(0,1fr));padding:0 12px 6px;gap:6px}
  .nlv-strm{padding:10px 4px 8px}
  .nlv-strm .n-av{--s:44px;--f:14px}
  .nlv-strm b{font-size:12px}
  .nlv-studio .np-fh{padding:0 12px}
  .nlv-studio .np-fh .n-dim{display:none}
  .nlv-stp{padding:12px;grid-template-columns:26px minmax(0,1fr)}
  .nlv-stp .n{width:26px;height:26px;font-size:12px}
  .nlv-stp .ov3{grid-template-columns:1fr}
  .nlv-gl{padding:12px}
  .nlv-ing{padding:6px 12px 8px}

  .nlv-mod{padding:0;align-items:center}
  .nlv-mod .dlg{width:100%;border-radius:0;border-left:0;border-right:0}
}