/* =============================================================================
   forre_pulse — MOBILSKALET (vy A "Ett däck")                 prefix msk-
   Kentas val 2026-09-24: "bygg A utan stopp" ur
   design-proposals/mobilskalet-2026-09-23.html.
   =============================================================================
   KARTA (husregel "filkarta i toppen")
     themes/forre_pulse/css/pulse-mobilskal.css         ← DU ÄR HÄR. ALLT under 820 px.
     app/Helpers/PulseAssets.php                        registrerar filen (alltid, pjax=false)
     themes/forre_pulse/views/partials/pulse-topbar.php + pulse-topbar-rad1.php
                                                        toppens markup — ORÖRD. Allt här är
                                                        presentation av noder som redan finns.
     themes/forre_pulse/views/partials/pulse-cup-band.php
                                                        ★ cupens band blir remsans andra sida på
                                                        mobil (JS:en där flyttar noden in i .tr1)
     themes/forre_pulse/views/partials/pulse-drawer.php menyn som karta (rum-brickor, två spalter)
     themes/forre_pulse/views/partials/pulse-bottom-nav.php
                                                        bottennaven — FAB:en öppnar Skapa-arket
     themes/forre_pulse/views/partials/pulse-skapa-ark.php
                                                        Skapa-arket (egen inline-CSS, prefix ska-)

   VAD FILEN GÖR, I ORDNING
     0. Inget sidledsspill (overflow-x:clip — skapar INTE en scrollport, sticky lever)
     1. Toppen: navraden 44 px ÖVERST, remsan 30 px under. 123 → 74 px.
     2. Navraden: 16 px lod — första glyfens vänsterkant x16, sista glyfens högerkant x374
     3. Remsan: shouts (och cupen, se pulse-cup-band.php) på 30 px
     4. Bottennaven: intryckt platta på aktiv flik, blå chattbricka, FAB:en göms HELT
     5. Hubbens Du-rad står ovanför naven och följer med när den göms
     6. Nu-sidans marginal 12 → 16 (samma lod som alla andra sidor)
     7. Menyn: rum som brickor, Mitt/Sajten i två spalter, verktyg som brickor

   ★ SPECIFICITETEN ÄR RÄKNAD, INTE UPPSKRUVAD PÅ KÄNSLA.
     Toppens regler i pulse-topbar-rad1.css ligger på (0,4,0) — t.ex.
     `.top .in:not(.tr1-in) > .right .tb-item`. Flera partialer skriver dessutom
     inline <style> i <body>, som kommer EFTER den här filen i kaskaden. Därför
     bär reglerna här `:root:not(.msk-av) header.top …` = minst (0,5,2). Byt inte till
     !important — då går de inte att skriva över nästa gång.
     Prefixet är `:root:not(.msk-av)` = (0,2,0) i stället för `html` (0,0,1).
     Det är också en AV-KNAPP: sätt klassen msk-av på <html> så faller hela
     filen bort och mobilen ser ut som före 2026-09-24.
     ★ ALDRIG display på .tb-item eller .iconbtn här. Hälften av dem är gömda
       med display:none (dubbletterna fnx-php/fnx-m, kaffet, radar, ärenden …);
       en display-regel här tänder dem alla. Bara storleken sätts.

   FALLGROPAR SOM KOSTADE TID (uppmätt på live 2026-09-23, 390×844)
     · Klockan satt 9 px lägre: dess .tb-item är display:block 26 px hög med en
       44 px-knapp i — knappen hänger ut nedåt. Facket måste vara lika stort som
       knappen, inte tvärtom (26 px-regeln i rad1-css träffar INTE React-knapparna
       i .fnx-m, som ritas 44 px).
     · Skapa-FAB:en sitter 16 px ovanför naven. translateY(100%) gömmer 58 px och
       lämnar 10 px kupol. Gömningen måste vara 100 % + FAB:ens utstick + skugga.
     · .hb2-du (hubbens Du-rad) är sticky bottom:0 — bakom den FASTA naven.

   ROLLBACK: ta bort raden i PulseAssets.php. Filen kan ligga kvar.
   ============================================================================= */

