/* ============================================================================
   forre_pulse — FORUM 2.0 (delad CSS för index / kategori / tråd / skapa)
   Byggd på Pulse-tokens (ljust default + mörkt via [data-theme=dark]).
   Allt scopas under .pf (forum-shellens containerklass) så footerns
   .pf-tagg-klasser i forre_pulse.css aldrig kan krocka.
   Regel: platta ytor, hårfina kanter, EN färgsignal per yta, tabulära siffror.
   ============================================================================ */

.pf a { color: inherit; text-decoration: none; }
.pf .pf-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* -------------------- Flash -------------------- */
.pf .pf-flash { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--card); color: var(--ink2); font-size: 13px; box-shadow: var(--shadow); }
.pf .pf-flash i { color: var(--accent); }
.pf .pf-flash-success { border-color: color-mix(in srgb, var(--live) 40%, var(--line)); background: var(--live-wash); color: var(--live); }
.pf .pf-flash-success i { color: var(--live); }
.pf .pf-flash-error { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--card)); color: var(--danger); }
.pf .pf-flash-error i { color: var(--danger); }
.pf .pf-flash-warn { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); color: var(--gold); }
.pf .pf-flash-warn i { color: var(--gold); }

/* -------------------- Hero -------------------- */
.pf .pf-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; padding: 18px 22px; }
.pf .pf-kicker { display: inline-block; margin-bottom: 5px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.pf .pf-crumb { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); display: flex; gap: 7px; flex-wrap: wrap; }
.pf .pf-crumb a { color: var(--accent); }
.pf .pf-crumb a:hover { color: var(--accent-ink); }
.pf .pf-hero h1 { margin: 6px 0 6px; font-weight: 900; font-size: 25px; line-height: 1.08; letter-spacing: -.01em; color: var(--ink); }
.pf .pf-hero p, .pf .pf-hero-desc { margin: 0; max-width: 580px; color: var(--dim); font-size: 13.5px; line-height: 1.5; }
.pf .pf-hero-stats { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--dim); flex-wrap: wrap; margin-top: 4px; }
.pf .pf-hero-stats strong { color: var(--ink2); font-weight: 700; }
.pf .pf-sep { color: var(--faint); }
.pf .pf-hero-acts { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; align-items: center; }

/* -------------------- Pulsrad (index) -------------------- */
.pf .pf-pulse { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; overflow: hidden; }
.pf .pf-pulse-cell { display: flex; flex-direction: column; gap: 3px; padding: 13px 18px; line-height: 1.05; }
.pf .pf-pulse-cell + .pf-pulse-cell { border-left: 1px solid var(--line); }
.pf .pf-pulse-num { font-size: 21px; font-weight: 900; color: var(--ink); letter-spacing: -.01em; }
.pf .pf-pulse-num.is-live { color: var(--live); }
.pf .pf-pulse-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); font-weight: 700; }
@media (max-width: 700px) { .pf .pf-pulse { grid-template-columns: repeat(2, 1fr); } .pf .pf-pulse-cell:nth-child(3) { border-left: 0; } .pf .pf-pulse-cell:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* -------------------- Kategorigrupper (index) -------------------- */
.pf .pf-group-desc { margin: 0; padding: 12px 16px 0; font-size: 13px; color: var(--dim); }
.pf .pf-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; padding: 13px 15px 15px; }
.pf .pf-cat { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--inset); transition: border-color .12s, box-shadow .12s, transform .12s; }
.pf .pf-cat:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(16, 24, 40, .07); transform: translateY(-2px); }
.pf .pf-cat-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--accent-wash); color: var(--accent-ink); display: grid; place-items: center; font-size: 15px; }
.pf .pf-cat-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pf .pf-cat-body strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.pf .pf-cat-desc { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pf .pf-cat-stats { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink2); margin-top: 2px; }
.pf .pf-cat-stats .pf-dot { color: var(--faint); }
@media (max-width: 1080px) { .pf .pf-cat-grid { grid-template-columns: 1fr; } }

/* -------------------- Toolbar: filter + sortering (kategori) -------------------- */
.pf .pf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; flex-wrap: wrap; }
.pf .pf-filters { display: flex; gap: 3px; flex-wrap: wrap; }
.pf .pf-filter { font-size: 12px; font-weight: 700; color: var(--dim); padding: 6px 12px; border-radius: var(--r-sm); transition: background .12s, color .12s; }
.pf .pf-filter:hover { color: var(--ink); background: var(--inset); }
.pf .pf-filter.is-active { color: #fff; background: var(--accent); }
.pf .pf-sort select { min-height: 34px; padding: 0 11px; border: 1px solid var(--line); background: var(--inset); color: var(--ink2); font-size: 12.5px; border-radius: var(--r-sm); font-family: inherit; }

/* -------------------- Trådlista (kategori) -------------------- */
.pf .pf-listcard { overflow: hidden; }
.pf .pf-list { display: flex; flex-direction: column; }
.pf .pf-row { display: flex; align-items: center; gap: 13px; padding: 12px 16px; transition: background .12s; }
.pf .pf-row + .pf-row { border-top: 1px solid var(--line); }
.pf .pf-row:hover { background: var(--inset); }
.pf .pf-row.is-pinned { background: color-mix(in srgb, var(--gold) 4%, var(--card)); }
.pf .pf-row.is-pinned:hover { background: color-mix(in srgb, var(--gold) 8%, var(--card)); }
.pf .pf-row-ava { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line2); background: var(--inset); display: grid; place-items: center; color: var(--ink2); font-weight: 800; font-size: 14px; overflow: hidden; }
.pf .pf-row-ava img { width: 100%; height: 100%; object-fit: cover; }
.pf .pf-row-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pf .pf-row-titlerow { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pf .pf-row-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf .pf-row:hover .pf-row-title { color: var(--accent-ink); }
.pf .pf-i-pin { font-size: 11px; color: var(--gold); }
.pf .pf-i-hot { font-size: 11px; color: var(--danger); }
.pf .pf-i-ok { font-size: 11px; color: var(--live); }
.pf .pf-i-mut { font-size: 11px; color: var(--dim); }
.pf .pf-row-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); flex-wrap: wrap; }
.pf .pf-row-stats { display: flex; gap: 12px; flex: 0 0 auto; font-size: 11.5px; color: var(--ink2); }
.pf .pf-row-stats span { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 34px; }
.pf .pf-row-stats i { color: var(--dim); font-size: 12px; }
.pf .pf-row-stats .is-zero { color: var(--faint); }
.pf .pf-row-stats .is-zero i { color: var(--faint); }
.pf .pf-row-last { flex: 0 0 auto; width: 116px; border-left: 1px solid var(--line); padding-left: 14px; }
.pf .pf-row-last-label { display: block; font-size: 8.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.pf .pf-row-last-user { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf .pf-row-last-time { display: block; font-size: 10px; color: var(--dim); }
@media (max-width: 720px) { .pf .pf-row-last { display: none; } .pf .pf-row-stats { flex-direction: column; gap: 3px; } }

/* -------------------- Författar-chip (rank/K/D/W — canonical tracker-sanning) ---- */
.pf .pf-au { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--ink2); background: var(--inset); border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px 2px 4px; line-height: 1; white-space: nowrap; }
.pf .pf-au img { width: 15px; height: 15px; display: block; }
.pf .pf-au .pf-au-season { color: var(--accent-ink); font-weight: 800; font-size: 9px; }
.pf .pf-au .pf-au-div { color: var(--faint); }
.pf .pf-row .pf-au { background: var(--card); }

/* -------------------- Paginering -------------------- */
.pf .pf-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); }
.pf .pf-pager-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ink2); background: var(--inset); border: 1px solid var(--line); padding: 7px 13px; border-radius: var(--r-sm); transition: border-color .12s, color .12s; }
.pf .pf-pager-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.pf .pf-pager-btn.is-disabled { opacity: .4; pointer-events: none; }
.pf .pf-pager-page { font-size: 11.5px; color: var(--dim); }

/* -------------------- Staff-modbar (tråd) -------------------- */
.pf .pf-modbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 9px 12px; background: var(--card); border: 1px solid var(--line);  border-radius: var(--r); box-shadow: var(--shadow); }
.pf .pf-modbar-label { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); padding-right: 8px; border-right: 1px solid var(--line); }
.pf .pf-modbtn { display: inline-flex; align-items: center; gap: 6px; background: var(--inset); border: 1px solid var(--line); color: var(--ink2); font-size: 11.5px; font-weight: 700; padding: 6px 11px; border-radius: var(--r-sm); transition: .12s ease-out; }
.pf .pf-modbtn:hover { border-color: var(--accent); color: var(--ink); }
.pf .pf-modbtn-danger:hover { border-color: var(--danger); color: var(--danger); }
.pf .pf-modbtn:disabled { opacity: .5; cursor: default; }

