/*!
 * FORRE.NU — PULSE DECK (2026-07-27, Kentas val ur design-proposals/forre-topp-och-hub-2026-07-27.html)
 * ---------------------------------------------------------------------------
 * BÄRANDE IDÉ: bannern, navbaren och pulsraden är inte tre däck som staplats.
 * De är ETT kort med en ram, en radie och en skugga — bannern blir
 * navigationens huvud i stället för dekoration ovanför den.
 *
 * TEKNIK: kortet byggs INTE med en wrapper. `.top` och `.sbar` är
 * `position:sticky` och en sticky-nod kan bara sticka inom sin förälders box —
 * en gemensam wrapper hade alltså släppt topbaren så fort kortet scrollat förbi.
 * I stället får de tre befintliga radernas INRE containrar (.pulse-banner-slot,
 * .top .in, .sbar .in) kortets ram/radie var för sig. De ser ut som ett objekt,
 * men fortsätter sticka precis som förr — och när bannern rullar bort dockar
 * topbaren automatiskt med kvadratiska överhörn, vilket är exakt det beteende
 * mockupens "scrollat"-läge visade. Gratis.
 *
 * BREDD: kortet är var(--shell-w) = 1200 px, samma box som `.shell`. Innehållet
 * inuti börjar 16 px in (befintlig padding i `.in`), vilket är exakt där
 * vänsterrailen börjar. Se BRAIN.md §3 "Två kanter, inte en".
 *
 * LADDAS: från pulse-topbar.php direkt EFTER pulse-topdeck.css, så reglerna här
 * vinner på lika specificitet. Scopas med html.tdk där topdeck-regler måste slås.
 * ---------------------------------------------------------------------------
 */

/* ══════════════════════════════════════════════════════════════════════════
   1 · KORTET
   ══════════════════════════════════════════════════════════════════════════ */

/* Bannern = kortets huvud. Full kortbredd (1200), rundade överhörn, ingen
   underkant (topbaren fortsätter direkt). Höjden sänkt 170 → 150 px. */
html.tdk .pulse-banner{padding:0;background:var(--bg)}
html.tdk .pulse-banner-slot{
  width:100%;
  max-width:var(--shell-w);
  aspect-ratio:auto;
  height:150px;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:10px 10px 0 0;
  overflow:hidden;
  background:var(--card);
}
html.tdk .pulse-banner-img{object-position:center 40%}

/* Mjuk bottenvinjett så bilden landar i navbaren i stället för att kapas av.
   Läsbarheten i chipsen sköts av deras egna glasplattor — den här behöver
   därför inte vara mörk. */
html.tdk .pulse-banner-slot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:54px;
  background:linear-gradient(transparent,rgba(6,10,15,.30));
  pointer-events:none;z-index:1;
}