@media (max-width:820px){

  /* ── 0. INGET SIDLEDSSPILL ───────────────────────────────────────────────
     Uppmätt: sidbredd 392 på 390 på VARJE sida (notisknappen) och 394 på hubben
     (vattenmärket .hb2-wm, som pulse-hub-a2.css:370 medvetet låter sticka ut).
     clip ≠ hidden: clip skapar ingen scrollport, så position:sticky (toppen,
     Du-raden, sprites-baren) fungerar precis som förut. Orsakerna lagas ändå
     nedan — det här är skyddsnätet. */
  html, body{ overflow-x:clip; }
  /* Orsak 2: hubbens vattenmärke. pulse-hub-a2.css:370 ger dess låda
     overflow:visible för desktopens luft; på en telefon finns ingen luft att ge. */
  :root:not(.msk-av) .shell.hub-a2 .hb2-wmc{ overflow:hidden; }

  /* ★ !important I AVSNITT 1–3, OCH BARA DÄR. Toppen är redan ett slagfält:
     pulse-navbar.css sätter `html .top .in{height:38px!important}` och
     `.top .in{height:48px!important}`, och pulse-topdeck.css
     `.tdk .top .burger{width:40px!important}` — uppmätt med en regelskanning
     på live 2026-09-24. Ingen specificitet slår en !important, så de här
     avsnitten måste bära samma vapen. Bottennaven och menyn har inga sådana
     regler och klarar sig utan.
  */
  /* ── 1. TOPPEN: EN RAD + REMSAN ─────────────────────────────────────────── */
  :root:not(.msk-av) header.top{ display:flex !important; flex-direction:column !important; height:auto !important; min-height:0 !important; }
  /* pulse-navbar.css sätter `html .top{min-height:84px!important}` — utan nollan
     blir det 10 px tomt under remsan. Och .top .in har margin:0 auto, som i en
     flexkolumn KRYMPER raden till innehållet (uppmätt 372 px) — därav width. */
  :root:not(.msk-av) header.top > .in:not(.tr1-in), :root:not(.msk-av) header.top > .tr1{ width:100% !important; margin:0 !important; }
  :root:not(.msk-av) header.top > .in:not(.tr1-in){ order:1 !important; }
  :root:not(.msk-av) header.top > .tr1{ order:2 !important; }

  /* ── 2. NAVRADEN — 44 px, 16 px lod ─────────────────────────────────────
     Tryckytor 44×44 med 18–20 px glyf ⇒ 12–13 px luft i facket. Radens egen
     padding 3 px ⇒ första glyfen står på x16 och sista slutar på x374, samma
     lod som korten under. */
  :root:not(.msk-av) header.top > .in:not(.tr1-in){ height:44px !important; padding:0 3px !important; gap:0 !important; max-width:none !important; z-index:3 !important; background:var(--card) !important; }
  :root:not(.msk-av) header.top > .in:not(.tr1-in) .burger{ width:44px !important; height:44px !important; font-size:20px !important; flex:0 0 auto !important; }
  :root:not(.msk-av) header.top > .in:not(.tr1-in) .burger .bi{ font-size:20px !important; }
  :root:not(.msk-av) header.top > .in:not(.tr1-in) .brand{ height:44px !important; padding:0 4px !important; gap:0 !important; font-size:17px !important; flex:0 0 auto !important; align-items:center !important; }
  :root:not(.msk-av) header.top > .in:not(.tr1-in) .brand .brand-mark,
  :root:not(.msk-av) header.top > .in:not(.tr1-in) .brand img{ width:22px !important; height:22px !important; margin-right:6px !important; }

  /* Override: EN platta med kartnålen och ordet — två knappar, ett föremål.
     margin-left:auto trycker platta + ikoner till höger. */
  :root:not(.msk-av) header.top > .in:not(.tr1-in) > .tr2-hg{ margin-left:auto !important; height:28px !important; padding:0 2px !important; gap:0 !important; background:var(--inset) !important; border-radius:var(--r-sm) !important; display:flex !important; align-items:center !important; flex:0 1 auto !important; min-width:0 !important; }
  :root:not(.msk-av) header.top > .in:not(.tr1-in) > .tr2-hg .ovp-karta{ order:-1 !important; height:28px !important; width:24px !important; padding:0 !important; justify-content:center !important; }
  :root:not(.msk-av) header.top > .in:not(.tr1-in) > .tr2-hg .ovp{ height:28px !important; padding:0 8px 0 0 !important; }
  :root:not(.msk-av) header.top > .in:not(.tr1-in) > .tr2-hg .ovp-ord{ font-size:12px !important; letter-spacing:.05em !important; }

  /* Högerklustret: bara sök och notiser. Kaffet bor i menyn (med sin
     förklaring — Epic Fan Content Policy, se pulse-drawer.php). */
  :root:not(.msk-av) header.top > .in:not(.tr1-in) > .right{ margin-left:0 !important; gap:0 !important; }
  :root:not(.msk-av) header.top > .in:not(.tr1-in) > .right .tb-cofw{ display:none !important; }
  :root:not(.msk-av) header.top > .in:not(.tr1-in) > .right .tb-item,
  :root:not(.msk-av) header.top > .in:not(.tr1-in) > .right .iconbtn{ width:44px !important; height:44px !important; margin:0 !important; top:auto !important; flex:0 0 auto !important; }
  :root:not(.msk-av) header.top > .in:not(.tr1-in) > .right .iconbtn .bi,
  :root:not(.msk-av) header.top > .in:not(.tr1-in) > .right .iconbtn > i{ font-size:18px !important; }

  /* Gästens "Bli medlem" är en textknapp, inte ett 44 px-fack: dess högerkant ska
     stå på lodet x374, alltså 13 px in från radens 3 px-kant. */
  :root:not(.msk-av) header.top > .in:not(.tr1-in) > .right .tb-register{ margin:0 13px 0 6px !important; height:30px !important; padding:0 10px !important; font-size:12px !important; }
  /* Gästens rad har 64 px mindre än medlemmens (knappen i stället för klockan).
     Uppmätt: OVERRIDE kapades till "OVER…". Kartnålen ger vika, ORDET stannar —
     destinationen ryker sist, samma ordning som pulse-topbar-rad1.css bestämt. */
  :root:not(.msk-av) body.pulse-guest header.top > .in:not(.tr1-in) > .tr2-hg .ovp-karta{ display:none !important; }
  :root:not(.msk-av) body.pulse-guest header.top > .in:not(.tr1-in) > .tr2-hg .ovp{ padding:0 8px !important; }

  /* ── 3. REMSAN — shoutsen på 30 px ─────────────────────────────────────── */
  :root:not(.msk-av) header.top > .tr1{ height:30px !important; background:var(--inset) !important; z-index:1 !important; position:relative !important; }
  :root:not(.msk-av) header.top > .tr1 .tr1-fx{ display:none !important; }
  :root:not(.msk-av) header.top > .tr1 .tr1-in{ height:30px !important; padding:0 16px !important; gap:0 !important; z-index:1 !important; }
  /* Skölden → stabens rad i menyn (pulse-drawer.php, data-pd-stab). Knappen
     finns kvar i DOM:en — det är den menyraden klickar på. */
  :root:not(.msk-av) header.top > .tr1 .tr1-in .tr1-hg{ display:none !important; }
  :root:not(.msk-av) header.top > .tr1 .sbar,
  :root:not(.msk-av) header.top > .tr1 .sbar .in{ height:30px !important; background:transparent !important; }
  :root:not(.msk-av) header.top > .tr1 .sbar .in{ padding:0 !important; gap:0 !important; }
  :root:not(.msk-av) header.top > .tr1 .sbar .tick,
  :root:not(.msk-av) header.top > .tr1 .sbar .ticktrack,
  :root:not(.msk-av) header.top > .tr1 .sbar .tk{ height:30px !important; }
  :root:not(.msk-av) header.top > .tr1 .sbar .tick{ flex:1 1 auto !important; min-width:0 !important; }
  :root:not(.msk-av) header.top > .tr1 .sbar .tk{ gap:6px !important; font-size:12.5px !important; }
  :root:not(.msk-av) header.top > .tr1 .sbar .sb-av{ width:18px !important; height:18px !important; flex:0 0 auto !important; }
  :root:not(.msk-av) header.top > .tr1 .sbar .tm2{ flex:1 1 auto !important; min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
  /* Pilen: hela raden är redan knappen till shoutboxen. */
  :root:not(.msk-av) header.top > .tr1 .sbar .chev{ display:none !important; }
  /* Reaktionerna: den första står kvar (samma som den föreslagna för händelsen),
     resten bor i shoutboxen. Tre knappar på 30 px trängde ut texten. */
  :root:not(.msk-av) header.top > .tr1 .sbar .sb-rx{ gap:0 !important; flex:0 0 auto !important; }
  :root:not(.msk-av) header.top > .tr1 .sbar .sb-rx > :not(:first-child){ display:none !important; }
  :root:not(.msk-av) header.top > .tr1 .sbar .sb-rx > :first-child{ height:22px !important; }

  /* Cupens sida av remsan (pulse-cup-band.php flyttar .pcb hit och sätter
     .msk-harcup på .tr1). Samma vändning som desktopens pulse-cup-sida.php:
     fade uppåt 450 ms. */
  :root:not(.msk-av) header.top > .tr1.msk-harcup .tr1-in{ padding-right:40px !important; transition:opacity .45s ease,transform .45s ease !important; }
  :root:not(.msk-av) header.top > .tr1 > .pcb{ position:absolute !important; inset:0 !important; z-index:2 !important; border:0 !important; background:var(--inset) !important; opacity:0 !important; transform:translateY(9px) !important; pointer-events:none !important; transition:opacity .45s ease,transform .45s ease !important; }
  :root:not(.msk-av) header.top > .tr1 > .pcb .pcb-in{ height:30px !important; padding:0 40px 0 16px !important; gap:8px !important; max-width:none !important; }
  :root:not(.msk-av) header.top > .tr1 > .pcb .pcb-pm{ width:20px !important; height:20px !important; }
  :root:not(.msk-av) header.top > .tr1 > .pcb .pcb-w{ font-size:15px !important; }
  :root:not(.msk-av) header.top > .tr1 > .pcb .pcb-cd{ font-size:12px !important; }
  :root:not(.msk-av) header.top > .tr1 > .pcb .pcb-sep{ display:none !important; }
  :root:not(.msk-av) header.top > .tr1 > .pcb .pcb-btn{ height:22px !important; line-height:22px !important; padding:0 9px !important; font-size:11px !important; }
  :root:not(.msk-av) header.top > .tr1.msk-cup > .pcb{ opacity:1 !important; transform:none !important; pointer-events:auto !important; }
  :root:not(.msk-av) header.top > .tr1.msk-cup > .tr1-in{ opacity:0 !important; transform:translateY(-9px) !important; pointer-events:none !important; }
  :root:not(.msk-av) header.top > .tr1 > .msk-dots{ position:absolute !important; right:16px !important; top:50% !important; transform:translateY(-50%) !important; z-index:3 !important; display:flex !important; gap:5px !important; }
  :root:not(.msk-av) header.top > .tr1 > .msk-dots button{ width:7px !important; height:7px !important; border-radius:50% !important; border:0 !important; padding:0 !important; background:var(--line2) !important; cursor:pointer !important; }
  :root:not(.msk-av) header.top > .tr1 > .msk-dots button.on{ background:var(--ink2) !important; }
  :root:not(.msk-av) header.top > .tr1.msk-cup > .msk-dots button.on{ background:#ff7a1a !important; }  /* cupens eventfärg = data (samma som .pcb --hw) */

  /* Megamenyn (stabsbaren .sbd, öppnas från menyns stabsrad) ska falla ut UNDER
     toppen, inte ovanför den: i topwrapens flexkolumn har den order 0 och .top 1. */
  :root:not(.msk-av) .pulse-topwrap > .sbd{ order:3 !important; }

  /* ── 4. BOTTENNAVEN ────────────────────────────────────────────────────
     Aktiv flik = INTRYCKT: en platta bakom ikonen, inte bara blå text.
     Gråskaletestet: plattan syns utan kulör. */
  :root:not(.msk-av) body .pulse-bottomnav .pbn-tab:not(.pbn-create) > .bi{
    width:52px; height:28px; border-radius:14px; display:grid; place-items:center;
    transition:background .2s ease, color .2s ease;
  }
  :root:not(.msk-av) body .pulse-bottomnav .pbn-tab.on{ color:var(--ink); }
  :root:not(.msk-av) body .pulse-bottomnav .pbn-tab.on > .bi{ background:var(--accent-wash); color:var(--accent-ink); }
  :root:not(.msk-av) body .pulse-bottomnav .pbn-tab{ gap:2px; }
  :root:not(.msk-av) body .pulse-bottomnav .pbn-badge{ top:4px; left:calc(50% + 9px); box-shadow:0 0 0 2px var(--card); }
  :root:not(.msk-av) body .pulse-bottomnav .pbn-dot{ top:5px; left:calc(50% + 12px); }
  /* Blått = människor pratar. Rött bara för det som kräver ditt svar (Nu). */
  :root:not(.msk-av) body .pulse-bottomnav #pbnMsgBadge{ background:var(--accent); }
  /* FAB:en sticker 16 px ovanför naven + 4 px ring + skugga ⇒ göm hela vägen. */
  :root:not(.msk-av) body.pulse-hide .pulse-bottomnav{ transform:translateY(calc(100% + 26px)); }

  /* ── 5. HUBBENS DU-RAD OVANFÖR NAVEN ───────────────────────────────────── */
  :root:not(.msk-av) .shell.hub-a2 .hb2-du{ bottom:calc(58px + env(safe-area-inset-bottom, 0px)); transition:bottom .3s ease; }
  :root:not(.msk-av) body.pulse-hide .shell.hub-a2 .hb2-du{ bottom:0; }

  /* ── 6. NU-SIDAN PÅ SAMMA LOD ─────────────────────────────────────────── */
  :root:not(.msk-av) .shell.nu{ padding-left:16px; padding-right:16px; }

  /* ── 7. MENYN SOM KARTA ────────────────────────────────────────────────
     1 592 px / 26 rader → en skärm. Markupen i pulse-drawer.php (.pd-l2,
     .pd-vt, .pd-lf, .pd-stab) — reglerna här är bara formen. */
  :root:not(.msk-av) .pulse-drawer{ padding:12px 12px 20px; }
  :root:not(.msk-av) .pulse-drawer .pd-head{ padding:8px 10px; margin-bottom:4px; }
  :root:not(.msk-av) .pulse-drawer .pd-head .pd-av{ width:40px; height:40px; }
  /* Sök bor i toppen. En sak, ett ställe. */
  :root:not(.msk-av) .pulse-drawer .pd-search{ display:none; }
  :root:not(.msk-av) .pulse-drawer .pd-sc-title{ padding:14px 4px 7px; font-size:9.5px; }

  :root:not(.msk-av) .pulse-drawer .pd-stab{
    display:flex; align-items:center; gap:8px; width:100%; margin-top:6px; height:36px; padding:0 10px;
    border:0; border-radius:var(--r); background:var(--champ-w); color:var(--champ);
    font:700 12.5px/1 Roboto,sans-serif; cursor:pointer;
  }
  :root:not(.msk-av) .pulse-drawer .pd-stab[hidden]{ display:none; }
  :root:not(.msk-av) .pulse-drawer .pd-stab em{
    margin-left:auto; font-style:normal; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
    background:var(--champ); color:#fff; font:800 10.5px/18px Roboto,sans-serif; text-align:center;
  }
  :root:not(.msk-av) .pulse-drawer .pd-stab em:empty{ display:none; }

  /* Rummen: tre brickor i bredd, två rader. */
  :root:not(.msk-av) .pulse-drawer .pd-rumgrp{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; border:0; padding:0; margin:0; }
  :root:not(.msk-av) .pulse-drawer .pd-rumgrp .pd-flink.pd-rum{
    position:relative; flex-direction:column; align-items:flex-start; justify-content:space-between;
    height:62px; padding:9px 10px; gap:0; background:var(--inset); border-radius:var(--r);
    font-size:12.5px; font-weight:700; color:var(--ink);
  }
  :root:not(.msk-av) .pulse-drawer .pd-rumgrp .pd-flink.pd-rum > .bi{ font-size:17px; width:auto; text-align:left; color:var(--ink2); }
  :root:not(.msk-av) .pulse-drawer .pd-rumgrp .pd-flink.pd-rum > span:not(.pd-ct){ line-height:1; white-space:nowrap; }
  :root:not(.msk-av) .pulse-drawer .pd-rumgrp .pd-flink.pd-rum .pd-ct{
    position:absolute; right:8px; top:10px; margin:0; font-size:10.5px; line-height:1;
  }
  :root:not(.msk-av) .pulse-drawer .pd-rumgrp .pd-flink.pd-rum.on{ background:var(--accent-wash); }
  :root:not(.msk-av) .pulse-drawer .pd-rumgrp .pd-flink.pd-rum.on > .bi{ color:var(--accent-ink); }
  :root:not(.msk-av) .pulse-drawer .pd-rumgrp .pd-flink.pd-rum.pd-ov > .bi{ color:var(--champ); }

  /* Mitt och Sajten: två spalter à 40 px. */
  :root:not(.msk-av) .pulse-drawer .pd-l2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 6px; }
  :root:not(.msk-av) .pulse-drawer .pd-l2 .pd-flink{ height:40px; padding:0 8px; gap:10px; font-size:13px; min-width:0; }
  :root:not(.msk-av) .pulse-drawer .pd-l2 .pd-flink > span:not(.pd-ct){ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  :root:not(.msk-av) .pulse-drawer .pd-l2 .pd-flink > .bi{ font-size:16px; width:18px; flex:0 0 auto; }
  /* Duellikonen är Kentas val (DuelSettingsService — glyf ELLER bild). Samma
     18 px-fack som glyferna, så texten står på samma lod som raderna runt. */
  :root:not(.msk-av) .pulse-drawer .pd-l2 .pd-flink > img,
  :root:not(.msk-av) .pulse-drawer .pd-l2 .pd-flink > .duel-ic{ width:18px; height:18px; flex:0 0 auto; object-fit:contain; margin:0; }
  :root:not(.msk-av) .pulse-drawer .pd-l2 .pd-flink .pd-ct{ margin-left:auto; font-size:10.5px; }

  /* Verktyg: brickor. Kaffet står kvar som hel rad — dess förklaring ska vara
     SYNLIG text (pulse-drawer.php, FAS 14). */
  :root:not(.msk-av) .pulse-drawer .pd-footer{ margin-top:14px; padding-top:0; border-top:0; gap:6px; }
  :root:not(.msk-av) .pulse-drawer .pd-vt{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  :root:not(.msk-av) .pulse-drawer .pd-vt .pd-dscw{ display:contents; }
  :root:not(.msk-av) .pulse-drawer .pd-vt .pd-flink{
    height:56px; padding:0 2px; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    background:var(--inset); border-radius:var(--r); font-size:10.5px; font-weight:600; text-align:center;
  }
  :root:not(.msk-av) .pulse-drawer .pd-vt .pd-flink > .bi{ font-size:17px; width:auto; color:var(--ink); }
  :root:not(.msk-av) .pulse-drawer .pd-vt .pd-flink > span{ line-height:1.1; }
  :root:not(.msk-av) .pulse-drawer .pd-vt .pd-flink .pd-theme-state{ display:none; }
  :root:not(.msk-av) .pulse-drawer .pd-vt .pd-flink .bi-discord{ color:#5865f2; }
  /* Discord-nypet (dsc-nyp) under brickorna, i full bredd. */
  :root:not(.msk-av) .pulse-drawer .pd-vt .dsc-nyp{ grid-column:1 / -1; order:10; }
  :root:not(.msk-av) .pulse-drawer .pd-footer > .pd-coffee{ background:var(--inset); padding:10px 12px; }
  :root:not(.msk-av) .pulse-drawer .pd-lf{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  :root:not(.msk-av) .pulse-drawer .pd-lf .pd-flink{
    height:36px; padding:0 10px; gap:8px; justify-content:flex-start; font-size:12.5px;
    background:var(--inset); border-radius:var(--r-sm);
  }
  :root:not(.msk-av) .pulse-drawer .pd-lf .pd-flink > .bi{ font-size:14px; width:16px; }
}