/* -------------------- Omröstning (tråd) -------------------- */
.pf .pf-poll-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.pf .pf-poll-q { font-size: 15px; color: var(--ink); }
.pf .pf-poll-results, .pf .pf-poll-options { display: flex; flex-direction: column; gap: 10px; }
.pf .pf-poll-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink); }
.pf .pf-poll-bar { height: 8px; border-radius: 99px; background: var(--inset); overflow: hidden; }
.pf .pf-poll-bar div { height: 100%; border-radius: inherit; background: var(--accent); }
.pf .pf-poll-choice { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--inset); color: var(--ink); font-size: 13px; cursor: pointer; }
.pf .pf-poll-choice:hover { border-color: var(--accent); }
.pf .pf-poll-bar-actions { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.pf .pf-poll-total { font-size: 12px; color: var(--dim); }
.pf .pf-helper { font-size: 12px; color: var(--dim); }

/* -------------------- Inläggskort (tråd) -------------------- */
.pf .pf-post-list { display: flex; flex-direction: column; gap: 12px; }
.pf .pf-post { overflow: hidden; }
.pf .pf-post.is-op { border-color: color-mix(in srgb, var(--accent) 35%, var(--line2)); }
.pf .pf-post.is-best { border-color: color-mix(in srgb, var(--live) 45%, var(--line)); }
.pf .pf-post-head { position: relative; display: flex; align-items: center; gap: 13px; padding: 12px 16px; background: var(--inset); border-bottom: 1px solid var(--line); overflow: hidden; }
.pf .pf-post-num { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 40px; font-weight: 900; color: var(--line2); letter-spacing: -.02em; line-height: 1; pointer-events: none; z-index: 0; }
.pf .pf-post-ava { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line2); background: var(--card); display: grid; place-items: center; overflow: hidden; color: var(--ink2); font-weight: 800; font-size: 15px; z-index: 1; }
.pf .pf-post-ava img { width: 100%; height: 100%; object-fit: cover; }
.pf .pf-post-id { min-width: 0; position: relative; z-index: 1; }
.pf .pf-post-id-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf .pf-post-name { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.pf .pf-post-name:hover { color: var(--accent-ink); }
.pf .pf-chip { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-sm); }
.pf .pf-chip-op { background: var(--accent); color: #fff; }
.pf .pf-chip-best { background: var(--live-wash); color: var(--live); }
.pf .pf-post-stats { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--dim); margin-top: 5px; flex-wrap: wrap; }
.pf .pf-post-stats i { color: var(--gold); }
.pf .tw-forum-post-level { color: var(--ink2); font-weight: 700; }
.pf .pf-post-body { padding: 16px; font-size: 14px; line-height: 1.7; color: var(--ink); word-wrap: break-word; overflow-wrap: anywhere; }
.pf .pf-post-body p:first-child { margin-top: 0; }
.pf .pf-post-body p:last-child { margin-bottom: 0; }
.pf .pf-post-body a { color: var(--accent-ink); }
.pf .pf-post-body a:hover { text-decoration: underline; }
.pf .pf-post-body img { max-width: 100%; }
.pf .pf-post-body blockquote { margin: 0 0 12px; padding: 9px 13px;  background: var(--inset); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink2); font-size: 13px; }
/* Listor i inlägg: den globala reset:en (*{margin:0;padding:0}) nollar ul/ol-indraget
   → punkterna hamnade i vänsterkanten. Återställ indrag + radluft (2026-07-20). */
.pf .pf-post-body ul,
.pf .pf-post-body ol { margin: 0 0 12px; padding-left: 24px; }
.pf .pf-post-body ul { list-style: disc; }
.pf .pf-post-body ol { list-style: decimal; }
.pf .pf-post-body ul ul,
.pf .pf-post-body ol ol,
.pf .pf-post-body ul ol,
.pf .pf-post-body ol ul { margin: 4px 0 4px; }
.pf .pf-post-body li { margin: 4px 0; padding-left: 3px; }
.pf .pf-post-body li::marker { color: var(--dim); }
.pf .pf-post-body ul:last-child,
.pf .pf-post-body ol:last-child { margin-bottom: 0; }
.pf .pf-post-foot { display: flex; align-items: center; gap: 4px; padding: 9px 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pf .pf-act { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid transparent; color: var(--dim); font-size: 11.5px; font-weight: 700; padding: 6px 10px; cursor: pointer; border-radius: var(--r-sm); transition: .12s ease-out; }
.pf .pf-act:hover { background: var(--inset); color: var(--ink); }
.pf .pf-act.js-quote:hover, .pf .pf-act.js-edit:hover { color: var(--accent-ink); }
.pf .pf-act.like-btn:hover, .pf .pf-act.like-btn.is-liked { color: var(--danger); }
.pf .pf-act-danger:hover { color: var(--danger); }
.pf .pf-act-profile { margin-left: auto; color: var(--accent-ink); }
@media (max-width: 600px) { .pf .pf-post-num { font-size: 28px; right: 12px; } }

/* Redigeringsboxen (JS-skapad) */
.pf .tw-forum-edit { display: flex; flex-direction: column; gap: 8px; margin: 4px 16px 14px; }
.pf .tw-forum-edit textarea { width: 100%; min-height: 120px; padding: 12px; border: 1px solid var(--line); background: var(--inset); color: var(--ink); resize: vertical; border-radius: var(--r-sm); font-family: inherit; }
.pf .tw-forum-edit-bar { display: flex; gap: 8px; justify-content: flex-end; }

/* -------------------- Svara (tråd) -------------------- */
.pf .pf-reply-body { padding: 14px 16px; }
.pf .pf-reply-form { display: flex; flex-direction: column; gap: 12px; }
.pf .pf-reply-form textarea { width: 100%; min-height: 150px; padding: 13px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--inset); color: var(--ink); resize: vertical; font-family: inherit; font-size: 14px; }
.pf .pf-reply-bar { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.pf .pf-locked { display: flex; align-items: center; gap: 10px; padding: 16px 18px; color: var(--dim); font-size: 13.5px; }
.pf .pf-locked i { color: var(--gold); }

/* -------------------- Höger rail (delad) -------------------- */
.pf .pf-side-stack { padding: 6px 0; }
.pf .pf-side-stat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; font-size: 13px; color: var(--ink2); }
.pf .pf-side-stat strong { color: var(--ink); font-size: 14px; }
.pf .pf-side-list { display: flex; flex-direction: column; }
.pf .pf-side-row { display: flex; align-items: flex-start; gap: 11px; padding: 10px 14px; transition: background .12s; }
.pf .pf-side-row + .pf-side-row { border-top: 1px solid var(--line); }
.pf .pf-side-row:hover { background: var(--inset); }
.pf .pf-side-num { font-size: 16px; font-weight: 900; color: var(--faint); width: 22px; text-align: center; flex: 0 0 auto; letter-spacing: -.02em; }
.pf .pf-side-tick { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 6px; background: var(--accent); border-radius: 2px; }
.pf .pf-side-rowbody { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pf .pf-side-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf .pf-side-row:hover .pf-side-title { color: var(--accent-ink); }
.pf .pf-side-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dim); }
.pf .pf-side-empty { padding: 14px; font-size: 12.5px; color: var(--dim); }
.pf .pf-side-foot { display: block; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 11.5px; font-weight: 700; color: var(--accent-ink); }
.pf .pf-side-foot:hover { background: var(--inset); }

/* Live-spelare (tracker-signal) */
.pf .pf-live-ava { position: relative; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line2); background: var(--inset); display: grid; place-items: center; color: var(--ink2); font-weight: 800; font-size: 11px; overflow: hidden; }
.pf .pf-live-ava img { width: 100%; height: 100%; object-fit: cover; }
.pf .pf-live-dot { position: absolute; left: 36px; top: 28px; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 2px var(--card); }
.pf .pf-live-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 14px; transition: background .12s; }
.pf .pf-live-row + .pf-live-row { border-top: 1px solid var(--line); }
.pf .pf-live-row:hover { background: var(--inset); }
.pf .pf-live-name { font-size: 12.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf .pf-live-mode { font-size: 10px; color: var(--live); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

/* Events (händelse-signal) */
.pf .pf-ev { display: flex; align-items: center; gap: 11px; padding: 10px 14px; transition: background .12s; }
.pf .pf-ev + .pf-ev { border-top: 1px solid var(--line); }
.pf .pf-ev:hover { background: var(--inset); }
.pf .pf-ev-date { flex: 0 0 auto; width: 40px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--inset); padding: 4px 0; line-height: 1.1; }
.pf .pf-ev-day { display: block; font-size: 15px; font-weight: 900; color: var(--ink); }
.pf .pf-ev-mon { display: block; font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); }
.pf .pf-ev-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pf .pf-ev-title { font-size: 12.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf .pf-ev:hover .pf-ev-title { color: var(--accent-ink); }
.pf .pf-ev-meta { font-size: 10.5px; color: var(--dim); }

/* Taggar */
.pf .pf-tags { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px; }
.pf .pf-tags .pf-tag { font-size: 11.5px; font-weight: 700; color: var(--ink2); background: var(--inset); border: 1px solid var(--line); padding: 5px 9px; border-radius: var(--r-sm); transition: border-color .12s, color .12s; }
.pf .pf-tags .pf-tag:hover { border-color: var(--accent); color: var(--accent-ink); }
.pf .pf-tags .pf-tag span { color: var(--dim); font-weight: 600; margin-left: 3px; }

/* Fler rum */
.pf .pf-sublist { display: flex; flex-direction: column; }
.pf .pf-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; transition: background .12s; }
.pf .pf-sub + .pf-sub { border-top: 1px solid var(--line); }
.pf .pf-sub:hover { background: var(--inset); }
.pf .pf-sub-name { font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf .pf-sub:hover .pf-sub-name { color: var(--accent-ink); }
.pf .pf-sub-count { font-size: 11.5px; color: var(--dim); }

/* -------------------- Tomt läge -------------------- */
.pf .pf-empty { text-align: center; padding: 46px 18px; color: var(--dim); }
.pf .pf-empty i { font-size: 28px; opacity: .5; color: var(--accent); }
.pf .pf-empty h3 { margin: 12px 0 4px; font-size: 15px; color: var(--ink2); }
.pf .pf-empty p { margin: 0 0 14px; font-size: 13px; }
.pf .pf-empty .btn { display: inline-flex; }

/* ==================== FORUM 2.1 — reddit-stil trådflöde ==================== */
.pf .pf-feed { display: flex; flex-direction: column; gap: 10px; }
.pf .pf-fd { display: flex; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; transition: border-color .12s, box-shadow .12s; }
.pf .pf-fd:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(16, 24, 40, .07); }
.pf .pf-fd.is-pinned { border-color: color-mix(in srgb, var(--gold) 45%, var(--line2)); }
.pf .pf-fd-gut { flex: 0 0 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; background: var(--inset); border-right: 1px solid var(--line); padding: 12px 6px; }
.pf .pf-fd-likes, .pf .pf-fd-replies { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--dim); font-size: 11px; }
.pf .pf-fd-likes b, .pf .pf-fd-replies b { font-size: 13px; font-weight: 800; color: var(--ink2); }
.pf .pf-fd-likes.has { color: var(--danger); }
.pf .pf-fd-likes.has b { color: var(--danger); }
.pf .pf-fd-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 11px 14px 10px; }
.pf .pf-fd-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11.5px; color: var(--dim); }
.pf .pf-fd-chan { font-weight: 800; color: var(--accent-ink); background: var(--accent-wash); padding: 2px 8px; border-radius: 99px; font-size: 10.5px; }
.pf .pf-fd-chan:hover { text-decoration: underline; }
.pf .pf-fd-dot { color: var(--faint); }
.pf .pf-fd-user { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink2); }
.pf .pf-fd-user:hover { color: var(--accent-ink); }
.pf .pf-fd-ava { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; background: var(--inset); border: 1px solid var(--line2); display: grid; place-items: center; font-size: 9px; font-weight: 800; color: var(--ink2); }
.pf .pf-fd-ava img { width: 100%; height: 100%; object-fit: cover; }
.pf .pf-fd-time { color: var(--dim); }
.pf .pf-fd-main { display: block; min-width: 0; }
.pf .pf-fd-title { display: block; font-size: 15.5px; font-weight: 800; color: var(--ink); line-height: 1.3; letter-spacing: -.01em; }
.pf .pf-fd-main:hover .pf-fd-title { color: var(--accent-ink); }
.pf .pf-fd-prev { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.pf .pf-fd-foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11px; color: var(--dim); }
.pf .pf-fd-foot b { color: var(--ink2); }
.pf .pf-fd-foot i { font-size: 11px; }
@media (max-width: 560px) { .pf .pf-fd-gut { flex-basis: 44px; } .pf .pf-fd-prev { -webkit-line-clamp: 3; } }

