/* ============================================================================
   FORRE.NU — STARTSIDAN I NYA TEMAT (forre_ny)                     2026-10-20
   ----------------------------------------------------------------------------
   Mockupen, rakt av: design-proposals/nytt-forre-2026-10-20.html, riktning C,
   runda 4 (#rikt=c|sida=hem — morgon, kväll och mobil). Måtten och reglerna är
   mockupens c-/a-/ny-klasser med prefixet nh- (c-sedan → nh-sedan osv.).

   Laddas BARA på startsidan i nya temat (PulseAssets, rutten hub) och följer
   med PJAX. Byggklossarna (n-btn, n-av, n-ring, n-dot, n-prog, n-sw, np-panel,
   np-ph2, np-fh) står i ny.css. Bara forre_pulse:s och skalets tokens.

   VAR LIGGER VAD
     themes/forre_ny/views/pages/hub/feed.php  markupen
     app/Helpers/NyHem.php                     datan
     themes/forre_ny/js/ny-hem.js              linserna, Lyssnar, spalterna, säsongsradens rutor
     forre_pulse.css (.post, .pfoot, .act)     väggkortets grund — här anpassas
                                               det bara inne i .nh-post

   1. RAMEN   2. VÄNSTER   3. SKRIVRUTAN (3b säsongsraden)   4. SEDAN SIST   5. SCENEN
   6. VÄGGEN  7. HÖGER     8. SMALARE SKÄRMAR   9. MOBILEN
   ============================================================================ */

/* ---------------------------------------------------------------- 1. RAMEN */
/* Du 320 | flödet | Folk 320 — Facebooks mått (Kentas val 18:05). */
.nh{display:grid;grid-template-columns:320px minmax(0,1fr) 320px;gap:20px;align-items:start}
.nh-l,.nh-m,.nh-r{display:flex;flex-direction:column;gap:14px;min-width:0}
/* Sidospalterna står kvar när väggen rullar. En spalt som är högre än fönstret
   följer med tills dess botten syns och står sedan där (ny-hem.js sätter
   --nh-top), så ingenting i den blir oåtkomligt. */
