/* Radarvyns nya utformning — steg 1: noder som DOM.
   Se docs/plan-radarvy-redesign.md. Laddas alltid; verkar först med ?ny=1, eftersom
   inga .radar-nod-element finns i DOM utan flaggan. */

:root {
    --radar-nod-text: #16202c;
    --radar-nod-text-sekundar: #66758a;
    --radar-nod-hover-bg: rgba(255, 255, 255, 0.92);
    --radar-nod-vald: #16202c;

    /* Steg 6. Egna variabler i stället för att skriva om --font-heading/--font-body i
       tokens.css: de gäller hela appen, och bytet är beslutat bara för den här vyn.
       Fallbacken är Plus Jakarta Sans så sidan ser oförändrad ut om Google Fonts
       blockeras — inte ett systemtypsnitt som skulle hoppa i vikt och bredd. */
    --rny-rubrik: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rny-brod:   'IBM Plex Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Steg 6: typografi ──────────────────────────────────────────────────────────────
   Avgränsat till radarytan och sidopanelen. Filterraden och sidhuvudet ligger utanför
   .nya-radarvyn och rörs inte — annars skulle bytet spilla över på Kanban, Samband,
   Framtid och Veckans hetaste, som delar den raden. */

.nya-radarvyn,
.radar-panel {
    font-family: var(--rny-brod);
}

.rp-titel,
.rp-lagesbild-rubrik,
.radar-panel h1,
.radar-panel h2,
.radar-panel h3 {
    font-family: var(--rny-rubrik);
    letter-spacing: -0.01em;
}

/* Nodtitlarna är vyns mest lästa text. IBM Plex Sans 500 sitter bredare än Plus Jakarta
   Sans i samma storlek, så raden blir 3–4 tecken kortare vid samma bredd — etikettFor
   och findFreePosition mäter samma sträng via ctx.font, så reserverad bredd följer med. */
.radar-nod-titel {
    font-family: var(--rny-brod);
    font-weight: 500;
}

.radar-nodlager {
    position: absolute;
    inset: 0;
    pointer-events: none;   /* bara knapparna fångar klick */
    z-index: 3;
}

/* Knappen positioneras med sin PUNKT i (left, top).
   OBS: transform sätts inline av _renderaNodlager i js/radar-ny.js, som skjuter knappen
   så att punktens CENTRUM hamnar på (left, top) — dit canvas ritar sambandslinjerna.
   Offseten beror av punktdiametern, som varierar med prioritet, och kan därför inte
   stå här. Värdet nedan är bara en fallback om inline-stilen skulle utebli; ändras
   padding här måste NOD_PADDING_* i radar-ny.js ändras med. */
.radar-nod {
    position: absolute;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 7px 3px 4px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    font: inherit;
    text-align: left;
    max-width: 260px;
    transition: background-color .12s ease, box-shadow .12s ease;
}

/* Vänstra halvan: texten pekar utåt från centrum, alltså till vänster om punkten. */
.radar-nod--vanster {
    transform: translate(-100%, -50%);
    flex-direction: row-reverse;
    padding: 3px 4px 3px 7px;
    text-align: right;
}

.radar-nod:hover,
.radar-nod:focus-visible {
    background: var(--radar-nod-hover-bg);
    box-shadow: 0 2px 10px rgba(20, 32, 50, .13);
    outline: none;
    z-index: 4;
}
.radar-nod:focus-visible { box-shadow: 0 0 0 2px #1f5fd1, 0 2px 10px rgba(20,32,50,.13); }

.radar-nod-punkt {
    flex: 0 0 auto;
    border-radius: 50%;
    display: block;
}

/* Nytt initiativ markeras med en vit ring, ritad i box-shadow-stapeln i
   radar-ny.js tillsammans med vald och bokmärkt — se _renderaNodlager.
   Den pulserande varianten (2026-09-24) togs bort samma dag: rörelsen slogs av
   av prefers-reduced-motion och tillförde inget för den som hade den på. */

.radar-nod-titel {
    font-size: 12.5px;
    line-height: 1.25;
    font-weight: 500;
    color: var(--radar-nod-text);
    /* Ingen trunkering: långa titlar bryts på två rader enligt instruktionen. */
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.radar-nod.ar-vald .radar-nod-titel { font-weight: 700; }

@media (max-width: 768px) {
    .radar-nod { max-width: 170px; }
    .radar-nod-titel { font-size: 11.5px; }
}

/* ── Steg 3: sidopanelen ────────────────────────────────────────────────────────────
   Alltid synlig, aldrig infälld: radarn får inte hoppa i bredd när man väljer och
   avmarkerar. Krysset återgår till vilotillståndet, det stänger inte panelen. */

.har-radarpanel { align-items: stretch; }

/* Panelen får radarns höjd — annars får radarn panelens.

   Raden är flex utan egen höjd, så den blir lika hög som sitt högsta barn. Panelen
   hade ingen höjd alls: min-height:0 tillåter den att krympa men hindrar den inte
   från att växa, och .rp-innehall (overflow-y:auto) kan inte scrolla mot en obestämd
   höjd. Ett initiativ med många källor gjorde därför raden dubbelt så hög som
   radarbilden.
   
   Konsekvensen syntes på sidoreglagen. Behållaren har en bestämd höjd och stannar
   överst i den för höga raden, medan reglagen — som saknar höjd — sträcks över hela
   raden och centrerar sitt innehåll mot RADENS mitt. De hamnade därmed långt under
   cirkelns mitt, och glappet växte med panelinnehållet.
   
   --radar-viewport-h är samma variabel som .radar-container använder, och sätts av
   både app.html och share.html. Panelen blir därmed exakt lika hög som radarytan. */
.radar-panel { height: var(--radar-viewport-h, 1500px); }

.radar-panel {
    flex: 0 0 400px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-left: 1px solid #e1e6ed;
    padding: 16px 18px 0;
    font-family: inherit;
    color: #243244;
    min-height: 0;   /* utan detta växer panelen i stället för att scrolla innehållet */
}

.rp-topp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rp-kategori { color: #fff; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.rp-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #66758a; }
.rp-hett { font-size: 11px; font-weight: 600; color: #d8563e; }
.rp-ikoner { margin-left: auto; display: flex; gap: 2px; }
.rp-ikoner button {
    width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer;
    border-radius: 8px; font-size: 15px; color: #66758a; line-height: 1;
}
.rp-ikoner button:hover { background: #f4f6f9; color: #16202c; }

.rp-titel { font-size: 21px; font-weight: 700; line-height: 1.25; margin: 0 0 6px; color: #16202c; }
.rp-titel--vila { margin-top: 4px; }
.rp-meta { font-size: 12.5px; color: #66758a; margin: 0 0 14px; }

.rp-flikar { display: flex; gap: 2px; border-bottom: 1px solid #e1e6ed; margin-bottom: 14px; overflow-x: auto; }
.rp-flikar button {
    border: 0; background: transparent; cursor: pointer; padding: 7px 9px;
    font-size: 13px; color: #66758a; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.rp-flikar button:hover { color: #16202c; }
.rp-flikar button.ar-aktiv { color: #16202c; font-weight: 600; border-bottom-color: #1f5fd1; }

.rp-innehall { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-bottom: 12px; }

.rp-sektion { margin-bottom: 18px; }
.rp-rubrik {
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: #66758a; font-weight: 600; margin: 0 0 7px;
}
.rp-text { font-size: 14px; line-height: 1.55; color: #243244; margin: 0; }

.rp-rad {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 9px; margin: 0 0 4px; border: 1px solid #e1e6ed; border-radius: 9px;
    background: #fff; cursor: pointer; text-align: left; font: inherit;
}
.rp-rad:hover { background: #f8fafc; border-color: #cbd5e1; }
.rp-rad-punkt { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.rp-rad-titel { flex: 1 1 auto; font-size: 13px; color: #16202c; }
.rp-rad-hoger { flex: 0 0 auto; font-size: 11.5px; color: #66758a; }

.rp-taggar { display: flex; flex-wrap: wrap; gap: 5px; }
.rp-tagg { font-size: 11.5px; background: #f1f4f8; color: #4a5a70; padding: 3px 9px; border-radius: 999px; }

.rp-fot {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    padding: 12px 0; border-top: 1px solid #e1e6ed; background: #fff;
}
.rp-primar {
    background: #1f5fd1; color: #fff; border: 0; border-radius: 9px;
    padding: 9px 15px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.rp-primar:hover { background: #1a51b4; }
.rp-sekundar {
    background: #fff; color: #243244; border: 1px solid #cbd5e1; border-radius: 9px;
    padding: 9px 15px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.rp-sekundar:hover { background: #f4f6f9; }
.rp-lank {
    background: none; border: 0; color: #1f5fd1; font-size: 12.5px; cursor: pointer;
    margin-left: auto; padding: 4px;
}
.rp-lank--block { margin: 4px 0 0; padding: 0; display: block; }
.rp-lank:hover { text-decoration: underline; }

@media (max-width: 1100px) {
    .radar-panel { flex-basis: 320px; max-width: 320px; }
}

/* ── Steg 4: hover-kortet ───────────────────────────────────────────────────────── */

#radarHoverTooltip.radar-hoverkort {
    width: 268px;
    padding: 12px 13px;
    border: 1px solid #e1e6ed;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(20, 32, 50, .14);
    background: #fff;
    /* Hela sammanfattningen ska synas. Taket finns bara för ytterfallen: medianen är
       269 tecken (~7 rader) och 95:e percentilen 557, men den längsta är 1 727 — ett
       kort på ett fyrtiotal rader. Basklassen låter musen flytta in i kortet utan att
       det försvinner, så det går att scrolla i de fallen. */
    max-height: 60vh;
    overflow-y: auto;
    color: #243244;
}
.hk-topp { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; flex-wrap: wrap; }
.hk-kategori { color: #fff; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.hk-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: #66758a; }
.hk-meta { font-size: 11.5px; color: #66758a; margin-left: auto; }
.hk-titel { font-size: 15px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; color: #16202c; }
.hk-text {
    font-size: 12.5px; line-height: 1.45; margin: 0 0 9px; color: #4a5a70;
}
.hk-fot { display: flex; align-items: baseline; gap: 8px; }
.hk-lank { font-size: 12px; color: #1f5fd1; }
.hk-hint { font-size: 11px; color: #94a3b8; margin-left: auto; white-space: nowrap; }

/* ── Steg 5: kontroller ─────────────────────────────────────────────────────────── */

.radar-kontroller {
    position: absolute; inset: 10px 10px auto 10px;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; pointer-events: none; z-index: 5;
}
.rk-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; pointer-events: auto; max-width: 62%; }
.rk-kat {
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; background: transparent; cursor: pointer; padding: 2px 4px;
    font-size: 11.5px; color: #16202c; border-radius: 6px;
}
.rk-kat:hover { background: rgba(255,255,255,.8); }
.rk-kat.ar-nedtonad { opacity: .35; }
.rk-kat-punkt { width: 9px; height: 9px; border-radius: 50%; }
.rk-forklaring { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #66758a; }
/* Teckenförklaringens "Ny" byggs som noden: punkt med vit ring.
   Marginalen behövs eftersom box-shadow ligger utanför elementets ruta och annars
   skär in i texten. Den yttersta hårfina kanten finns bara HÄR: symbolen står i
   teckenförklaringen utan en mättad punkt intill sig att avteckna sig mot, och en
   ensam vit ring hade flutit ihop med radarytan. */
.rk-ring {
    width: 7px; height: 7px; border-radius: 50%; background: #66758a;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2f6fb0;
    margin: 0 5px;
}

/* Nedtonade noder: kvar men tillbakadragna — man ska se att de finns. */
.radar-nod.ar-nedtonad { opacity: .28; }
.radar-nod.ar-nedtonad:hover { opacity: 1; }

/* Räknaren "N initiativ" döljs — den nya vyn har en egen i filterraden, med
   dagsförändring. Elementet tas inte bort ur app.html: den gamla vyn (?old=1)
   använder det fortfarande.

   De LODRÄTA reglagen på sidorna (IKON/ZOOM till vänster, ZON till höger) döljdes
   också här från början, som en del av redesignens "ta bort de vertikala reglagen".
   Det var fel tolkning: båda styr fortfarande något i den nya vyn — zoomLevel sätter
   textstorlek och kollisionsavstånd, zoneZoomLevel sätter zonernas proportioner — och
   de är den enda vägen till de inställningarna. Reglagen är återställda 2026-09-22.
   Vilka av dem som ska synas för en viss radartyp avgörs i app.js visaSidoreglage(). */
.nya-radarvyn .initiative-counter { display: none !important; }

/* Bokmärkt: gul ring ytterst, som den gamla vyns guldhalo. */
.rp-ikoner button.ar-bokmarkt { color: #eab308; }

/* Källor i Översikt. Många initiativ har 60+ källor, så listan är begränsad
   till de senaste tio med en länk till hela. */
.rp-kalla {
    display: block; padding: 7px 9px; margin: 0 0 4px;
    border: 1px solid #e1e6ed; border-radius: 9px; background: #fff;
    text-decoration: none; color: inherit;
}
.rp-kalla:hover { background: #f8fafc; border-color: #cbd5e1; }
.rp-kalla-titel { display: block; font-size: 13px; color: #16202c; line-height: 1.35; }
.rp-kalla-meta { display: block; font-size: 11.5px; color: #66758a; margin-top: 2px; }
.rp-kalla-not { font-size: 11.5px; color: #66758a; margin: 6px 0 0; }
.rp-kallor { font-size: 12.5px; color: #66758a; }

/* ── Raden ovanför radarbilden ──────────────────────────────────────────────────────
   Den tog oproportionerligt stor plats. Tidsintervallet döljs (det hör hemma som chip
   i filterraden enligt instruktionen), Lägesbild-knappen utgår eftersom innehållet nu
   visas direkt i panelen, och sidbläddringen görs liten men tydligare. */

.nya-radarvyn .radar-section > div:first-child > div:first-child,   /* tidsintervall */
.nya-radarvyn #narrativeModalBtn { display: none !important; }      /* lägesbild: i panelen nu */

/* Sidbläddringsraden tog 41 px höjd (25 px rad + 16 px marginal) för EN rad status.
   Knapparna satte höjden, inte texten. Nu ca 26 px: mindre knappar och en marginal
   som räcker för att skilja raden från radarytan utan att bli ett eget fält. */
.nya-radarvyn .radar-section > div:first-child {
    margin-bottom: 6px !important;
    gap: 8px !important;
}
/* Sidbläddringen trycks åt höger, och vyväljaren följer efter den — så hamnar valet
   längst ut medan statusen står intill. Raden använder space-between, så utan den här
   marginalen hade de två grupperna spretat isär över hela bredden. */
.nya-radarvyn #paginationControls { gap: 8px !important; margin-left: auto !important; }

/* Vyväljaren A/B. Samma höjd som bläddringsknapparna så raden inte växer igen. */
.rtyp-knapp {
    border: 0; background: transparent; cursor: pointer;
    padding: 2px 11px; font-size: 11.5px; font-weight: 700; line-height: 1.5;
    color: #66758a; font-family: inherit;
}
.rtyp-knapp + .rtyp-knapp { border-left: 1px solid #e1e6ed; }
.rtyp-knapp:hover { background: #f4f6f9; color: #243244; }
.rtyp-knapp[aria-checked="true"] { background: #2f6fb0; color: #fff; }
.rtyp-knapp[aria-checked="true"]:hover { background: #2a639e; color: #fff; }
.nya-radarvyn #pageInfo {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #66758a !important;
}
.nya-radarvyn #pageInfo strong,
.nya-radarvyn .rk-sidinfo-tal { font-weight: 700; color: #16202c; }
.nya-radarvyn #prevInitiativesBtn,
.nya-radarvyn #nextInitiativesBtn {
    padding: 2px 9px !important;
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    background: #fff !important;
    color: #243244 !important;
    border: 1px solid #e1e6ed !important;
    border-radius: 7px !important;
}
.nya-radarvyn #prevInitiativesBtn:hover,
.nya-radarvyn #nextInitiativesBtn:hover { background: #f4f6f9 !important; transform: none !important; box-shadow: none !important; }

/* Lägesbilden i panelens vilotillstånd, med snurra medan den genereras.
   Den cachas bara i minnet i backend, så efter en omstart tar den ett LLM-anrop. */
.rp-lagesbild-kropp { font-size: 14px; line-height: 1.55; color: #243244; display: block; }
.rp-lagesbild-kropp > span { font-size: 12.5px; color: #66758a; vertical-align: middle; }
.rp-lagesbild-rubrik {
    font-size: 12.5px; font-weight: 600; color: #16202c; margin: 10px 0 3px;
}
.rp-lagesbild-rubrik:first-child { margin-top: 0; }

.rp-snurra {
    display: inline-block; width: 13px; height: 13px; margin-right: 7px;
    border: 2px solid #d3d9e2; border-top-color: #1f5fd1; border-radius: 50%;
    vertical-align: middle;
    animation: rp-snurr .8s linear infinite;
}
@keyframes rp-snurr { to { transform: rotate(360deg); } }

/* Respektera systemets inställning för minskad rörelse: snurran blir en statisk
   markering i stället för att sluta signalera att något pågår. */
@media (prefers-reduced-motion: reduce) {
    .rp-snurra { animation: none; border-top-color: #1f5fd1; opacity: .7; }
}

/* Initiativreferenser inuti lägesbildens text. Samma klass som modalen använder,
   men panelen har egen typografi. */
.radar-panel .lb-ref {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: #1f5fd1; font-weight: 600; text-align: left;
}
.radar-panel .lb-ref:hover { text-decoration: underline; }
.rp-lagesbild-kropp strong { font-weight: 600; color: #16202c; }

/* Lägesbilden återanvänder modalens lb-*-markup (app.html). Den är gjord för en bred
   modal; i en panel på 400 px behöver den dras ihop. */
.radar-panel .lb-stats { gap: 6px; margin-bottom: 14px; }
.radar-panel .lb-stat { flex: 1 1 auto; min-width: 0; font-size: 11.5px; }
.radar-panel .lb-stat b { font-size: 17px; }
.radar-panel .lb-section { margin-bottom: 12px; }
.radar-panel .lb-text { font-size: 13.5px; line-height: 1.5; }
.radar-panel .lb-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #66758a; }
.radar-panel .lb-underlag { margin-top: 14px; }
.radar-panel .lb-head h4 { font-size: 12px; margin: 0; }
.radar-panel .lb-head span { font-size: 11px; color: #66758a; }
.radar-panel .lb-bar { font-size: 12px; gap: 6px; }
.radar-panel .lb-bar-name { font-size: 12px; }
.radar-panel .lb-bar-track { min-width: 40px; }
.radar-panel .lb-chip { font-size: 11px; }

/* ── Förklara och Framtid i panelen ──────────────────────────────────────────────────
   Ersätter modalerna som ai-chat.js byggde. Samma språk som resten av panelen: vita
   ytor, #e1e6ed-kanter, 8–10 px radie, accent #1f5fd1. Inga emoji, inga animationer
   utöver snurran som redan finns. */

/* Framtidsspaningen är en lästext på i snitt 3 100 tecken. Radavståndet är generösare
   än panelens övriga text — det här ska läsas i ett svep, inte skummas. */
.rp-dokument { font-size: 14px; line-height: 1.6; color: #243244; }
.rp-dokument h1, .rp-dokument h2, .rp-dokument h3 {
    font-family: var(--rny-rubrik);
    font-size: 15px; font-weight: 700; color: #16202c;
    margin: 18px 0 6px; letter-spacing: -0.01em;
}
.rp-dokument h1:first-child, .rp-dokument h2:first-child, .rp-dokument h3:first-child { margin-top: 0; }
.rp-dokument p { margin: 0 0 11px; }
.rp-dokument ul, .rp-dokument ol { margin: 0 0 11px; padding-left: 20px; }
.rp-dokument li { margin-bottom: 4px; }
.rp-dokument strong { font-weight: 600; color: #16202c; }
.rp-dokument a { color: #1f5fd1; }
.rp-dokument blockquote {
    margin: 0 0 11px; padding: 2px 0 2px 12px;
    border-left: 3px solid #e1e6ed; color: #4a5a70;
}
/* Tabeller och kodblock är smalare än panelen sällan rymmer — de får scrolla själva
   i stället för att tvinga fram vågrät scroll i hela panelen. */
.rp-dokument table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 11px; }
.rp-dokument th, .rp-dokument td { border: 1px solid #e1e6ed; padding: 5px 8px; font-size: 13px; }
.rp-dokument pre { overflow-x: auto; background: #f4f6f9; padding: 9px; border-radius: 8px; font-size: 12.5px; }

/* Fot med metadata och knappar. Klibbar i botten så Spara alltid går att nå utan att
   scrolla igenom hela texten. */
.rp-dokumentfot {
    position: sticky; bottom: 0;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 14px; padding: 10px 0;
    border-top: 1px solid #e1e6ed; background: #fff;
}
.rp-dokumentmeta { font-size: 11.5px; color: #66758a; }
.rp-knapprad { margin-left: auto; display: flex; gap: 6px; }

.rp-knapp {
    padding: 6px 12px; font-family: inherit; font-size: 12.5px; font-weight: 600;
    color: #243244; background: #fff; border: 1px solid #e1e6ed; border-radius: 8px;
    cursor: pointer; min-height: 32px;
}
.rp-knapp:hover { background: #f4f6f9; }
.rp-knapp--primar { background: #1f5fd1; border-color: #1f5fd1; color: #fff; }
.rp-knapp--primar:hover { background: #1a51b4; }
.rp-knapp--fara { color: #b3264a; border-color: #f0ccd6; }
.rp-knapp--fara:hover { background: #fdf2f5; }

/* Förklara: startfrågor som knappar. Mätt 2026-09-22 är 88 % av all användning "en
   fråga eller ingen alls", så vägen till en fråga ska vara ett klick. */
.rp-fragor { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.rp-forslag {
    text-align: left; padding: 9px 11px; font-family: inherit; font-size: 13px;
    color: #243244; background: #fff; border: 1px solid #e1e6ed; border-radius: 9px;
    cursor: pointer; line-height: 1.4;
}
.rp-forslag:hover { border-color: #1f5fd1; background: #f7f9fc; }

.rp-fragaform { display: flex; gap: 6px; margin-bottom: 14px; }
.rp-fragafalt {
    flex: 1 1 auto; min-width: 0;
    padding: 7px 10px; font-family: inherit; font-size: 13px; color: #243244;
    background: #fff; border: 1px solid #e1e6ed; border-radius: 8px; min-height: 32px;
}
.rp-fragafalt:focus { outline: 2px solid #1f5fd1; outline-offset: -1px; border-color: #1f5fd1; }

/* Frågan står som en rubrik över sitt svar. Ingen bubbelchatt: det är inte ett samtal
   utan en serie frågor, och varje svar ska kunna läsas för sig. */
.rp-fraga {
    font-family: var(--rny-rubrik);
    font-size: 13.5px; font-weight: 700; color: #16202c;
    margin: 16px 0 7px; padding-left: 10px; border-left: 3px solid #1f5fd1;
}
.rp-svar > .rp-fraga:first-child { margin-top: 0; }
.rp-svarskropp { font-size: 14px; line-height: 1.55; color: #243244; }
.rp-svarskropp p { margin: 0 0 10px; }
.rp-svarskropp ul, .rp-svarskropp ol { margin: 0 0 10px; padding-left: 20px; }
.rp-svarskropp a { color: #1f5fd1; }
.rp-svarskropp pre { overflow-x: auto; background: #f4f6f9; padding: 9px; border-radius: 8px; }

.rp-laddar { color: #66758a; }
.rp-fel { color: #b3264a; }

/* Radarytans bakgrund: något mörkare blå än --bg-secondary (#f7fafc), så cirkeln
   ramas in tydligare mot kortet. Bara bottnen — ringar, punkter och titlar är
   oförändrade. */
.nya-radarvyn .radar-zoom-wrapper {
    background: #e3ecf7 !important;
}

/* Delade radarbilder saknar .radar-zoom-wrapper — den hör ihop med viewport-zoom-
   reglaget, som den vyn inte har. Utan wrappern får .radar-container behålla sin
   padding på 20 px och sin egen bakgrund, vilket gav en ram runt radarytan som
   app.html inte har. Samma utseende på båda sidorna i stället. */
.nya-radarvyn #radarContainer:not(.radar-container--inline) {
    padding: 0;
    background: #e3ecf7;
    border-radius: 12px;
}

/* ── Ämnen-chipet i filterraden ──────────────────────────────────────────────────────
   Delar urval med teckenförklaringen i radarytan; skillnaden är att chipet når
   radarbildens ALLA ämnen, inte bara de fem som har egen färg. Ärver .rk-chip från
   css/header-redesign.css — här bara det som skiljer. */

#rkAmnenChip { display: inline-flex; align-items: center; gap: 0; }

.rk-chip--knapp {
    font-family: inherit;
    cursor: pointer;
}
.rk-chip--knapp:hover { filter: brightness(0.97); }
.rk-chip--knapp strong { font-weight: 600; }

.rk-amnen-popover { min-width: 260px; padding: 10px; }

.rk-amnen-topp {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: #66758a; padding: 0 4px 8px; border-bottom: 1px solid #e1e6ed; margin-bottom: 6px;
}
.rk-amnen-alla {
    border: 0; background: transparent; cursor: pointer; font-family: inherit;
    font-size: 11.5px; font-weight: 600; color: #1f5fd1; padding: 2px 4px;
    text-transform: none; letter-spacing: 0;
}
.rk-amnen-alla:hover { text-decoration: underline; }

/* Många radarbilder har fler ämnen än som får plats — listan scrollar hellre än
   att popovern växer förbi fönsterkanten. */
.rk-amnen-lista { max-height: 320px; overflow-y: auto; }

.rk-amne {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 4px; border-radius: 7px; cursor: pointer;
    font-size: 13px; color: #243244;
}
.rk-amne:hover { background: #f4f6f9; }
.rk-amne input { margin: 0; cursor: pointer; accent-color: #1f5fd1; }
.rk-amne-punkt { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.rk-amne-namn { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rk-amne-antal { flex: 0 0 auto; font-size: 11.5px; color: #66758a; }

/* Räknaren i filterraden: "76 initiativ · 9 nya sedan i går".
   Ersätter .initiative-counter som låg inne i radarytan (döljs längre upp i filen).
   Ska läsas, inte klickas — därför ingen ram och ingen chip-form. */
.rk-raknare {
    font-size: 12px;
    color: #66758a;
    white-space: nowrap;
    margin-left: 4px;
}
.rk-raknare strong { font-weight: 700; color: #16202c; }

/* På smala fönster tar sökfältet plats före räknaren. */
@media (max-width: 1100px) {
    .rk-raknare { display: none; }
}

/* ── Grundstilar för sidor utan css/header-redesign.css ──────────────────────────────
   share.html laddar inte den filen (den gör om hela sidhuvudet, vilket den delade vyn
   inte har). Ämnen-chipet behöver ändå sina bärande klasser. app.html laddar
   header-redesign.css EFTER den här filen, så där vinner originalen — värdena är
   identiska, så resultatet blir detsamma på båda sidorna. */

:root {
    --rk-chip-bg: #eaf0fe;
    --rk-chip-border: #cfdcfb;
    --rk-chip-text: #1f4fb0;
    --rk-border: #e2e8f0;
    --rk-border-strong: #cbd5e1;
    --rk-text: #1e293b;
    --rk-text-muted: #64748b;
    --rk-text-faded: #94a3b8;
    --rk-bg-soft: #f8fafc;
    --rk-accent: var(--color-primary, #2f6fb0);
    --rk-popup-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 4px 8px rgba(15, 23, 42, 0.06);
}

/* Filterraden. Samma mått och färger som i app.html — men utan `position: sticky`,
   som hör ihop med det omgjorda sidhuvudet den delade vyn inte har. */
.rk-filterrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    background: #ffffff;
    border-bottom: 1px solid var(--rk-border);
    flex-wrap: wrap;
}
.rk-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: #ffffff;
    border: 1px solid var(--rk-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--rk-text);
    font-family: inherit;
}
.rk-filter-btn:hover { background: var(--rk-bg-soft); border-color: var(--rk-border-strong); }
.rk-filter-count {
    background: var(--rk-accent);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}
.rk-add-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    border: 1px dashed var(--rk-border-strong);
    color: var(--rk-text-muted);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
.rk-add-filter:hover { background: var(--rk-bg-soft); color: var(--rk-text); border-color: var(--rk-text-muted); }
.rk-reset-link {
    background: transparent; border: 0; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 600; color: var(--rk-accent); padding: 4px 6px;
}
.rk-reset-link:hover { text-decoration: underline; }
.rk-chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.rk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    background: var(--rk-chip-bg);
    border: 1px solid var(--rk-chip-border);
    color: var(--rk-chip-text);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
}
.rk-chip-close {
    background: transparent;
    border: none;
    color: var(--rk-chip-text);
    cursor: pointer;
    padding: 0 2px;
    font-size: 14px;
    line-height: 1;
    opacity: 0.7;
    border-radius: 50%;
}
.rk-chip-close:hover { opacity: 1; }
.rk-filter-popover {
    position: absolute;
    background: #ffffff;
    border: 1px solid var(--rk-border);
    border-radius: 12px;
    box-shadow: var(--rk-popup-shadow);
    padding: 16px;
    min-width: 340px;
    z-index: 1100;
}