/* ============================================================================
   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. I DAG PÅ FORRE (händelsekorten)   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-fc .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}
}

/* ★ YTAN FÖR INLÄGG OCH HÄNDELSEKORT (2026-10-30 kväll). Kenta: "snäppet ljusare än väggen".
   Väggen är #171717 (--card). --raise (#232323) var för ljust, #2a2a2a ännu mer — nu #1c1c1c (Kentas val),
   ett snäpp över väggen. Ljust oförändrat (vita kort på --inset). EN variabel för inläggen,
   korten och ringarna runt ansiktena. */
.nh{--nh-yta:var(--raise)}
[data-theme="dark"] .nh{--nh-yta:#1c1c1c}

/* ---------------------------------------------------------------- 4. I DAG PÅ FORRE (händelsekorten) */
/* ★ 2026-10-30 — Kentas val ur design-proposals/handelsekort-2026-10-30.html#v ("Dagens firande
   med A:s anatomi i varje bricka", "max 3 kort … inga pilar"). Ersätter Sedan sist-korten.
   Högst tre kort i en rad, lika breda. Fler saker → två kort + "Mer i dag" med raderna.
   Färg = betydelse (ny.css §11): fest rosa --c-fira, rank i nivåtonen, guld = vinst,
   blått = sajtens egna milstolpar, grönt = vänner. EN mjuk knapp per kort, i kortets ton.
   Ytan är A · Lyft (samma som väggens inlägg): mörkt --raise, ljust vitt kort med skugga. */
.nh-fest{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 0 14px;min-width:0;container:nh-fest/inline-size}
.nh-fhd{display:flex;align-items:baseline;gap:8px;padding:0 14px 10px}
.nh-fhd b{font:700 14px/1 var(--ui);color:var(--ink)}
.nh-fhd small{font:500 12px/1 var(--ui);color:var(--dim)}
.nh-frad{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:12px;padding:0 14px}
.nh-frad[data-n="1"]{--n:1}.nh-frad[data-n="2"]{--n:2}.nh-frad[data-n="3"]{--n:3}
.nh-fc{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:10px;overflow:hidden;padding:0 12px 12px;
  background:var(--nh-yta);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
html:not([data-theme="dark"]) .nh-fc{background:var(--card);box-shadow:0 1px 2px rgba(16,24,40,.06),0 0 0 1px var(--line)}
/* bandet: typens ton, mönstret bär typen */
.nh-fband{position:relative;margin:0 -12px;height:62px;padding:9px 12px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  background:color-mix(in srgb,var(--ton) 22%,var(--nh-yta));overflow:hidden}
html:not([data-theme="dark"]) .nh-fband{background-color:color-mix(in srgb,var(--ton) 15%,var(--card))}
.nh-fc.t-fodd .nh-fband{background-size:180px 62px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%2264%22%20viewBox%3D%220%200%20180%2064%22%3E%3Cg%20opacity%3D%22.55%22%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%229%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%23ff5f97%22%20transform%3D%22rotate(-25%2016%2012)%22%2F%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%2240%22%20r%3D%223%22%20fill%3D%22%232796f2%22%2F%3E%3Crect%20x%3D%2270%22%20y%3D%2218%22%20width%3D%2210%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%23d9a441%22%20transform%3D%22rotate(30%2075%2020)%22%2F%3E%3Ccircle%20cx%3D%2298%22%20cy%3D%2252%22%20r%3D%222.5%22%20fill%3D%22%23ff5f97%22%2F%3E%3Crect%20x%3D%22120%22%20y%3D%228%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%232fc3a4%22%20transform%3D%22rotate(-40%20124%2010)%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%2230%22%20r%3D%223%22%20fill%3D%22%23a879f0%22%2F%3E%3Crect%20x%3D%22164%22%20y%3D%2248%22%20width%3D%229%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%232796f2%22%20transform%3D%22rotate(20%20168%2050)%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%2254%22%20width%3D%227%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%23a879f0%22%20transform%3D%22rotate(50%2033%2055)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.nh-fc.t-unreal .nh-fband::after{content:"";position:absolute;right:-18px;top:-26px;width:104px;height:104px;opacity:.26;pointer-events:none;
  background:url("/public/images/ranks/Unreal_-_Icon_-_Fortnite.webp") center/contain no-repeat}
.nh-fc.t-dv .nh-fband::after,.nh-fc.t-vecka .nh-fband::after{content:"";position:absolute;right:-10px;top:-14px;width:80px;height:80px;opacity:.16;pointer-events:none;background:var(--ton);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%208l4.5%204L12%205l4.5%207L21%208l-2%2011H5z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%208l4.5%204L12%205l4.5%207L21%208l-2%2011H5z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.nh-fc.egen .nh-fband{background-color:color-mix(in srgb,var(--ton) 34%,var(--nh-yta))}
html:not([data-theme="dark"]) .nh-fc.egen .nh-fband{background-color:color-mix(in srgb,var(--ton) 26%,var(--card))}
.nh-ftag{position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;min-width:0;font:800 9.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ton);white-space:nowrap}
.nh-ftag>.bi{font-size:12px}
.nh-ftag svg,.nh-ftag img{width:14px;height:14px;flex:none}
.nh-ftid{position:relative;z-index:1;font:500 11px/1 var(--ui);color:var(--dim);white-space:nowrap}
/* ansiktet över bandkanten, typens märke i hörnet — som namnradens medalj */
.nh-fav{position:relative;align-self:flex-start;margin-top:-28px;z-index:2;display:inline-flex}
.nh-fav .n-fp .n-av{box-shadow:0 0 0 3px var(--nh-yta)}
html:not([data-theme="dark"]) .nh-fav .n-fp .n-av{box-shadow:0 0 0 3px var(--card)}
.nh-fav .n-fp>*+*{margin-left:-17px}
.nh-fmk{position:absolute;right:-7px;bottom:-3px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--card);box-shadow:0 0 0 1px var(--line);color:var(--ton);font-size:12px}
.nh-fmk img{width:19px;height:19px}
.nh-fmk svg{width:13px;height:13px}
.nh-fh{margin:10px 0 3px;font:600 13.5px/1.3 var(--ui);color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.nh-fh b{color:var(--ink);font-weight:800}
.nh-fh .ton{color:var(--ton)}
.nh-fs{margin:0 0 10px;font:400 12px/1.35 var(--ui);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:16px}
.nh-fs .n-num{font-weight:800;font-size:13.5px;color:var(--ink)}
.nh-fpr{min-height:20px;margin-bottom:10px}
.nh-fbv{display:inline-flex;align-items:center;gap:6px;font:500 11.5px/1 var(--ui);color:var(--ink2);max-width:100%;white-space:nowrap;overflow:hidden}
.nh-fbv .n-fp .n-av{box-shadow:0 0 0 2px var(--nh-yta)}
html:not([data-theme="dark"]) .nh-fbv .n-fp .n-av{box-shadow:0 0 0 2px var(--card)}
.nh-fbv .n-fp>*+*{margin-left:-6px}
.nh-fbv.forst{color:var(--dim)}
.nh-fak{margin-top:auto;display:flex;gap:6px}
/* knappen: typens ton som TEXT på en tvätt — tre fyllda färgknappar i rad vore tre accenter */
.nh .nh-fb{flex:1 1 auto;height:28px;border:0;background:color-mix(in srgb,var(--ton) 16%,transparent);color:var(--ton);font:700 12px/1 var(--ui)}
html:not([data-theme="dark"]) .nh .nh-fb{background:color-mix(in srgb,var(--ton) 12%,transparent);color:color-mix(in srgb,var(--ton) 80%,#000)}
.nh .nh-fb:hover{background:color-mix(in srgb,var(--ton) 26%,transparent);color:var(--ton)}
html:not([data-theme="dark"]) .nh .nh-fb:hover{color:color-mix(in srgb,var(--ton) 80%,#000)}
.nh .nh-fb.klar,.nh .nh-fk.dn{background:var(--live-wash);color:var(--live)}
.nh .nh-fb.klar:hover{background:var(--live-wash)}
.nh-fak>.nh-ab{display:flex;gap:6px;width:100%}
.nh-fak>.nh-ab>.n-btn{flex:1 1 0}
/* ansikten och namn leder till profilen (Kenta 2026-10-30) */
.nh-fpa{display:inline-flex;border-radius:50%;flex:none}
.nh-fpa:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nh-fav .nh-fpa:hover .n-av{transform:translateY(-1px)}
.nh-fav .n-av{transition:transform .15s}
.nh .nh-fn{color:inherit}
.nh .nh-fn:hover{text-decoration:underline;text-underline-offset:2px}
/* ett enda kort: en rad i full bredd — ett 680 px brett stående kort vore en tom låda */
.nh-frad[data-n="1"] .nh-fc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:14px;padding:0 16px 14px}
.nh-frad[data-n="1"] .nh-fband{grid-column:1/-1;margin:0 -16px;height:54px}
.nh-frad[data-n="1"] .nh-fav{grid-column:1;grid-row:2/6}
.nh-frad[data-n="1"] .nh-fh{grid-column:2;margin-top:8px;min-height:0;font-size:14.5px}
.nh-frad[data-n="1"] .nh-fs,.nh-frad[data-n="1"] .nh-fpr{grid-column:2}
.nh-frad[data-n="1"] .nh-fpr{margin-bottom:0}
.nh-frad[data-n="1"] .nh-fak{grid-column:3;grid-row:2/6;align-self:end}
.nh-frad[data-n="1"] .nh-fb{padding:0 18px}
/* "Mer i dag" — samma kortform, raderna i stället för en person. Stjärnorna i guld (Kenta). */
.nh-fc.mer .nh-fband{background:var(--inset)}
.nh-fc.mer .nh-ftag{color:var(--ink2)}
.nh-fc.mer .nh-ftag>.bi{color:var(--gold);font-size:13px}
.nh-fc.mer .nh-ftid{font:800 12px/1 var(--hd);color:var(--ink2)}
.nh-fml{display:flex;flex-direction:column;gap:2px;margin-top:-22px;position:relative;z-index:2}
.nh-fmr{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:38px}
.nh-fmi{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--card);box-shadow:0 0 0 1px var(--line);color:var(--ton);font-size:12px}
.nh-fmi img{width:19px;height:19px}
.nh-fmi svg{width:13px;height:13px}
.nh-fmt{min-width:0;font:400 12px/1.3 var(--ui);color:var(--ink2);white-space:nowrap;overflow:hidden}
.nh-fmt>b{display:block;color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis}
.nh-fmv{display:block;font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis}
.nh-fmv .ton{color:var(--ton);font-weight:700}
.nh .nh-fk{height:24px;padding:0 8px;border:0;border-radius:5px;font:700 11.5px/1 var(--ui);background:color-mix(in srgb,var(--ton) 16%,transparent);color:var(--ton);white-space:nowrap}
html:not([data-theme="dark"]) .nh .nh-fk{color:color-mix(in srgb,var(--ton) 80%,#000)}
.nh .nh-fk:hover{background:color-mix(in srgb,var(--ton) 26%,transparent)}
.nh .nh-fk.dn{padding:0 7px}
.nh .nh-fk .bi{margin:0}
.nh-falla{display:block;margin-top:8px;font:600 12px/1 var(--ui);color:var(--accent-ink);text-align:left}
.nh-falla:hover{text-decoration:underline}
/* ★ UTMANINGEN: omslaget .skl-ask är pulse-notifs.js krok och får ingen egen ruta; kvittot
   (askSettle) byter kortets innehåll och blir en hel rad i kortet. */
.nh-skl{display:contents}
.nh-fc.ask-done{flex-direction:row;align-items:center;padding:14px;min-height:120px}
.nh-fc.ask-done>.c{display:block;margin:0}
.nh-fc .ask-done-txt{font-size:13px;line-height:1.4;color:var(--ink)}
.nh-fc.ask-done--no .ask-done-txt{color:var(--ink2)}
.nh-fc.ask-done:not(.ask-done--no) .ask-done-txt>.bi{color:var(--live)}
.nh-fc .ask-done-txt a{color:var(--accent-ink);font-weight:600}
.nh-fc .ask-done-txt .bi{margin-right:4px}
/* smal mittspalt (≤ 560 px) och mobilen: korten blir rader under varandra, samma anatomi som
   ett-kort-raden — tre stående kort på 150 px vore tre spalter text. */
@container nh-fest (max-width:560px){
  .nh-frad{grid-template-columns:1fr;gap:10px;padding:0 12px}
  .nh-frad .nh-fc:not(.mer){display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;padding:0 12px 12px}
  .nh-frad .nh-fc:not(.mer) .nh-fband{grid-column:1/-1;margin:0 -12px;height:50px}
  .nh-frad .nh-fc:not(.mer) .nh-fav{grid-column:1;grid-row:2/6}
  .nh-frad .nh-fc:not(.mer) .nh-fh{grid-column:2/-1;min-height:0;margin-top:8px}
  .nh-frad .nh-fc:not(.mer) .nh-fs{grid-column:2/-1;margin-bottom:6px}
  .nh-frad .nh-fc:not(.mer) .nh-fpr{grid-column:2;margin:0;align-self:center}
  .nh-frad .nh-fc:not(.mer) .nh-fak{grid-column:3;align-self:center}
  .nh-frad .nh-fc:not(.mer) .nh-fs+.nh-fak{grid-column:3}
  .nh-frad .nh-fc:not(.mer) .nh-fb{flex:none;padding:0 14px}
  .nh-frad .nh-fc.mer .nh-fband{height:44px}
  .nh-fmt>b,.nh-fmv{display:inline}
  .nh-fmv{font-size:12px;color:var(--ink2)}
  .nh-fmv::before{content:" "}
}

/* ---------------------------------------------------------------- 5. SCENEN */
/* Live nu K1 "Bild + lista" (2026-11-01, design-proposals/live-scenen-2026-11-01.html): stor bild med
   titel/tittare/tid I bilden + lista med egen förhandsbild per sändning. ≤ dagens 341 px. */
.nh-stage{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px 16px;display:flex;flex-direction:column;gap:12px}
.nh-sh{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2);min-width:0}
.nh-sh>b{color:var(--ink);font-size:14px;white-space:nowrap}
.nh-sh .sp{flex:1}
.nh-shd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nh-sh .n-btn{flex:none}
.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;white-space:nowrap;flex:none}
.nh-lv i{width:7px;height:7px;border-radius:50%;background:var(--live)}
.nh-k1{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:12px}
.nh-k1>*{min-width:0}
.nh-k1-stor{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--inset);color:#fff;text-decoration:none;isolation:isolate}
.nh-k1-stor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nh-k1-stor .fb{position:absolute;inset:0;display:grid;place-items:center}
.nh-k1-stor::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.74));pointer-events:none}
.nh-k1-stor .tg{position:absolute;top:8px;z-index:1;height:20px;display:inline-flex;align-items:center;gap:4px;padding:0 6px;border-radius:4px;font:700 10.5px/1 var(--ui);letter-spacing:.04em;background:rgba(0,0,0,.6);color:#fff}
.nh-k1-stor .tg.lv{left:8px;background:var(--live)}
[data-theme="dark"] .nh-k1-stor .tg.lv{color:#06140d}
.nh-k1-stor .tg.vw{left:52px;font-weight:600;letter-spacing:.02em}
.nh-k1-stor .tg.vw i{font-size:11px}
.nh-k1-stor .tg.pf{right:8px;font-weight:600;letter-spacing:.02em}
.nh-k1-stor .tg.pf .n-pfb{margin-right:2px;vertical-align:0}
.nh-k1-stor .tg.tid{top:34px;right:8px;font:700 11px/1 var(--hd);letter-spacing:0;font-variant-numeric:tabular-nums}
.nh-k1-stor .tit{position:absolute;z-index:1;left:10px;right:10px;bottom:36px;font:600 12.5px/1.25 var(--ui);text-shadow:0 1px 2px rgba(0,0,0,.6);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nh-k1-stor .ov{position:absolute;z-index:1;left:10px;right:10px;bottom:8px;display:flex;align-items:center;gap:8px;min-width:0;font:700 12.5px var(--ui);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.nh-k1-stor .ov .n-av{flex:none;box-shadow:0 0 0 1.5px #fff}
.nh-k1-stor .ov .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-k1-stor .ov small{font-weight:500;opacity:.85;font-size:11.5px}
.nh-k1-stor:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nh-k1-lista{display:flex;flex-direction:column;gap:4px;min-width:0}
.nh-k1-lista button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;align-items:center;padding:4px;border-radius:8px;min-width:0}
.nh-k1-lista button:hover{background:var(--inset)}
.nh-k1-lista button.on{background:var(--accent-wash)}
.nh-k1-lista button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.nh-k1-lista .pv{position:relative;display:grid;place-items:center;width:92px;height:52px;border-radius:6px;overflow:hidden;background:var(--inset)}
.nh-k1-lista .pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nh-k1-lista .tx{min-width:0}
.nh-k1-lista .tx b{display:block;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-k1-lista .tx small{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden}
.nh-k1-lista .tx small i.d{width:6px;height:6px;border-radius:50%;background:var(--live);flex:none}
.nh-k1-lista .mer{display:flex;align-items:center;gap:6px;padding:6px 4px;font:600 12px var(--ui);color:var(--accent-ink,var(--accent));text-decoration:none}
.nh-k1-lista .mer:hover{text-decoration:underline}
.nh-k1-ensam{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;min-width:0}
.nh-k1-ensam>b{font:800 17px/1.2 var(--hd);color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nh-k1-ensam>p{margin:0;font-size:12.5px;color:var(--ink2)}
.nh-k1-cta{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:var(--dim);text-decoration:none}
.nh-k1-cta i{color:var(--live)}
.nh-k1-cta u{text-decoration:none;color:var(--accent-ink,var(--accent));font-weight:600}

/* ---------------------------------------------------------------- 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}
/* ★ VÄGGENS YTA (2026-10-30, Kentas val "A · Lyft" ur design-proposals/wall-media-2026-10-29.html#ytan).
   Var tidigare en blå ton: color-mix(--accent-wash 70 %, --card). Nu neutral och ett snäpp
   LJUSARE än allt runt omkring — Väggen syns genom valör, inte färg. Mörkt: --raise på kortet
   + en hårfin ljuskant upptill. Ljust: vita kort på --inset med mjuk skugga. Sedan sist-korten
   (.nh-sm, avsnitt 4 — sedan 2026-10-30 händelsekorten .nh-fc) får samma yta — Kentas fråga "korten är med också va?". */
.nh-post{margin:0 12px 4px;padding:12px 14px;border-radius:10px;background:var(--nh-yta);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);min-width:0}
html:not([data-theme="dark"]) .nh-wall{background:var(--inset)}
html:not([data-theme="dark"]) .nh-post{background:var(--card);box-shadow:0 1px 2px rgba(16,24,40,.06),0 0 0 1px var(--line)}
html:not([data-theme="dark"]) .nh-cpill>span:not(.n-av){background:var(--inset)}
/* bild och YouTube står i SAMMA kant (var 542 mot 574 px — .wallmedia hade 16 px marginal kvar) */
.nh-post .post .pc-media .wallmedia{margin: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}
/* Namnraden 2026-10-30: med rank på metaraden blir den en egen rad under namnet (Skool-kortet). */
.nh-post .post .ph .t:has(.pc-rank){flex-basis:100%;margin:0;white-space:normal;flex-wrap:wrap;column-gap:6px;row-gap:0}
.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)}

/* ---------------------------------------------------------------- 7b. SKEPPSKLOCKAN (2026-11-01)
   Kentas val B i design-proposals/sasongsklockan-2026-11-01.html. Partial: ny-skeppsklocka.php.
   Säsongens slut (FortniteSeasonService) + veckans händelser + sprite-jakten (config/sasong_kalender.php).
   Guld = väntar (färgregeln). Rött bara sista dygnet. Ingen glow — djup från valör och kant. */
.nh-kl{overflow:hidden}
.nh-kl-band{display:none}
html[data-hogtid="treasure"] .nh-kl-band{display:flex;align-items:flex-end;height:30px;padding:0 12px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,var(--card)),var(--card))}
.nh-kl-band span{display:inline-block;transform:rotate(-3deg) translateY(5px);padding:5px 12px 4px;font:italic 900 12.5px/1 var(--hd);letter-spacing:.02em;color:#141a2a;background:#f4ead2;clip-path:polygon(3% 22%,14% 10%,30% 16%,46% 6%,62% 14%,80% 6%,99% 12%,96% 50%,100% 92%,82% 88%,62% 96%,42% 86%,22% 95%,1% 88%,4% 55%)}
.nh-kl-h{display:flex;align-items:baseline;gap:8px;padding:12px 16px 6px}
.nh-kl-h h2{margin:0;font:700 14px/20px var(--ui);color:var(--ink)}
.nh-kl-h span{margin-left:auto;font-size:12px;color:var(--dim);white-space:nowrap}
.nh-kl-s{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:2px 16px 4px}
.nh-kl-s>div{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 0 5px;text-align:center}
.nh-kl-s b{display:block;font:900 26px/1 var(--hd);color:var(--ink)}
.nh-kl-s small{display:block;margin-top:3px;font:600 9.5px/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.nh-kl.is-sista .nh-kl-s b,.nh-kl.is-sista .nh-kl-h h2{color:var(--danger)}
.nh-kl-slut{padding:5px 16px 0;font-size:11.5px;color:var(--dim)}
.nh-kl-slut b{color:var(--ink2);font-weight:600}
.nh-kl-byte{margin:0;padding:2px 16px 4px;font-size:12.5px;color:var(--ink2)}
.nh-kl-v{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;padding:10px 16px 12px}
.nh-kl-v span{height:22px;border-radius:var(--r-sm);background:var(--inset);display:grid;place-items:center;font:700 10px/1 var(--ui);color:var(--dim)}
.nh-kl-v span.klar{background:color-mix(in srgb,var(--gold) 20%,var(--inset));color:var(--ink2)}
.nh-kl-v span.nu{background:var(--gold);color:#1a1200}
.nh-kl-sek{padding:11px 16px 4px;border-top:1px solid var(--line);font:700 10.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.nh-kl-ev .r{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 16px}
.nh-kl-ev .r+.r{border-top:1px solid var(--line)}
.nh-kl-ev .d{font:700 12px/1.15 var(--hd);color:var(--ink2)}
.nh-kl-ev .d small{display:block;font:500 10.5px/1.3 var(--ui);color:var(--dim)}
.nh-kl-ev .r.idag .d{color:var(--gold)}
.nh-kl-ev .n{min-width:0}
.nh-kl-ev .n b{display:block;font-size:12.5px;color:var(--ink)}
.nh-kl-ev .n small{display:block;font-size:11.5px;line-height:1.35;color:var(--dim)}
.nh-kl-ev em{font:700 11.5px/1 var(--hd);font-style:normal;color:var(--gold);white-space:nowrap}
.nh-kl-jakt{display:block;padding:11px 16px 13px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--inset) 60%,var(--card));color:var(--ink2);text-decoration:none}
.nh-kl-jakt:hover{background:var(--inset)}
.nh-kl-jakt .k{display:flex;align-items:center;gap:4px;margin-bottom:8px;font:700 10.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.nh-kl-jakt .k i{margin-left:auto;font-size:11px}
.nh-kl-jakt .steg{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:12px}
.nh-kl-jakt .steg>span{padding:4px 8px;border-radius:var(--r-sm);background:var(--raise);color:var(--ink);font-weight:600}
.nh-kl-jakt .steg>i{font-style:normal;color:var(--dim)}
.nh-kl-jakt .hj{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.nh-kl-jakt .hj>span{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink2)}
.nh-kl-jakt .hj img{width:22px;height:22px;border-radius:var(--r-sm);object-fit:contain;flex:none;background:var(--raise)}

/* ---------------------------------------------------------------- 7c. HEM A: LOGGBOKEN + FOLKET (2026-11-01)
   Kentas val A i design-proposals/hem-farre-paneler-2026-11-01.html. 8 lådor → 5:
   Loggboken (ny-loggboken.php) = I dag + Skeppsklockan · Folket = Här nu + Chattar · Sedan sist inne i väggen.
   Klockans siffror ärver nh-ir-raderna för dagens/veckans rader — samma radformat som förut. */
.nh-lb{overflow:hidden;padding-bottom:4px}
.nh-lb-k{padding:0 16px 6px}
.nh-lb-k>small{display:block;font:700 10.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.nh-lb-cd{display:flex;align-items:baseline;gap:2px}
.nh-lb-cd b{font:900 30px/1 var(--hd);color:var(--ink)}
.nh-lb-cd i{font:700 10.5px/1 var(--ui);font-style:normal;color:var(--dim);margin:0 9px 0 2px;letter-spacing:.04em}
.nh-lb.is-sista .nh-lb-cd b,.nh-lb.is-sista .nh-lb-k>small{color:var(--danger)}
.nh-lb-bar{position:relative;height:5px;margin:11px 0 5px;border-radius:3px;background:var(--line2)}
.nh-lb-bar b{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--gold)}
.nh-lb-bar s{position:absolute;top:-2px;width:1px;height:9px;background:color-mix(in srgb,var(--ink) 22%,transparent)}
.nh-lb-cd+.nh-lb-bl{margin-top:6px}
.nh-lb-bl{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--dim)}
.nh-lb-bl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-lb-byte{margin:0;font-size:12.5px;color:var(--ink2)}
.nh-lb-sek{margin-top:6px;padding:10px 16px 2px;border-top:1px solid var(--line);font:700 10.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.nh-lb-ir .r .t small{display:block;font:500 10.5px/1.3 var(--ui);color:var(--dim)}
.nh-lb-ir .r.idag .t{color:var(--gold)}
.nh-lb-ir em:empty{display:none}
.nh-lb-ir .n small{white-space:normal}
.nh-lb-j{display:flex;align-items:center;gap:4px;margin-top:6px;padding:10px 16px 8px;border-top:1px solid var(--line);font-size:12px;color:var(--ink2);text-decoration:none}
.nh-lb-j b{color:var(--ink);font-weight:700}
.nh-lb-j i{margin-left:auto;font-size:11px;color:var(--dim)}
.nh-lb-j:hover{color:var(--ink)}
/* VÄGEN — spelets veckokort som stig (2026-11-01, design-proposals/vagkartan-2026-11-01.html) */
.nh-lb-vag{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:8px 10px 4px}
.nh-lb-vag::before{content:"";position:absolute;left:30px;right:30px;top:21px;border-top:2px dashed var(--line2)}
.nh-lb-vag button{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:transparent;color:var(--dim);font:700 10px/1 var(--ui);cursor:pointer}
.nh-lb-vag button>i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:2px solid var(--line2);font:900 12px/1 var(--hd);font-style:normal;color:var(--ink2)}
.nh-lb-vag button>i i{font-size:11px}
.nh-lb-vag button.klar>i{background:color-mix(in srgb,var(--gold) 22%,var(--card));border-color:var(--gold);color:var(--ink)}
.nh-lb-vag button.live>i,.nh-lb-vag button.idag>i{background:var(--gold);border-color:var(--gold);color:#1a1200}
.nh-lb-vag button.slut>i{border-radius:var(--r-sm)}
.nh-lb-vag button.on{color:var(--ink)}
.nh-lb-vag button.on>i{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 35%,transparent)}
.nh-lb-vag button:focus-visible{outline:none}.nh-lb-vag button:focus-visible>i{box-shadow:0 0 0 3px var(--accent)}
.nh-lb-vk{margin:6px 12px 6px;padding:10px 12px;border-radius:var(--r);background:var(--inset);border:1px solid var(--line)}
.nh-lb-vk .h{display:flex;align-items:baseline;gap:8px;min-width:0}
.nh-lb-vk .h b{font:900 15px/1.15 var(--hd);color:var(--ink);min-width:0}
.nh-lb-vk .h em{margin-left:auto;font:700 11.5px/1 var(--hd);font-style:normal;color:var(--gold);white-space:nowrap}
.nh-lb-vk .h em.klar{color:var(--dim)}
.nh-lb-vk .h .live{margin-left:auto;align-self:center;padding:2px 7px;border-radius:3px;background:var(--live);color:#fff;font:800 10px/1.4 var(--ui);letter-spacing:.06em}
.nh-lb-vk .d{display:block;margin-top:2px;font-size:11px;color:var(--dim)}
.nh-lb-vk ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.nh-lb-vk li{display:flex;align-items:center;gap:9px;min-width:0}
.nh-lb-vk li img{width:26px;height:26px;border-radius:var(--r-sm);object-fit:contain;background:var(--raise);flex:none}
.nh-lb-vk li .ik{width:26px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--raise);color:var(--ink2);font-size:12px;flex:none}
.nh-lb-vk li .ik.ny{background:transparent;border:1px dashed var(--line2);color:var(--dim)}
.nh-lb-vk li b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nh-lb-vk li small{display:block;font-size:10.5px;color:var(--dim)}
.nh-lb-vk li>span:last-child{min-width:0}

/* Folket: gruppetiketter */
.nh-fgrp{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:700 10.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.nh-fgrp a{margin-left:auto;font:500 12px var(--ui);letter-spacing:0;text-transform:none}
.nh-fchatt .nh-chg{padding:0;margin:0 -8px}
/* Sedan sist inne i väggen — ingen egen ram */
.nh-wall .nh-fest-in{border:0;border-radius:0;background:transparent;border-bottom:1px solid var(--line);padding:4px 0 14px}
/* Säsongens siffror när allt är noll */
.nh-st4.is-noll{display:none}
/* WANTED som band i Hem (affischen i full storlek finns i verkstaden) */
[data-hogtid="treasure"] .nh-l .nh-s1{padding-top:22px;padding-bottom:12px}
.nh-l .th-w-h{font-size:26px;margin:0 0 8px}
.nh-l .th-w-f{width:58px;height:58px;border-width:2px;font-size:18px}
.nh-l .th-w-n{font-size:20px;margin:3px 0 2px}
.nh-l .th-w-b{font-size:17px}
.nh-l .th-w-b svg{width:16px;height:16px}
.nh-l .th-w-m{margin-top:7px;font-size:11.5px}
.nh-l .th-w-k{height:26px;margin-top:7px;padding:0 11px;font-size:11.5px}

/* ---------------------------------------------------------------- 8. SMALARE SKÄRMAR (dator) */
/* fyra kort under ~150 px var blir en spalt text — två och två i stället */
@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-k1{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- 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 [data-nh-o="9"]{order:9}
  .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}

  /* händelsekorten: raderna under varandra sköts av @container nh-fest i avsnitt 4 */
  .nh-fest{border-radius:var(--r)}

  /* 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-st4.is-noll{display:flex}
  .nh-pr2,.nh-du{display:none}

  /* scenen */
  .nh-stage{padding:12px}
  .nh-shd{display:none}
  .nh-k1{grid-template-columns:1fr;gap:8px}

  /* 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} }