.nh-l,.nh-r{position:sticky;top:var(--nh-top,76px)}
:where(.nh) a{color:inherit;text-decoration:none}
.nh [hidden]{display:none!important}
:where(.nh) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.nh .n-btn{font:600 12.5px/1 var(--ui)}
.nh .n-btn.sm{font-size:12px}
.nh .n-btn.s{border-color:var(--line2)}
.nh .n-btn.p{background:color-mix(in srgb,var(--accent) 80%,#000);color:#fff}
[data-theme="dark"] .nh .n-btn.p{background:var(--accent);color:#06121f}
.nh .n-btn.p:hover{background:color-mix(in srgb,var(--accent) 68%,#000)}
[data-theme="dark"] .nh .n-btn.p:hover{background:var(--accent-ink)}
.nh .n-btn.g{color:var(--accent-ink)}
.nh .n-btn.g:hover{background:var(--accent-wash)}
.nh .n-btn.s:hover{border-color:var(--accent);color:var(--accent-ink)}
.nh .n-btn.io{width:30px;padding:0}
.nh .np-ph2{padding:14px 16px 8px}
.nh .np-more{padding:10px 16px}
.nh-dt{display:inline}
/* Ringen runt den som spelar ritas av .n-ring. Sajtens statusring (pulse-reactions.js,
   [data-st-ring]) och verifieringsringen (.is-bev) ligger då inte ovanpå — aldrig två ringar. */
.nh .n-ring>.n-av{outline:0}
.nh-mt,.nh-memb,.nh-mnr,.nh-sedh,.nh-mfaces,.nh-st4 .nh-mspr{display:none}

/* ---------------------------------------------------------------- 2. VÄNSTER */
/* Din ställning */
.nh-st2{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.nh-s1{display:flex;flex-direction:column;gap:10px}
.nh-s1 .ps small{display:block;font:600 10.5px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.nh-s1 .ps>div{display:flex;align-items:flex-end;gap:8px}
.nh-s1 .ps b{font:700 44px/.86 var(--hd);letter-spacing:-.02em;color:var(--ink)}
.nh-s1 .ps span{font-size:12px;color:var(--dim);line-height:1.3}
.nh-sep{display:block;height:0}
.nh-jakt{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink2)}
.nh-jakt>div{display:flex;align-items:center;gap:7px;min-height:26px}
.nh-jakt>div>span{min-width:0}
.nh-jakt i{font-size:10px;color:var(--live)}
.nh-jakt .dn2 i{color:var(--faint)}
.nh-jakt b{color:var(--ink);font-weight:700}
.nh-jakt .n-btn{margin-left:auto}
.nh-st4{display:flex;gap:6px}
.nh-st4 a{flex:1 1 0;display:flex;flex-direction:column;gap:3px;padding:7px 10px;border-radius:var(--r);background:var(--inset);min-width:0}
.nh-st4 a:hover{background:var(--accent-wash)}
.nh-st4 small{font:600 9.5px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.nh-st4 b{font:700 16px/1 var(--hd);color:var(--ink);white-space:nowrap}
.nh-pr2{display:grid;grid-template-columns:1fr;gap:6px}
.nh-pr2 .pg{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r);background:var(--inset);min-width:0}
.nh-pr2 .pg:hover{background:var(--accent-wash)}
.nh-pr2 .pg>span:last-child{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.nh-pr2 .pg b{font:700 15px/1.1 var(--hd);color:var(--ink);white-space:nowrap}
.nh-pr2 .pg b i{font-style:normal;font-size:12px;color:var(--dim)}
.nh-pr2 .pg em{font-style:normal;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-pr2 .pg .si{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--c-spr);background:color-mix(in srgb,var(--c-spr) 14%,var(--card));font-size:14px}
.nh-pr2 .n-prog{max-width:170px}
/* kvällens duellrad (mockupens .kr.c-du) */
.nh-du{display:flex;align-items:flex-start;gap:10px;border-top:1px solid var(--line);padding:10px 0 0}
.nh-du>div{flex:1;min-width:0}
.nh-du b{display:block;font-size:13px;font-weight:600;line-height:1.25}
.nh-du small{display:block;font-size:11.5px;color:var(--dim);line-height:1.3;margin-top:2px}
.nh-du .n-num,.nh-sm .n-num{white-space:nowrap}

/* Chattar — sju samtal och Discord, ovanför vecket */
.nh-chatt{padding-bottom:8px}
.nh-chatt .np-ph2>.n-lk{font-size:12.5px}
.nh-chg{display:grid;grid-template-columns:1fr;gap:1px;padding:0 8px}
.nh-ch{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:4px 8px;min-height:36px;border-radius:8px;font-size:13px;cursor:pointer;min-width:0}
.nh-ch:hover{background:var(--inset)}
.nh-ch>b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-ch>span:last-child{font-size:11.5px;color:var(--dim);white-space:nowrap}
.nh-ch .sqa{width:28px;height:28px;border-radius:8px;background:var(--accent-wash);color:var(--accent-ink);display:grid;place-items:center;font-size:13px}
.nh-ch .sqa.dc{background:color-mix(in srgb,#5865f2 16%,var(--card));color:#5865f2}
.nh-ch.vant>b{font-weight:800}
.nh-ch.vant>span:last-child{color:var(--accent-ink);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.nh-nd{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}

/* I dag — närmast först */
.nh-idag{padding-bottom:6px}
.nh-ir .r{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 16px;border-top:1px solid var(--line)}
.nh-ir .r:first-child{border-top:0}
.nh-ir .r:hover{background:color-mix(in srgb,var(--inset) 55%,transparent)}
.nh-ir .t{font-size:12.5px;font-weight:600;color:var(--ink2);white-space:nowrap}
.nh-ir .n{min-width:0}
.nh-ir .n b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-ir .n small{display:block;font-size:12px;color:var(--dim);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-ir em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--ink2);white-space:nowrap}

/* ---------------------------------------------------------------- 3. SKRIVRUTAN */
.nh-skriv{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.nh-skriv .in{flex:1;min-width:0;height:40px;border-radius:20px;background:var(--inset);display:flex;align-items:center;padding:0 16px;font-size:14.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-align:left}
.nh-skriv .in:hover{background:color-mix(in srgb,var(--inset) 70%,var(--line))}
.nh-skriv .in b{color:var(--ink);font-weight:600;flex:none}
.nh-skriv .in span{overflow:hidden;text-overflow:ellipsis}
.nh-skriv .tl{display:flex;gap:2px}
.nh-skriv .tl>*{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink2);font-size:15px}
.nh-skriv .tl>*:hover{background:var(--inset);color:var(--ink)}

/* ★ 3b. SÄSONGSRADEN (2026-10-25) — B2 i design-proposals/sasongsslut-nedrakning-2026-10-25.html.
   Sista veckan står säsongens slut överst i skrivrutan (feed.php $srHtml, NyHem::sasongsRad()).
   Rutan blir då en kolumn: raden, linjen (hur mycket av säsongen som är spelad), skrivraden.
   Guld = sista dygnet. Hela raden är en länk till topplistan (.nh-srl, som cupkortets .nh-cupl);
   chippet lyfts över den och är en egen länk — cupen före lördag, racet efter.
   Smal ruta (≤ 640 px: mobilen, och mitten under ~1 320 px fönster): rutorna får en egen rad,
   så att chippet aldrig klipps. Bred ruta (680 px på en vanlig skärm): allt på en rad. */
.nh-skriv.nh-sr-pa{flex-direction:column;align-items:stretch;gap:0;padding:0;container:nh-skriv/inline-size}
.nh-sin{display:flex;align-items:center;gap:10px;padding:12px 14px}
.nh-sr{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;padding:10px 14px;min-width:0}
.nh-srl{position:absolute;inset:0;z-index:1;border-radius:var(--r) var(--r) 0 0;-webkit-tap-highlight-color:transparent}
.nh-srl:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nh-srb{width:34px;height:34px;border-radius:var(--r);background:var(--inset);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;font:700 14px/1 var(--hd);letter-spacing:.01em;color:var(--ink);flex:none}
.nh-sr.gd .nh-srb{color:var(--gold);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 45%,var(--line))}
.nh-sr.ny .nh-srb{color:var(--gold);font-size:15px}
.nh-srt{flex:1;min-width:0}
.nh-srt>b{display:block;font:700 17px/1.1 var(--hd);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-srt>small{display:block;margin-top:4px;font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-srt .l{font:700 9.5px/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.nh-sr.gd .nh-srt .l{color:var(--gold)}
.nh-src{position:relative;z-index:2;display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 7px 0 8px;border-radius:10px;background:var(--inset);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:600 11.5px/1 var(--ui);white-space:nowrap;vertical-align:0}
.nh-src:hover{text-decoration:underline}
.nh-src:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nh-src i{font-size:9px;color:var(--dim)}
.nh-src .n-dot{width:6px;height:6px;margin-right:2px}
.nh-src.cup{background:var(--hw-wash);box-shadow:none;color:var(--hw-ink)}
.nh-src.cup i{color:var(--hw-ink)}
.nh-srr{display:flex;gap:5px;flex:none}
.nh-srk{width:48px;height:44px;border-radius:var(--r);background:var(--inset);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nh-srk b{font:700 22px/1 var(--hd);color:var(--ink);font-variant-numeric:tabular-nums}
.nh-srk small{font:600 7.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.nh-srk b.nh-tk{animation:nh-tk .32s ease-out}
@keyframes nh-tk{from{opacity:.25;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nh-srk b.nh-tk{animation:none}}
.nh-srg{color:var(--dim);font-size:13px;flex:none;margin-left:-2px;transition:color .15s,transform .15s}
.nh-srl:hover~.nh-srg{color:var(--ink);transform:translateX(2px)}
.nh-srp{height:2px;margin:0 14px;background:var(--line);position:relative;overflow:hidden;border-radius:1px}
.nh-srp>i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:1px}
.nh-srp.gd>i{background:var(--gold)}
.nh-srhr{height:1px;margin:0 14px;background:var(--line)}
@container nh-skriv (max-width:640px){
  .nh-sr{flex-wrap:wrap;row-gap:9px}
  .nh-srr{order:3;width:100%}
  .nh-srk{flex:1 1 0;width:auto;height:46px}
  .nh-srg{display:none}
  .nh-srt>small{white-space:normal}
}

/* ---------------------------------------------------------------- 4. SEDAN SIST */
/* Korten står i en rad, lika breda, så många som finns (inga tomma lådor). */
.nh-sedan{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
.nh-sm{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.nh-sm .hd{display:flex;align-items:center;gap:8px;margin-bottom:6px;width:100%;min-height:36px}
.nh-sm .hd small{margin-left:auto;align-self:flex-start;font:600 10px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.nh-sm.fodd .hd small{color:var(--c-fira)}
.nh-sm.duell .hd small{color:var(--accent-ink)}
.nh-sm.van .hd small{color:var(--live)}
.nh-sm.vecka .hd small{color:var(--gold)}
.nh-sm .n-fp>.n-av+.n-av{margin-left:-8px}
.nh-sm>b{font-size:13.5px;line-height:1.3;max-width:100%;font-weight:700}
.nh-sm>span{font-size:12px;line-height:1.35;color:var(--dim);max-width:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-bottom:10px}
.nh-sm>.n-btn{margin-top:auto}
/* ett enda kort: en rad, som på mobilen — ett 680 px brett kort är en tom låda */
.nh-sedan[data-n="1"]{display:block}
.nh-sedan[data-n="1"] .nh-sm{display:grid;grid-template-columns:52px minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center}
.nh-sedan[data-n="1"] .nh-sm .hd{display:contents}
.nh-sedan[data-n="1"] .nh-sm .hd>:first-child{grid-column:1;grid-row:1/4;justify-self:start}
.nh-sedan[data-n="1"] .nh-sm .hd small{grid-column:2;grid-row:1;margin:0;align-self:end}
.nh-sedan[data-n="1"] .nh-sm>b{grid-column:2;grid-row:2}
.nh-sedan[data-n="1"] .nh-sm>span{grid-column:2;grid-row:3;margin:0;-webkit-line-clamp:2}
.nh-sedan[data-n="1"] .nh-sm>.n-btn{grid-column:3;grid-row:1/4;margin:0}

/* ★ UTMANINGEN (2026-10-23, duellsidan C — koppling 1): Anta · Inte nu. Omslaget .skl-ask är
   pulse-notifs.js krok och får ingen egen ruta; kvittot (askSettle) blir en hel rad i kortet. */
.nh-skl{display:contents}
.nh-sm>.nh-ab{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.nh-sedan[data-n="1"] .nh-sm>.nh-ab{grid-column:3;grid-row:1/4;margin:0}
.nh-sm.ask-done{display:flex!important;flex-direction:row;align-items:center;justify-content:flex-start;min-height:60px}
.nh-sm.ask-done>.c{display:block;margin:0;color:inherit}
.nh-sm.ask-done--no .ask-done-txt{color:var(--ink2)}
.nh-sm.ask-done:not(.ask-done--no) .ask-done-txt>.bi{color:var(--live)}
.nh-sm .ask-done-txt{font-size:13px;line-height:1.4;color:var(--ink)}
.nh-sm .ask-done-txt a{color:var(--accent-ink);font-weight:600}
.nh-sm .ask-done-txt .bi{margin-right:4px}

/* ---------------------------------------------------------------- 5. SCENEN */
/* Någon sänder: den stora (lottad) och tre lika stora platser bredvid. */
.nh-stage{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}
.nh-sh{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2)}
.nh-sh>b{color:var(--ink);font-size:14px}
.nh-sh .sp{flex:1}
.nh-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}
.nh-lv i{width:7px;height:7px;border-radius:50%;background:var(--live)}
.nh-sg{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:12px;align-items:stretch}
.nh-big{display:flex;flex-direction:column;background:var(--inset);border-radius:10px;overflow:hidden;min-width:0}
.nh-big .fr{position:relative;display:block;aspect-ratio:16/9;background:var(--inset)}
.nh-big .fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nh-big .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}
.nh-big .tg.lv{left:8px;background:var(--live);color:#fff}
[data-theme="dark"] .nh-big .tg.lv{color:#06140d}
.nh-big .tg.pf{left:52px;background:rgba(0,0,0,.55);color:#fff;letter-spacing:.02em;font-weight:600}
.nh-big .inf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px}
.nh-big .inf>div{min-width:0}
.nh-big .inf b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-big .inf small{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-side{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;min-width:0}
.nh-sg[data-n="2"] .nh-side{grid-template-rows:repeat(2,minmax(0,1fr))}
.nh-sg[data-n="1"] .nh-side{grid-template-rows:minmax(0,1fr)}
.nh-sg[data-n="0"]{grid-template-columns:1fr}
.nh-slot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;background:var(--inset);border-radius:10px;padding:8px 12px;min-width:0;min-height:0}
.nh-slot .tx{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:3px;align-items:center}
.nh-slot .tx>b{grid-column:1;grid-row:1;font-size:13.5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-slot .tx>.n-btn{grid-column:2;grid-row:1;margin:0}
.nh-slot .tx>small{grid-column:1/-1;grid-row:2;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%}
.nh-slot .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--live-wash);color:var(--live);font-size:16px}
.nh-slot .n-fp>.n-av+.n-av{margin-left:-8px}
.nh-slot .n-fp>.n-av{box-shadow:0 0 0 2px var(--inset)}
.nh-slot.cta{background:transparent;border:1px dashed var(--line2)}
.nh-slot.alla{cursor:pointer}
.nh-slot.alla:hover{background:var(--accent-wash)}
/* plattformsbrickan är skalets .n-pfb (ny.css) — en för hela huset */
.nh-big .tg.pf .n-pfb{margin-right:4px;vertical-align:0}

/* ---------------------------------------------------------------- 6. VÄGGEN */
.nh-wall .np-fh{border-bottom:0;height:46px;padding:0 18px;gap:12px}
.nh-lins{display:flex;gap:2px;margin-left:8px}
.nh-lins button{font:500 13px/1 var(--ui);color:var(--ink2);padding:7px 10px;border-radius:6px;display:flex;gap:5px}
.nh-lins button:hover{color:var(--ink)}
.nh-lins button.on{background:var(--inset);color:var(--ink);font-weight:600}
.nh-wall .np-fh .nh-nya{margin-left:auto}
.nh-lyss{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);white-space:nowrap}
.nh-nya:not([hidden])+.nh-lyss{margin-left:4px}
.nh-lyss .n-dot{transition:opacity .4s}
.nh-lyss.slag .n-dot{opacity:.35}
.nh-lyss.tappat{color:var(--danger)}
.nh-lyss.tappat .n-dot{background:var(--danger)}

/* Inläggen: forre_pulse:s kort (wall-post-card.php) i mockupens blå ruta.
   Kortet är orört — samma klasser och krokar — bara utseendet ändras här. */
.nh-posts{display:flex;flex-direction:column}
.nh-post{margin:0 12px 4px;padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--accent-wash) 70%,var(--card));min-width:0}
.nh-post+.nh-post{margin-top:8px}
.nh-post>.card.post{background:transparent;border:0;box-shadow:none;border-radius:0;margin:0;padding:0!important;display:grid;grid-template-columns:40px minmax(0,1fr) auto;column-gap:12px;align-items:start;overflow:visible}
.nh-post .post .ph{display:contents}
.nh-post .post .ph>.av{grid-column:1;grid-row:1/span 12;width:40px;height:40px}
.nh-post .post .ph>div:not(.pmenu){grid-column:2;grid-row:1;min-width:0;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:8px;row-gap:2px;padding-top:1px}
.nh-post .post .ph .nm{font-size:14.5px;font-weight:700;min-width:0}
.nh-post .post .ph .t{margin:0 0 0 auto;font-size:12px;color:var(--dim);white-space:nowrap}
.nh-post .post .ph>.pmenu{grid-column:3;grid-row:1;margin:-3px -6px 0 2px}
.nh-post .post .pmore{width:28px;height:28px;color:var(--dim)}
.nh-post .post>:not(.ph){grid-column:2/-1;min-width:0}
.nh-post .post .body{padding:0;margin:4px 0 8px;font-size:15px;line-height:1.45;color:var(--ink)}
.nh-post .post .mer{margin:-4px 0 8px}
.nh-post .post .pc-media{margin:0 0 8px;padding:0}
.nh-post .post .pc-media .wallmedia img{border-radius:8px}
.nh-post .post .wpass,.nh-post .post .wlfg{margin:0 0 8px}
.nh-post .pfoot{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:2px;border:0;padding:0;margin:0;color:var(--ink2)}
.nh-post .pfoot .act{flex:none;height:26px;padding:0 6px;gap:6px;border-radius:var(--r);font:600 12px/1 var(--ui);color:var(--accent-ink)}
.nh-post .pfoot .act:hover{background:var(--accent-wash);color:var(--accent-ink)}
.nh-post .pfoot .act svg{width:14px;height:14px}
.nh-post .pfoot .act.on{color:var(--accent-ink)}
.nh-post .pcount{order:-1;margin:0 auto 0 0;padding:0;gap:10px;justify-content:flex-start;font-size:12.5px;color:var(--ink2)}
.nh-post .pcount .pc-l{order:-1;margin:0;color:var(--ink2)}
.nh-post .pcount .pc-c{color:var(--dim)}
.nh-post .cwrap,.nh-post [data-cpreview]{margin-top:8px}
/* kommentarsfältet, som i mockupen — klicket öppnar kortets riktiga fält */
.nh-cpill{display:flex!important;align-items:center;gap:8px;width:calc(100% - 52px);margin:8px 0 0 52px;text-align:left}
.nh-cpill>span:not(.n-av){flex:1;min-width:0;height:34px;border-radius:17px;background:var(--card);display:flex;align-items:center;padding:0 14px;color:var(--dim);font-size:13px}
.nh-cpill:hover>span:not(.n-av){color:var(--ink2)}
.nh-post:has(.cwrap:not([hidden])) .nh-cpill{display:none!important}

/* Det som hänt — en rad per händelse, dagen i vänsterkanten */
.nh-ev{padding:6px 0 4px}
.nh-evh{padding:8px 16px 6px}
.nh-er{display:grid;grid-template-columns:62px 24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:5px 16px;min-height:38px;font-size:13px;line-height:1.35;color:var(--ink2)}
.nh-er:hover{background:color-mix(in srgb,var(--inset) 55%,transparent)}
.nh-er .d{font:600 11.5px/1 var(--ui);color:var(--dim);white-space:nowrap}
.nh-er .t{min-width:0}
.nh-er .t b{color:var(--ink);font-weight:700}
.nh-er .t a:hover b,.nh-er .t a:hover{text-decoration:underline}
.nh-er .ri{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--inset);color:var(--ink2);font-size:11px}
.nh-er .a{display:flex;justify-content:flex-end}
.nh-er .a .n-btn{height:26px}
.nh-tom{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:13px;color:var(--dim)}
.nh-tom i{font-size:18px;opacity:.5}

/* ---------------------------------------------------------------- 7. HÖGER */
/* Cupen som kort */
.nh-cupc{background:var(--card);border:1px solid color-mix(in srgb,var(--hw) 35%,var(--line));border-radius:var(--r);overflow:hidden}
.nh-cupc .hd{height:72px;background:#000 center 26%/cover;position:relative}
.nh-cupc .hd .tg{position:absolute;left:10px;top:10px;font:700 10px/1 var(--ui);letter-spacing:.07em;text-transform:uppercase;background:var(--hw);color:var(--hw-on);padding:4px 7px;border-radius:4px}
.nh-cupc .bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;background:var(--hw-wash)}
.nh-cupc .t b{display:block;font:800 21px/1.05 var(--hd);color:var(--ink)}
.nh-cupc .t small{display:block;font-size:12px;color:var(--ink2);margin-top:3px;line-height:1.35}
.nh-cupc .rw{display:flex;align-items:center;gap:10px;min-width:0}
.nh-cupc .rw:empty{display:none}
.nh-cupc .cd{font:600 12px/1 var(--ui);color:var(--hw-ink);background:var(--card);border-radius:6px;padding:6px 8px;white-space:nowrap;flex:none}
.nh-cupc .cd b{font:700 18px/1 var(--hd);margin-right:1px}
.nh-cupc .cd.lv{display:inline-flex;align-items:center;gap:6px;color:var(--live);font-weight:700}
.nh-cupc .n-fp{flex:none}
.nh-cupc .n-fp>.n-av{box-shadow:0 0 0 2px var(--hw-wash)}
.nh-cupc .n-fp .vnt,.nh-cupc .n-fp .med{display:inline-flex;border-radius:50%;margin-left:-6px}
.nh-cupc .n-fp .vnt{padding:1px;border:1.5px dashed var(--hw-ink);background:var(--hw-wash)}
.nh-cupc .n-fp .med>.n-av{box-shadow:0 0 0 2px var(--hw-wash)}
.nh-cupc .du{min-width:0}
.nh-cupc .du b{display:block;font-size:12.5px;font-weight:700}
.nh-cupc .du small{display:block;font-size:11.5px;line-height:1.35;color:var(--ink2)}
.nh-cupc .du small b{display:inline;font-size:inherit}
.nh-cupc .ab{display:flex;gap:6px;flex-wrap:wrap}
.nh-cupc .ab form{display:contents}
/* Hela kortet leder till cupsidan (Kenta 2026-10-23: "hela framen förutom knapparna").
   .nh-cupl är en tom länk över kortet; knapparna lyfts över den, och ytan bredvid dem
   släpper igenom klicket (pointer-events). Pilen på bilden säger med ord vart du kommer. */
.nh-cupc{position:relative;isolation:isolate;transition:border-color .15s}
.nh-cupl{position:absolute;inset:0;z-index:1;border-radius:inherit;-webkit-tap-highlight-color:transparent}
.nh-cupl:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nh-cupc:has(>.nh-cupl:hover){border-color:color-mix(in srgb,var(--hw) 75%,var(--line))}
.nh-cupc .ab{position:relative;z-index:2;pointer-events:none}
.nh-cupc .ab :is(a,button){pointer-events:auto}
.nh-cupc .nh-cupg{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px 0 9px;border-radius:6px;background:rgba(10,10,10,.68);color:#fff;font:600 11.5px/1 var(--ui);white-space:nowrap;transition:background-color .15s,color .15s}
.nh-cupc .nh-cupg i{font-size:11px;transition:transform .15s}
.nh-cupl:is(:hover,:active,:focus-visible)~.hd .nh-cupg{background:var(--hw);color:var(--hw-on)}
.nh-cupl:hover~.hd .nh-cupg i{transform:translateX(2px)}

/* Vecka avgjord (kvällen) */
.nh-vkr{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:5px 16px}
.nh-vkr:hover{background:color-mix(in srgb,var(--inset) 55%,transparent)}
.nh-vkr>div{min-width:0}
.nh-vkr small{display:block;font:600 10.5px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.nh-vkr b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.nh-vkr em{font-style:normal;font-size:12px;color:var(--dim);white-space:nowrap}
.nh-vkr em b{display:inline;font:700 17px/1 var(--hd);color:var(--gold)}
.nh-vk .np-more{margin-top:8px}

/* Här nu */
.nh-nl{display:flex;flex-direction:column;padding:0 8px 6px}
.nh-pr{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;border-radius:var(--r)}
.nh-pr:hover{background:var(--inset)}
.nh-pr>a:first-child{display:grid;place-items:center}
.nh-pr>div{min-width:0}
.nh-pr b{font-size:13.5px;display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-pr small{display:flex;align-items:flex-start;gap:6px;font-size:12px;color:var(--dim);margin-top:2px;line-height:1.35}
.nh-pr small .n-dot{margin-top:4px}
.nh-pr .n-ring{margin:2px}
.nh-pr .n-ring>.n-av{--s:32px}
.nh-nsec{border-top:1px solid var(--line);padding:10px 16px}
.nh-sq{display:flex;flex-direction:column;gap:6px}
/* ★ 2026-10-22: märket (.nsq-cr i ny.css) + namn över passraden — "1 inne · ikväll 20:00" */
.nh-sq a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r);background:var(--inset);font-size:13px;min-width:0}
.nh-sq a:hover{background:var(--accent-wash)}
.nh-sq a>.t{flex:1;min-width:0;display:block}
.nh-sq a>.t>b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-sq a>.t>small{display:block;margin-top:1px;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-sq a>.t>small .n-dot{width:7px;height:7px;margin-right:5px;vertical-align:0}
.nh-sq a>.t>small b{font-weight:600}
.nh-sq a>.t>small b.ok{color:var(--live)}
.nh-sq a>.t>small b.gd{color:var(--gold)}
.nh-lfgsw{display:flex;align-items:center;gap:12px}
.nh-lfgsw>div{flex:1;min-width:0}
.nh-lfgsw b{display:block;font-size:13.5px;font-weight:600}
.nh-lfgsw small{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.nh-lfgsw .n-sw{cursor:pointer}
.nh-lfgsw.vantar .n-sw{opacity:.6;pointer-events:none}
.nh-lfgsw.fel small{color:var(--danger)}

/* ---------------------------------------------------------------- 8. SMALARE SKÄRMAR (dator) */
/* fyra kort under ~150 px var blir en spalt text — två och två i stället */
@media (max-width:1339px){
  .nh-sedan{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .nh-sedan[data-n="1"]{display:block}
}
@media (max-width:1279px){
  .nh{grid-template-columns:280px minmax(0,1fr) 280px}
}
@media (min-width:821px) and (max-width:1099px){
  .nh{grid-template-columns:290px minmax(0,1fr)}
  .nh-l{grid-column:1;grid-row:1}
  .nh-r{grid-column:1;grid-row:2}
  .nh-m{grid-column:2;grid-row:1/span 2}
  .nh-l,.nh-r{position:static}
  .nh-sg{grid-template-columns:1fr}
  .nh-side{grid-template-rows:none}
}

/* ---------------------------------------------------------------- 9. MOBILEN (≤ 820) */
/* Mockupens C.mHem: skrivrutan → sedan sist (eller scenen) → ställningen →
   väggen → cupen → dagen → veckan → här nu. Samma markup, CSS order. */
@media (max-width:820px){
  .nh{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .nh-l,.nh-m,.nh-r{display:contents}
  .nh [data-nh-o="1"]{order:1}.nh [data-nh-o="2"]{order:2}.nh [data-nh-o="3"]{order:3}.nh [data-nh-o="4"]{order:4}
  .nh [data-nh-o="5"]{order:5}.nh [data-nh-o="6"]{order:6}.nh [data-nh-o="7"]{order:7}.nh [data-nh-o="8"]{order:8}
  .nh-chatt{display:none}
  .nh-dt{display:none}
  .nh-mt{display:inline}

  /* skrivrutan */
  .nh-skriv{padding:10px 12px}
  .nh-skriv .in{font-size:13.5px;padding:0 12px}
  .nh-skriv .tl>*:not(:first-child){display:none}
  .nh-sin,.nh-sr{padding:10px 12px}
  .nh-srp,.nh-srhr{margin:0 12px}

  /* sedan sist — en lista */
  .nh-sedan,.nh-sedan[data-n="1"]{display:flex;flex-direction:column;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 0 4px}
  .nh-sedh{display:block;padding:0 12px 4px}
  .nh-sedan .nh-sm,.nh-sedan[data-n="1"] .nh-sm{display:grid;grid-template-columns:52px minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center;background:none;border:0;border-radius:0;border-top:1px solid var(--line);padding:9px 12px}
  .nh-sedh+.nh-sm{border-top:0}
  .nh-sedan .nh-sm .hd{display:contents}
  .nh-sedan .nh-sm .hd>:first-child{grid-column:1;grid-row:1/4;justify-self:start}
  .nh-sedan .nh-sm .hd small{grid-column:2;grid-row:1;margin:0;align-self:end}
  .nh-sedan .nh-sm>b{grid-column:2;grid-row:2;font-size:13px}
  .nh-sedan .nh-sm>span{grid-column:2;grid-row:3;-webkit-line-clamp:2;margin:0}
  .nh-sedan .nh-sm>.n-btn,.nh-sedan .nh-sm>.nh-ab{grid-column:3;grid-row:1/4;margin:0}
  .nh-sedh+.nh-skl>.nh-sm{border-top:0}
  .nh-sedan .nh-sm .n-fp>.n-av{--s:24px;--f:9px}
  .nh-sedan .nh-sm .n-fp>.n-av+.n-av{margin-left:-10px}

  /* ställningen — mockupens am-rap */
  .nh-st2{padding:14px;gap:0}
  .nh-s1{gap:0}
  .nh-s1 .ps{display:flex;align-items:center;justify-content:space-between}
  .nh-s1 .ps small{display:none}
  .nh-s1 .ps>div{gap:10px}
  .nh-s1 .ps b{font-size:40px;line-height:.9}
  .nh-s1 .ps span{font-size:12.5px}
  .nh-sep{display:inline;height:auto}
  .nh-sep::before{content:" · ";font-style:normal}
  .nh-memb{display:block}
  .nh-jakt{margin-top:10px;font-size:13px}
  .nh-jakt .dn2{display:none}
  .nh-mnr{display:inline}
  .nh-st4{margin-top:12px}
  .nh-st4 a{padding:8px 9px}
  .nh-st4 b{font-size:18px;line-height:1.1;margin-top:1px}
  .nh-dkills{display:none!important}
  .nh-st4 .nh-mspr{display:flex}
  .nh-pr2,.nh-du{display:none}

  /* scenen */
  .nh-stage{padding:12px}
  .nh-shd{display:none}
  .nh-sg{grid-template-columns:1fr}
  .nh-side{grid-template-rows:none!important;gap:8px}
  .nh-slot{padding:8px 10px}

  /* väggen */
  .nh-wall .np-fh{padding:0 12px;gap:6px}
  .nh-lins{margin-left:4px;overflow-x:auto;scrollbar-width:none}
  .nh-lins::-webkit-scrollbar{display:none}
  .nh-lins button{padding:7px 8px}
  .nh-lyss{display:none}
  .nh-post{margin:0 8px 4px;padding:12px}
  .nh-post>.card.post{grid-template-columns:36px minmax(0,1fr) auto;column-gap:10px}
  .nh-post .post .ph>.av{width:36px;height:36px}
  .nh-post .post .ph .t{font-size:11px}
  .nh-post .pfoot .act[data-share]{display:none}
  .nh-cpill{width:calc(100% - 46px);margin-left:46px}
  .nh-evh{padding:8px 12px 4px}
  .nh-er{grid-template-columns:24px minmax(0,1fr);padding:6px 12px;row-gap:4px}
  .nh-er .d{display:none}
  .nh-er .a{grid-column:2;justify-content:flex-start}
  .nh-er .a:empty{display:none}

  /* dagen och veckan */
  .nh .np-ph2{padding:12px 12px 6px}
  .nh-ir .r{padding:7px 12px}
  .nh-vkr{padding:5px 12px}
  .nh .np-more{padding:10px 12px}

  /* här nu — ansiktena i en rad */
  .nh-folk .np-ph2{padding:12px 14px 6px;justify-content:flex-start}
  .nh-folk .np-ph2 h2{font:600 10.5px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
  .nh-folk .np-ph2>span{margin-left:0;font:600 10.5px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
  .nh-folk .np-ph2>span::before{content:"· "}
  .nh-folk .np-ph2>span b{color:var(--dim);font-weight:600}
  .nh-nl,.nh-folk .nh-nsec{display:none}
  .nh-mfaces{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:2px 14px 12px}
  .nh-mfaces::-webkit-scrollbar{display:none}
  .nh-mfaces a{display:flex;flex-direction:column;align-items:center;gap:4px;width:70px;flex:none;text-align:center}
  .nh-mfaces b{font-size:12px;font-weight:600;width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nh-mfaces small{font-size:10.5px;color:var(--dim);width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nh-folk:not(:has(.nh-mfaces)) .np-ph2{padding-bottom:12px}
}

/* ══ F-RINGEN BAKOM "DIN STÄLLNING" (2026-10-21) ════════════════════════════════════════
   Kenta: "stora F loggan i denna som bakgrund i topp högra hörnet lite fade på snyggt".
   · 2026-10-23: masken (--n-fvm) bor nu i ny.css — samma recept som .n-fvm (topplistans racet,
     Spelas Ditt lag). CSS:en har EN kopia av banan.
   · EN mask (ringen) — toningen bor i SVG:ns egen gradient (stark uppe till höger, nästan borta
     nere till vänster). Aldrig två mask-lager som ska samverka: mask-composite faller tillbaka
     till union på vissa motorer (pulse-navbar-marke.css, fel 2).
   · Färgen är var(--logo): följer säsongen (Halloween-orange nu) och ljust/mörkt — samma regel
     som loggan överallt (ny.css "LOGGAN ÖVERALLT"). Ingen glow, ingen skugga: bara valör.
   · Rutan ligger INNE i kortet (top/right 0) och ringen är större än rutan, så hörnet beskär
     den utan overflow:hidden på kortet. z-index -1 i kortets egen stapling (isolation) = bakom
     texten men ovanpå kortets bakgrund. */
.nh-st2{position:relative;isolation:isolate}
.nh-st2::before{content:"";position:absolute;top:0;right:0;width:150px;height:150px;z-index:-1;pointer-events:none;
  border-top-right-radius:inherit;background:var(--logo);opacity:.11;
  -webkit-mask:var(--n-fvm) right -38px top -38px/188px 188px no-repeat;
          mask:var(--n-fvm) right -38px top -38px/188px 188px no-repeat}
[data-theme="dark"] .nh-st2::before{opacity:.09}
@media (max-width:820px){
  .nh-st2::before{width:112px;height:112px;-webkit-mask-position:right -30px top -30px;mask-position:right -30px top -30px;
    -webkit-mask-size:142px 142px;mask-size:142px 142px}
}
@media (prefers-contrast:more){ .nh-st2::before{display:none} }