/* Fristående pager-kort under feeden */
.pf .card.pf-pager { border-top: 1px solid var(--line2); }

/* Kanal-lista i railen (communities) */
.pf .pf-chanlist { display: flex; flex-direction: column; padding-bottom: 6px; }
.pf .pf-changroup { padding: 10px 14px 3px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pf .pf-chan { display: flex; align-items: center; gap: 9px; padding: 7px 14px; transition: background .12s; }
.pf .pf-chan:hover { background: var(--inset); }
.pf .pf-chan-ico { width: 26px; height: 26px; flex: 0 0 auto; border-radius: var(--r-sm); background: var(--accent-wash); color: var(--accent-ink); display: grid; place-items: center; font-size: 12px; }
.pf .pf-chan-name { min-width: 0; flex: 1; font-size: 12.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf .pf-chan:hover .pf-chan-name { color: var(--accent-ink); }
.pf .pf-chan-count { font-size: 11px; color: var(--dim); }

/* ═══════════════════════════════════════════════════════════════════════════
   LÄGE: KOMPAKT ⇄ KORT  (Kentas val 2026-08-04, "B med C:s kort som växlare")
   ═══════════════════════════════════════════════════════════════════════════
   SAMMA markup, samma data, samma helper — bara en klass på flödet skiljer.
   Det är hela poängen: två radmallar hade drivit isär, en klass kan inte.

   Kompakt = reddits scanningsläge. Bort med förhandsvisningen, foten och
   like-siffran; kvar blir titel, metarad och svarsantal. Uppmätt på live:
   like_count är 0 på alla 15 trådar och forum_reactions har 0 rader, så
   hjärtat i vänsterkanten visade en nolla på varje rad — en siffra utan data
   bakom sig gör listan tyngre utan att säga något.

   Listan blir EN yta med tunna delare i stället för femton flytande kort.
   Det är den detaljen som ger reddit-känslan, mer än något annat.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Lägesväxlaren i verktygsraden ───────────────────────────────────────── */
.pf-lagen{ display:inline-flex; align-items:center; gap:2px; margin-left:6px;
  padding:2px; background:var(--inset); border:1px solid var(--line); border-radius:999px; }
.pf-lage{ display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px;
  border:0; border-radius:999px; background:none; cursor:pointer;
  font-size:11.5px; font-weight:700; color:var(--dim); transition:color .12s ease, background .12s ease; }
.pf-lage i{ font-size:12px; }
.pf-lage:hover{ color:var(--ink2); }
.pf-lage.is-active{ background:var(--card); color:var(--ink); box-shadow:var(--shadow); }
.pf-lage.is-active i{ color:var(--accent); }
.pf-lage:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

/* ── KOMPAKT ─────────────────────────────────────────────────────────────── */
.pf-feed.is-kompakt{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:block;
}
.pf-feed.is-kompakt .pf-fd{
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  margin:0; padding:9px 12px; box-shadow:none; background:transparent;
  align-items:center;
}
.pf-feed.is-kompakt .pf-fd:last-child{ border-bottom:0; }
.pf-feed.is-kompakt .pf-fd:hover{ background:var(--zebra); }

/* Förhandsvisning och fot bort — det är skillnaden mot kortläget. */
.pf-feed.is-kompakt .pf-fd-prev,
.pf-feed.is-kompakt .pf-fd-foot{ display:none !important; }

/* Rännan flyttas till HÖGER och tappar hjärtat. Svarsantalet är enda siffran. */
.pf-feed.is-kompakt .pf-fd-gut{
  order:2; flex:none; flex-direction:row; align-items:center; gap:5px;
  min-width:0; width:auto; padding:0; margin-left:10px; border:0; background:none;
}
.pf-feed.is-kompakt .pf-fd-likes{ display:none !important; }
.pf-feed.is-kompakt .pf-fd-replies{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:800; color:var(--ink2); font-variant-numeric:tabular-nums;
}
.pf-feed.is-kompakt .pf-fd-replies i{ font-size:12.5px; color:var(--dim); }
/* Noll svar = dämpat, inte rött. Rött är reserverat för trasigt och beslut. */
.pf-feed.is-kompakt .pf-fd-replies:not(.has){ color:var(--faint); }

.pf-feed.is-kompakt .pf-fd-body{ order:1; min-width:0; }
.pf-feed.is-kompakt .pf-fd-title{ font-size:13.5px; line-height:1.35; }
.pf-feed.is-kompakt .pf-fd-top{ margin-top:2px; font-size:11px; gap:5px; }
.pf-feed.is-kompakt .pf-fd-main{ display:block; }

/* ── KORT ────────────────────────────────────────────────────────────────── */
/* Kortläget är sidans ursprungliga form; klassen finns för att växlaren ska
   kunna peka på något och för att kunna finjustera utan att röra grundstilen. */
.pf-feed.is-kort .pf-fd-prev{ display:block; }
.pf-feed.is-kort .pf-fd-foot{ display:flex; }

/* ── Kanallistan: tomma kanaler bakom en rad ─────────────────────────────── */
/* 16 av 20 kanaler hade noll trådar 2026-08-04. En rail som till 80 % är en
   lista över tomma rum säger "här är dött", inte "här finns plats". */
.pf-chanlist .pf-chan.is-tom{ display:none; }
.pf-chanlist.visa-tomma .pf-chan.is-tom{ display:flex; }
.pf-chanlist .pf-chan.is-tom .pf-chan-name{ color:var(--faint); }
.pf-chanlist .pf-chan.is-tom .pf-chan-count{ color:var(--faint); }
.pf-chanmer{ display:flex; align-items:center; gap:6px; width:100%;
  padding:8px 10px; border:0; background:none; cursor:pointer;
  font-size:11.5px; font-weight:700; color:var(--accent-ink); text-align:left; }
.pf-chanmer:hover{ background:var(--inset); }
.pf-chanmer i{ font-size:11px; transition:transform .15s ease; }
.pf-chanmer:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
/* Grupprubriker vars alla kanaler är tomma ska inte stå kvar ensamma. */
.pf-chanlist .pf-changroup.is-tom{ display:none; }
.pf-chanlist.visa-tomma .pf-changroup.is-tom{ display:block; }

/* Hjärtat visas BARA när någon faktiskt gillat tråden.
   Liveverifierat i webbläsaren 2026-08-04: alla tio trådar i flödet visade en
   nolla bredvid ett hjärta i kortläget. `forum_threads.like_count` ar 0 på varje
   rad och `forum_reactions` har 0 rader, så siffran var sann men meningslös —
   en dekoration man slutar se, i precis den kolumn som ska bära signalen.

   Kortmallen sätter redan klassen `has` när like_count > 0, så regeln är
   självläkande: den dag någon gillar en tråd dyker hjärtat upp på just den
   tråden, utan att någon rör CSS:en igen. */
.pf .pf-fd-likes:not(.has){ display:none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   KOMPAKT SKALA — forumet på samma typografi som resten av sajten
   Kentas begäran 2026-08-04: "samma kompakta font som det är på hub … mer
   kompakt och snyggt och genomtänkt", och för ALLA forumsidor, inte bara tråden.
   ═══════════════════════════════════════════════════════════════════════════

   UPPMÄTT I WEBBLÄSAREN (forre.nu, 2026-08-04), hub mot forum:

     Hubbens väggpost  .body   12,5px / 18,75px radavstånd / padding 0 12 10
     Hubbens åtgärder  .act    11,5px / 700
     Hubbens skala (mest använda): 12,5 · 15 · 10,5 · 9 · 11 px

     Forumets inlägg   .pf-post-body   14px / 23,8px / padding 16px
     Forumets titel    h1              25px / 900
     Forumets hero     .pf-hero        padding 18px 22px  (170px hög)
     Forumets radnr    .pf-post-num    40px / 900  ← sidans STÖRSTA text

   DEN VIKTIGASTE IAKTTAGELSEN: forumet HAR redan den kompakta skalan.
   .pf-modbtn och .pf-act är 11,5px och 28px höga — exakt hubbens mått. Det är
   bara hero, inläggskortet, flödet och railen som aldrig fick den. Det här
   blocket lägger alltså inte på en ny skala; det tillämpar den som redan finns.

   SKALAN (samma som hubben):
     19px   sidans enda rubrik          (var 25px)
     12,5px brödtext, namn, radtitlar   (var 14 / 15,5 / 13,5)
     11,5px knappar och åtgärder        (oförändrad — var redan rätt)
     11px   meta och tidsangivelser
     10,5px etiketter, brödsmulor
     9,5px  märken
   RADAVSTÅND 1,5 på brödtext (12,5 → 18,75px), exakt som hubbens .body.
   LUFT 12px i kortinnehåll · 7–8px i huvuden och rader · 6px i knappar.

   ── FYRA SIDOR, INTE EN ──────────────────────────────────────────────────
   Kartlagt live 2026-08-04. Alla åtta forumrutter, och vilken markup de har:

     forum                  .pf              toolbar, INGEN hero, 10 trådrader
     forum/category/:slug   .pf.pf-cat       hero + toolbar + trådrader
     forum/thread/:slug     .pf.pf-thread    hero + inläggskort + svarsformulär
     forum/create           .pf.pf-create    hero + formulär
     forum/search           .forum-search-page   ← ingen .pf alls, gammal markup
     forum/tags             .tw-forum-tags-page  ← ingen .pf alls
     forum/my-threads       .tw-forum-collection-page  ← ingen .pf alls
     forum/subscriptions    .tw-forum-collection-page  ← ingen .pf alls

   De fyra sista renderas från app/Views/pages/forum/ eftersom themes/
   forre_pulse/views/pages/forum/ bara har index, category, thread och create.
   De är alltså kvar i FORRE_DARK-eran, med fa-solid-ikoner i stället för
   bi bi-*. Det här blocket kan inte nå dem — de behöver egna vyer, vilket är
   ett eget arbete och rapporteras separat. Ingen CSS-regel i världen gör en
   sida kompakt om den inte delar en enda klass med resten av forumet.

   ── VARFÖR VISSA SELEKTORER BÄR LÄGESKLASSEN ─────────────────────────────
   Första versionen av det här blocket skrevs som `.pf .pf-fd-title` och fick
   INGET genomslag i flödet: `.pf-feed.is-kompakt .pf-fd-title` väger 0-3-0 och
   `.pf .pf-fd-title` väger 0-2-0, så lägesblocket vann trots att det står
   tidigare i filen. Uppmätt i webbläsaren: titeln blev 13,5px, inte 12,5px.
   Därför bär flödesreglerna nedan lägesklassen — de ska vinna, och de ska
   vinna på specificitet, inte på var i filen de råkar hamna.

   Båda lägena får SAMMA typskala. Skillnaden mellan kompakt och kort är
   radmallen — om förhandsvisningen visas — inte hur stor texten är. Två
   typskalor i samma flöde är precis det Kenta klagade på från början.

   Allt är scopat under .pf och kan därför inte läcka utanför forumet.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Hero: rubrik + brödsmula + åtgärder (kategori, tråd, skapa) ──────────── */
.pf .pf-hero{ padding:12px 14px; }
.pf .pf-hero-txt h1,
.pf .pf-hero h1{ font-size:19px; line-height:1.25; letter-spacing:-.01em; }
.pf .pf-crumb{ font-size:10px; }
.pf .pf-hero-stats{ font-size:11px; line-height:1.5; }
/* Selektorn måste vara `.pf .pf-hero p` OCKSÅ, inte bara `.pf .pf-hero-desc`.
   Elementet är ett <p class="pf-hero-desc"> inuti .pf-hero och matchar därför
   BÅDA. Grundregeln .pf .pf-hero p väger 0-2-1 och min .pf .pf-hero-desc väger
   0-2-0 — en enda typselektor räckte för att slå ut den, trots att min regel
   står 250 rader senare i filen. Uppmätt: 13,5px där 11,5px var avsikten. */
.pf .pf-hero p,
.pf .pf-hero-desc{ font-size:11.5px; line-height:1.5; }
.pf .pf-hero-acts{ gap:6px; }
/* ★ 2026-08-19: mätt live på 390 px — .pf-hero-acts var 416 px bred och
   forumsidan scrollade i sidled (scrollWidth 443 mot clientWidth 390).
   Orsaken är husets dokumenterade flex-fälla: `flex:0 0 auto` + `flex-wrap`
   gör att elementets max-content blir SUMMAN av knapparna, och wrap:en får
   aldrig chansen att gå in eftersom rutan inte tillåts krympa. Den ska
   krympa och ta hela raden här — hero-texten står ovanför ändå. */
.pf .pf-hero-acts{ flex:1 1 100%; min-width:0; }
.pf .pf-hero-acts > *{ flex:1 1 auto; min-width:0; justify-content:center; }

/* ── Verktygsraden (index + kategori) ─────────────────────────────────────── */
/* Indexsidan har ingen hero — toolbaren ÄR dess sidhuvud. Den var 91px hög
   för två rader chips; 9px padding runt 27px och 32px höga grupper. */
.pf .pf-toolbar{ padding:8px 12px; gap:10px; }
.pf .pf-filters{ gap:3px; }

/* Alla tre grupperna i verktygsraden ska vara 28px höga. Uppmätt före:
   filtren 27px, lägesväxlaren 30px, sorteringsmenyn 34px — tre höjder i
   samma rad, ingen av dem densamma som knapparna bredvid. Det syns inte
   som ett fel; det syns som att raden är slarvigt satt. */
.pf .pf-filter{ font-size:11.5px; line-height:1; padding:0 10px; min-height:28px;
  display:inline-flex; align-items:center; }
.pf .pf-lagen{ padding:1px; }
.pf .pf-sort select{ font-size:11.5px; min-height:28px; height:28px; padding:0 9px; }

/* Knappar i forumet följer .pf-act/.pf-modbtn, som redan hade rätt mått.
   .btn kom utifrån och var 36px hög med 13,5px text — den enda knappen på
   sidan som inte följde sidans egen skala. */
/* line-height:1 är inte kosmetik. Med 1,5 blev knappen 11,5 + 12 padding +
   2 ram = 31,25px och sköt förbi sin egen min-height på 28. Uppmätt: 32px,
   medan .pf-act bredvid var 28px. Nu är de lika höga. */
.pf .btn{ font-size:11.5px; font-weight:700; line-height:1; padding:6px 11px; min-height:28px; border-radius:var(--r-sm); }
.pf .btn i{ font-size:12px; }

/* ── Moderationsraden ────────────────────────────────────────────────────── */
.pf .pf-modbar{ padding:6px 10px; gap:5px; }

/* ── Inläggskortet (tråd) ────────────────────────────────────────────────── */
.pf .pf-post-head{ padding:8px 12px; }
.pf .pf-post-body{ font-size:12.5px; line-height:1.5; padding:0 12px 12px; }
.pf .pf-post-body p{ margin:0 0 8px; }
.pf .pf-post-body p:last-child{ margin-bottom:0; }
.pf .pf-post-foot{ padding:6px 10px; }
.pf .pf-post-name{ font-size:12.5px; }
.pf .pf-post-stats{ font-size:11px; }

/* Radnumret var 40px och 900 i vikt — sidans största text, för att säga
   "det här är inlägg nummer två". Numret får finnas, men det ska ligga i
   bakgrunden och inte konkurrera med det någon faktiskt skrivit. */
.pf .pf-post-num{ font-size:13px; font-weight:800; line-height:1; opacity:.35; }

/* ── Svarsformuläret (tråd) och skrivformuläret (skapa tråd) ─────────────── */
.pf .pf-reply-body{ padding:10px 12px; }
.pf .pf-reply-bar{ gap:6px; }
.pf .pf-helper{ font-size:10.5px; }
.pf .pf-reply-body textarea{ font-size:12.5px; line-height:1.5; }

/* Skrivfälten på forum/create låg utanför skalan: rubrikfältet 16px,
   brödtextfältet 14px. Rubriken får ligga ETT steg över brödtexten — det är
   sidans huvudfält och det enda man måste fylla i — men inte fyra steg.
   Se även mobilblocket längst ned: under 16px zoomar iOS in när fältet får
   fokus, så där går båda fälten upp till 16px igen. Det är inte en
   inkonsekvens; det är samma avvägning som varje sajt med formulär gör. */
.pf .pf-title{ font-size:14px; font-weight:800; }
.pf .pf-content{ font-size:12.5px; line-height:1.5; }

/* ═══ TRÅDFLÖDET (index + kategori) ═══════════════════════════════════════
   Uppmätt före: raden var 94px hög för två textrader. Tre orsaker, alla tre
   mätbara:

     1. DUBBEL PADDING. .pf-fd har padding 9px 12px i kompaktläget OCH
        .pf-fd-body behåller sin egen 11px 14px 10px från grundstilen.
        20px luft i toppen, 24px i sidled, på varje rad.
     2. SVARSSIFFRAN STOD I EN KOLUMN. .pf-fd-replies ärvde
        flex-direction:column från grundregeln — bubblan hamnade ÖVER siffran
        och gjorde rännan 43px hög i en rad som annars är 40px.
     3. AVATAREN I METARADEN är 18px, vilket ensamt gör metaraden 27px hög
        fastän texten i den är 11px.

   Efter: ~52px. Det är samma information på 45 % mindre yta.
   ═════════════════════════════════════════════════════════════════════════ */

/* Typskalan — samma i båda lägena, se resonemanget i blockhuvudet. */
.pf .pf-feed .pf-fd-title{ font-size:12.5px; line-height:1.4; font-weight:800; }
.pf .pf-feed .pf-fd-top{ font-size:10.5px; }
.pf .pf-feed .pf-fd-prev{ font-size:11.5px; line-height:1.5; }
.pf .pf-feed .pf-fd-foot{ font-size:10.5px; }
.pf .pf-feed .pf-fd-chan{ font-size:9.5px; padding:1px 7px; }
.pf .pf-feed .pf-fd-ava{ width:14px; height:14px; font-size:8px; }

/* Metaraden var 27px hög fastän texten i den är 10,5px. Orsaken var inte
   texten utan utmärkelsebrickan: .fc-b är en 27px hållare runt en 20px ikon,
   och den ensam satte radens höjd. Hållaren krymper till ikonens mått —
   ikonen rörs inte, den ligger i en sprite med fasta positioner där en ändrad
   storlek hade krävt att både background-size och alla positioner räknades om.
   Brickan får vara kvar; den är något man förtjänat. Den ska bara inte
   bestämma hur tät en lista man ska kunna skanna får vara. */
.pf .pf-feed .pf-fd-top .fc-b{ width:20px; height:20px; }
.pf .pf-feed .pf-fd-top .uchip{ font-size:10.5px; }

/* Kompaktläget: rutan äger luften, raden inuti har ingen egen. */
.pf .pf-feed.is-kompakt .pf-fd{ padding:7px 12px; }
.pf .pf-feed.is-kompakt .pf-fd-body{ padding:0; gap:2px; }
.pf .pf-feed.is-kompakt .pf-fd-top{ margin-top:0; gap:5px; }

/* Bubblan och siffran på SAMMA rad. Grundregeln staplar dem i en kolumn,
   vilket var rätt när rännan låg till vänster och var 54px bred — men
   kompaktläget flyttade rännan till höger och gjorde den smal. */
.pf .pf-feed.is-kompakt .pf-fd-gut{ align-self:center; }
.pf .pf-feed.is-kompakt .pf-fd-replies{ flex-direction:row; gap:4px; font-size:11.5px; }
.pf .pf-feed.is-kompakt .pf-fd-replies b{ font-size:11.5px; }
.pf .pf-feed.is-kompakt .pf-fd-replies i{ font-size:11.5px; }

/* Kortläget: samma skala, men förhandsvisningen behöver luft för att gå att
   läsa. Här är padding meningsfull — raden är ett kort, inte en listrad. */
.pf .pf-feed.is-kort .pf-fd-body{ padding:9px 12px 8px; gap:4px; }
.pf .pf-feed.is-kort .pf-fd-gut{ flex-basis:44px; padding:10px 5px; gap:8px; }
.pf .pf-feed.is-kort .pf-fd-replies b,
.pf .pf-feed.is-kort .pf-fd-likes b{ font-size:12px; }

/* ── Railen: rubrikrader, listor, statistik, händelser ───────────────────── */
.pf .chd{ padding:7px 11px; }
.pf .slabel{ font-size:10.5px; letter-spacing:.08em; }

/* Trådlistor i railen (tråd + skapa) */
.pf .pf-side-row{ padding:8px 11px; gap:9px; }
.pf .pf-side-num{ font-size:12px; font-weight:800; opacity:.5; }
.pf .pf-side-title{ font-size:12px; line-height:1.35; }
.pf .pf-side-meta{ font-size:10.5px; }

/* Sifferrader i railen (index: "Forum-puls") */
.pf .pf-side-stack{ padding:4px 0; }
.pf .pf-side-stat{ padding:7px 11px; font-size:11.5px; }
.pf .pf-side-stat strong{ font-size:12.5px; }

/* Närvarolistan (index: "Spelar just nu") — 54px per rad var mest avatar. */
.pf .pf-live-row{ padding:7px 11px; gap:9px; }
.pf .pf-live-ava{ width:24px; height:24px; font-size:10px; }
.pf .pf-live-name{ font-size:12px; }
.pf .pf-live-mode{ font-size:9px; }

/* Kommande händelser */
.pf .pf-ev{ padding:8px 11px; gap:9px; }
.pf .pf-ev-date{ width:34px; padding:3px 0; }
.pf .pf-ev-day{ font-size:13px; }
.pf .pf-ev-mon{ font-size:8px; }
.pf .pf-ev-title{ font-size:12px; }
.pf .pf-ev-meta{ font-size:10px; }

/* Kanallistan */
.pf .pf-chan{ padding:6px 10px; font-size:12px; }
.pf .pf-chan-ico{ width:22px; height:22px; font-size:11px; }
.pf .pf-chan-name{ font-size:12px; }
.pf .pf-chan-count{ font-size:10.5px; }
.pf .pf-changroup{ padding:9px 11px 3px; font-size:9.5px; letter-spacing:.1em; }

/* ── Mobil: samma skala, mindre luft ─────────────────────────────────────── */
@media (max-width:560px){
  .pf .pf-hero{ padding:10px 12px; }
  .pf .pf-hero-txt h1, .pf .pf-hero h1{ font-size:17px; }
  .pf .pf-toolbar{ padding:7px 10px; gap:8px; }
  .pf .pf-post-head{ padding:7px 10px; }
  .pf .pf-post-body{ padding:0 10px 10px; }
  .pf .pf-feed.is-kompakt .pf-fd{ padding:7px 10px; }

  /* iOS zoomar in på fokus när ett fält har mindre än 16px text, och zoomar
     inte ut igen. Skalan får ge vika här — en sida som hoppar när man börjar
     skriva är ett större fel än en textstorlek som avviker på mobil. */
  .pf .pf-title,
  .pf .pf-content,
  .pf .pf-reply-body textarea{ font-size:16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NYA FORUMSIDOR — sök, taggar, mina trådar, bevakade
   ═══════════════════════════════════════════════════════════════════════════

   De fyra sidorna renderades tidigare från app/Views/pages/forum/ med
   tw-forum-markup, fa-solid-ikoner och en egen <style>-tagg per fil med
   hårdkodade hexfärger. De delade inte en enda klass med resten av forumet,
   så varken pulse-forum.css eller den kompakta skalan nådde dem. Nu har de
   pulse-vyer i themes/forre_pulse/views/pages/forum/ och använder forumets
   egna klasser — hero, toolbar, .pf-feed, trådkortet, railkorten.

   Det här blocket innehåller BARA det som är genuint nytt: sökfältet,
   träfflistan för inlägg och användare, och taggmolnet. Allt annat på de fyra
   sidorna är komponenter som redan fanns.

   Blocket ligger EFTER "KOMPAKT SKALA" med flit. Skalblocket är sista ordet
   om storlekar på befintliga klasser; det här introducerar nya klasser som
   ingenting annat pekar på, så det finns inget att vinna eller förlora i
   specificitet. Måtten nedan är skrivna i den kompakta skalan från början —
   12,5 / 11,5 / 11 / 10,5 px — inte satta stort och sedan nedskalade.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Sökfältet i heron ───────────────────────────────────────────────────── */
/* .pf-hero-txt har ingen egen regel i grundstilen — den är ett ostylat barn i
   en flex-container och krymper därför till sitt innehåll. På sidor med en
   åtgärdsknappsrad bredvid spelar det ingen roll, men här ÄR sökfältet sidan,
   och det blev 176px brett (uppmätt på live 2026-08-05) eftersom rubriken
   "Sök i forumet" råkade vara det bredaste i kolumnen. */
/* .pf.pf-sok — INTE ".pf .pf-sok". Modifieraren sitter på SAMMA element som
   .pf (`shell c3 pf pf-sok`), så ett mellanslag gör selektorn till en
   ättlingsregel som aldrig kan matcha. Första försöket skrevs så och fältet
   stod kvar på 176px trots att regeln fanns i filen. */
.pf.pf-sok .pf-hero-txt{ flex:1 1 auto; min-width:0; }
/* …och taket finns för att fältet inte ska bli 880px när högerrailen saknas.
   Ett sökfält som är brett som hela sidan ser ut som en adressrad, inte som
   något man skriver ett ord i. */
.pf .pf-sokform{ display:flex; gap:7px; margin-top:9px; max-width:520px; }
.pf .pf-sokfalt{
  flex:1; min-width:0; height:32px; padding:0 11px;
  font-size:12.5px; color:var(--ink);
  background:var(--inset); border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .12s;
}
.pf .pf-sokfalt::placeholder{ color:var(--faint); }
.pf .pf-sokfalt:focus{ outline:none; border-color:var(--accent); }
.pf .pf-sokform .btn{ flex:0 0 auto; }
/* Sökfältet är 32px och inte 28px som knapparna bredvid. Det är den enda
   avvikelsen i blocket och den är avsiktlig: fältet är sidans arbetsyta och
   ska gå att träffa, knappen bredvid är en genväg till Enter.
   Sök-knappen mäter därför också 32px — den sträcks av flexens align-items:
   stretch till fältets höjd. Det är MENINGEN. En 28px knapp bredvid ett 32px
   fält ser ut som ett misstag, och en knapp som inte når fältets kant är
   svårare att träffa än den behöver vara. Ändra inte till 28 "för att följa
   skalan" — det bryter raden i stället för att räta den. */

.pf .pf-sokantal{ font-size:11px; color:var(--dim); white-space:nowrap; }

/* ── Siffran i fliken "Obesvarade" ───────────────────────────────────────── */
/* GULD, inte rött. Rött betyder trasigt eller "kräver ett beslut"; en obesvarad
   tråd är varken. Guld betyder väntar — någon frågade och ingen har svarat än.
   Siffran finns bara när den är över noll (fliken ritas inte annars), så den
   kan aldrig stå och visa en nolla som slutat betyda något. */
.pf .pf-filter-n{
  margin-left:5px; padding:0 5px; border-radius:999px;
  font-size:9.5px; font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--gold); background:color-mix(in srgb, var(--gold) 15%, transparent);
}
.pf .pf-filter.is-active .pf-filter-n{
  color:#fff; background:color-mix(in srgb, #fff 26%, transparent);
}

/* ── Träfflista (inlägg + användare) ─────────────────────────────────────── */
/* Samma yta som .pf-feed.is-kompakt: ETT kort med tunna delare, inte en
   staplad hög. Det är den detaljen som gör en lista skanningsbar. */
.pf .pf-treffar{ display:flex; flex-direction:column; }

.pf .pf-tr-rad{
  display:flex; flex-direction:column; gap:3px;
  padding:8px 12px; border-bottom:1px solid var(--line);
  transition:background .12s;
}
.pf .pf-tr-rad:last-child{ border-bottom:0; }
.pf .pf-tr-rad:hover{ background:var(--zebra); }

.pf .pf-tr-top{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  font-size:10.5px; color:var(--dim); min-width:0;
}
.pf .pf-tr-top i{ font-size:11px; color:var(--faint); }
.pf .pf-tr-i{ color:var(--faint); }
.pf .pf-tr-top b{ color:var(--ink); font-weight:800; }
.pf .pf-tr-rad:hover .pf-tr-top b{ color:var(--accent-ink); }
.pf .pf-tr-av{ font-weight:700; color:var(--ink2); }

.pf .pf-tr-txt{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:12px; line-height:1.5; color:var(--ink2);
}

/* Markeringen av sökordet. GULD, inte accentfärg: guld betyder "här, titta"
   och kolliderar inte med blått, som på forumet betyder "människor pratar". */
.pf mark.pf-tr{
  background:color-mix(in srgb, var(--gold) 26%, transparent);
  color:var(--ink); border-radius:3px; padding:0 1px;
}

/* Användarträff */
.pf .pf-tr-anv{
  display:flex; align-items:center; gap:9px;
  padding:7px 11px; border-bottom:1px solid var(--line);
  transition:background .12s;
}
.pf .pf-tr-anv:last-child{ border-bottom:0; }
.pf .pf-tr-anv:hover{ background:var(--zebra); }
.pf .pf-tr-anv:hover .pf-live-name{ color:var(--accent-ink); }
.pf .pf-tr-pil{ margin-left:auto; font-size:11px; color:var(--faint); }

/* ── Taggmolnet ──────────────────────────────────────────────────────────── */
/* Tre steg efter antal trådar. Molnet sorterade redan på antal men ritade
   alla pill lika stora — ett taggmoln vars uppgift är att visa vad som är
   stort visade alltså inte vad som var stort. Stegen sätts i vyn utifrån
   listans EGET maxvärde, inte utifrån en gissad gräns. */
.pf .pf-tagmoln{ display:flex; flex-wrap:wrap; gap:6px; padding:12px; align-items:center; }
.pf .pf-tagstor{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px; border-radius:999px;
  font-size:11px; font-weight:700; color:var(--ink2);
  background:var(--inset); border:1px solid var(--line);
  transition:border-color .12s, color .12s, background .12s;
}
.pf .pf-tagstor span{ font-size:9.5px; color:var(--faint); font-variant-numeric:tabular-nums; }
.pf .pf-tagstor:hover{ border-color:var(--accent); color:var(--accent-ink); }
.pf .pf-tagstor:hover span{ color:var(--accent-ink); }

.pf .pf-tagstor.is-mellan{ font-size:12.5px; padding:5px 11px; color:var(--ink); }
.pf .pf-tagstor.is-stor{
  font-size:14px; padding:6px 13px; font-weight:800; color:var(--ink);
  background:var(--accent-wash); border-color:color-mix(in srgb, var(--accent) 35%, var(--line));
}
.pf .pf-tagstor.is-stor span{ font-size:10.5px; color:var(--accent-ink); }

/* ── Samlingssidorna ─────────────────────────────────────────────────────── */
/* Inget eget behövs — de använder hero, .pf-feed och trådkortet rakt av.
   Klassen finns bara för att kunna särskilja dem om det någon gång behövs. */

@media (max-width:560px){
  .pf .pf-sokform{ flex-wrap:wrap; }
  .pf .pf-sokfalt{ flex-basis:100%; font-size:16px; } /* iOS-zoom, se KOMPAKT SKALA */
  .pf .pf-tr-rad{ padding:8px 10px; }
  .pf .pf-tr-anv{ padding:7px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LÄGE: INKORG  (Kentas val 2026-08-06 — förslag D i
   design-proposals/forumraden-omtag-2026-08-06.html)
   ═══════════════════════════════════════════════════════════════════════════
   TREDJE läget, inte ett ersatt. Kompakt och Kort ligger kvar orörda ovanför.
   Samma markup, samma helper, en klass skiljer — det var redan filosofin i det
   här flödet (blockhuvudet rad 296), Inkorg lånar den.

   RYGGRADEN: fetstil betyder EN sak — du har inte läst tråden. Allt annat i
   listan är vikt 400. Klagomålet var "gillar inte när det är SÅÅÅ bold", och
   orsaken var inte att fetstilen fanns utan att den inte betydde något: uppmätt
   bar ett inläggskort tio element i vikt ≥ 700 för elva tecken innehåll, och
   trådtiteln stod i 12,5px/800. Roboto 800 under 14px fyller igen bokstävernas
   inre och läses som en klump, inte som betoning.

   GEOMETRIN: en rad = en textrad, 34px.
   [ författare 120 ] [ titel + trådstart ] [ svar 34 ] [ tid 76 ]
   Tidkolumnen är 76px och inte 56 av ett skäl som bara syns när man mäter:
   ForumService::timeAgo() byter till absolut datum efter en vecka, så samma
   kolumn ska rymma både "3d sedan" och "26 Jun 2026". Vid 56px kapades det
   längre formatet mitt i årtalet. Formatet självt är inte rört — det är en
   egen bugg (två system i en kolumn) och ligger utanför den här omgången.
   Uppmätt i mockupen: 577px → 376px för samma elva trådar (−35 %), och listan
   visar ändå MER än förut eftersom trådstarten nu syns utan att man öppnar
   något. Förhandsvisningen fanns redan i markupen (.pf-fd-prev, byggs i
   forum-thread-card.php rad 32-40) — den var bara dold i kompaktläget.

   VARFÖR display:contents: tiden ligger inuti .pf-fd-top i markupen och ska till
   radens högerkant, medan författaren ska till vänsterkanten. Att flytta dem i
   PHP:n hade brutit både kompakt- och kortläget. display:contents löser upp de
   två hållarna så barnen blir grid-celler direkt under .pf-fd. Varje behållen
   cell får explicit grid-column OCH grid-row:1 — utan grid-row hamnar de på nya
   rader, eftersom DOM-ordningen är författare(1), tid(4), titel(2), svar(3) och
   auto-flow inte backar till en kolumn den passerat.

   RUMMET ÄR BORTA ur raden med flit: nio av elva trådar låg i #allmänt (uppmätt
   2026-08-06), så kolumnen sa ingenting. Kanalfiltret i railen bär den uppgiften.

   --faint används INTE till läsbar text här. Uppmätt kontrast mot kortet:
   2,97:1 i mörkt läge, 3,63:1 i ljust — underkänt (AA kräver 4,5:1) i BÅDA
   lägena. --dim ger 4,82 respektive 4,60 och är därför golvet i det här blocket.
   ═════════════════════════════════════════════════════════════════════════ */
.pf-feed.is-inkorg{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:block;
}
.pf-feed.is-inkorg .pf-fd{
  display:grid; grid-template-columns:120px minmax(0,1fr) 34px 76px; gap:0 12px;
  align-items:center; height:34px; padding:0 14px;
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  margin:0; box-shadow:none; background:transparent;
}
.pf-feed.is-inkorg .pf-fd:last-child{ border-bottom:0; }
.pf-feed.is-inkorg .pf-fd:hover{ background:var(--zebra); }

/* Hållarna löses upp så deras barn blir celler i .pf-fd:s rutnät. */
.pf-feed.is-inkorg .pf-fd-body,
.pf-feed.is-inkorg .pf-fd-top{ display:contents; }

/* Allt som inte är en av de fyra kolumnerna bort. */
.pf-feed.is-inkorg .pf-fd-chan,
.pf-feed.is-inkorg .pf-fd-dot,
.pf-feed.is-inkorg .pf-fd-ava,
.pf-feed.is-inkorg .pf-fd-top .fc-b,
.pf-feed.is-inkorg .pf-fd-top .uchip,
.pf-feed.is-inkorg .pf-fd-foot,
.pf-feed.is-inkorg .pf-fd-likes{ display:none !important; }

/* 1 — författaren */
.pf-feed.is-inkorg .pf-fd-user{
  grid-column:1; grid-row:1; display:block; min-width:0;
  font-size:12px; font-weight:400; color:var(--dim); line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 2 — titel och trådstart på SAMMA rad. auto-kolumnen krymper titeln först när
   det blir trångt, 1fr-kolumnen ger trådstarten resten. */
.pf-feed.is-inkorg .pf-fd-main{
  grid-column:2; grid-row:1; min-width:0;
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:0 8px; align-items:baseline;
}
.pf-feed.is-inkorg .pf-fd-title{
  font-size:13.5px; font-weight:400; line-height:1.2; letter-spacing:0;
  color:var(--ink2); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pf-feed.is-inkorg .pf-fd-prev{
  display:block; margin:0; min-width:0; -webkit-line-clamp:none;
  font-size:12.5px; line-height:1.2; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 3 — svar. Noll svar renderar ingen siffra: tystnaden är signalen. Regeln stod
   redan skriven för hjärtat (rad 383) men hade aldrig utförts på bubblan. */
.pf-feed.is-inkorg .pf-fd-gut{
  grid-column:3; grid-row:1; display:block; text-align:right;
  padding:0; margin:0; border:0; background:none; width:auto; min-width:0;
  align-self:center;
}
.pf-feed.is-inkorg .pf-fd-replies{
  display:inline; font-size:11.5px; font-weight:400; color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.pf-feed.is-inkorg .pf-fd-replies i{ display:none; }
/* Siffran ligger i ett <b> som grundregeln (rad 261) satter till 13px/800/--ink2.
   Att styla bara spannet racker inte — det var darfor svarsantalet fortfarande
   var fetare an titeln pa en LAST rad, vilket ar precis tvartemot poangen. */
.pf-feed.is-inkorg .pf-fd-replies b{ font-size:11.5px; font-weight:400; color:var(--dim); }
.pf-feed.is-inkorg .pf-fd-replies:not(.has){ visibility:hidden; }
/* 4 — tiden */
.pf-feed.is-inkorg .pf-fd-time{
  grid-column:4; grid-row:1; text-align:right; white-space:nowrap;
  font-size:11px; font-weight:400; color:var(--dim); font-variant-numeric:tabular-nums;
}

/* OLÄST — den enda viktvariationen i hela listan. Ingen prick, ingen list,
   ingen färgplatta: vikten ÄR signalen. Sätts av is-olast från
   forum-thread-card.php, som i sin tur läser is_unread ur trådraden. */
.pf-feed.is-inkorg .pf-fd.is-olast .pf-fd-user{ font-weight:700; color:var(--ink2); }
.pf-feed.is-inkorg .pf-fd.is-olast .pf-fd-title{ font-weight:700; color:var(--ink); }
.pf-feed.is-inkorg .pf-fd.is-olast .pf-fd-time{ font-weight:600; color:var(--ink2); }
.pf-feed.is-inkorg .pf-fd:hover .pf-fd-title{ color:var(--accent-ink); }
/* Fastnålat får ingen guldton här — den skulle slåss med oläst om samma signal.
   Att raden ligger först räcker. */
.pf-feed.is-inkorg .pf-fd.is-pinned{ background:transparent; }
.pf-feed.is-inkorg .pf-fd.is-pinned:hover{ background:var(--zebra); }

@media (max-width:560px){
  /* 380px rymmer inte fyra kolumner. Författare och trådstart får gå — titel,
     svar och tid är det man skannar efter på en telefon. */
  .pf-feed.is-inkorg .pf-fd{ grid-template-columns:minmax(0,1fr) 30px 48px; padding:0 12px; }
  .pf-feed.is-inkorg .pf-fd-user,
  .pf-feed.is-inkorg .pf-fd-prev{ display:none; }
  .pf-feed.is-inkorg .pf-fd-main{ grid-column:1; grid-template-columns:minmax(0,1fr); }
  .pf-feed.is-inkorg .pf-fd-gut{ grid-column:2; }
  .pf-feed.is-inkorg .pf-fd-time{ grid-column:3; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INLÄGGSKORTET — padding, vänsterkant och vikt (2026-08-06)
   ═══════════════════════════════════════════════════════════════════════════
   Tre uppmätta fel, alla i samma kort:

     1. NOLL PADDING I TOPPEN. `.pf-post-body{padding:0 12px 12px}` (rad 504)
        gav brödtexten ingen luft alls mot huvudets underkant, men 12px under
        sig. Det var den asymmetrin Kenta såg på skärmdumpen.
     2. TRE VÄNSTERKANTER. Uppmätt från kortets ytterkant: namnet på 72px,
        brödtexten på 13px, knappraden på 22px. Huvudet har 12px sidopadding,
        brödtexten 12px, foten 10px, och .pf-act lägger 10px till inuti sig.
     3. TIO ELEMENT I VIKT ≥ 700 för elva tecken innehåll. När allt är fett är
        ingenting fett — och det enda i kortet som INTE var fetstil var det som
        någon faktiskt skrivit.

   LÖSNINGEN: kortet blir ett rutnät med avataren i en egen 34px-ränna. Huvud,
   brödtext och fot delar då EN vänsterkant, och brödtexten blir kortets största
   text (14,5px) i stället för dess minsta (12,5px).

   `.pf .pf-post > *{grid-column:2}` är inte kosmetik: thread.php rad 468 skjuter
   in en `.tw-forum-edit`-ruta som DIREKT barn till artikeln när man redigerar.
   Utan grundregeln hade den landat i avatarrännan och blivit 34px bred.

   Det gråa huvudbandet försvinner med `display:contents` — det är avsiktligt och
   är hela poängen med förslag D:s kort. Kortets egen ram bär avgränsningen.
   Radnumret behålls men flyttar till kortets övre högra hörn i --dim/vikt 400.
   ═════════════════════════════════════════════════════════════════════════ */
.pf .pf-post{
  position:relative;
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:0 12px;
  padding:12px 14px; align-items:start;
}
.pf .pf-post > *{ grid-column:2; }
.pf .pf-post-head{ display:contents; }
.pf .pf-post-ava{
  grid-column:1; grid-row:1; width:34px; height:34px; font-size:13px;
  border:0; background:var(--inset);
}
.pf .pf-post-id{ grid-column:2; grid-row:1; min-width:0; }
.pf .pf-post-num{
  position:absolute; right:14px; top:11px; transform:none;
  font-size:11px; font-weight:400; letter-spacing:0;
  color:var(--dim); opacity:.6;
}
.pf .pf-post-id-top{ gap:7px; }
.pf .pf-post-name{ font-size:13px; font-weight:600; }
/* Rankchippet var ett piller med ram, fyllning och två olika vikter inuti.
   Samma uppgift, en fjärdedel av bläcket: text i --dim, vikt 400. */
.pf .pf-au{
  background:none; border:0; padding:0; border-radius:0;
  font-size:11px; font-weight:400; color:var(--dim);
}
.pf .pf-au .pf-au-season{ font-size:11px; font-weight:400; color:var(--dim); }
.pf .pf-post-stats{ margin-top:2px; font-size:11px; font-weight:400; }
.pf .tw-forum-post-level{ font-weight:400; color:var(--dim); }
.pf .pf-post-body{
  grid-column:2; padding:0; margin-top:7px;
  font-size:14.5px; line-height:1.65; color:var(--ink);
}
.pf .pf-post-body p{ margin:0 0 10px; }
.pf .pf-post-body p:last-child{ margin-bottom:0; }
/* -8px drar knappens egen inpadding tillbaka så att TEXTEN i första knappen
   börjar på exakt samma vänsterkant som brödtexten ovanför. */
.pf .pf-post-foot{
  grid-column:2; padding:0; margin:10px 0 0 -8px;
  border-top:0; gap:0;
}
.pf .pf-act{ font-size:11.5px; font-weight:500; padding:5px 8px; border:0; }
.pf .tw-forum-edit{ margin:8px 0 0; }

@media (max-width:560px){
  .pf .pf-post{ padding:11px 12px; gap:0 10px; grid-template-columns:30px minmax(0,1fr); }
  .pf .pf-post-ava{ width:30px; height:30px; font-size:12px; }
  .pf .pf-post-body{ padding:0; font-size:14px; }
  .pf .pf-post-num{ right:12px; top:10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRÅDSIDANS INLÄGG — L: TVÅ STORLEKAR  (Kentas val 2026-08-06, förslag L i
   design-proposals/tradsvaren-typskala-2026-08-06.html)
   ═══════════════════════════════════════════════════════════════════════════
   REGELN, och det är den som är poängen:

       10,5 px = allt som INTE är brödtext.
       12,5 px = all brödtext.
       Slut.

   SIFFRORNA ÄR UPPMÄTTA I WEBBLÄSAREN PÅ LIVE (2026-08-06), inte lästa ur en
   CSS-fil. Det är hela skillnaden: `.post .body` i forre_pulse.css rad 213 SÄGER
   14,5px, men den regeln är överskriven längre ned och hubbens vägg renderar i
   verkligheten 12,5. Jag läste grundregeln, hoppade över kaskaden, och byggde
   forumet en hel pixel STÖRRE än hubben medan jag påstod motsatsen. Uppmätt på
   sex inlägg på ?page=hub, samma kortbredd (560px) som trådsidan:

       hubbens vägg:   brödtext 12,5 / namn 12,5 / metarad 10,5 / knappar 11,5
       trådsidan före: brödtext 13,5 / namn 12   / metarad 12   / knappar 12

   Nu: brödtexten är EXAKT hubbens 12,5 med samma radavstånd (18,75px), och all
   UI-text ligger på hubbens metarad-storlek 10,5. Kvoten 12,5/10,5 = 1,19 — ett
   tydligare steg än hubben själv har, där namn och brödtext är lika stora och
   därför inget sticker ut. Mät i webbläsaren nästa gång, inte i filen.

   Även bokstaven i avataren är 12 — annars hade det varit tre. Nästa gång någon
   lägger till en knapp, en etikett eller en tidsstämpel finns det exakt ett svar
   på vilken storlek den ska ha. Det är den sortens regel som gör att en sida
   ser hopsatt ut om två år.

   VARFÖR: uppmätt före ändringen bar ett svar FYRA textstorlekar — 11, 11,5, 13
   och 14,5 — allihop inom tre och en halv pixel. Steget 11 → 11,5 är × 1,045.
   Ögat läser inte det som två storlekar, och när storleken inte kan bära
   hierarkin måste vikten göra det. Därav fyra olika vikter i samma lilla kort,
   och därav "SÅÅÅ bold".

   HIERARKIN BÄRS AV FÄRG OCH RADAVSTÅND I STÄLLET:
     --ink   namn och brödtext (det man läser)
     --ink2  handlingar (det man kan göra)
     --dim   rank, tid, radnummer (det man sällan behöver)
     radavstånd 1,3 på UI-raderna → de läses som rader
     radavstånd 1,6 på brödtexten → den läses som en text
   Huvudraden och knappraden får SAMMA storlek och blir därför ett par som ramar
   in texten. Därför behöver kortet varken egen ram eller grå platta: hela
   listan är EN yta med hårfina vågräta delare.

   Uppmätt i mockupen på samma fyra inlägg: 659 px → 426 px för hela tråden
   (−35 %), och ett kort svar från 138 px till 95 px.
   ═════════════════════════════════════════════════════════════════════════ */

/* Listan är en yta, inte en hög med kort. */
.pf .pf-post-list{
  display:flex; flex-direction:column; gap:0;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden;
}
.pf .pf-post{
  position:relative;
  display:grid; grid-template-columns:26px minmax(0,1fr); gap:0 10px;
  padding:10px 14px; align-items:start;
  background:transparent; border:0; border-radius:0; box-shadow:none;
}
.pf .pf-post + .pf-post{ border-top:1px solid var(--line); }
.pf .pf-post:hover{ background:var(--zebra); }
/* Grundregeln FÖRE undantaget. Skrivs de i omvänd ordning vinner `> *` över
   avatarens grid-column:1 och skjuter upp den på en egen rad ovanför namnet —
   exakt det felet gjorde jag i mockupen och det syntes först på skärmdumpen.
   Regeln finns också för att thread.php rad 468 skjuter in en .tw-forum-edit
   som DIREKT barn till artikeln vid redigering. */
.pf .pf-post > *{ grid-column:2; }
.pf .pf-post-head{ display:contents; }
.pf .pf-post-ava{
  grid-column:1; grid-row:1; width:26px; height:26px;
  font-size:10.5px; border:0; background:var(--inset);
}

/* ── Identitetsraden: EN rad, 12 px, namnsidan vänster och siffrorna höger ── */
.pf .pf-post-id{
  grid-column:2; grid-row:1; min-width:0;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:10.5px; line-height:1.3;
}
.pf .pf-post-id-top{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; min-width:0; }
.pf .pf-post-name{ font-size:10.5px; font-weight:700; color:var(--ink); }
.pf .pf-post-name:hover{ color:var(--accent-ink); }
/* Rankchippet var ett piller med ram, fyllning och tre olika vikter inuti.
   Samma uppgift, en femtedel av bläcket. */
.pf .pf-au{
  background:none; border:0; padding:0; border-radius:0;
  font-size:10.5px; font-weight:400; color:var(--dim); line-height:1.3;
}
.pf .pf-au .pf-au-season{ font-size:10.5px; font-weight:400; color:var(--dim); }
.pf .pf-au img{ width:12px; height:12px; }
/* Brickan är en 27px-hållare runt en 20px-ikon och satte ensam radhöjden till
   27px i en rad vars text är 12. --fcb skalar hela spriten på ETT ställe
   (pulse-chip.css rad 59-75), så ikonen rörs inte — bara hållaren krymper. */
.pf .pf-post-id-top .fc-b{ --fcb:10px; border-radius:5px; }
/* Chipsen tappar sin platta: färgen räcker, och färgen betyder EN sak vardera.
   BLÅTT = den som startade tråden. GRÖNT = markerat som bästa svar. */
.pf .pf-chip{
  font-size:10.5px; font-weight:800; letter-spacing:0; text-transform:lowercase;
  padding:0; border-radius:0; background:none;
}
.pf .pf-chip-op{ background:none; color:var(--accent-ink); }
.pf .pf-chip-best{ background:none; color:var(--live); }
/* Siffrorna och tiden till radens högerkant. Wrappar till egen rad om det blir
   trångt — inget döljs, ingenting kapas. */
.pf .pf-post-stats{
  margin:0 0 0 auto; font-size:10.5px; font-weight:400; line-height:1.3;
  color:var(--dim); display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.pf .pf-post-stats i{ color:var(--dim); font-size:10.5px; }
.pf .pf-post-stats .pf-sep{ color:var(--dim); opacity:.55; }
.pf .tw-forum-post-level{ font-size:10.5px; font-weight:400; color:var(--dim); }
/* Radnumret flyttar ned under avataren. Där krockar det med ingenting, och
   högerkanten är upptagen av statsraden. */
.pf .pf-post-num{
  position:absolute; left:14px; top:40px; right:auto; transform:none;
  width:26px; text-align:center;
  font-size:10.5px; font-weight:400; letter-spacing:0; color:var(--dim); opacity:.5;
}

/* ── Brödtexten: den enda 14:an ──────────────────────────────────────────── */
.pf .pf-post-body{
  grid-column:2; padding:0; margin-top:3px;
  font-size:12.5px; line-height:1.5; color:var(--ink);
}
.pf .pf-post-body p{ margin:0 0 10px; }
.pf .pf-post-body p:last-child{ margin-bottom:0; }
/* Ett citat är brödtext det med. Skillnaden bärs av färg och indrag, inte av
   en femte textstorlek. */
.pf .pf-post-body blockquote{ font-size:12.5px; line-height:1.5; color:var(--ink2); }
.pf .pf-post-body li{ margin:3px 0; }

/* ── Knappraden: samma 12 som huvudraden. Paret ramar in texten. ─────────── */
.pf .pf-post-foot{
  grid-column:2; margin:7px 0 0; padding:0; border-top:0;
  display:flex; align-items:center; flex-wrap:wrap; gap:15px;
  font-size:10.5px; line-height:1.3;
}
.pf .pf-post-foot .pf-act{
  font-size:10.5px; font-weight:600; color:var(--ink2);
  padding:0; border:0; background:none; border-radius:0; gap:5px;
}
.pf .pf-post-foot .pf-act:hover{
  background:none; color:var(--accent-ink); text-decoration:underline;
}
.pf .pf-post-foot .pf-act i{ font-size:10.5px; }
/* Gilla-knappen skriver ut ett TOMT span nar ingen gillat (thread.php rad 219).
   Utan den har raden lamnar flex-gapet kvar 5px luft efter hjartat — en tom
   plats dar en siffra brukade sta ar nastan lika illa som nollan sjalv. */
.pf .pf-post-foot .pf-act > span:empty{ display:none; }
.pf .pf-post-foot .pf-act-profile{ margin-left:auto; color:var(--accent-ink); }
.pf .tw-forum-edit{ margin:8px 0 0; }
.pf .tw-forum-edit textarea{ font-size:12.5px; line-height:1.5; }

/* Skrivfältet är där brödtext blir till — alltså 14, inte 12. */
.pf .pf-reply-body textarea{ font-size:12.5px; line-height:1.5; }

@media (max-width:560px){
  .pf .pf-post{ padding:10px 12px; }
  .pf .pf-post-num{ left:12px; }
  /* iOS zoomar in på fokus under 16px och zoomar inte ut igen. Reglerna finns
     redan i mobilblocket längre upp, men de står FÖRE det här blocket i filen
     och skulle annars förlora på källordning. */
  .pf .pf-title,
  .pf .pf-content,
  .pf .tw-forum-edit textarea,
  .pf .pf-reply-body textarea{ font-size:16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRÅDSIDAN, JUSTERING 2 (Kentas order 2026-08-06, efter liveblick)
   ═══════════════════════════════════════════════════════════════════════════
   1) RADAVSTÅNDET, inte storleken, var det som gjorde att trådsidan kändes
      STÖRRE än hubbens vägg. Uppmätt: hubben `.post .body` = 14,5px med
      radavstånd 1,5 (ärvt från `body`, forre_pulse.css rad 51) → 21,75px per
      rad. Trådsidan låg på 14px men 1,6 → 22,4px per rad. Alltså 0,5px MINDRE
      text i 0,65px HÖGRE rader, plus 10px mellan styckena. Nu 1,5 och 8px:
      exakt hubbens radrytm, och eftersom texten är 13,5 och inte 14,5 blir
      forumet både mindre och tätare än väggen.

   2) TROFÉ, K/D OCH LVL UT UR VARJE SVAR. Fyra datapunkter per inlägg är samma
      fel som listan hade: kromet väger tyngre än det någon skrivit. På hubbens
      vägg får man inte författarens K/D ovanför inlägget heller. Siffrorna
      försvinner inte — hovercardet (`pulse-hovercard.css` rad 53, "rank-strip:
      rank-ikon + division + säsongs-K/D + W") visar redan exakt dem, och
      trådsidan har hakarna `data-avatar-user`/`data-avatar-uid` på avataren.
      De lades samtidigt på NAMNET, så kortet nås från båda.

      Görs i CSS, inte genom att ta bort markup: spanen finns kvar i DOM:en och
      en rad borttagen `display:none` återställer allt. Selektorerna pekar på
      exakt de tre uppgifterna — tidsstämpeln är ett klasslöst <span> utan
      title och överlever därför. Kvar blir: namn · trådstart · rank ——— tid.
   ═════════════════════════════════════════════════════════════════════════ */
.pf .pf-post-body{ line-height:1.5; }
.pf .pf-post-body p{ margin:0 0 8px; }
.pf .pf-post-body p:last-child{ margin-bottom:0; }
.pf .pf-post-body blockquote{ line-height:1.5; }

.pf .pf-post-stats > span[title],
.pf .pf-post-stats > .tw-forum-post-level,
.pf .pf-post-stats > .pf-sep{ display:none; }

/* ============================================================================
   INGA LODRÄTA FÄRGADE LINJER — TONEN LIGGER PÅ HELA YTAN
   Kenta 2026-08-19: "bög linjer gillar jag inte ... gör då hela denna bar
   liiiite röd alltså jääääte lite ... gör en liten färg över hela då som
   synnnnsss jäättteee liittteeee".
   2 `border-left/right: Npx solid <färg>` togs bort ur den här filen och
   ersattes av en ton på hela ytan: 6% i ljust läge, 10% i mörkt (mörka kort
   sväljer ton, se mätningen i pulse-nu.css). Reglerna står SIST i filen med
   flit — då vinner de utan !important och utan att röra originalregelns
   övriga deklarationer. Facit: `.nu-svar-yta` i pulse-nu.css.
   ========================================================================= */
/ .pf .pf-modbar{background:color-mix(in srgb,var(--gold) 6%,var(--card))}
[data-theme="dark"] / .pf .pf-modbar{background:color-mix(in srgb,var(--gold) 10%,var(--card))}
.pf .pf-post-body blockquote{background:color-mix(in srgb,var(--accent) 6%,var(--card))}
[data-theme="dark"] .pf .pf-post-body blockquote{background:color-mix(in srgb,var(--accent) 10%,var(--card))}