/* Topbaren = kortets kropp. Den yttre <header> blir osynlig; ramen bor på .in. */
html.tdk .top{background:transparent;border-bottom:0}
html.tdk .top .in{
  background:var(--card);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
/* När bannern scrollat bort dockar topbaren — då ska den ha egna överhörn
   och en skugga så den läser som ett svävande kort, inte en avhuggen kant. */
html.tdk .top.is-docked .in{
  border-top:1px solid var(--line);
  border-radius:0 0 10px 10px;
  box-shadow:0 6px 22px -14px rgba(16,24,40,.45);
}
[data-theme="dark"] html.tdk .top.is-docked .in,
html[data-theme="dark"].tdk .top.is-docked .in{box-shadow:0 6px 22px -12px rgba(0,0,0,.75)}

/* Pulsraden = kortets fot. Svagt tonad så sektionen läses som ett annat lager
   utan att behöva en egen ram. */
html.tdk .sbar{background:transparent;border-bottom:0}
html.tdk .sbar .in{
  background:var(--zebra);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0 0 10px 10px;
}
/* Skuggan ligger på foten när hela däcket är synligt. */
html.tdk .sbar .in{box-shadow:0 6px 22px -16px rgba(16,24,40,.40)}
html[data-theme="dark"].tdk .sbar .in{box-shadow:0 6px 22px -14px rgba(0,0,0,.7)}
/* Har topbaren dockat är den redan avrundad — då ska foten inte dubbla radien. */
html.tdk .top.is-docked + .sbar .in{border-radius:0 0 10px 10px}

/* STAB-raden ligger som ett EGET litet kort ovanför däcket. Den finns bara för
   fem personer och ska inte bo inuti allas kort. */
html.tdk .pstaff{background:transparent;border-bottom:0;margin-bottom:8px}
html.tdk .pstaff .psb-in{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:9px;
  max-width:var(--shell-w);
  margin:0 auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   2 · SÄSONGSCHIPET (nere till HÖGER, på glasplatta)
   Konstverket skriker redan "RUNNERS · CHAPTER 7" — att skriva namn och kapitel
   ovanpå var en dubblett, och nere till vänster skar texten rakt genom titeln.
   Kvar: bara det bilden INTE säger. Glasplattan gör läsbarheten oberoende av
   vilken banner som ligger under — nästa säsongs artwork kan vara ljus, mörk
   eller full av text utan att någon behöver tänka på det.
   ══════════════════════════════════════════════════════════════════════════ */
.pdk-glass{
  background:rgba(9,13,19,.58);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
}
.pdk-seas{
  position:absolute;right:16px;bottom:13px;z-index:3;
  display:flex;align-items:center;gap:10px;
  color:#fff;line-height:1;padding:6px 13px;
  text-decoration:none;
}
.pdk-seas:hover{background:rgba(9,13,19,.72)}
.pdk-seas .lb{font-size:9.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.pdk-seas .bar{width:92px;height:3px;border-radius:20px;background:rgba(255,255,255,.26);overflow:hidden;flex:0 0 auto}
.pdk-seas .bar i{display:block;height:100%;background:#fff;border-radius:inherit}
.pdk-seas .pct{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.82)}
.pdk-seas .cd{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.pdk-seas .cd small{font-weight:600;font-size:10.5px;color:rgba(255,255,255,.6);margin-left:4px}
/* Sista veckan: guld i stället för vitt. Färg = betydelse. */
.pdk-seas.is-soon .bar i{background:#e0a72a}
.pdk-seas.is-soon .cd{color:#e0a72a}
@media(max-width:900px){.pdk-seas .lb,.pdk-seas .bar,.pdk-seas .pct{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   3 · NAVFLIKARNA
   Roboto är geometrisk med jämn strecktjocklek; Tablers 2 px streck har samma
   optiska vikt som en Roboto-600-stam. Gemener i stället för spärrade versaler:
   "Topplista" är smalare OCH läses snabbare än "TOPPLISTA".
   ══════════════════════════════════════════════════════════════════════════ */
html.tdk .top .in{gap:0}
html.tdk .top .tabs{gap:2px;margin:0}

/* flex:0 0 auto är INTE kosmetik: utan den krymper flikarna som flex-items och
   äter sin egen padding (uppmätt 84 px osynlig kompression i mockup-bygget) —
   etiketterna sitter praktiskt taget ihop utan att något ser trasigt ut. */
html.tdk .top .tab{
  flex:0 0 auto;
  height:58px;
  padding:0 10px;
  gap:7px;
  border-radius:0;
  color:var(--ink2);
}
html.tdk .top .tab .tab-lbl{
  font-size:13px;
  font-weight:600;
  letter-spacing:-.008em;
  text-transform:none;
}
html.tdk .top .tab i{font-size:17px;color:var(--dim);transition:color .12s}
html.tdk .top .tab:hover{background:transparent;color:var(--ink)}
html.tdk .top .tab:hover i{color:var(--ink2)}

/* Ikonfärg = betydelse, och BARA på den aktiva fliken. Åtta färgade ikoner i
   vila hade varit en regnbåge i sajtens dyraste rad — därför nollas
   topdeck-CSS:ens tonade per-flik-färger. */
html.tdk .top .tab.t-hub i,
html.tdk .top .tab.t-lb i,
html.tdk .top .tab.t-tr i,
html.tdk .top .tab.t-sq i,
html.tdk .top .tab.t-lfg i,
html.tdk .top .tab.t-str i,
html.tdk .top .tab.t-shop i,
html.tdk .top .tab.t-fo i,
html.tdk .top .tab.t-spr i{color:var(--dim)}
html.tdk .top .tab:hover i{color:var(--ink2)}

/* Aktiv flik: vikt + en mjuk ljusning som stiger uppåt bakom texten. Fliken ser
   tänd underifrån ut — broadcast, inte pill. Pucken (pulse-topdeck.js) ligger
   kvar som accentlist och behöver därför ingen egen ::after här. */
html.tdk .top .tab.on{background:transparent;color:var(--ink);font-weight:800}
html.tdk .top .tab.on .tab-lbl{font-weight:800}
html.tdk .top .tab.on i{color:var(--accent)}
html.tdk .top .tab.on::before{
  content:"";position:absolute;left:4px;right:4px;bottom:0;height:26px;
  border-radius:6px 6px 0 0;
  background:linear-gradient(transparent,color-mix(in srgb,var(--accent) 11%,transparent));
  pointer-events:none;z-index:0;
}
html.tdk .top .tab > *{position:relative;z-index:1}
html.tdk .top .tdk-puck{bottom:0;height:2px;border-radius:2px 2px 0 0}

/* ── RÄKNARE: asymmetriska med flit ──────────────────────────────────────
   GRÖNT (omvärlden) = 6 px prick, ingen siffra. Du behöver inte veta att det är
   exakt 3 streams, bara att det FINNS streams.
   RÖTT (kräver dig) = fylld pill med siffra, för tre svar på din tråd är tre
   saker du ska göra. Asymmetrin ÄR hierarkin — två likadana pillar i olika
   färg hade bara varit två pillar. */
html.tdk .top .tab .tab-ct:not(.tab-ct-chat):not(.tab-ct-fonew){
  position:static;
  width:6px;height:6px;min-width:0;
  padding:0;margin-left:-2px;
  border-radius:50%;
  background:var(--live);
  color:transparent;
  font-size:0;
  line-height:0;
  align-self:flex-start;
  margin-top:19px;
  border:0;
  box-shadow:none;
}
html.tdk .top .tab .tab-ct:not(.tab-ct-chat):not(.tab-ct-fonew) i{display:none}
/* Kräver dig: fylld röd pill med tabulär siffra och 2 px kortram, så den läser
   som pålagd på fliken i stället för att smälta ihop med den. */
html.tdk .top .tab .tab-ct-chat,
html.tdk .top .tab .tab-ct-fonew{
  position:static;
  min-width:17px;height:17px;
  padding:0 5px;margin-left:1px;
  border-radius:20px;
  background:var(--danger);
  color:#fff;
  font-size:10px;font-weight:900;
  display:inline-grid;place-items:center;
  font-variant-numeric:tabular-nums;
  border:0;
}
html.tdk .top .tab .tab-ct-chat i,
html.tdk .top .tab .tab-ct-fonew i{display:none}
/* Sprite-event pågår → gul puls på Sprites-fliken. Aldrig annars. */
html.tdk .top .tab .tab-ev{
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  align-self:flex-start;margin-top:19px;margin-left:-2px;flex:0 0 auto;
  animation:pdkPulse 1.9s infinite;
}
@keyframes pdkPulse{
  0%{box-shadow:0 0 0 0 rgba(224,167,42,.55)}
  70%{box-shadow:0 0 0 7px rgba(224,167,42,0)}
  100%{box-shadow:0 0 0 0 rgba(224,167,42,0)}
}

/* Hårfin avdelare mellan avsändaren och innehållet. Klassiskt broadcast-grepp:
   det säger "det här är FORRE, det där är sajten" utan ett enda extra ord. */
html.tdk .top .in .pdk-hair{
  width:1px;height:24px;background:var(--line);
  margin:0 14px 0 13px;flex:0 0 auto;
}
html.tdk .top .in .pdk-sp{flex:1;min-width:16px}

/* Bas-CSS:en centrerar flikarna med `.tabs{margin:0 auto}`. När marginalen
   nollställs ovan hamnar den lediga ytan i STÄLLET efter högerklustret, och
   avataren slutade 89 px innanför kortets synliga kant — ur lod med railen,
   pulsraden och footern (BRAIN.md §3 "Två kanter, inte en"). Uppmätt live
   2026-07-27: .right slutade 1768, allt annat 1857. `margin-left:auto` skjuter
   klustret till kanten igen. */
html.tdk .top .in .right{margin-left:auto}

/* ══════════════════════════════════════════════════════════════════════════
   3B · IDENTITETSZONEN — din squad + du
   Regel: identitet ≠ destination. Din squad är inte dit du GÅR, det är vad du
   ÄR med i — som ditt namn eller din rank. Därför sitter taggen här vid
   avataren och inte som en navflik som byter etikett ("ELIT" vs "SQUAD").
   Zonen och kontomenyn delar en gemensam inset-platta: den säger utan ord
   "det här är DU", resten av raden är sajten.
   ══════════════════════════════════════════════════════════════════════════ */
html.tdk .top .right .pdk-idz{
  display:inline-flex;align-items:center;flex:0 0 auto;
  padding:3px 0 3px 3px;margin-left:4px;
  background:var(--inset);
  border:1px solid var(--line);
  border-right:0;
  border-radius:22px 0 0 22px;
}
html.tdk .top .right .pdk-idz + .me-item{
  background:var(--inset);
  border:1px solid var(--line);
  border-left:0;
  border-radius:0 22px 22px 0;
  padding:3px 3px 3px 0;
}
html.tdk .top .right .pdk-sq{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 10px;
  border-radius:19px;
  color:var(--champ);
  font-size:11.5px;font-weight:800;
  text-decoration:none;
  transition:background .12s;
}
html.tdk .top .right .pdk-sq:hover{background:var(--card)}
html.tdk .top .right .pdk-sq .ti{font-size:17px}
.pdk-sqtag{
  font-size:10.5px;font-weight:900;letter-spacing:.03em;
  padding:2px 6px;border-radius:4px;
  background:var(--champ-w);
  border:1px solid color-mix(in srgb,var(--champ) 28%,transparent);
  white-space:nowrap;
}
.pdk-sqon{width:6px;height:6px;border-radius:50%;background:var(--live);flex:0 0 auto}
.pdk-sqb{
  position:absolute;top:-1px;right:1px;
  min-width:15px;height:15px;padding:0 4px;
  border-radius:20px;background:var(--danger);color:#fff;
  font-size:9px;font-weight:900;
  display:grid;place-items:center;
  border:2px solid var(--inset);
  font-variant-numeric:tabular-nums;
}
@media(max-width:820px){
  html.tdk .top .right .pdk-idz,
  html.tdk .top .right .pdk-idz + .me-item{background:transparent;border:0;border-radius:0;padding:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   4 · VERKTYGEN PÅ PULSRADEN (Kentas lösning — ingen extra rad, ingen flik)
   Raden läses som TRE grupper med TVÅ streck: [online · spelar] │
   [dueller · coins] │ [verktyg]. Verktygen väger MINDRE än statcellerna
   (26 px ikoner, --faint i vila) så raden inte läses som fyra statgrupper.
   Färgen vaknar på hover — en färg per element, aldrig i viloläge.
   ══════════════════════════════════════════════════════════════════════════ */
.sb-tools{
  position:relative;
  display:inline-flex;align-items:center;gap:1px;
  padding-left:11px;margin-left:11px;
  flex:0 0 auto;
}
.sb-tools::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:18px;background:var(--line2);
}
.sb-tools a{
  position:relative;
  width:26px;height:26px;border-radius:7px;
  display:grid;place-items:center;
  color:var(--faint);font-size:14px;line-height:0;
  transition:background .12s,color .12s;
}
.sb-tools a:hover{background:var(--card)}
.sb-tools a.sbt-dsc:hover{color:#5865f2}
[data-theme="dark"] .sb-tools a.sbt-dsc:hover{color:#7b86ff}
.sb-tools a.sbt-cof:hover{color:var(--gold)}
.sb-tools a.sbt-thm:hover{color:var(--ink)}
/* Discord har en prick när det är folk inne — status som betyder något.
   Kaffe och tema har inget tillstånd och får därför ingen dekoration. */
.sb-tools a .sbt-dot{
  position:absolute;top:2px;right:3px;
  width:6px;height:6px;border-radius:50%;
  background:var(--live);border:1.5px solid var(--zebra);
}
/* Sista elementet i raden ska linjera med containerns SYNLIGA högerkant.
   .sb-right har 10 px marginal av samma skäl (BRAIN.md §3). */
.sb-right .sb-tools{margin-right:10px}
.sb-right .sb-stat:last-child{margin-right:0}
@media(max-width:900px){.sb-tools{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   5 · MOBIL — däcket är en desktop-form. Under 820 px är bannern redan dold
   (forre_pulse.css) och topwrappen blir en flex-kolumn; då ska varken radier
   eller sidoramar finnas kvar, annars ser raderna avhuggna ut.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:820px){
  html.tdk .top .in,
  html.tdk .sbar .in,
  html.tdk .pstaff .psb-in{
    border-left:0;border-right:0;border-radius:0;box-shadow:none;
  }
  html.tdk .pstaff{margin-bottom:0}
  html.tdk .top .tab{height:52px;padding:0 8px}
  html.tdk .top .tab .tab-lbl{font-size:12px}
}

/* ══════════════════════════════════════════════════════════════════════════
   6 · CHATTRUTAN (dockan) — flikrad i messenger-modalen
   Sex chattytor blir en. Steg 1: Meddelanden + Squad i samma ruta.
   DM-listan ägs fortfarande helt av pulse-messenger.js — flikarna ligger
   BREDVID den, aldrig i stället för, så scroll-läget överlever ett byte.
   ══════════════════════════════════════════════════════════════════════════ */
.dock-tabs{display:flex;gap:3px;padding:8px 10px;border-bottom:1px solid var(--line)}
.dock-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:0;
  border-radius:20px;background:transparent;font-family:inherit;font-size:12px;font-weight:700;
  color:var(--dim);cursor:pointer;transition:background .12s,color .12s}
.dock-tab:hover{background:var(--inset);color:var(--ink)}
.dock-tab.is-on{background:var(--ink);color:var(--card)}
.dock-tab .bi{font-size:13px}
.dock-tag{font-size:10px;font-weight:900;letter-spacing:.03em;padding:1px 5px;border-radius:4px;
  background:var(--champ-w);color:var(--champ);border:1px solid color-mix(in srgb,var(--champ) 28%,transparent)}
.dock-tab.is-on .dock-tag{background:var(--card);border-color:transparent}

.dock-pane{display:flex;flex-direction:column;flex:1;min-height:0}
.dock-sqhd{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--ink2)}
.dock-sqhd .bi{color:var(--champ)}
.dock-sqhd b{color:var(--ink);font-weight:800}
.dock-sqlink{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--accent-ink);text-decoration:none}
.dock-sqlink:hover{text-decoration:underline}
.dock-msgs{flex:1;min-height:0;overflow-y:auto;padding:9px 0;overscroll-behavior:contain}
.dock-load,.dock-empty{padding:18px 12px;text-align:center;color:var(--faint);font-size:12px}
.dock-b{max-width:82%;margin:4px 12px;padding:6px 11px;border-radius:13px;font-size:12.5px;line-height:1.4;
  background:var(--inset);border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--ink)}
.dock-b.is-me{margin-left:auto;background:var(--accent);border-color:var(--accent);color:#fff;
  border-bottom-left-radius:13px;border-bottom-right-radius:4px}
.dock-who{display:block;font-size:10px;font-weight:800;color:var(--faint);margin-bottom:1px}
.dock-tx{display:block;word-break:break-word}
.dock-form{display:flex;align-items:center;gap:8px;padding:9px 11px;border-top:1px solid var(--line)}
.dock-in{flex:1;min-width:0;background:var(--inset);border:1px solid var(--line);border-radius:18px;
  padding:7px 13px;font-family:inherit;font-size:12.5px;color:var(--ink);outline:0}
.dock-in:focus{border-color:var(--accent)}
.dock-send{flex:0 0 auto;width:30px;height:30px;border:0;border-radius:50%;background:transparent;
  color:var(--accent);font-size:15px;cursor:pointer;display:grid;place-items:center}
.dock-send:hover{background:var(--inset)}

/* Squad-läget tar hela modalen (2026-07-27). Utan detta renderades chatten i
   den ~180 px smala konversationsspalten medan högerytan stod tom och sa
   "välj en konversation till vänster". DM-läget är helt oförändrat — klassen
   sätts bara när squad-fliken är aktiv. */
#pmModalOverlay.dock-full .pm-modal-list{flex:1 1 auto;width:auto;max-width:none}
#pmModalOverlay.dock-full .pm-modal-main{display:none}

/* Två rättelser efter live-koll av squad-läget (2026-07-27):
   1) Sökfältet syntes trots hidden — en klassregel med display:flex slår ut
      UA:ns [hidden]{display:none} (författarregel > user agent). Samma fälla
      som dokumenterats förut i composerns omslagszon. Egen guard krävs.
   2) Bubblorna blev 769 px breda (82 % av 938) och läste som rader, inte som
      chatt. Chatt-bubblor ska ha en läsbar maxbredd oavsett hur bred rutan är. */
#pmModalOverlay.dock-full .pm-modal-search{display:none !important}
#pmModalOverlay.dock-full .dock-b{max-width:min(62%,520px)}

/* ══════════════════════════════════════════════════════════════════════════
   7 · SÖKET — ETT sökfält, inte två (Kentas IA regel 07)
   Toppen hade TVÅ sökingångar: `.top .search` (inline-formulär med egen
   dropdown) OCH `.tb-searchbtn` (som öppnar kommandopaletten). Två sökningar
   som beter sig olika, 700 px isär. Formuläret vinner — det har dropdownen,
   `Ctrl K`-hinten och fungerar utan JS. Cmdk-knappen döljs på desktop och
   lever kvar för mobil, där formuläret inte får plats.
   Uppmätt: 130 px ledigt i raden ⇒ sökfältet får växa 38 → 168 px och bli
   den affordans mockupen visade i stället för en anonym förstoringsglas-ikon.
   ══════════════════════════════════════════════════════════════════════════ */
html.tdk .top .search{
  flex:0 0 auto;
  width:168px;
  height:34px;
  display:flex;align-items:center;gap:8px;
  padding:0 9px 0 11px;
  background:var(--inset);
  border:1px solid var(--line);
  border-radius:18px;
  transition:border-color .12s,width .16s;
}
html.tdk .top .search:focus-within{width:230px;border-color:var(--accent);background:var(--card)}
html.tdk .top .search > .bi{font-size:15px;color:var(--dim);flex:0 0 auto}
html.tdk .top .search input[name="q"]{
  flex:1;min-width:0;
  border:0;background:transparent;outline:0;
  font-family:inherit;font-size:12.5px;color:var(--ink);
}
html.tdk .top .search input[name="q"]::placeholder{color:var(--dim)}
html.tdk .top .search .skbd{
  flex:0 0 auto;
  font-size:9.5px;font-weight:800;letter-spacing:.02em;
  color:var(--faint);
  border:1px solid var(--line2);border-radius:4px;
  padding:1px 5px;background:var(--card);
  font-family:inherit;
}
html.tdk .top .search:focus-within .skbd{display:none}
/* Dubbletten bort på desktop — kvar på mobil där formuläret döljs. */
html.tdk .top .right .tb-searchbtn{display:none}
@media(max-width:820px){
  html.tdk .top .search{display:none}
  html.tdk .top .right .tb-searchbtn{display:inline-flex}
}
/* Placeholdertexten under bannern ("Banner-yta · 1200 × 170") låg kvar bakom
   bilden — osynlig men med i innerText och för skärmläsare. Bort när det finns
   en bild; kvar när slotten är tom så du ser att ytan finns. */
html.tdk .pulse-banner-slot:has(.pulse-banner-img) .pulse-banner-ph{display:none}

/* Rättelser efter live-mätning (2026-07-27):
   1) Sökfältet renderade som en TOM ruta — pulse-topdeck.css sätter
      `display:none` på både input och Ctrl K-hinten (fältet var kollapsat till
      en ikon i den gamla toppen). Bredden räckte alltså inte; innehållet måste
      också tändas. Uppmätt före: formW 168, inputW 0.
   2) Högerklustret slutade på 1862 medan railen och pulsraden slutar på 1857 —
      `.top .in` hade 11 px höger-padding, inte 16. Ur lod med två pixlar som
      syns direkt när man tittar på kanten (BRAIN.md §3). */
html.tdk .top .search input[name="q"]{display:block !important;width:auto;flex:1;min-width:0}
html.tdk .top .search .skbd{display:inline-block !important}
html.tdk .top .search:focus-within .skbd{display:none !important}
html.tdk .top .in{padding-left:16px;padding-right:16px}
/* En SENARE .tdk .top .in-regel i pulse-topdeck.css vann fortfarande över
   padding-right ovan (samma specificitet, senare i källordningen räknas —
   men den filen laddas FÖRE denna, så orsaken är i stället en regel längre
   ned i DENNA fil). !important här är medvetet: kanten är kanon och får inte
   kunna drivas isär av en framtida regel. Uppmätt: 1862 → 1857, i lod med
   railen (1857), pulsraden (1856) och footern. */
html.tdk .top .in{padding-right:16px !important}
html.tdk .top .right{margin-right:0 !important}
/* SÖKFÄLTETS BREDD ÄR EN BUDGETFRÅGA, inte en smakfråga (uppmätt 2026-07-27).
   Innerbredd 1168. Logga 103 + flikar 687 + höger 248 = 1038, kvar 130.
   Sökfältet på 168 gjorde raden 1206 — 38 px för bred, och flexboxen lät den
   svämma ut 5 px förbi kortkanten i stället för att linjera med railen.
   124 px rymmer "Sök spelare…" + Ctrl K och lämnar 6 px marginal. Vid fokus
   växer det till 230 (absolut positionerat så det ALDRIG kan spräcka raden). */
html.tdk .top .search{width:124px;flex:0 1 auto;min-width:0}
html.tdk .top .search:focus-within{
  width:230px;position:absolute;left:120px;z-index:60;
  box-shadow:0 6px 22px -10px rgba(16,24,40,.35);
}
html[data-theme="dark"].tdk .top .search:focus-within{box-shadow:0 6px 22px -8px rgba(0,0,0,.7)}

/* ══════════════════════════════════════════════════════════════════════════
   8 · EXAKT MOT MOCKUPEN (element-för-element-jämförelse 2026-07-27)
   Uppmätt i design-proposals/forre-topp-och-hub-2026-07-27.html:
     nav-ordning : brand 86 · hår 1 · flikar 700 · spacer 28 · höger 299
     höger-ordn. : SÖK 114 · kanaler 110 · du 63
     höjder      : banner 142 · nav 58 · pulsrad 40
   Live avvek på tre punkter: söket låg till VÄNSTER om flikarna (sköt hela
   navigationen 130 px åt höger så loggan och flikarna inte satt ihop),
   bannern var 150 i stället för 142, och söket 124 i stället för 114.
   ══════════════════════════════════════════════════════════════════════════ */
html.tdk .pulse-banner-slot{height:142px}
html.tdk .top .right .search{
  width:114px;flex:0 0 auto;order:-1;
  margin-right:2px;
}
html.tdk .top .right .search:focus-within{
  width:250px;position:absolute;right:0;top:11px;left:auto;z-index:60;
}
/* Håret hör ihop med LOGGAN, inte med söket — brand · hår · flikar, precis
   som mockupen. Utan denna regel ärver det gamla marginaler från när söket
   låg emellan. */
html.tdk .top .in > .brand + .tb-vsep{margin:0 14px 0 13px}

/* ══════════════════════════════════════════════════════════════════════════
   9 · KORTBREDDEN — 1168, INTE 1200 (Kentas fynd 2026-07-27)
   Uppmätt i mockupen: `.deck` är **1168 px**. `.wrap` är 1200 med padding 16,
   och kortet fyller dess INNEHÅLLSBOX. Alltså ligger kortets kant i LOD med
   vänsterrailens kant — de börjar på exakt samma x.
   Jag byggde kortet 1200 (skalets YTTERbox) med innehållet 16 px in. Följden:
   railen började 16 px INNANFÖR kortkanten och kortet stack ut 16 px åt vardera
   hållet mot allt annat på sidan. Det var "bredden" han såg.
   Fix: kortets tre sektioner kapas till shell-w MINUS paddingen. Innehållet
   inuti behåller sina 16 px, precis som i mockupen.
   ══════════════════════════════════════════════════════════════════════════ */
html.tdk .pulse-banner{padding:0 16px}
html.tdk .pulse-banner-slot{max-width:calc(var(--shell-w) - 32px)}
html.tdk .top .in,
html.tdk .sbar .in,
html.tdk .pstaff .psb-in{max-width:calc(var(--shell-w) - 32px)}

/* ══════════════════════════════════════════════════════════════════════════
   10 · IDENTITETSZONEN — mätt mot mockupen (Kentas fynd 2026-07-27)
   Uppmätt live FÖRE: avataren 34×34 med `border-radius:5px` (FYRKANTIG) i en
   `.me-item` som var 52 px HÖG, medan `.pdk-idz` bredvid var 40. Pillen blev
   ojämn och avataren stack ut både i form och höjd — det var det Kenta såg när
   han la mockupen bredvid.
   Mockupen: rund avatar 32 px, chevron 15 px, hela zonen 40 px hög, allt inuti
   EN inset-pill. Runda avatarer = socialt, fyrkantiga = data/tävling — det är
   temats egen regel (forre_pulse.css filhuvud) och en person är socialt.
   ══════════════════════════════════════════════════════════════════════════ */
html.tdk .top .right .me-item{height:40px;display:flex;align-items:center}
html.tdk .top .right .me-item .me{height:34px;padding:0 6px 0 3px;display:inline-flex;align-items:center;gap:5px}
html.tdk .top .right .me-item .av{
  width:32px;height:32px;
  border-radius:50%;
  flex:0 0 auto;
  background-size:cover;background-position:center;
}
html.tdk .top .right .me-item .cv,
html.tdk .top .right .me-item .bi-chevron-down{font-size:15px;color:var(--dim)}
/* Hälsningstexten ("Hej, Kenta 👋") hör till den gamla breda toppen — i
   identitetszonen är avataren hela avsändaren, precis som i mockupen. */
html.tdk .top .right .me-item .me-greet{display:none}

/* "+ betting" som dämpad meta på Dueller-raden (kartan 2026-07-27). Ligger
   till höger, samma vikt som räknarna, så raden läses som EN destination med
   en förklaring — inte som två saker. */
.pnav2 .nlink .nlink-sub{
  margin-left:auto;font-size:10.5px;font-weight:700;color:var(--faint);white-space:nowrap;
}
.pnav2 .nlink .nlink-sub + .ct{margin-left:6px}

/* ══════════════════════════════════════════════════════════════════════════
   11 · SISTA MILLIMETRARNA MOT MOCKUPEN (2026-07-27)
   Uppmätt live: högerklustret slutade 1852, kortet 1857 — 5 px kort. Orsak:
   identitetspillens `.me-item` hade `padding-right:3px` plus `.me` ytterligare
   `padding-right`, så innehållet stannade innanför pillens egen kant.
   Loggan mätte 103 px mot mockupens 86 — produktionens `.brand` är större.
   ══════════════════════════════════════════════════════════════════════════ */
html.tdk .top .right .pdk-idz + .me-item{padding-right:3px}
html.tdk .top .right .me-item .me{padding-right:3px}
html.tdk .top .right{padding-right:0}
/* Loggan: 19.5px/900 med -.045em spärrning = mockupens 86 px. */
html.tdk .top .in > .brand{font-size:19.5px;font-weight:900;letter-spacing:-.045em;margin-right:0}

/* KANALIKONERNA: TVÅ, inte tre (mockupen + kartan).
   En vänförfrågan ÄR en notis och finns redan i klockan som `friend_request`.
   Den fick en egen ikon när klockan var rörig — men klockan är lagad nu
   (gruppering + sedd-badge + filter), så den tredje ikonen är en dubblett.
   VILL DU HA TILLBAKA DEN: ta bort den här regeln, markupen finns kvar. */
html.tdk .top .right .tb-item:has(> [data-dd="friends"]){display:none}

/* ══════════════════════════════════════════════════════════════════════════
   12 · DOCKANS FORM — kompakt ruta nere till höger, inte helskärmsmodal
   Kartan (design-proposals/forre-kartan-2026-07-27.html) visar en 264 px bred
   ruta som sitter i nedre högra hörnet med flikrad, bubblor och skrivfält —
   sidan syns bredvid. Live öppnade `openFull()` som en centrerad overlay över
   hela skärmen. Det är samma innehåll men fel LÖFTE: "samtal lämnar aldrig
   sidan" (regel 03) betyder att man ska kunna läsa sidan medan man skriver.
   Bakgrunden blir därför genomsläpplig och rutan dockar i hörnet.
   Bara desktop — under 820 px är helskärm rätt, då finns ingen sida bredvid.
   ══════════════════════════════════════════════════════════════════════════ */
@media(min-width:821px){
  #pmModalOverlay{
    background:transparent !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    pointer-events:none;                 /* sidan bakom är klickbar igen */
  }
  #pmModalOverlay .pm-modal{
    pointer-events:auto;                 /* …men rutan själv förstås inte */
    position:fixed;
    right:18px;bottom:0;
    left:auto;top:auto;
    transform:none;
    width:380px;max-width:calc(100vw - 36px);
    height:520px;max-height:calc(100vh - 140px);
    border-radius:12px 12px 0 0;
    border:1px solid var(--line2);
    box-shadow:0 -6px 40px rgba(16,24,40,.22);
  }
  html[data-theme="dark"] #pmModalOverlay .pm-modal{box-shadow:0 -6px 40px rgba(0,0,0,.62)}
  /* I den smala rutan finns ingen plats för lista OCH tråd sida vid sida —
     listan är hela rutan tills man valt en konversation, precis som kartan. */
  #pmModalOverlay .pm-modal-list{width:100%;max-width:none;flex:1 1 auto;border-right:0}
  #pmModalOverlay .pm-modal-main{display:none}
  #pmModalOverlay.pm-has-thread .pm-modal-list{display:none}
  #pmModalOverlay.pm-has-thread .pm-modal-main{display:flex;flex:1 1 auto;min-width:0}
  /* Squad-läget ägde redan hela rutan — den regeln gäller fortfarande. */
  #pmModalOverlay.dock-full .pm-modal-main{display:none !important}
  #pmModalOverlay.dock-full .pm-modal-list{display:flex !important;flex-direction:column}
}