/**
 * NurseLink Community — Global styles
 * ────────────────────────────────────────────────────────────────────────
 * Custom styles som kompletterar Tailwind CDN (fonts, animations, nav-tabs,
 * emoji pickers, forum-rader, toast, mobilmeny, notif-bubbles, dark mode).
 *
 * Tailwind-klasser används inline i HTML för utility-styling. Denna fil
 * innehåller bara komponenter/animationer som inte går att uttrycka med
 * Tailwind-utilities.
 */

*,*::before,*::after{box-sizing:border-box}
body{font-family:'Outfit',system-ui,sans-serif;background:#FDFBF9;color:#1e1b2e;-webkit-font-smoothing:antialiased}
.dark body,.dark{background:#241d47;color:#e6e2f7}

::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#D5D1FF;border-radius:50px}.dark ::-webkit-scrollbar-thumb{background:#3e3470}
:focus-visible{outline:3px solid #A39DF7;outline-offset:2px;border-radius:6px}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.anim-up{animation:fadeUp .5s ease-out both}
.view{display:none}.view.active{display:block;animation:fadeIn .25s ease-out}

.card{transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(163,157,247,.1)}
.dark .card:hover{box-shadow:0 8px 28px rgba(0,0,0,.3)}
.forum-row{transition:background .12s}.forum-row:hover{background:#F3F0FF}.dark .forum-row:hover{background:#352c63}

.pill{border-radius:50px;transition:all .2s}button.pill:hover,a.pill:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(163,157,247,.18)}

.reply-indent{border-left:3px solid #ECEAFF;margin-left:1.25rem;padding-left:1rem}.dark .reply-indent{border-left-color:#3e3470}

#toast{transform:translateY(120px);opacity:0;transition:all .35s;pointer-events:none}#toast.show{transform:translateY(0);opacity:1}
.mob-menu{transform:translateX(100%);transition:transform .3s}.mob-menu.open{transform:translateX(0)}

/* Nav tabs */
.nav-link{position:relative;border-radius:10px;transition:background .2s,color .2s;cursor:pointer}
.nav-link:hover{background:rgba(255,119,240,.12)}
.dark .nav-link:hover{background:rgba(255,119,240,.1)}
.nav-link.nav-active{color:#FF77F0}
.dark .nav-link.nav-active{color:#FF77F0}
.nav-link.nav-active::after{content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:24px;height:3.5px;border-radius:50px;background:#FF77F0}

/* Emoji reaction picker (compact) */
.emoji-picker{display:none;position:absolute;bottom:calc(100% + 6px);left:0;z-index:50;background:#fff;border:1px solid #ECEAFF;border-radius:14px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);width:max-content;max-width:280px}
.dark .emoji-picker{background:#2d2456;border-color:#3e3470}
.emoji-picker.open{display:block}
.emoji-picker .ep-grid{display:flex;flex-wrap:wrap;gap:2px}
.emoji-picker button{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:18px;transition:background .15s;cursor:pointer;border:none;background:transparent}
.emoji-picker button:hover{background:#ECEAFF}.dark .emoji-picker button:hover{background:#3e3470}

/* Reaction-picker: kategoriserad scrollbar layout (Discord-style).
 * Tillämpas på BÅDE forum (.emoji-picker) och flöde (.fp-emoji-picker)
 * via en delad .reaction-picker-klass. Max-height + scroll så ~70 emojis
 * får plats utan att svämma över kortet. */
.reaction-picker{width:300px!important;max-width:calc(100vw - 2rem)!important;max-height:280px;overflow-y:auto;padding:10px}
.reaction-picker .ep-cat{font-size:11px;font-weight:600;color:#8884a0;text-transform:uppercase;letter-spacing:.05em;padding:6px 4px 2px;margin-top:4px}
.reaction-picker .ep-cat:first-child{margin-top:0}
.dark .reaction-picker .ep-cat{color:#b0aad6}
.reaction-picker .ep-grid{display:flex;flex-wrap:wrap;gap:2px}
.reaction-picker button{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:18px;transition:background .15s;cursor:pointer;border:none;background:transparent}
.reaction-picker button:hover{background:#ECEAFF}
.dark .reaction-picker button:hover{background:#3e3470}

/* Full emoji inserter for textareas */
.emoji-inserter{display:none;position:absolute;bottom:calc(100% + 6px);right:0;z-index:60;background:#fff;border:1px solid #ECEAFF;border-radius:14px;padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);width:300px;max-width:calc(100vw - 2rem);max-height:320px;overflow-y:auto}
.dark .emoji-inserter{background:#2d2456;border-color:#3e3470}
.emoji-inserter.open{display:block}
.emoji-inserter .ei-cat{font-size:11px;font-weight:600;color:#8884a0;text-transform:uppercase;letter-spacing:.05em;padding:6px 4px 2px;margin-top:4px}
.emoji-inserter .ei-cat:first-child{margin-top:0}
.emoji-inserter .ei-grid{display:flex;flex-wrap:wrap;gap:2px}
.emoji-inserter button{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:18px;transition:background .15s;cursor:pointer;border:none;background:transparent}
.emoji-inserter button:hover{background:#ECEAFF}.dark .emoji-inserter button:hover{background:#3e3470}

.reaction-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:50px;font-size:12px;cursor:pointer;transition:all .15s;border:1px solid transparent;user-select:none}
.reaction-badge:hover{border-color:#A39DF7}
.reaction-badge.mine{background:#ECEAFF;border-color:#A39DF7}.dark .reaction-badge.mine{background:#3e3470;border-color:#A39DF7}

/* Auth modals */
.modal-bg{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal-bg .overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px)}
.modal-bg .modal-card{position:relative;background:#fff;border-radius:20px;padding:2rem;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.15);animation:fadeUp .3s ease-out}
.dark .modal-bg .modal-card{background:#2d2456;border:1px solid #3e3470}
/* Bredare modal för DM. Regeln ovan sätter max-width:420px med högre
   specificitet än Tailwinds max-w-* — därför behövs en egen klass. */
.modal-bg .modal-card.modal-wide{max-width:620px}

.anon-toggle{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;background:#ECEAFF;cursor:pointer;user-select:none;transition:background .15s}
.anon-toggle.active{background:#A39DF7;color:#fff}
.dark .anon-toggle{background:#3e3470}.dark .anon-toggle.active{background:#A39DF7;color:#fff}

body,header,footer,.card,section,.forum-row,input,textarea,select{transition:background-color .25s,color .25s,border-color .25s}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea,select{background:#F8F5F1;border:1px solid rgba(255,119,240,0.3);border-radius:12px;padding:.65rem 1rem;font-size:.875rem;outline:none;width:100%;font-family:inherit}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,textarea:focus,select:focus{border-color:#FF77F0;box-shadow:0 0 0 3px rgba(255,119,240,.12)}
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),.dark textarea,.dark select{background:#2f2658!important;border-color:#3e3470!important;color:#e6e2f7!important}

/* Checkboxar + radio: behåll native size + lägg till lite styling så de
 * inte ser obekväma ut. Större touch-target på mobil hanteras separat.
 * `sr-only` exkluderas eftersom det är screen-reader-dolda checkboxar
 * (t.ex. våra toggle-switches i Inställningar) som ska vara helt
 * osynliga och drivs av peer-CSS istället. */
input[type="checkbox"]:not(.sr-only),input[type="radio"]:not(.sr-only){width:18px;height:18px;flex-shrink:0;accent-color:#A39DF7;cursor:pointer}
textarea{resize:vertical;min-height:80px}

.mod-menu{display:none;position:absolute;right:0;top:100%;z-index:40;background:#fff;border:1px solid #ECEAFF;border-radius:12px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:210px}
.dark .mod-menu{background:#2d2456;border-color:#3e3470}
.mod-menu.open{display:block}
.mod-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;border-radius:8px;font-size:13px;cursor:pointer;text-align:left;font-family:inherit;color:inherit;transition:background .15s}
.mod-menu button:hover{background:#ECEAFF}.dark .mod-menu button:hover{background:#3e3470}
.mod-menu button.destructive{color:#ef4444}
.mod-menu button.destructive:hover{background:#fef2f2}.dark .mod-menu button.destructive:hover{background:rgba(239,68,68,.1)}

/* Quill overrides */
#ae-quill-editor .ql-editor{font-family:'Outfit',system-ui,sans-serif;font-size:15px;min-height:450px;line-height:1.8;color:#1e1b2e;padding:1.5rem}
#ae-quill-editor .ql-editor:focus{outline:none}
.dark #ae-quill-editor .ql-editor{color:#e6e2f7}
#ae-quill-editor .ql-toolbar{border-color:#ECEAFF;border-radius:16px 16px 0 0;background:#FDFBF9;border-left:0;border-right:0;border-top:0;padding:10px 16px;position:sticky;top:64px;z-index:10}
.dark #ae-quill-editor .ql-toolbar{border-color:#3e3470;background:#2d2456}
#ae-quill-editor .ql-container{border:none;background:transparent;font-size:15px;border-radius:0 0 16px 16px}
.dark #ae-quill-editor .ql-container{background:transparent}
.dark #ae-quill-editor .ql-stroke{stroke:#e6e2f7}
.dark #ae-quill-editor .ql-fill{fill:#e6e2f7}
.dark #ae-quill-editor .ql-picker-label{color:#e6e2f7}
#ae-quill-editor .ql-tooltip{z-index:50;border-radius:10px;border-color:#ECEAFF;box-shadow:0 4px 16px rgba(0,0,0,.1);left:8px!important}
.dark #ae-quill-editor .ql-tooltip{background:#2d2456;border-color:#3e3470;color:#e6e2f7}
#ae-quill-editor .ql-tooltip input[type="text"]{border-radius:8px;border:1px solid #ECEAFF;padding:4px 8px;font-size:13px}
.dark #ae-quill-editor .ql-tooltip input[type="text"]{background:#2f2658;border-color:#3e3470;color:#e6e2f7}
#ae-quill-editor .ql-editor a{color:#7873BC;text-decoration:underline}
#ae-quill-editor .ql-editor h2{font-family:'Newsreader',Georgia,serif;font-size:1.4em;font-weight:600;margin:1em 0 0.3em}
#ae-quill-editor .ql-editor h3{font-family:'Newsreader',Georgia,serif;font-size:1.15em;font-weight:600;margin:0.8em 0 0.3em}
#ae-quill-editor .ql-editor blockquote{border-left:4px solid #A39DF7;padding-left:1em;margin:1em 0;font-style:italic;color:#4a465c}
#ae-quill-editor .ql-editor img{border-radius:12px;margin:1em auto;max-width:50%;height:auto;border:1px solid #ECEAFF;box-shadow:0 2px 8px rgba(0,0,0,.06);display:block;cursor:pointer;transition:outline .15s}
#ae-quill-editor .ql-editor img:hover{outline:2px solid #A39DF7;outline-offset:2px}
#ae-quill-editor .ql-editor img.img-sm{max-width:30%}
#ae-quill-editor .ql-editor img.img-md{max-width:50%}
#ae-quill-editor .ql-editor img.img-lg{max-width:75%}
#ae-quill-editor .ql-editor img.img-full{max-width:100%}
#ae-quill-editor .ql-editor img.img-left{margin:1em 1.5em 1em 0;float:left}
#ae-quill-editor .ql-editor img.img-center{float:none;margin-left:auto;margin-right:auto}
#ae-quill-editor .ql-editor img.img-right{margin:1em 0 1em 1.5em;float:right}
/* Figure (image + caption) in editor */
#ae-quill-editor .nurselink-figure{margin:1.5em 0;max-width:50%;text-align:center}
#ae-quill-editor .nurselink-figure img{border-radius:12px;max-width:100%;height:auto;border:1px solid #ECEAFF;box-shadow:0 2px 8px rgba(0,0,0,.06);cursor:pointer;display:block;transition:outline .15s}
#ae-quill-editor .nurselink-figure img:hover{outline:2px solid #A39DF7;outline-offset:2px}
#ae-quill-editor .nurselink-figure.img-sm{max-width:30%}
#ae-quill-editor .nurselink-figure.img-md{max-width:50%}
#ae-quill-editor .nurselink-figure.img-lg{max-width:75%}
#ae-quill-editor .nurselink-figure.img-full{max-width:100%}
#ae-quill-editor .nurselink-figure.img-left{float:left;margin:1em 1.5em 1em 0}
#ae-quill-editor .nurselink-figure.img-center{float:none;margin-left:auto;margin-right:auto}
#ae-quill-editor .nurselink-figure.img-right{float:right;margin:1em 0 1em 1.5em}
.dark #ae-quill-editor .nurselink-figure img{border-color:#3e3470}
#ae-quill-editor .nurselink-figure figcaption{font-size:12px;color:#8884a0;font-style:italic;margin-top:6px;outline:none;min-height:1.2em;padding:2px 4px}
#ae-quill-editor .nurselink-figure figcaption:empty::before{content:attr(placeholder);color:#8884a066}
.dark #ae-quill-editor .nurselink-figure figcaption{color:#b0aad6}
.dark #ae-quill-editor .ql-editor img{border-color:#3e3470}
/* Image toolbar popup */
.img-toolbar{position:absolute;z-index:50;background:#fff;border:1px solid #ECEAFF;border-radius:12px;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,.12);display:flex;gap:2px}
.dark .img-toolbar{background:#2d2456;border-color:#3e3470}
.img-toolbar button{padding:4px 8px;border-radius:8px;font-size:11px;font-weight:600;white-space:nowrap;color:#4a465c;transition:background .15s}
.img-toolbar button:hover{background:#ECEAFF}
.dark .img-toolbar button{color:#e6e2f7}.dark .img-toolbar button:hover{background:#3e3470}
.img-toolbar button.active{background:#A39DF7;color:#fff}
.img-toolbar .sep{width:1px;background:#ECEAFF;margin:2px 4px}.dark .img-toolbar .sep{background:#3e3470}

/* Article body rendered HTML */
.article-body img{border-radius:12px;margin:1.5em auto;max-width:100%;height:auto;border:1px solid #ECEAFF;box-shadow:0 2px 8px rgba(0,0,0,.06);display:block}
.article-body img.img-sm{max-width:30%}.article-body img.img-md{max-width:50%}.article-body img.img-lg{max-width:75%}.article-body img.img-full{max-width:100%}
.article-body img.img-left{float:left;margin:0.5em 1.5em 1em 0}
.article-body img.img-center{float:none;margin-left:auto;margin-right:auto}
.article-body img.img-right{float:right;margin:0.5em 0 1em 1.5em}
/* Figure in article body */
.article-body figure.nurselink-figure{margin:1.5em 0;text-align:center}
.article-body .nurselink-figure img{border-radius:12px;max-width:100%;height:auto;border:1px solid #ECEAFF;box-shadow:0 2px 8px rgba(0,0,0,.06);display:block}
.article-body .nurselink-figure.img-sm{max-width:30%}.article-body .nurselink-figure.img-md{max-width:50%}.article-body .nurselink-figure.img-lg{max-width:75%}.article-body .nurselink-figure.img-full{max-width:100%}
.article-body .nurselink-figure.img-left{float:left;margin:0.5em 1.5em 1em 0}
.article-body .nurselink-figure.img-center{float:none;margin-left:auto;margin-right:auto}
.article-body .nurselink-figure.img-right{float:right;margin:0.5em 0 1em 1.5em}
.dark .article-body .nurselink-figure img{border-color:#3e3470}
.article-body .nurselink-figure figcaption{font-size:13px;color:#8884a0;font-style:italic;margin-top:8px;text-align:center}
.dark .article-body .nurselink-figure figcaption{color:#b0aad6}
.dark .article-body img{border-color:#3e3470}
.article-body h2{font-family:'Newsreader',Georgia,serif;font-size:1.5em;font-weight:600;margin:1.5em 0 0.5em;color:#1e1b2e}
.article-body h3{font-family:'Newsreader',Georgia,serif;font-size:1.2em;font-weight:600;margin:1.2em 0 0.4em;color:#1e1b2e}
.dark .article-body h2,.dark .article-body h3{color:#e6e2f7}
.article-body p{margin:0.8em 0}
.article-body a{color:#7873BC;text-decoration:underline}
.article-body ul,.article-body ol{padding-left:1.5em;margin:0.8em 0}
.article-body li{margin:0.3em 0}
.article-body blockquote{border-left:4px solid #A39DF7;padding-left:1em;margin:1em 0;font-style:italic;color:#4a465c}
.dark .article-body blockquote{color:#cfcaea}
.article-body strong{font-weight:600;color:#1e1b2e}.dark .article-body strong{color:#fff}
.article-body .nurselink-video-wrapper,.nurselink-video-wrapper{border-radius:16px;overflow:hidden;border:1px solid #ECEAFF;margin:1.5em 0;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.dark .article-body .nurselink-video-wrapper,.dark .nurselink-video-wrapper{border-color:#3e3470}
.nurselink-video-wrapper iframe{width:100%;aspect-ratio:16/9;display:block}
/* Floating emoji animations */
@keyframes floatEmoji{
    0%{transform:translateY(0) scale(0.3);opacity:0}
    15%{opacity:1;transform:translateY(-30px) scale(1.2)}
    100%{transform:translateY(-180px) translateX(var(--drift)) scale(0.8);opacity:0}
}
.floating-emoji{
    position:fixed;pointer-events:none;z-index:9990;
    font-size:2rem;
    animation:floatEmoji 2s ease-out forwards;
}
@keyframes notifSlide{
    0%{transform:translateX(120%);opacity:0}
    15%{transform:translateX(0);opacity:1}
    85%{transform:translateX(0);opacity:1}
    100%{transform:translateX(120%);opacity:0}
}
.notif-bubble{
    position:fixed;right:20px;z-index:9991;pointer-events:none;
    animation:notifSlide 3.5s ease-in-out forwards;
}


/* ──────────────────────────────────────────────────────────────────
 * Mobile adjustments (Session 1: touch-targets + läsbarhet)
 * ──────────────────────────────────────────────────────────────────
 * Baseline mobile är <640px (Tailwinds sm-breakpoint). Fokus: gör
 * interaktiva element fingvänliga (Apple rekommenderar 44×44px min)
 * och bättre spacing. Tailwind-klasser med sm:-prefix hanterar resten.
 */

@media (max-width: 640px) {
    /* Reaktionsknappar: dubbel padding för bättre touch-area (24→36px höjd) */
    .reaction-badge{padding:7px 12px;font-size:13px;gap:4px}

    /* Pills: säkerställ 44px touch-target för alla interaktiva pills */
    button.pill,a.pill{min-height:44px}

    /* Stäng-knappar i modaler: större tap-area (position via Tailwind
     * w-8 h-8 förblir men touch-area utökas) */
    .close-modal{min-width:44px;min-height:44px}

    /* Emoji-inserter: gör hela insertern lättare att använda */
    .emoji-inserter{width:calc(100vw - 2rem);max-width:320px}
    .emoji-inserter button{width:38px;height:38px;font-size:20px}

    /* Emoji-picker (reaction picker): samma princip */
    .emoji-picker{width:calc(100vw - 2rem);max-width:280px}
    .emoji-picker button{width:40px;height:40px;font-size:20px}

    /* Forum-rader: mer vertikal padding för fingerträff */
    .forum-row{padding-top:2px;padding-bottom:2px}

    /* Kategori/tråd-tabell mobil: kompaktare padding, metadatan får
     * visuell separation från titeln (svag färg, mindre text) */
    .forum-row-wrap{padding-left:16px;padding-right:12px;padding-top:14px;padding-bottom:14px}
    .forum-row-wrap .text-xs.hidden-sm-block-mobile{display:none}

    /* Modaler: drag-handle + större close-knapp på mobil.
     * Drag-handle är ren visuell signal (vi har ingen swipe-gest än)
     * men den hjälper användaren att snabbt identifiera "detta är en
     * mobil-modal" istället för att leta efter ✕ i hörnet.
     *
     * Generisk regel: alla .modal-bg-modaler får drag-handle på sin
     * inner-card (positioned `relative`). settingsModal har annan
     * struktur så den hanteras separat. */
    .modal-bg > div.relative::before,
    #settingsModal > div.relative::before{
        content:'';
        position:absolute;
        top:8px;left:50%;transform:translateX(-50%);
        width:40px;height:4px;
        border-radius:2px;
        background:rgba(0,0,0,0.15);
        pointer-events:none;
        z-index:1;
    }
    .dark .modal-bg > div.relative::before,
    .dark #settingsModal > div.relative::before{
        background:rgba(255,255,255,0.18);
    }

    /* Flytta ner innehållet i modaler så drag-handle inte överlappar
     * första elementet */
    .modal-bg > div.relative,
    #settingsModal > div.relative{
        padding-top:1.5rem;
    }

    /* Större close-ikon (SVG i .close-modal) på mobil */
    .close-modal svg{width:20px!important;height:20px!important}

    /* Inställningar-modal sticky section-nav på mobil.
     * Döljer scrollbaren så raden ser ren ut när tabs overflow:ar. */
    .scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}
    .scrollbar-hide::-webkit-scrollbar{display:none}
    .settings-mob-nav{backdrop-filter:blur(8px);background:rgba(255,255,255,0.92)}
    .dark .settings-mob-nav{background:rgba(31,27,51,0.92)}

    /* Quill-toolbar: mer spacing + större tap-targets på mobil.
     * Toolbaren horisontell-scrollar om knapparna inte ryms, vilket är
     * bättre än att klämma ihop dem. */
    #ae-quill-editor .ql-toolbar{padding:12px 10px;overflow-x:auto;white-space:nowrap}
    #ae-quill-editor .ql-toolbar .ql-formats{margin-right:12px}
    #ae-quill-editor .ql-toolbar button{width:36px!important;height:36px!important;padding:6px!important}
    #ae-quill-editor .ql-toolbar .ql-picker{height:36px}
    #ae-quill-editor .ql-toolbar .ql-picker-label{padding:6px 8px}

    /* ContentManagement-listor (Business Hub, Expert-portal, Skribent-portal):
     * Dropdown-menyn ska aldrig hamna utanför viewporten. På riktigt smala
     * skärmar (<375px) får dropdown ta upp tillgänglig bredd minus marginal. */
    .cm-item-dropdown{max-width:calc(100vw - 2rem)}

    /* Statusbadges (Publicerad/Utkast/Dold) i contentManagement: höj
     * läsbarhet på mobil. text-[11px] blir annars för liten. */
    .cm-item-dropdown,
    [class*="cm-item"] .text-\[11px\]{font-size:12px!important}

    /* Apply-modaler: disclaimer-text "Din ansökan granskas..." höjs från
     * text-[11px] till 12px för läsbarhet utan att förstöra layouten. */
    #applyExpertModal .text-\[11px\],
    #applyWriterModal .text-\[11px\]{font-size:12px}

    /* ──────────────────────────────────────────────────────────────
     * Session 1 utökning: läsbarhet + touch-targets globalt
     * ────────────────────────────────────────────────────────────── */

    /* Höj alla text-[11px] till 12px på mobil. Tailwinds Just-In-Time
     * genererar font-size:11px för alla 119 instanser i koden. På 375px-
     * skärm är 11px på gränsen till oläsbart, särskilt för disclaimers
     * och datum. 12px är fortfarande mindre än body-text men läsbart. */
    .text-\[11px\]{font-size:12px}

    /* Touch-targets för små ikon-knappar som INTE är .pill eller
     * .close-modal (de täcks redan ovan).
     *
     * Strategin: utöka klickytan via min-width/min-height utan att
     * förstora själva ikonen. SVG inuti behåller storlek via Tailwinds
     * w-3.5/w-4-klasser, men hela buttonen blir lättare att träffa. */
    button.cm-item-menu,
    button.bookmark-remove{
        min-width:40px;
        min-height:40px;
    }

    /* Avbryt-länken i bizhub edit-mode är en text-länk (inte ikon).
     * Den behöver inte 40×40px utan bara mer vertikal padding. */
    button#biz-cancel-edit{padding-top:8px;padding-bottom:8px;min-height:36px}

    /* Forum-inläggsknappar (Svara, Rapportera, Spara, Redigera): mer
     * vertikal padding för fingerträff utan att flytta runt layouten. */
    button.bookmark-post-btn,
    button.report-post-btn,
    button.edit-post-btn,
    button.delete-post-btn{min-height:40px;padding-top:8px;padding-bottom:8px}

    /* Bizhub-header på mobil: när "Visa publik sida" + "Partner"-badge
     * wrappas till egen rad ska de vänsterställas under rubriken
     * istället för att hoppa till höger om en tom yta. */
    #view-bizhub > div > div.flex-wrap{justify-content:flex-start}

    /* Partner publik profil: knapprad (Följ + Kontakta) får mer luft
     * och sträcker sig fullbredd på riktigt smala skärmar. */
    #partner-follow-btn,
    #partner-contact-btn{flex:1 1 auto;justify-content:center;min-height:44px}

    /* Expert-portalens 4-kolumns stats-grid är för trångt på 375px.
     * Bryt till 2 kolumner. */
    #expertPortalContent .grid.grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}

    /* Sparade inlägg-listan: kortare preview för att inte trängas */
    #minSidaContent .bookmark-jump p:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 6rem)}

    /* Login-länkar på footer + "Tillbaka"-knappar: bättre touch-area */
    button[id*="back-btn"],
    a[class*="text-sm"][href]{min-height:36px;display:inline-flex;align-items:center}

    /* ──────────────────────────────────────────────────────────────
     * Session 2: Forum + listor mobilanpassning
     * ────────────────────────────────────────────────────────────── */

    /* Forum-header: söket är redan w-full på mobil. Admin-knapparna
     * (rapport, papperskorg, edit, hoppa-till-datum) är `w-9 h-9 = 36px`
     * vilket är OK touch-storlek. Vi tvingar inte ändring där men
     * justerar layoutgapet så det inte trängs vid wrap. */
    #view-forum > div > div:first-child .flex-wrap{gap:6px}

    /* Ny tråd-knappen: lite kompaktare på mobil men behåller text+ikon */
    #view-forum #newThreadBtn{padding-left:12px;padding-right:12px}

    /* ContentManagement-rader: badge + titel kan trängas på 375px.
     * Stack:a badge ovanför titeln så raden ser ren ut på mobil. */
    [class*="cm-item"] > div.flex-1 > div.flex.items-center.gap-2{
        flex-direction:column;
        align-items:flex-start!important;
        gap:4px!important;
    }
    /* Och titeln själv får 14px text på mobil (var 13.6 från text-sm) */
    [class*="cm-item-view"],
    [class*="cm-item-edit-title"]{font-size:14px}
}


/* Feed highlight: när vi navigerar från profil → feed med scroll-to-post,
 * pulsera kortet med en mjuk lila kant så användaren ser var de hamnat. */
.feed-highlight {
    animation: feedHighlight 2s ease-out;
}
@keyframes feedHighlight {
    0%   { box-shadow: 0 0 0 0 rgba(163,157,247,0); }
    25%  { box-shadow: 0 0 0 6px rgba(163,157,247,0.45); }
    100% { box-shadow: 0 0 0 0 rgba(163,157,247,0); }
}


/* Tråd-sök: dölj inlägg som inte matchar, framhäv träffar med en mjuk
 * lavendel-bakgrund så användaren ser exakt var sökträffarna finns. */
.thread-search-hidden { display: none !important; }
.thread-search-hit {
    background-color: rgba(163, 157, 247, 0.08);
    border-radius: 12px;
    padding-left: 8px;
    padding-right: 8px;
    margin-left: -8px;
    margin-right: -8px;
    transition: background-color 0.2s ease;
}
.dark .thread-search-hit {
    background-color: rgba(163, 157, 247, 0.15);
}

/* ────────────────────────────────────────────────────────────────────
 * Annonsverktyg — edit-läge på sidan
 * ──────────────────────────────────────────────────────────────────── */

/* Tom annonsplats (placeholder med streckad ram) */
.ad-edit-empty {
    border: 2px dashed #A39DF7;
    border-radius: 16px;
    background: rgba(255, 119, 240, 0.04);
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.ad-edit-empty:hover,
.ad-edit-empty:focus-visible {
    border-color: #FF77F0;
    background: rgba(255, 119, 240, 0.08);
    outline: none;
}
.dark .ad-edit-empty {
    border-color: #6e64bd;
    background: rgba(255, 119, 240, 0.06);
}

/* Fylld plats i edit-läge: streckad ram runt + overlay vid hover */
.ad-edit-wrap {
    border: 2px dashed #A39DF7;
    border-radius: 18px;
    padding: 4px;
    transition: border-color .2s;
}
.ad-edit-wrap:hover {
    border-color: #FF77F0;
}
.dark .ad-edit-wrap {
    border-color: #6e64bd;
}
.ad-edit-overlay {
    position: absolute;
    inset: 4px;
    background: rgba(31, 27, 51, 0.75);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    backdrop-filter: blur(2px);
}
.ad-edit-wrap:hover .ad-edit-overlay {
    opacity: 1;
    pointer-events: auto;
}
.ad-edit-overlay-inner {
    text-align: center;
    padding: 16px;
}

/* ────────────────────────────────────────────────────────────────────
 * Annonsverktyg — lager-baserad layout (banner-variant)
 * ──────────────────────────────────────────────────────────────────── */
.ad-banner-layered { user-select: none; }
.ad-plate {
    position: absolute;
    left: 0;
    right: 0;
    /* top + height sätts inline från layouten */
    pointer-events: none;
}
.ad-text {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}
.ad-text .ad-cta-btn { pointer-events: auto; }
.ad-badge {
    position: absolute;
    z-index: 3;
}

/* Visuell editor — drag-handles i förhandsvisningen */
.ad-preview-stage {
    position: relative;
    aspect-ratio: 3 / 1;
    background: #f5f1ec;
    border-radius: 16px;
    overflow: hidden;
    user-select: none;
    border: 1px solid #ECEAFF;
}
.dark .ad-preview-stage {
    background: #2a2541;
    border-color: #3e3470;
}
.ad-preview-stage img.ad-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
/* "Visa hela bilden": bilden krymps in i formatet i stället för att fylla
   ytan. Regeln behöver vara starkare än den ovan, som sätter cover. */
.ad-preview-image.object-contain { object-fit: contain; }
/* Drag-handles for stage elements */
/* Textrutan sträcker sig till bildens kant så att texten inte kan växa
   utanför. Den streckade markeringen ska ändå bara ligga runt själva texten,
   inte runt hela den osynliga rutan — därför ritas den på innehållet. */
.ad-stage-text {
    display: flex;
    flex-direction: column;
    outline: none !important;
}
.ad-stage-text > * {
    outline: 2px dashed transparent;
    outline-offset: 4px;
    border-radius: 4px;
    transition: outline-color .15s;
    width: fit-content;
}
.ad-stage-text:hover > *,
.ad-stage-text.dragging > * {
    outline-color: rgba(255, 119, 240, 0.6);
}
.ad-stage-text[style*="text-align:right"] > * {
    margin-left: auto;
}

.ad-stage-element {
    position: absolute;
    cursor: grab;
    outline: 2px dashed transparent;
    outline-offset: 4px;
    border-radius: 4px;
    transition: outline-color .15s;
    touch-action: none; /* så pointer events får drag-data */
}
.ad-stage-element:hover {
    outline-color: rgba(255, 119, 240, 0.6);
}
.ad-stage-element.dragging {
    cursor: grabbing;
    outline-color: #FF77F0;
    z-index: 100;
}
.ad-stage-plate {
    left: 0;
    right: 0;
    /* top + height sätts inline */
    z-index: 1;
    cursor: ns-resize;
}
/* Resize-handles på plattans topp- och botten-kant */
.ad-stage-plate::before,
.ad-stage-plate::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    cursor: ns-resize;
    background: transparent;
}
.ad-stage-plate::before { top: -4px; }
.ad-stage-plate::after  { bottom: -4px; }
/* Visuell indikator vid hover så användaren ser var resize-kanterna är */
.ad-stage-plate:hover::before,
.ad-stage-plate:hover::after {
    background: rgba(255, 119, 240, 0.4);
}
.ad-stage-text {
    z-index: 2;
    /* Bredden styrs av left och right inline, så att rutan slutar vid
       bildens kant i stället för att växa utanför. */
}
.ad-stage-badge {
    z-index: 3;
}

/* Trådkort i flödet: visa inläggets formatering men håll höjden nere.
   Bilder krymps till en miniatyr så man ser vad de föreställer utan att
   kortet växer. */
.feed-thread-excerpt img{max-height:5rem;width:auto;border-radius:8px;margin:4px 0}
.feed-thread-excerpt p{margin:0}

/* Utdrag i trådlistan: max två rader. Egen regel så att den inte beror på
   vilken Tailwind-version CDN:en levererar. */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bildrad i inlägg: en rad som man skrollar eller sveper i stället för att
   bilderna radbryts. På mobil blir det ett svep, på dator hjulet eller
   Shift+skroll. Bilderna behåller sin storlek. */
.nl-bildrad {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0.5rem 0;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 110, 160, 0.35) transparent;
}
.nl-bildrad > img {
    flex: 0 0 auto;
    scroll-snap-align: start;
}
.nl-bildrad::-webkit-scrollbar { height: 6px; }
.nl-bildrad::-webkit-scrollbar-thumb {
    background: rgba(120, 110, 160, 0.35);
    border-radius: 999px;
}
.nl-bildrad::-webkit-scrollbar-track { background: transparent; }

/* Utfällbara rutor (details/summary) använder egen pil — dölj webbläsarens. */
details > summary::-webkit-details-marker { display: none; }
details > summary { list-style: none; }

/* Långa ord och inklistrade rader utan mellanslag får brytas, annars
   spränger de inläggets bredd och hela sidan blir sidledsskrollbar. */
.whitespace-pre-line,
.fp-body,
.cm-body,
.article-body {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Annonsens textlager skalas med bredden.
   Förhandsvisningen och flödet har samma proportioner men olika bredd. Med
   fasta teckenstorlekar tog texten en större del av en smal ruta och hamnade
   utanför bilden. Storleksenheten cqw är en procent av scenens bredd, så
   texten krymper i takt med rutan och resultatet blir likadant överallt. */
.ad-stage,
.ad-preview-stage {
    container-type: inline-size;
}
.ad-stage .ad-text p,
.ad-preview-stage .ad-text p,
.ad-preview-stage .ad-stage-text p {
    /* Storleken mäts i procent av annonsens bredd, utan tak. Med ett tak blev
       texten olika stor i förhandsvisningen och i flödet, eftersom rutorna är
       olika breda. */
    font-size: 3.4cqw;
    line-height: 1.2;
}
/* Knappen följer textens sida: högerställd text ger knapp till höger. */
.ad-stage .ad-text[style*="text-align:right"] .ad-cta-btn,
.ad-preview-stage .ad-text[style*="text-align:right"] .ad-cta-btn,
.ad-stage-text[style*="text-align:right"] .ad-cta-btn { margin-left: auto; }
.ad-stage .ad-text .ad-cta-btn,
.ad-preview-stage .ad-text .ad-cta-btn,
.ad-preview-stage .ad-stage-text .ad-cta-btn {
    font-size: 2.2cqw;
    padding: 0.4em 0.9em;
}
.ad-stage .ad-badge,
.ad-preview-stage .ad-badge,
.ad-preview-stage .ad-stage-badge {
    font-size: 1.9cqw;
}
/* Texten är lika bred som sitt innehåll och placeras fritt på annonsen.
   Dragningen hindrar den från att hamna utanför kanten. */
.ad-stage .ad-text,
.ad-preview-stage .ad-text,
.ad-stage-text {
    width: max-content;
    max-width: 96%;
}

/* Bilder i inlägg visas stora, som i flöden man känner igen. Tidigare var de
   miniatyrer på 200 × 150, vilket gjorde att det mesta av motivet försvann.
   Bildens egna proportioner behålls; höjden begränsas så att ett inlägg inte
   tar över hela skärmen. */
.forum-img {
    width: 100%;
    max-width: 520px;
    max-height: 420px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.03);
}
.dark .forum-img { background: rgba(255, 255, 255, 0.04); }

/* Flera bilder ligger kvar i en svepbar rad, men varje bild får nu en bredd
   som gör motivet läsbart. */
.nl-bildrad > .forum-img {
    width: auto;
    max-width: 78%;
    height: 320px;
    object-fit: cover;
}
@media (max-width: 640px) {
    .forum-img { max-height: 320px; }
    .nl-bildrad > .forum-img { height: 220px; max-width: 86%; }
}

/* "Visa hela bilden": bannern blir lika hög som bilden, utan färgade kanter
   vid sidorna. Lagren ligger kvar ovanpå och fungerar som vanligt.
   Regeln måste vara starkare än .ad-preview-stage img.ad-preview-image. */
.ad-preview-stage img.ad-preview-image.hel-bild {
    height: auto;
    object-fit: contain;
}

/* Annonstext över flera rader: Enter i formuläret ger ny rad, och långa
   rubriker radbryts i stället för att klippas. */
.ad-text-rader {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Typsnitt och storlek väljs per banner, med samma typsnitt som resten av
   plattformen. Storleken mäts i procent av annonsens bredd, så den ser
   likadan ut i förhandsvisningen som i flödet. */
.ad-font-serif p.ad-text-rader { font-family: 'Newsreader', Georgia, serif !important; }
.ad-font-sans  p.ad-text-rader { font-family: 'Outfit', system-ui, sans-serif !important; }

/* Storleken måste slå den allmänna regeln för annonstext, därför p:et med. */
.ad-stage .ad-size-s p.ad-text-rader,
.ad-preview-stage .ad-size-s p.ad-text-rader { font-size: 2.4cqw; }
.ad-stage .ad-size-m p.ad-text-rader,
.ad-preview-stage .ad-size-m p.ad-text-rader { font-size: 3.4cqw; }
.ad-stage .ad-size-l p.ad-text-rader,
.ad-preview-stage .ad-size-l p.ad-text-rader { font-size: 5cqw; }

/* Radernas läge i textrutan: rader centreras mot varandra i stället för att
   justeras med mellanslag. */
.ad-align-left   p.ad-text-rader { text-align: left; }
.ad-align-center p.ad-text-rader { text-align: center; }
.ad-align-right  p.ad-text-rader { text-align: right; }
.ad-align-center .ad-cta-btn { margin-left: auto; margin-right: auto; display: block; }
.ad-align-right  .ad-cta-btn { margin-left: auto; display: block; }

/* Textrutans bakgrund ligger bakom texten med egen genomskinlighet, så att
   texten förblir läsbar mot en orolig bild. Ersätter de gamla textplattorna. */
.ad-text-bak { position: relative; }
/* Bakgrunden ligger direkt på rutan; genomskinlighet togs bort eftersom den
   sällan behövdes och gjorde texten svårläst. */

/* Bilden som lager ovanpå en färgad bakgrund, till exempel en logotyp. */
.ad-stage-bild {
    position: absolute;
    object-fit: contain;
    z-index: 1;
}

/* Banner med färgad bakgrund: höjden följer innehållet, med luft runt om.
   Textrutorna ligger kvar som lager, så de kan placeras ovanpå. */
.ad-stage-auto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
}
/* Luften styrs per banner: en smal remsa behöver lite, en hero mycket.
   Måtten är satta efter plattformens befintliga banners, som var betydligt
   luftigare än mina första värden. */
.ad-luft-s { padding: 1.1rem 1.25rem; min-height: 0; }
.ad-luft-m { padding: 2rem 1.25rem; }
.ad-luft-l { padding: 3rem 1.25rem; }
.ad-luft-xl { padding: 4.5rem 1.25rem; }
@media (min-width: 640px) {
    .ad-luft-s { padding: 1.35rem 1.75rem; }
    .ad-luft-m { padding: 2.5rem 2rem; }
    .ad-luft-l { padding: 4rem 2rem; }
    .ad-luft-xl { padding: 7rem 2rem; }
}

/* Knappen är lika bred som sin text. Utan detta blev den ett avlångt fält
   tvärs över hela bannern, eftersom textrutan är en kolumn i full bredd. */
.ad-stage-auto .ad-cta-btn,
.ad-preview-stage .ad-cta-btn {
    display: inline-flex;
    align-items: center;
    width: auto;
    align-self: flex-start;
}
.ad-align-center .ad-cta-btn,
.ad-knapp-under .ad-cta-btn { align-self: center; }
.ad-align-right .ad-cta-btn { align-self: flex-end; }

/* Utan fast höjd finns inget att placera mot i sidled i procent. Textrutans
   eget läge avgör i stället: vänster, centrerad eller höger. */
.ad-stage-auto .ad-text {
    position: static;
    max-width: 100% !important;
    width: 100%;
}
.ad-stage-auto .ad-align-center { text-align: center; }
.ad-stage-auto .ad-align-center > * { margin-left: auto; margin-right: auto; }
.ad-stage-auto .ad-align-right { text-align: right; }
.ad-stage-auto .ad-align-right > * { margin-left: auto; }

/* Bilden i ett sponsrat inlägg visas i sitt eget format, men inom gränser:
   högst 4:5 (stående) och högst 1,91:1 (liggande). Utanför det beskärs den. */
.sponsrat-bild {
    height: auto;
    max-height: 520px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}
.sponsrat-bild.beskuren {
    height: 100%;
    max-height: none;
    object-fit: cover;
}

/* Större textstorlekar, så att en banner kan ersätta hero där rubriken är
   satt i 3,5 rem. Storlekarna mäts i procent av bredden, utom i banners med
   automatisk höjd där de följer skärmen som vanlig rubriktext. */
.ad-stage .ad-size-xl p.ad-text-rader,
.ad-preview-stage .ad-size-xl p.ad-text-rader { font-size: 7cqw; }
.ad-stage .ad-size-hero p.ad-text-rader,
.ad-preview-stage .ad-size-hero p.ad-text-rader { font-size: 9cqw; }

.ad-stage-auto .ad-size-s p.ad-text-rader    { font-size: 1rem; }
.ad-stage-auto .ad-size-m p.ad-text-rader    { font-size: 1.25rem; }
.ad-stage-auto .ad-size-l p.ad-text-rader    { font-size: 1.75rem; }
.ad-stage-auto .ad-size-xl p.ad-text-rader   { font-size: 2.25rem; }
.ad-stage-auto .ad-size-hero p.ad-text-rader { font-size: 2.5rem; line-height: 1.1; }
@media (min-width: 640px) {
    .ad-stage-auto .ad-size-xl p.ad-text-rader   { font-size: 3rem; }
    .ad-stage-auto .ad-size-hero p.ad-text-rader { font-size: 3.5rem; }
}

/* Banner med färgad bakgrund har en tunn kantlinje, som plattformens egna
   rutor alltid haft. */
.ad-stage-auto {
    border: 1px solid rgba(236, 234, 255, 0.9);
    border-radius: 16px;
}
.dark .ad-stage-auto { border-color: rgba(50, 45, 77, 0.9); }

/* Hero går kant till kant: inga rundade hörn, ingen ram i sidled. */
.ad-helbredd .ad-card { border-radius: 0; border-left: 0; border-right: 0; }
.ad-helbredd .ad-stage-auto { border-radius: 0; border-left: 0; border-right: 0; }

/* Helbredd på typnivå: hero går kant till kant oavsett var den ligger. */
.ad-helbredd { border-radius: 0; border-left: 0; border-right: 0; }

/* Undertext: samma storlek och gråton som i plattformens egna banners. */
.ad-stage .ad-size-xs p.ad-text-rader,
.ad-preview-stage .ad-size-xs p.ad-text-rader { font-size: 2cqw; }
.ad-stage-auto .ad-size-xs p.ad-text-rader { font-size: 0.875rem; font-weight: 500; }

/* Flera textrutor i en banner med automatisk höjd ligger tätt ihop, som
   rubrik och underrubrik — inte som två fristående block. */
.ad-stage-auto { gap: 0.15rem; }
.ad-stage-auto .ad-text p { margin: 0; }


/* ════════════════════════════════════════════════════════════════════
 * Bannertyper — mått tagna från plattformens inbyggda banners
 *
 * Gäller banners med färgad bakgrund, där höjden följer innehållet.
 * Varje typ har samma luft, textstorlek, radavstånd och knapp som den
 * inbyggda ruta den ska ersätta. Originalet står angivet vid varje typ.
 * ════════════════════════════════════════════════════════════════════ */

/* Texterna i en kolumn, knappen i en egen ruta. */
.ad-stage-auto { gap: 0; }
.ad-stage-auto .ad-kolumn {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}
.ad-stage-auto .ad-knappar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-top: 1rem;
}
/* Knappen har fasta mått, som plattformens övriga knappar. Tidigare följde
   den bannerns bredd och blev jättelik i en hero och pytteliten i mobilen. */
.ad-stage-auto .ad-cta-btn {
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 1.25rem;
    margin: 0;
}

/* Textstorlekar med plattformens egna radavstånd. */
.ad-stage-auto .ad-size-xs p.ad-text-rader   { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.ad-stage-auto .ad-size-s p.ad-text-rader    { font-size: 0.875rem; line-height: 1.25rem; }
.ad-stage-auto .ad-size-m p.ad-text-rader    { font-size: 1.125rem; line-height: 1.75rem; }
.ad-stage-auto .ad-size-l p.ad-text-rader    { font-size: 1.5rem;   line-height: 2rem; }
.ad-stage-auto .ad-size-xl p.ad-text-rader   { font-size: 2.25rem;  line-height: 1.1; }
.ad-stage-auto .ad-size-hero p.ad-text-rader { font-size: 1.875rem; line-height: 1.05; }
/* Från 640 px är originalets radavstånd 1, inte 1,05: text-5xl sätter sitt
   eget radavstånd och går före leading-[1.05]. */
@media (min-width: 640px) {
    .ad-stage-auto .ad-size-xl p.ad-text-rader   { font-size: 3rem; }
    .ad-stage-auto .ad-size-hero p.ad-text-rader { font-size: 3rem; line-height: 1; }
}
@media (min-width: 1024px) {
    .ad-stage-auto .ad-size-hero p.ad-text-rader { font-size: 3.5rem; }
}

/* 1. Hero — original: #heroBanner (py-16 / 24 / 28, text i max-w-3xl). */
.ad-stage-auto.ad-typ-hero-full {
    padding: 4rem 1.25rem;
    align-items: center;
    border: 0;
}
/* Rubriken har 20 px luft under sig även när den står ensam, som i
   originalet (mb-5 på h1). Med tre rader rubrik blir höjden 412 px. */
.ad-typ-hero-full .ad-kolumn { max-width: 45.5rem; }
.ad-typ-hero-full .ad-kolumn > .ad-text:first-child { margin-bottom: 1.25rem; }
.ad-typ-hero-full p.ad-text-rader { text-wrap: balance; }
.ad-typ-hero-full .ad-knappar,
.ad-typ-hero-compact .ad-knappar { justify-content: center; margin-top: 1.25rem; }
@media (min-width: 640px)  { .ad-stage-auto.ad-typ-hero-full { padding: 6rem 1.25rem; } }
@media (min-width: 1024px) { .ad-stage-auto.ad-typ-hero-full { padding: 7rem 1.25rem; } }

/* 2. Subhero — original: #heroLoggedIn (py-8, text i max-w-2xl). Originalet
   har 20 px extra under texten, från en tom annonsruta med space-y-5, så
   luften är större nedtill. Total höjd med rubrik och undertext: 145 px. */
.ad-stage-auto.ad-typ-hero-compact {
    padding: 2rem 1.25rem 3.25rem;
    align-items: center;
    border-top: 0;
}
.ad-typ-hero-compact .ad-kolumn { max-width: 39.5rem; gap: 0.25rem; }
@media (min-width: 640px) {
    .ad-stage-auto.ad-typ-hero-compact .ad-size-l p.ad-text-rader { font-size: 1.875rem; line-height: 2.25rem; }
}

/* 3. Promokort — original: "Vill du skriva för NurseLink?" i forumet (p-6). */
.ad-stage-auto.ad-typ-card {
    padding: 1.5rem;
    align-items: center;
    gap: 1rem;
}
.ad-typ-card .ad-kolumn { gap: 0.25rem; }

/* 4. Meddelanderad — original: "Vill du linka…" överst i forumet (px-5 py-4). */
.ad-stage-auto.ad-typ-strip {
    padding: 1rem 1.25rem;
    align-items: center;
    gap: 0.75rem;
}
.ad-typ-strip .ad-cta-btn,
.ad-typ-notice .ad-cta-btn { padding: 0.5rem 1rem; }

/* 5. Flödeskort — original: "Bjud in en kollega" i flödet (p-3 / p-5). */
.ad-stage-auto.ad-typ-notice {
    padding: 0.75rem;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}
.ad-stage-auto.ad-typ-notice .ad-kolumn { flex: 1 1 0; width: auto; }
.ad-stage-auto.ad-typ-notice .ad-size-xs p.ad-text-rader { font-size: 0.75rem; line-height: 1rem; }
@media (min-width: 640px) { .ad-stage-auto.ad-typ-notice { padding: 1.25rem; } }

/* Kort, rad och flödeskort har knappen i egen ruta utan luft ovanför. */
.ad-typ-card .ad-knappar,
.ad-typ-strip .ad-knappar,
.ad-typ-notice .ad-knappar { margin-top: 0; }

/* Kort och rad: staplade och centrerade i mobilen, på en rad från 640 px —
   precis som originalen (flex-col sm:flex-row). */
@media (max-width: 639px) {
    .ad-stage-auto.ad-typ-card p.ad-text-rader,
    .ad-stage-auto.ad-typ-strip p.ad-text-rader { text-align: center; }
}
@media (min-width: 640px) {
    .ad-stage-auto.ad-typ-card,
    .ad-stage-auto.ad-typ-strip { flex-direction: row; justify-content: space-between; }
    .ad-stage-auto.ad-typ-card .ad-kolumn,
    .ad-stage-auto.ad-typ-strip .ad-kolumn { flex: 1 1 0; width: auto; }
}

/* 6. Avslutspanel — original: "Vill du dela din kunskap?" under artiklarna (p-8). */
.ad-stage-auto.ad-typ-panel {
    padding: 2rem;
    align-items: center;
    text-align: center;
}
.ad-typ-panel .ad-kolumn { gap: 0.5rem; }
.ad-stage-auto.ad-typ-panel .ad-size-xs p.ad-text-rader,
.ad-stage-auto.ad-typ-panel .ad-size-s p.ad-text-rader { max-width: 36rem; margin-left: auto; margin-right: auto; }
.ad-typ-panel .ad-knappar { justify-content: center; margin-top: 1.5rem; }

/* 7. Bildannons utan bild faller tillbaka på kortets luft. */
.ad-stage-auto.ad-typ-image { padding: 1.5rem; }

/* Egen luft, vald i verktyget, går före typens. */
.ad-stage-auto[class].ad-luft-s  { padding: 1.1rem 1.25rem; }
.ad-stage-auto[class].ad-luft-m  { padding: 2rem 1.25rem; }
.ad-stage-auto[class].ad-luft-l  { padding: 3rem 1.25rem; }
.ad-stage-auto[class].ad-luft-xl { padding: 4.5rem 1.25rem; }
@media (min-width: 640px) {
    .ad-stage-auto[class].ad-luft-s  { padding: 1.35rem 1.75rem; }
    .ad-stage-auto[class].ad-luft-m  { padding: 2.5rem 2rem; }
    .ad-stage-auto[class].ad-luft-l  { padding: 4rem 2rem; }
    .ad-stage-auto[class].ad-luft-xl { padding: 7rem 2rem; }
}

/* Förhandsvisningen av en banner med färgad bakgrund ritas som den färdiga
   bannern. Bildlagret går fortfarande att dra. */
.ad-preview-stage.ad-stage-auto .ad-text { cursor: default; }

/* Helbredd: hero och subhero når sidans kanter även när de ligger inne i en
   smalare kolumn, som längst ner i forumet och under artiklarna. Bredden
   kommer från --nl-sidbredd, som sätts i ads.js. */
.ad-card.ad-helbredd {
    width: var(--nl-sidbredd, 100vw);
    max-width: none;
    margin-left: calc(50% - var(--nl-sidbredd, 100vw) / 2);
    border-radius: 0;
}

/* En banner i helbredd längst ner på en sida ligger dikt an mot sidfoten.
   Sidans egen luft nedtill (py-10) tas ut med en lika stor negativ marginal.
   Kort och paneler behåller luften. */
.nl-bottenplats:has(.ad-helbredd) { margin-bottom: -2.5rem; }

/* Emoji till vänster om texten, i originalens storlek: 1,5 rem i rad och
   flödeskort, 2,25 rem i promokortet. Texten och emojin hör ihop i
   .ad-huvud; i de flesta typer ligger de direkt i bannerns rad. */
.ad-stage-auto .ad-huvud { display: contents; }
.ad-stage-auto .ad-ikon {
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 2rem;
}
.ad-stage-auto.ad-typ-card .ad-ikon { font-size: 2.25rem; line-height: 2.5rem; }
.ad-stage-auto .ad-ikon { display: inline-flex; align-items: center; }
.ad-stage-auto .ad-ikon-svg { width: 1.6em; height: 1.6em; }
.ad-stage-auto.ad-typ-card .ad-ikon-svg { width: 1.1em; height: 1.1em; }
/* Meddelanderaden håller ihop emoji och text även i mobilen, där knappen
   hamnar under. */
.ad-stage-auto.ad-typ-strip .ad-huvud {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.ad-stage-auto.ad-typ-strip .ad-huvud .ad-kolumn { width: auto; flex: 1 1 auto; }
@media (min-width: 640px) {
    .ad-stage-auto.ad-typ-strip .ad-huvud { flex: 1 1 0; }
}
/* I förhandsvisningen går knapparna inte att klicka på. */
.ad-preview-stage .ad-knappar { pointer-events: none; }

/* Lapp som bara admin ser, på banners riktade till utloggade eller inloggade. */
.ad-publik {
    position: absolute;
    top: 6px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(30, 27, 46, 0.72);
    color: #fff;
    font-size: 11px;
    line-height: 1.5;
    pointer-events: none;
}

/* Mörkt läge för banners. Bakgrund och text byter till sina mörka
   motsvarigheter, som ads.js skickar med som --bm och --fm. */
.dark .ad-stage[style*="--bm"],
.dark .ad-preview-stage[style*="--bm"] { background: var(--bm) !important; }
.dark .ad-text[style*="--fm"],
.dark .ad-stage-text[style*="--fm"],
.dark .ad-text-rader span[style*="--fm"] { color: var(--fm) !important; }
.dark .ad-stage-auto { border-color: rgba(163, 157, 247, 0.25); }

/* Kantlinjen går att välja: lavendel (standard), rosa eller ingen. "Ingen"
   gör linjen genomskinlig i stället för att ta bort den, så att höjden är
   exakt densamma. */
.ad-stage-auto.ad-kant-rosa { border-color: rgba(255, 119, 240, 0.3); }
.dark .ad-stage-auto.ad-kant-rosa { border-color: rgba(255, 119, 240, 0.3); }
.ad-stage-auto.ad-kant-ingen,
.dark .ad-stage-auto.ad-kant-ingen { border-color: transparent; }

/* Forumets sidokolumn. Från 1100 px skärmbredd delar forumet plats med en
   kolumn på 240 px till höger, om det finns en annons att visa. Forumets
   innehåll blir då 720 px brett i stället för 984. Under 1100 px, på
   surfplatta och i mobilen, visas kolumnen inte och forumet har hela bredden. */
.forum-sidokolumn { display: none; }
@media (min-width: 1100px) {
    .forum-med-sidokolumn:has(.forum-sidokolumn:not(.tom)) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 240px;
        /* Toppbannerns rad tar bara sin egen höjd. Utan detta delades
           sidokolumnens höjd ut på båda raderna när tråden var kortare än
           kolumnen, och första inlägget hamnade en bit ner. */
        grid-template-rows: auto 1fr;
        column-gap: 1.5rem;
        align-items: start;
    }
    /* Toppbannern och innehållet ligger i vänstra spalten, kolumnen till
       höger längs hela höjden. */
    .forum-med-sidokolumn:has(.forum-sidokolumn:not(.tom)) > #forumTopBanner,
    .forum-med-sidokolumn:has(.forum-sidokolumn:not(.tom)) > #forumContent { grid-column: 1; }
    .forum-sidokolumn:not(.tom) {
        display: block;
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: stretch;
    }
    /* Annonserna följer med när man rullar, under toppmenyn. Två annonser
       ligger under varandra. */
    .forum-sidokolumn-inre {
        position: sticky;
        top: 5.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}

/* Forumet har alltid samma bredd på innehållet, 720 px, med eller utan
   annons i sidokolumnen. Utan annons smalnar hela forumets ruta av och
   ligger mitt på sidan, så att rubriken och innehållet linjerar. Med annons
   (från 1100 px) är rutan bredare och kolumnen ligger till höger. */
#view-forum div:has(> .forum-med-sidokolumn) { max-width: 47.5rem; }
@media (min-width: 1100px) {
    #view-forum div:has(> .forum-med-sidokolumn > .forum-sidokolumn:not(.tom)) { max-width: 64rem; }
}

/* Flödesinläggets nya form (okt 2026). Texten visar tre rader tills man
   trycker på "mer". Knappraden under inlägget har tre lika breda knappar. */
.fp-klipp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.fp-knapp {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6B6885;
    transition: background 0.15s, color 0.15s;
}
.fp-knapp:hover { background: rgba(236, 234, 255, 0.6); color: #7873BC; }
.dark .fp-knapp { color: #b0aad6; }
.dark .fp-knapp:hover { background: rgba(90, 79, 143, 0.4); color: #A39DF7; }

/* Tipset om tangentbordets emojiväljare gäller bara dator. Det visas där
   det finns mus eller styrplatta, inte på telefoner och surfplattor. */
.nl-datortips { display: none; }
@media (hover: hover) and (pointer: fine) {
    .nl-datortips { display: block; }
}

/* Windowstangenten som liten symbol i tipset om emojis. */
.nl-wintangent {
    display: inline-block;
    width: 0.95em;
    height: 0.95em;
    vertical-align: -0.12em;
}

/* Utskrift av statistik. När en ruta skrivs ut döljs resten av sidan, och
   rutan läggs som en vanlig sida utan skugga och bakgrund. */
@media print {
    body.nl-skriver-ut > *:not(.nl-utskrift) { display: none !important; }
    body.nl-skriver-ut .nl-utskrift {
        position: static !important;
        display: block !important;
        overflow: visible !important;
        padding: 0 !important;
    }
    body.nl-skriver-ut .nl-utskrift-dolj { display: none !important; }
    body.nl-skriver-ut .nl-utskrift [role="dialog"] {
        max-width: none !important;
        border: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        background: #fff !important;
        color: #1e1b2e !important;
    }
    body.nl-skriver-ut { background: #fff !important; }
}

/* Utskrift av en del av sidan (skrivUtDel i ui.js). På skärmen syns kopian
   aldrig; på papper är den det enda som syns, i svart på vitt. */
.nl-utskrift-sida { display: none; }
@media print {
    body.nl-skriver-ut .nl-utskrift-sida { display: block !important; }
    body.nl-skriver-ut .nl-utskrift-sida,
    body.nl-skriver-ut .nl-utskrift-sida * {
        color: #1e1b2e !important;
        background: transparent !important;
        border-color: #d9d6ea !important;
        box-shadow: none !important;
    }
    body.nl-skriver-ut .nl-utskrift-sida .hidden { display: none !important; }
    .nl-utskrift-huvud {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        font-size: 12px;
        padding-bottom: 8px;
        margin-bottom: 16px;
        border-bottom: 1px solid #d9d6ea;
    }
    .nl-utskrift-sida table { page-break-inside: auto; }
    .nl-utskrift-sida tr, .nl-utskrift-sida img { page-break-inside: avoid; }
    @page { margin: 16mm; }
}

/* Banner med egen mobilbild: på smala skärmar får mobilbilden bestämma
   höjden, i stället för bannerns format (t.ex. 3:1). */
@media (max-width: 640px) {
    .ad-stage.ad-har-mobilbild { aspect-ratio: auto !important; height: auto !important; }
    .ad-stage.ad-har-mobilbild > picture { height: auto !important; }
    .ad-stage.ad-har-mobilbild > picture img { display: block; height: auto !important; object-fit: contain; }
}

/* Annons inne i en forumtråd */
.trad-annons { margin: 1rem 0; }

/* Inne i en forumtråd är en banner alltid 3:1 och högst 720 px bred, alltså
   högst 240 px hög (ungefär två inlägg). Bredden begränsas i stället för
   höjden, så att proportionerna och därmed utsnittet alltid är desamma som
   i förhandsvisningen. */
.trad-annons { max-width: 720px; margin-left: auto; margin-right: auto; }
.trad-annons .ad-stage {
    aspect-ratio: 3 / 1 !important;
    height: auto !important;
}
.trad-annons .ad-stage > img,
.trad-annons .ad-stage > picture,
.trad-annons .ad-stage > picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.trad-annons .ad-stage-auto { aspect-ratio: auto !important; }
@media (max-width: 640px) {
    /* Mobilbilden är beskuren till 1080 × 600 (1,8:1). */
    .trad-annons .ad-stage.ad-har-mobilbild { aspect-ratio: 1.8 / 1 !important; }
    .trad-annons .ad-stage.ad-har-mobilbild > picture,
    .trad-annons .ad-stage.ad-har-mobilbild > picture img { height: 100% !important; }
}

/* Bilder i foruminlägg (okt 2026). En bild visas i sina egna proportioner
   utan grå kanter, men tar aldrig mer än 360 px på höjden (300 px på mobil).
   Flera bilder blir ett rutnät som i flödet, högst 520 px brett. */
.forum-ensam-bild {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 520px);
    max-height: 360px;
}
.forum-bildgrupp { max-width: 520px; }
@media (max-width: 640px) {
    .forum-ensam-bild { max-height: 300px; }
}

/* Logotypen som SVG. Höjden följer textstorleken där den står, så den blir
   lika stor som när den var text. */
.nl-logga {
    display: inline-block;
    height: 0.746em;
    width: auto;
    vertical-align: -0.014em;
}

/* Ikoner (js/ikoner.js). nl-ikon-text gör ikonen lika hög som texten den
   står i och lägger den på textens linje, som en emoji gjorde. */
.nl-ikon { flex-shrink: 0; }
.nl-ikon-text {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.22em;
}