/* ==========================================================================
   Karensuppropet

   Grund: varmt papper och varm nästsvart. Ett enda bläckband.

   Färgen bär öppningen och slutet. Hero är brandgul helyta (#f6b400,
   svart text, 9,77:1) och sidfoten stänger i varningsgult (#e8a70b,
   8,50:1). Däremellan alternerar papper och svart. Regeln som styr allt
   gult står kvar: gult är GRUND för svart text, aldrig text mot ljust —
   gult mot papper ger 1,80:1 och är oanvändbart. Det som normalt markeras
   i gult blir därför svart inne i det brandgula bandet.

   Sparsamt med apparat: inga sektionssiffror, inga etikettrader, inga
   utfyllnadsstreck. Linjer bara i listor, där de hjälper ögat att skanna.
   Skalan ligger medvetet lågt — texten ska läsas, inte ropa.
   ========================================================================== */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/archivo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Riktigt kursivt Archivo (11/9). Utan det lutade webbläsaren roman-snittet
   självt — samma bokstavsformer, bara snedställda. Bara manifestets slutrad
   använder kursiv, men en sneddad text är en synlig kvalitetsbrist. */
@font-face {
    font-family: 'Archivo';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/archivo-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Archivo';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/archivo-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304-0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/newsreader-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --papper:   #fbfaf7;   /* nästan vitt. Tonat papper + serif är den vanligaste AI-klichén; alla trovärdiga upprop är vita */
    --kort:     #f2f1ec;   /* korten: ljusgrå som Tillväxtuppropet, inte block */
    --radie:    8px;
    --black:   #191712;
    --black-2: #2c2a22;
    --brandgul:      #f6b400;  /* helyta: hero. Svart text ger 9,77:1 */
    --brandgul-mork: #dea100;  /* kant och hovring mot brandgult */
    --gul:      #e8a70b;   /* grund för svart text — 8,50:1 */
    --gul-mork: #c58c05;   /* kant och hovring */
    --ockra:    #7a5510;   /* småtext på papper — 5,73:1 */
    --dampad:   #5a564a;   /* löptext dämpad på papper — 6,27:1 */

    /* Avståndsskala (9/9). Sidan hade ett tjugotal olika clamp-värden mellan
       6 och 200px, alla uppfunna på plats. Nu sju steg där varje steg är
       1,33–1,5 gånger det förra, och varje steg är fluid i samma proportion.
       Alla avstånd i sidan pekar på ett av dem. */
    --s-2: clamp(8px,  0.8vw, 12px);
    --s-3: clamp(12px, 1.2vw, 16px);
    --s-4: clamp(16px, 1.8vw, 24px);
    --s-5: clamp(24px, 2.4vw, 32px);
    --s-6: clamp(32px, 3.6vw, 48px);
    --s-7: clamp(48px, 4.8vw, 64px);
    --s-8: clamp(64px, 7vw,   96px);
    --s-9: clamp(96px, 9.6vw, 128px);

    /* Ordmärkets grad. Märkets bredd är exakt 6,67 x graden (uppmätt), så
       allt i vänsterspalten kan ankras i samma tal — räknaren är därför
       precis lika bred som märket. */
    --marke: clamp(2rem, 4.6vw, 4.75rem);
    --marke-bredd: calc(var(--marke) * 6.67);

    /* Typskala (9/9). Sidan hade åtta olika småstorlekar mellan 11 och 17px på
       44 ställen — steg på 4–7 % som inte läses som skillnad, bara som slarv.
       Fem steg i småänden med kvot ~1,12, och displaystegen ur rubriken:
       talet är exakt ett steg (1,25) över rubriken, därför att siffran ska
       överrösta påståendet med precis ett steg — inte med två gånger. */
    --t-fin:     0.75rem;    /* 12 — källrader, diagramtext */
    --t-liten:   0.8125rem;  /* 13 — juridisk rad, finstilt */
    --t-etikett: 0.875rem;   /* 14 — etiketter, meta, namnbandet */
    --t-brod:    1rem;       /* 16 — löptext och knappar */
    --t-lead:    1.125rem;   /* 18 — namnlistan, tackblocket, formulärfält */
    --t-h2:      1.625rem;   /* 26 */
    /* Rubriken var tidigare 38 tecken och graden räknad så att den låg på en
       rad — den spärren styr inte längre, "Det räcker nu!" är 14 tecken och
       ryms med råge. Rubriken står därför på skalans displaysteg igen, och
       talet ligger kvar precis ett steg över den. */
    --t-h1:      clamp(2rem, 3vw, 3.25rem);
    --t-tal:     calc(var(--t-h1) * 1.25);

    --sans:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --serif: 'Newsreader', 'Iowan Old Style', Charter, Georgia, serif;

    /* 1360 blev trångt när räknaren och mätaren flyttade upp (9/9). Bredare
       sida, och den extra bredden går till rännan och marginalerna — inte till
       längre textrader, som fortfarande kapas vid 36rem. */
    --spalt: 1520px;
    --kant: clamp(20px, 5vw, 88px);
    --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--papper);
    color: var(--black);
    font-family: var(--sans);
    font-size: var(--t-lead);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}

::selection { background: var(--gul); color: #16140f; }

img { max-width: 100%; height: auto; display: block; }

/* ── Band ──────────────────────────────────────────────────────────────── */

.band {
    background: var(--band-bg);
    color: var(--band-fg);
    padding: var(--s-8) 0;
}

/* Alla band har samma färg, så en hårfin linje gör det luften inte kan */
.band + .band { border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); }

.band--papper   { --band-bg: var(--papper);   --band-fg: var(--black); }
.band--black   { --band-bg: var(--black);   --band-fg: var(--papper); }
.band--brandgul { --band-bg: var(--brandgul); --band-fg: var(--black); }

.inner { width: 100%; max-width: var(--spalt); margin: 0 auto; padding: 0 var(--kant); }

[id] { scroll-margin-top: calc(var(--nav-h) + 10px); }

/* ── Typografi ─────────────────────────────────────────────────────────── */

h1, h2, h3 { margin: 0; font-family: var(--sans); font-weight: 500; letter-spacing: -0.022em; text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.012em; }

p { margin: 0 0 0.9em; max-width: 60ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.band--papper .lead { color: var(--dampad); }
.band--black .lead { color: color-mix(in srgb, var(--papper) 82%, transparent); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gul-mork); text-decoration-thickness: 2px; }
.band--black a:hover { text-decoration-color: var(--gul); }

:focus-visible { outline: 2px solid var(--gul-mork); outline-offset: 3px; }
.band--black :focus-visible { outline-color: var(--gul); }

/* Brandgult band. Gult mot brandgult syns inte — här bär svart alla
   markeringar, knappar och fokusringar i stället. */
.band--brandgul .lead { color: color-mix(in srgb, var(--black) 78%, transparent); }
.band--brandgul a:hover { text-decoration-color: var(--black); }
.band--brandgul :focus-visible { outline-color: var(--black); }
.band--brandgul .krav { background: var(--black); color: var(--brandgul); }
.band--brandgul .btn { border-color: var(--black); background: var(--black); color: var(--brandgul); }
.band--brandgul .btn:hover { background: transparent; color: var(--black); }

.band h2 + .lead, .band h2 + p { margin-top: 20px; }

/* ── Sidhuvud ──────────────────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--papper);
    color: var(--black);
}

/* Ordmärket sköt tidigare navigationen till höger med margin-right: auto.
   Nu när märket står i uppropet får raden hålla den till höger själv (9/9). */
.header-inner { display: flex; align-items: center; justify-content: flex-end; gap: 18px; height: 100%; }

.header-antal { font-size: var(--t-liten); font-weight: 500; color: var(--dampad); }
@media (max-width: 640px) { .header-antal { display: none; } }

/* ── Platshållarbanner ─────────────────────────────────────────────────── */

.platshallare-banner {
    padding: 8px var(--kant);
    background: var(--black);
    color: color-mix(in srgb, var(--papper) 80%, transparent);
    font-size: var(--t-fin);
    line-height: 1.45;
}

.platshallare-banner strong { color: var(--gul); font-weight: 700; }

/* ── Gul markering: grund för svart text ───────────────────────────────── */

.krav {
    display: inline-block;
    padding: 6px 12px;
    background: var(--gul);
    color: var(--black);
    font-size: var(--t-liten);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Knappar ───────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 32px;
    border: 1px solid var(--black);
    background: var(--black);
    color: var(--papper);
    font-family: var(--sans);
    font-size: var(--t-brod);
    font-weight: 700;
    border-radius: var(--radie);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .14s ease;
}

/* Svart knapp (7/9): gult är märkning och bevis, inte handling. */
.btn:hover { background: transparent; color: var(--black); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; }

.btn--liten { padding: 9px 16px; font-size: var(--t-liten); }

.btn--tom {
    background: transparent;
    border-color: color-mix(in srgb, currentColor 40%, transparent);
    color: inherit;
}

.btn--tom:hover { background: transparent; border-color: currentColor; }

/* ── Miljöerna ─────────────────────────────────────────────────────────── */

.miljoer {
    list-style: none;
    margin: clamp(36px, 5vh, 60px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(20px, 2.4vw, 32px);
}

.miljo h3 { margin-top: 16px; }
.miljo p { margin-top: 6px; font-size: var(--t-etikett); line-height: 1.5; max-width: none; color: color-mix(in srgb, currentColor 74%, transparent); }

/* ── Formulär ──────────────────────────────────────────────────────────── */

@media (min-width: 880px) { .form-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.signup-form { max-width: none; }

.form-rad { display: grid; gap: 24px; margin-bottom: 28px; }
@media (min-width: 520px) { .form-rad--tva { grid-template-columns: 1fr 1fr; } }

.form-group label { display: block; margin-bottom: 0; font-size: var(--t-etikett); font-weight: 600; }
.form-hint { font-weight: 400; color: var(--dampad); }

.form-group input {
    width: 100%;
    padding: 8px 0 10px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--black) 55%, transparent);
    border-radius: 0;
    background: transparent;
    color: var(--black);
    font: inherit;
    font-size: var(--t-lead);
    transition: border-color .12s, box-shadow .12s;
}

/* Fälten är linjer att fylla i på pappret, inte vita lådor. Fokus: linjen
   blir svart och får en gul understrykning. */
.form-group input:hover { border-color: var(--black); }
.form-group input:focus { outline: none; border-color: var(--black); box-shadow: 0 2px 0 var(--gul); }

.checkbox-label {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin: 32px 0 36px;
    font-size: var(--t-etikett);
    line-height: 1.45;
    cursor: pointer;
}

.checkbox-label input { flex: none; width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--black); }

.form-legal { margin: 24px 0 0; font-size: var(--t-liten); line-height: 1.5; max-width: none; color: var(--dampad); }

.form-message { margin: 14px 0 0; font-size: var(--t-etikett); font-weight: 600; max-width: none; }
.form-message.success, .form-message.error { padding: 12px 14px; }
.form-message.success { background: var(--gul); color: var(--black); }
.form-message.error { background: #fffefa; color: #9d2414; box-shadow: inset 3px 0 0 #9d2414; }

/* ── Undertecknarlistan ────────────────────────────────────────────────── */

.sig-lista {
    list-style: none;
    margin: clamp(28px, 4vh, 44px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: clamp(32px, 4vw, 64px);
    border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

@media (min-width: 620px)  { .sig-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .sig-lista { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .sig-lista { grid-template-columns: repeat(4, 1fr); } }


.sig-lista li { padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.sig-namn { display: block; font-size: var(--t-lead); font-weight: 600; }
.sig-meta { display: block; font-size: var(--t-etikett); line-height: 1.35; color: color-mix(in srgb, currentColor 64%, transparent); }

.undertecknare-toggle-wrap { margin-top: 30px; }
.tom-lista { margin-top: 26px; color: var(--dampad); }

/* ── Tackläget ─────────────────────────────────────────────────────────────
   Ersätter formuläret när underskriften gått igenom. Gult, eftersom sidan här
   bevisar något: den har fått en underskrift. Delningsknapparna följer med,
   så steget efter är ett klick bort. */
.tack {
    background: var(--brandgul);
    color: var(--black);
    padding: clamp(24px, 4vh, 36px) clamp(22px, 3vw, 34px);
}
.tack:focus { outline: none; }
.tack-rubrik {
    margin: 0 0 10px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-h2);
    line-height: 1.12;
    letter-spacing: -0.01em;
}
.tack-text { margin: 0 0 22px; font-size: var(--t-lead); line-height: 1.5; max-width: 42ch; }
.signup-form[hidden] { display: none; }

/* ── Dela ──────────────────────────────────────────────────────────────── */

.dela-knappar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ── Bakgrund ──────────────────────────────────────────────────────────── */

.fakta-grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 40px); margin-top: clamp(32px, 4vh, 52px); }
@media (min-width: 780px) { .fakta-grid { grid-template-columns: repeat(2, 1fr); } }

.fakta-item h3 { margin-bottom: 9px; }
.fakta-item p { font-size: var(--t-brod); max-width: none; color: color-mix(in srgb, currentColor 78%, transparent); }
.fakta-kalla { margin: 10px 0 0; font-size: var(--t-liten); max-width: none; color: color-mix(in srgb, currentColor 60%, transparent); }

/* Sidans andra bild. Liten med flit — hero är den stora. */

/* ── I media ───────────────────────────────────────────────────────────── */

.media-lista { list-style: none; margin: clamp(28px, 4vh, 44px) 0 0; padding: 0; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }

.media-item {
    display: grid;
    gap: 4px clamp(24px, 3vw, 48px);
    padding: 22px 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

@media (min-width: 700px) { .media-item { grid-template-columns: 10rem 1fr; align-items: baseline; } }

.media-tidning { font-size: var(--t-etikett); color: color-mix(in srgb, currentColor 60%, transparent); }
.media-item a, .media-item > span:last-child { font-family: var(--sans); font-size: var(--t-lead); font-weight: 500; letter-spacing: -0.015em; }

/* ── Sidfot ────────────────────────────────────────────────────────────── */

/* Sidfoten stänger sidan i gult, som hero öppnar den i brandgult. Svart text
   på --gul ger 8,50:1. */
.site-footer { background: var(--papper); color: var(--black); padding: clamp(38px, 5vh, 60px) 0 44px; }
.site-footer a:hover { text-decoration-color: var(--black); text-decoration-thickness: 2px; }
.site-footer :focus-visible { outline-color: var(--black); }
.footer-avsandare { font-family: var(--sans); font-size: clamp(1rem, 1.4vw, 1.1875rem); font-weight: 500; max-width: 44ch; }
/* Slutraden ur manifestet. Samma grad som brödtexten, dämpad — den signerar
   sidan, den argumenterar inte (8/9). */
.footer-tagline { margin: 0; font-family: var(--sans); font-size: var(--t-brod); color: var(--dampad); max-width: 44ch; }
.footer-avsandare + .footer-tagline { margin-top: 14px; }

.footer-avsandare--tom, .policy-saknas {
    display: inline-block;
    padding: 10px 14px;
    background: var(--gul);
    color: var(--black);
    font-size: var(--t-etikett);
    line-height: 1.45;
    font-weight: 600;
    max-width: 54ch;
}

/* Platshållarrutan är gul grund överallt utom i sidfoten, som nu ÄR gul. */

.footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    font-size: var(--t-liten);
    color: color-mix(in srgb, currentColor 66%, transparent);
}

/* ── Enkel innehållssida ───────────────────────────────────────────────── */

.site-main { padding: clamp(52px, 7vh, 84px) 0 84px; }
.site-main h1 { margin-bottom: 26px; }
.site-main h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); margin: 38px 0 10px; }
.site-main p { max-width: 64ch; }

/* ── Öppna brevet ──────────────────────────────────────────────────────────
   Sidans huvudinnehåll enligt s. 9 och s. 11 i strategiunderlaget. Sätts i
   serif på läsbar spaltbredd — det ska läsa som ett brev, inte som webbcopy. */

.brev { max-width: 46rem; }

.brev-adressat {
    margin: 0 0 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid color-mix(in srgb, currentColor 26%, transparent);
    font-size: var(--t-etikett);
    font-weight: 700;
    letter-spacing: 0.02em;
    max-width: none;
}

.brev-adressat--tom {
    display: inline-block;
    padding: 10px 14px;
    border-bottom: 0;
    background: var(--gul);
    color: var(--black);
    font-size: var(--t-etikett);
    font-weight: 600;
    line-height: 1.45;
}

.brev-text > p {
    font-family: var(--sans);
    font-size: var(--t-lead);
    line-height: 1.62;
    margin: 0 0 0.85em;
    max-width: none;
}

.brev-text > p:last-child { margin-bottom: 0; }

.brev-pdf { margin: 22px 0 0; font-size: var(--t-etikett); max-width: none; }

/* Punkterna blir stödmaterial under brevet, inte huvudinnehåll */

/* ── Tuschpenna ────────────────────────────────────────────────────────────
   Gult som överstrykning. Det här är regeln "gult är grund för svart text"
   gjord bokstavlig, och den läser som någon som markerat en mening för hand.

   Detaljerna som skiljer en riktig penndrag från en gul rektangel: draget
   täcker bara cirka två tredjedelar av radhöjden, det är svagt roterat,
   ändarna är ojämna, och det överskjuter texten åt ena hållet.
   Används sparsamt — max ett par ställen per sida. */

mark.tuschpenna {
    background: none;
    color: inherit;
    position: relative;
    isolation: isolate;
    padding: 0 0.12em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

mark.tuschpenna::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: -0.14em;
    right: -0.22em;
    bottom: 0.02em;
    height: 0.66em;
    background: var(--brandgul); /* samma gula som loggan — pennan och märket är ett */
    transform: rotate(-0.7deg);
    clip-path: polygon(
        0.6% 6%, 99.3% 0%, 100% 88%, 98.6% 100%,
        1.4% 96%, 0% 82%
    );
}

/* På bläckbandet blir texten ljus — då måste den bli svart under draget */
.band--black mark.tuschpenna { color: var(--black); }

/* ── Handskrift: bara där handskrift faktiskt hör hemma ────────────────────
   Ett upprop skrivs under. Handskriften används därför enbart för
   initiativtagarnas namn och för anteckningen i schemabandet — aldrig som
   rubrik eller brödtext, där den skulle underminera saklighetsregistret. */

/* ── Undertecknarlistan: tillbaka som bevis ────────────────────────────────
   Sektionen tappade tyngd när apparaten rensades. Den får igen en rubrik som
   säger vad den är, ett kraftigare överstreck och tydligare radlinjer. */

.sig-lista { border-top-width: 2px; border-top-color: color-mix(in srgb, currentColor 55%, transparent); }
.sig-lista li { border-bottom-color: color-mix(in srgb, currentColor 22%, transparent); }

/* ══════════════════════════════════════════════════════════════════════════
   Typografi enligt referensen (Better Business Act): stor fet grotesk,
   vänsterställd, och en FET ingress i samma spalt. Serifen behålls på ett
   enda ställe — det öppna brevet — där den gör nytta för längre läsning.
   Omprövat: serif i rubrikerna, sans i allt annat, som Tillväxtuppropet.
   Den feta, tätt spärrade grotesken gjorde sidan till en produktsida.
   ══════════════════════════════════════════════════════════════════════════ */

h1 {
    font-size: var(--t-h1);
    line-height: 1.12;
    max-width: 30ch;
}

h2 {
    font-size: var(--t-h2);
    line-height: 1.2;
    max-width: 30ch;
}

h3 {
    font-family: var(--sans);
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

/* Ingressen är fet i referensen — det är den som gör tonen säker */
.lead {
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    font-weight: 600;
    line-height: 1.48;
    max-width: 34ch;
}

/* Brevet behåller serifen */
/* Brevet har hero-fonten men lägst vikt och luftigast radavstånd på sidan.
   Kontrasten mot rubrikernas 800 gör att det läser som brev ändå. */
.brev-text > p {
    font-family: var(--sans);
    font-size: clamp(1rem, 1.15vw, 1.0625rem);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: -0.005em;
    margin-bottom: 1.25em;
}

/* ── Ordmärke: staplat, litet över och stort under ─────────────────────── */

/* ── Tuschpennan i de gula banden ──────────────────────────────────────────
   Gult drag mot gul yta syns inte. Inne i det brandgula bandet inverteras
   draget: svart penna, gul text. Samma logik som styr knapparna där. */

.band--brandgul mark.tuschpenna,
.site-footer mark.tuschpenna { color: var(--brandgul); }

.band--brandgul mark.tuschpenna::before,
.site-footer mark.tuschpenna::before { background: var(--black); }

/* ── Handskrift i din skala ────────────────────────────────────────────── */

/* ── Undertecknarrubriken: antalet överstruket ─────────────────────────── */

/* Versaler kräver positiv spärr på den lilla raden och tätare på den stora */

/* Rubriker låg för nära det som följde. Listor och raster får egen luft;
   ingress och löptext ligger kvar tätt intill rubriken. */
h2 + .sig-lista,
h2 + .miljoer,
h2 + .fakta-grid,
h2 + .media-lista,
h2 + .brev { margin-top: var(--s-5); }



/* Antalet står som vanlig text, inte överstruket */

/* Bildtexten i den lilla bakgrundsbilden */

/* Två spalter tidigare än förut, och jämnare fördelade — texten ska sluta
   ungefär i mitten så bilden får verklig plats. Bilden ligger i överkant
   i stället för att hänga i botten. */
@media (min-width: 780px) {
    }

/* Rubriken bryter tidigare så den håller sig inom sin halva */

/* Ingressen får inte bli bredare än rubrikspalten */

/* ══════════════════════════════════════════════════════════════════════════
   Vem täcker upp? — text vänster, veckoschema höger
   Veckodagarna är det som gör rutorna läsbara som schema. Fyra bemannade
   pass markeras med ett streck; det tomma är gult med ordet skrivet för hand.
   ══════════════════════════════════════════════════════════════════════════ */

.tacker-grid { display: grid; gap: clamp(30px, 4vw, 60px); }

@media (min-width: 860px) {
    .tacker-grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: clamp(40px, 5vw, 80px);
    }
}

.tacker-text .lucka-text { margin-top: 22px; }

.lucka-text {
    font-size: var(--t-etikett);
    line-height: 1.5;
    max-width: 42ch;
    color: color-mix(in srgb, currentColor 72%, transparent);
}

.schema {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(5px, 0.7vw, 9px);
}

.schema-dag { display: flex; flex-direction: column; gap: 9px; }

.schema-etikett {
    font-size: var(--t-fin);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: color-mix(in srgb, currentColor 52%, transparent);
}

.schema-cell {
    display: grid;
    place-items: center;
    height: clamp(66px, 9vw, 104px);
    background: color-mix(in srgb, currentColor 12%, transparent);
}

/* Bemannat pass: ett streck. Gör att det tomma passet läser som frånvaro
   och inte bara som en annan färg. */
.schema-dag:not(.schema-dag--lucka) .schema-cell::after {
    content: '';
    width: 42%;
    height: 2px;
    background: color-mix(in srgb, currentColor 30%, transparent);
}

.schema-dag--lucka .schema-etikett { color: var(--gul); }
.schema-dag--lucka .schema-cell { background: var(--gul); }

/* Miljöerna under, i full bredd */
.tacker-grid + .miljoer { margin-top: clamp(48px, 7vh, 88px); }

/* ══════════════════════════════════════════════════════════════════════════
   Brevet som brev: brevhuvud och underskrifter
   Handskriften används här och bara här — det enda stället på sidan där
   handskrift är sakligt korrekt. Brödtexten är kvar i grotesk, av läsbarhets-
   och tillgänglighetsskäl.
   ══════════════════════════════════════════════════════════════════════════ */

.brev-huvud {
    margin-bottom: 26px;
    padding-bottom: 16px;
    border-bottom: 1px solid color-mix(in srgb, currentColor 26%, transparent);
}

.brev-datum {
    margin: 0 0 5px;
    font-size: var(--t-liten);
    letter-spacing: 0.02em;
    max-width: none;
    color: color-mix(in srgb, currentColor 62%, transparent);
}

.brev-adressat {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--t-etikett);
    font-weight: 700;
    letter-spacing: 0.01em;
    max-width: none;
}

.brev-pdf { margin-top: 26px; }

/* ══════════════════════════════════════════════════════════════════════════
   Ordmärket som lockup: två textrader plus en svart stapel med kravet
   Stapeln ger det tvåradiga ordmärket en fot — utan den flyter det. Den bär
   samtidigt kravet, så det inte behöver stå löst i hero som ett eget element.
   ══════════════════════════════════════════════════════════════════════════ */

/* På pappers- och bläckbotten kan gult inte bära texten — då blir stapeln
   ljus med svart text i stället. Gäller om ordmärket återanvänds utanför
   det brandgula sidhuvudet. */

/* Sidhuvudet behöver lite mer höjd med stapeln på plats */

/* Under smala skärmar tar stapeln över raden — då bryts den i stället */

/* ══════════════════════════════════════════════════════════════════════════
   Ordmärket: optisk vänsterjustering och proportioner
   ══════════════════════════════════════════════════════════════════════════ */

/* Optisk justering. Sidobäringen skalar med graden, så en negativ marginal
   i EM — lika stor på båda raderna — nollar skillnaden proportionellt.
   Anges den i px hamnar raderna fel så snart graden ändras. */

/* Stapeln spänner exakt över ordmärkets bredd, alltså UPPROPET:s bredd.
   Det ger lockupen en ren högerkant i stället för att stapeln sticker ut. */

/* ══════════════════════════════════════════════════════════════════════════
   ORDMÄRKET — enda källan. Låg tidigare i sex block som skrev över varandra.

   Optisk vänsterjustering: sidobäringen skalar med graden, så KARENS- på
   11 px och UPPROPET på 29 px står metriskt lika men optiskt olika. En
   negativ marginal i EM, lika stor på alla rader, nollar skillnaden
   proportionellt. I px skulle den spricka så snart graden ändras.

   Spärren lägger luft efter sista tecknet också, så den dras av på höger
   sida — annars glider den optiska högerkanten iväg på den spärrade raden.

   Stapeln spänner exakt över UPPROPET:s bredd, vilket ger lockupen en ren
   högerkant. Håll stapeltexten kort, annars är det den som sätter bredden.
   ══════════════════════════════════════════════════════════════════════════ */

/* Hela märket skalar från EN storlek: .site-logo sätter font-size, allt inuti
   är i em. Då håller raderna och stapeln sina proportioner vid zoom (tidigare
   var ordmärket i vw och stapeln i rem — de skalade olika). Stapeln får
   ordmärkets bredd: dess text är satt så att den alltid är smalare än
   UPPROPET, och align-self: stretch drar den ut till exakt samma bredd. */
.site-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    width: -webkit-fit-content;
    width: fit-content;
    margin-right: auto;
    padding: 0.5em 0.58em 0.58em;
    background: var(--brandgul);
    color: var(--black);
    font-family: var(--sans);
    /* Ungefär rubrikens bredd, men ett steg mindre (9/9): full matchning
       (3,13vw / 3,5rem) blev för dominant. Graden styr hela lockupen —
       stapeln och båda raderna är satta i em. */
    font-size: clamp(1.5rem, 2.6vw, 2.75rem);
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}
/* Loggan är sidans gula: en märkning, inte en header. Det andra gula är
   knappen. Stapeln inne i märket är svart med gul text (9,77:1). */
.site-header .site-logo .logo-stapel { background: var(--black); color: var(--brandgul); }

/* Optisk vänsterkant: bokstävernas sidobearing dras in så stammarna står
   där stapelns kant står. */
.logo-rad1,
.logo-rad2 { margin-left: -0.045em; }

.logo-rad1 {
    font-size: 0.4583em;   /* 11/24 */
    font-weight: 700;
    letter-spacing: 0.155em;
    line-height: 1;
    margin-right: -0.155em;
}

.logo-rad2 {
    font-size: 1em;
    font-weight: 800;
    letter-spacing: -0.028em;
    line-height: 0.9;
    margin-top: 0.06em;
    margin-right: -0.028em;
}

.logo-stapel {
    align-self: stretch;
    display: block;
    margin-top: 0.5em;
    padding: 0.42em 0 0.46em;
    background: var(--black);
    color: var(--papper);
    font-size: 0.31em;     /* texten mäter ~4,8 em av ordmärkets 5,14 em — alltid smalare */
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

/* Gult mot gult och svart mot svart syns inte — stapeln byter roll per botten */
.band--papper .logo-stapel { background: var(--black); color: var(--papper); }
.band--black .logo-stapel   { background: var(--gul);   color: var(--black);  }

/* Ordmärket på policysidan: mindre, som väg tillbaka till startsidan. */
.policy-tillbaka, .reserv-marke { margin: 0 0 var(--s-7); }
.policy-marke { font-size: clamp(1.25rem, 2vw, 1.75rem); }

/* Ordmärket i uppropet (9/9): flyttat ur sidhuvudet, som nu bara bär
   navigationen. Här är märket uppropets ankare och får fylla vänsterspalten. */
.upprop-ordmarke { font-size: var(--marke); }

/* Stapeln behöver plats i sidhuvudet */
.site-header { height: auto; min-height: 0; }
.site-header .header-inner { padding-top: 22px; padding-bottom: 22px; align-items: flex-start; }

@media (max-width: 420px) {
    .logo-stapel { white-space: normal; letter-spacing: 0.06em; padding-left: 0.4em; padding-right: 0.4em; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Miniraderna: gult bara i toppen och botten
   Gult är kvar som signal men slutar vara sidans yta. Sidan i övrigt är
   papper och beige. Svart på gult ger 8,50:1, så raderna bär text utan
   problem trots att de är låga.
   ══════════════════════════════════════════════════════════════════════════ */

.minirad {
    background: var(--brandgul);
    color: var(--black);
    font-size: var(--t-liten);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.minirad-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 22px;
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
}
/* Sidfotsraden är tjockare än toppen: den stänger sidan */
.minirad--botten .minirad-inner { min-height: 60px; padding-top: 18px; padding-bottom: 18px; }

.minirad a { color: var(--black); text-decoration: none; }
.minirad a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.minirad :focus-visible { outline-color: var(--black); }

.minirad--topp .minirad-inner { justify-content: flex-end; }
.minirad--botten .minirad-inner { justify-content: space-between; }

/* Sidfoten är papper nu, så påminnelserutan behöver sin egen kontrast */
.site-footer .footer-avsandare--tom { background: var(--gul); color: var(--black); }

@media (min-width: 780px) {
    }

/* ══════════════════════════════════════════════════════════════════════════
   Sidhuvudet: en gul rad som hugger ordmärket
   Det gula ska inte vara högre än loggan. Länkarna toppjusteras mot
   ordmärkets övre rad i stället för att centreras, annars växer raden.
   ══════════════════════════════════════════════════════════════════════════ */

.header-inner { align-items: flex-start; gap: 20px; }

.header-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    padding-top: 2px;
    font-size: var(--t-liten);
    font-weight: 600;
}

.header-nav a { color: var(--black); text-decoration: none; }
.header-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.site-header :focus-visible { outline-color: var(--black); }

/* Länkarna är text, inte flikar. Toppen är loggan ensam — gult som märke, inte som header. */

/* ── Uppropet öppnar sidan ────────────────────────────────────────────── */

/* Toppsidan får andas: rubriken och grafen är små, så luften runt dem bär.
   Mer ovanför än under, så manifestet inte kommer förrän man scrollat. */
#uppropet { padding: var(--s-9) 0 var(--s-9); }   /* lika mycket luft under som över */

/* Vikningen: toppsidan fyller skärmen så att det gula bandet börjar strax
   under den. Halva räknaren i förstavyn kapade siffran på mitten (8/9). */
/* Ingen minhöjd på uppropet (9/9). Den fanns för att styra vad som låg vid
   vikningen när namnbandet stod sist i sektionen; nu ligger bandet högst upp
   och minhöjden blev bara tomrum under knappen. Sektionens padding ur
   avståndsskalan gör jobbet i stället. */

.upprop-rubrik {
    /* Sidans enda stora grad. Smal spalt så den staplas över flera rader —
       det är brytningen som ger tyngd, inte graden. Ligger på ~3,3× brödtexten;
       över 4× börjar allt annat på sidan se litet ut. */
    /* En rad från cirka 1200px och upp (9/9): graden är räknad ur spaltens
       bredd, 38 tecken Newsreader ~ 0,45em styck. Under det bryts den
       naturligt — 38 tecken på 390px vore 10px text. */
    font-size: var(--t-h1);
    line-height: 1.08;
    letter-spacing: -0.015em;
    max-width: none;   /* h1 har 30ch som spärr; här ska den gå på en rad */
}

.brev-atgard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: clamp(30px, 4vh, 44px);
}

/* Ordmärkets stapel: svart med text i sidans bottenfärg. Inget gult här —
   det gula är knappen och räknaren, inte loggan. */
.site-header .logo-stapel { background: var(--black); color: var(--papper); }
.header-nav a:hover { text-decoration-color: var(--black); }

/* ══════════════════════════════════════════════════════════════════════════
   Räknare och delning i två mörka kort
   Sidans enda mörka yta. Det är kontrasten mot pappret som får siffran att
   bära — hade korten varit beige hade talet blivit en siffra bland andra.
   ══════════════════════════════════════════════════════════════════════════ */

.statkort {
    display: grid;
    gap: 20px;
}


.statkort-ruta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    min-height: 220px;
    padding: clamp(24px, 2.6vw, 32px);
    background: var(--kort);
    color: var(--black);
    border-radius: var(--radie);
}

.statkort-etikett {
    margin: 0;
    max-width: none;
    font-size: var(--t-etikett);
    font-weight: 500;
    color: var(--dampad);
}

.statkort-tal {
    /* Sidans enda stora sak. Allt annat är 16–42 px; siffran är beviset. */
    font-family: var(--serif);
    font-size: clamp(4rem, 7vw, 6.5rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.statkort-knappar { display: flex; flex-wrap: wrap; gap: 10px; }

.delaknapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--black);
    color: var(--papper);
    border-radius: var(--radie);
    font-size: var(--t-brod);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .14s;
}

.delaknapp:hover { background: var(--black-2); }
.delaknapp svg { flex: none; }
.statkort-ruta :focus-visible { outline-color: var(--black); }

/* ══════════════════════════════════════════════════════════════════════════
   Gul sida: växelläge
   Gult som hel botten kräver att allt som normalt är gult blir svart —
   gult på gult syns inte. Svart på brandgul ger 9,76:1.
   ══════════════════════════════════════════════════════════════════════════ */

body.sida--gul { --papper: var(--brandgul); }

.sida--gul .btn { background: var(--black); border-color: var(--black); color: var(--brandgul); }
.sida--gul .btn:hover { background: transparent; color: var(--black); }
.sida--gul .site-header .logo-stapel { background: var(--black); color: var(--brandgul); } /* på gul botten är bottenfärgen gul */
.sida--gul .form-group input { background: #fffefa; }
.sida--gul .delaknapp { background: var(--brandgul); color: var(--black); }
.sida--gul .delaknapp:hover { background: #fffefa; }
.sida--gul .form-message.success { background: var(--black); color: var(--brandgul); }

/* ══════════════════════════════════════════════════════════════════════════
   SVART SIDA
   --papper och --black byter värden, så hela sidan inverteras konsekvent i
   stället för att varje regel skrivs om. Undantagen nedan finns för att gult
   och de vita fälten inte får följa med i inverteringen.

   Gult bär tre saker på svart botten: ordmärkets stapel, knappen och
   räknarkortet. Räknarkortet är den stora gula ytan — talet är beviset, så
   det ska vara det ljusaste på sidan.
   Kontroll: ljus text 15,03:1, gul text 8,73:1, svart på gult 8,73:1.
   ══════════════════════════════════════════════════════════════════════════ */

body.sida--svart {
    --papper: #16140f;
    --black: #ece8dd;
    --dampad: #a8a294;
}

/* Gult är kvar som gult — det ska inte inverteras */
.sida--svart .logo-stapel { background: var(--gul); color: #16140f; }
.sida--svart .btn { background: var(--gul); border-color: var(--gul); color: #16140f; }
.sida--svart .btn:hover { background: var(--brandgul); border-color: var(--brandgul); color: #16140f; }
.sida--svart .form-message.success { background: var(--gul); color: #16140f; }

/* Formulärfälten ska vara ljusa hål i den svarta ytan */
.sida--svart .form-group input {
    background: #f4f1e8;
    color: #16140f;
    border-color: #f4f1e8;
}

.sida--svart .form-group label { color: var(--black); }
.sida--svart .checkbox-label input { accent-color: var(--gul); }

/* Räknarkortet gult, delakortet inramat. En lyft fyllning räcker inte —
   #221F18 mot #16140F ger 1,12:1 och syns inte. */
.sida--svart .statkort-ruta:first-child {
    background: var(--brandgul);
    color: #16140f;
}

.sida--svart .statkort-ruta:first-child .statkort-etikett {
    color: color-mix(in srgb, #16140f 70%, transparent);
}

.sida--svart .statkort-ruta:last-child {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--black) 26%, transparent);
    color: var(--black);
}

.sida--svart .delaknapp { background: #f4f1e8; color: #16140f; }
.sida--svart .delaknapp:hover { background: var(--gul); }

/* ── Formuläret: rubriken direkt ovanför fälten ───────────────────────── */

.signup-block { max-width: 36rem; }

/* ── Båda korten gula i svart läge ─────────────────────────────────────
   Med gul botten kan de ljusa knapparna inte vara ljusa längre —
   #F4F1E8 mot #F6B400 ger 1,5:1 som ytor. Svarta knappar i stället. */

.sida--svart .statkort-ruta,
.sida--svart .statkort-ruta:first-child,
.sida--svart .statkort-ruta:last-child {
    background: var(--brandgul);
    border: 0;
    color: #16140f;
}

.sida--svart .statkort-ruta .statkort-etikett {
    color: color-mix(in srgb, #16140f 70%, transparent);
}

.sida--svart .delaknapp { background: #16140f; color: var(--brandgul); }
.sida--svart .delaknapp:hover { background: #000; }
.sida--svart .statkort-ruta :focus-visible { outline-color: #16140f; }

/* ══════════════════════════════════════════════════════════════════════════
   Raden: sidans enda axel
   Vänsterspalten bär det korta — rubriker och tal — och högerspalten det
   långa — brev, formulär, listor. Samma delning i varje band, så ögat får en
   linje att följa i stället för innehåll som växlar sida. Vänstern är sticky
   så rubriken står kvar medan högern scrollar. På mobil staplas allt rakt
   uppifrån ner, i klientens ordning.
   ══════════════════════════════════════════════════════════════════════════ */

.rad {
    display: grid;
    /* En spalt som mest är lika bred som behållaren. Utan minmax(0, …) räknar
       gridet in namnbandets spår (width: max-content) i kolumnens minsta
       bredd, och sidan blev 22 000 px bred på mobil (9/9). */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6) var(--s-8);
    align-items: start;
}

.rad-hoger { min-width: 0; }
ul.rad-hoger, .rad-hoger > ul { margin-top: 0; }

/* Korten står i uppropet, mellan rubriken och brevet. Bredare än brevet
   så att siffran får plats, men inte hela spalten. */
/* Räknaren står under formulärrubriken i vänsterspalten, ljusgrå som
   Tillväxtuppropet. Rubriken är inte längre sticky där — kortet följer med. */
.statkort { max-width: 22rem; margin-top: clamp(28px, 4vh, 44px); }
@media (min-width: 880px) { .rad--form .rad-vanster { position: static; } }

/* Delning efter formuläret — man delar när man skrivit under, inte innan man läst. */
.dela-rad { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.dela-etikett { margin: 0 0 14px; font-size: var(--t-etikett); font-weight: 500; color: var(--dampad); }
.dela-knappar { display: flex; flex-wrap: wrap; gap: 10px; }

@media (min-width: 880px) {
    .rad { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .rad-vanster {
        position: sticky;
        top: calc(var(--nav-h) + 28px);
    }
    /* Uppropets rubrik står stilla — den ska inte följa med när manifestet
       fälls ut bredvid den. */
    #uppropet .rad-vanster { position: static; }
}

/* Diagram eller bild ovanför manifestet i samma spalt */
.upprop-hoger > * + * { margin-top: var(--s-6); }

/* Uppropets tre rutor (9/9): rubrik uppe till vänster, räknaren uppe till
   höger med namnbandet under, manifestet under rubriken. Speglingen provades
   och rullades tillbaka. */
@media (min-width: 880px) {
    .rad--upprop { grid-template-rows: auto auto; }
    /* Vänster: ordmärket och räknaren — namnet och beviset. Höger: rubriken
       på en rad och manifestet under den — hållningen och skälet (9/9).
       Två objekt, en rad: så står vänsterspalten stilla när manifestet
       fälls ut. Med två rader fördelades manifestets höjd över dem. */
    .rad--upprop .rad-vanster  { grid-column: 1; grid-row: 1; align-self: start; }
    .rad--upprop .upprop-hoger { grid-column: 2; grid-row: 1; }
    .rad--upprop .upprop-hoger > .upprop-rubrik { margin-bottom: var(--s-5); }
}

/* Uppropet staplas: rubriken överst, brevet under, i samma vänsterkant.
   Bredvid varandra läste rubriken och brevet som två saker; under varandra
   är det en text med en rubrik. */
/* .rad--stapel togs bort 8/9 när manifestet flyttade in i uppropets högerspalt. */

/* Uppropet med bild: rubrik och intro-text staplade i vänsterspalten, fotot
   i högerspalten — på samma 5/12-linje som manifestets text, räknarens etikett
   och formuläret, så att hela sidan hänger på ett raster. Bildtexten bär
   årtalet — bilden är ett argument, inte stämning. */
/* Toppsidan står på sidans 5/7-raster som formuläret (7/9): rubriken på
   formulärrubrikens kant, grafen på fältens. Manifestet och antal-bandet
   ligger på samma linjer. */
@media (min-width: 880px) {
    .rad--bild {
        grid-template-rows: auto 1fr;
        row-gap: clamp(24px, 3vh, 36px);
    }
    .rad--bild .rad-vanster, .rad--bild .brev { grid-column: 1; }
    .rad--bild .rad-vanster { position: static; }
    .rad--bild .upprop-bild { grid-column: 2; grid-row: 1 / span 2; }
}
.rad--bild .brev { max-width: 46rem; }
.upprop-bild { margin: 0; max-width: 40rem; }
.upprop-bild img { display: block; width: 100%; height: auto; }
.upprop-bild figcaption { margin-top: 12px; font-size: var(--t-liten); line-height: 1.5; color: var(--dampad); max-width: 46ch; }

/* Diagrammet: staplar i HTML, inte bild. Ser ut som en vanlig graf i en
   rapport — svart på papper, tunna staplar, liten text. Etiketten står i en
   egen kolumn så alla staplar börjar på samma linje; värdet högerställt i
   sin egen kolumn. Sverige skiljs bara med fetstil. */
.upprop-diagram { max-width: 30rem; } /* något smalare än högerspalten (7/9) */
.diagram-rubrik { margin: 0 0 14px; font-size: var(--t-fin); line-height: 1.4; color: var(--dampad); }
.stapel-lista {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 14px;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--black);
    align-items: center;
    font-size: var(--t-fin);
    line-height: 1.2;
}
.stapel { display: contents; }
.stapel dt { font-weight: 400; }
/* dd är ett eget raster: stapelfältet + värdet. Stapelns procent räknas mot
   fältet, inte hela kolumnen, så värdet får alltid plats — även på mobil. */
.stapel dd { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 3.5em; align-items: center; gap: 10px; min-width: 0; }
.stapel-bar { display: block; height: 10px; background: var(--black); }
.stapel-varde { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.stapel--markerad dt, .stapel--markerad .stapel-varde { font-weight: 700; }
.stapel--dampad dt, .stapel--dampad .stapel-varde { color: var(--dampad); }
.stapel--dampad .stapel-bar { background: var(--dampad); }
.upprop-diagram figcaption { font-size: var(--t-fin); line-height: 1.45; margin-top: 10px; }

/* Rubrikerna i vänsterspalten står på samma baslinje som första textraden */
.rad-vanster h2 { line-height: 1.12; }
.rad .upprop-rubrik { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Papper är utgångsläget
   Gult tre gånger: ordmärkets stapel, knappen, räknarkortet. Delningskortet
   är svart så att det gula bara står där sidan ber om något eller bevisar
   något. Svart på brandgult 9,77:1, papper på svart 13,9:1.
   ══════════════════════════════════════════════════════════════════════════ */

/* Korten är ljusgrå i alla lägen — gult finns bara på knappen. */

/* Allt på sidan delar vänsterkant med loggan. Ett band som bryter spalten
   ser inte brett ut — det ser felplacerat ut. Prövat, förkastat. */

/* ══════════════════════════════════════════════════════════════════════════
   Undertecknarlistan: full bredd, fyra kolumner, kollapsad
   De första namnen visas, sista raden tonar ut mot bottenfärgen och en
   knapp i mitten öppnar resten — som på Tillväxtuppropet.
   ══════════════════════════════════════════════════════════════════════════ */

#undertecknare h2 { margin-bottom: clamp(32px, 5vh, 56px); }
#undertecknare .sig-lista { margin-top: 0; }
.sig-lista--fler { border-top: 0; }
.sig-lista[hidden] { display: none; } /* display: grid vinner annars över hidden */

.sig-kollaps { position: relative; }
.sig-kollaps--stangd::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 140px;
    background: linear-gradient(to bottom, transparent, var(--papper));
    pointer-events: none;
}

.undertecknare-toggle-wrap { display: flex; justify-content: center; margin-top: clamp(28px, 4vh, 44px); }
.undertecknare-toggle { padding: 16px 32px; }

/* ══════════════════════════════════════════════════════════════════════════
   Svartvitt läge (body.accent--svartvit): inget gult alls
   Variablerna pekas om till svart, så allt som var gul grund blir svart
   grund. Det som stod svart PÅ gult måste därför bli papper — annars
   försvinner det. Loggan: svart märkning, stapeln inverterad till papper.
   ══════════════════════════════════════════════════════════════════════════ */
.accent--svartvit {
    --brandgul:      var(--black);
    --brandgul-mork: var(--black-2);
    --gul:           var(--black);
    --gul-mork:      var(--black-2);
}
.accent--svartvit ::selection { background: var(--black); color: var(--papper); }
.accent--svartvit .site-logo { color: var(--papper); }
.accent--svartvit .site-header .site-logo .logo-stapel { background: var(--papper); color: var(--black); }
.accent--svartvit .btn { color: var(--papper); }
.accent--svartvit .btn:hover { border-color: var(--black-2); }
.accent--svartvit .minirad,
.accent--svartvit .minirad a,
.accent--svartvit .krav,
.accent--svartvit .form-message.success,
.accent--svartvit .footer-avsandare--tom,
.accent--svartvit .policy-saknas,
.accent--svartvit .site-footer .footer-avsandare--tom { color: var(--papper); }
.accent--svartvit .minirad :focus-visible { outline-color: var(--papper); }
.accent--svartvit .platshallare-banner strong { color: var(--papper); }
.accent--svartvit .form-group input:focus { box-shadow: 0 2px 0 var(--black); }
/* Tuschpennan kan inte vara svart bakom svart text — den blir ett grått drag */
.accent--svartvit mark.tuschpenna::before { background: var(--kort); }
.accent--svartvit .schema-dag--lucka .schema-etikett { color: var(--black); }
.accent--svartvit .schema-dag--lucka .schema-cell { background: var(--black); color: var(--papper); }

/* ── Antal: gult band ──────────────────────────────────────────────────────
   Räknaren som ett helt gult band efter formuläret. Etikett till vänster,
   talet till höger, båda feta i sans. Det är sidans ena gula yta —
   loggan och listen är märkning, det här är beviset. */
.antal-band { padding: clamp(40px, 6vh, 72px) 0; }
/* Etikett och tal står på manifestets bredd (66rem, centrerat) och i dess
   två spalter med samma spaltmellanrum: etiketten börjar där vänsterspaltens
   text börjar, talet där högerspaltens text börjar. Bandet följer alltså
   sektionen ovanför, inte formuläret under. */
.antal-rad {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 5vw, 96px);
    align-items: center;
}
@media (max-width: 879px) {
    .antal-rad { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
}
.antal-rad { --etikett: clamp(1.75rem, 3.2vw, 3.25rem); }
.antal-etikett {
    margin: 0;
    font-family: var(--sans);
    font-weight: 700;
    font-size: var(--etikett);
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 12ch;
}
.antal-tal {
    margin: 0;
    font-family: var(--sans);
    font-weight: 700;
    /* Siffrornas versalhöjd = etikettens tre rader (7/9). Tre rader är
       tre rader inklusive stapel och underhäng; Archivos versalhöjd 0,71em. */
    font-size: calc(var(--etikett) * 4.15);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.band + .antal-band, .antal-band + .band { border-top: 0; } /* gult behöver ingen hårlinje */
.accent--svartvit .antal-band { color: var(--papper); }

/* ── Räknaren i toppen ─────────────────────────────────────────────────────
   Omgjord 9/9 efter design-mind. Beslutet: siffran är förstavyns huvudperson,
   manifestet är skälet. Härledningen, punkt för punkt:

   Talet står i sans och inte i seriffen — därför att siffran är bevis, inte
   röst; seriffen är sidans röst och bär rubriken.
   Talet och målet står som ett bråk intill varandra — därför att sambandet
   ska vara rumsligt, inte bara påstått. Tidigare låg målet 700px bort.
   Mätaren är aldrig bredare än talblocket — därför att den är en detalj av
   talet. En 730px lång linje med 33px gult säger att ingenting har hänt.
   Etiketten står under och i liten grad — därför att den förklarar, den
   argumenterar inte.
   Ingen ram, ingen platta — därför att avstånden räcker och sidan har inga
   kort någon annanstans. */
.raknare {
    /* Ett steg mer luft under ordmärket, så vänsterspalten slutar i samma
       höjd som manifestets knapp (9/9). */
    margin-top: var(--s-8);
    max-width: var(--marke-bredd);   /* exakt ordmärkets bredd */
}

.raknare-tal {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.12em;
    font-family: var(--sans);
    font-weight: 700;
    line-height: 0.88;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}
.raknare-antal { font-size: var(--t-tal); }
.raknare-av {
    font-size: var(--t-h2);
    font-weight: 600;
    color: var(--dampad);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* Skalan: talets understrykning, inte en behållare */
.matare {
    height: 5px;
    margin-top: var(--s-3);
    background: color-mix(in srgb, var(--black) 12%, transparent);
    overflow: hidden;
}
.matare-fyllnad {
    display: block;
    height: 100%;
    background: var(--brandgul);
    transition: width .6s ease-out;
}
@media (prefers-reduced-motion: reduce) { .matare-fyllnad { transition: none; } }

.raknare-etikett {
    margin: var(--s-2) 0 0;
    font-family: var(--sans);
    font-size: var(--t-etikett);
    font-weight: 500;
    line-height: 1.35;
    color: var(--dampad);
}

/* Ett steg mer an raknarens inre avstand: knappen ar en ny niva, inte nasta
   rad i samma block (10/9). */
.raknare-atgard { margin: var(--s-5) 0 0; }
.raknare-atgard .btn { text-decoration: none; }

/* ── Namnbandet ────────────────────────────────────────────────────────────
   En rad i full sidbredd som rullar långsamt. Tonar ut i kanterna så att
   raden inte ser avhuggen ut, står stilla vid hovring och rör sig inte alls
   för den som valt mindre rörelse. */
/* Bandet ligger högst upp på sidan, före sidhuvudet (9/9). Ingen överlinje
   mot fönsterkanten och ingen marginal — det är sidans första rad. */
.topband .namnband { margin-top: 0; border-top: 0; }

.namnband {
    margin-top: var(--s-7);
    min-width: 0;
    padding: 16px 0;
    border-top: 1px solid color-mix(in srgb, var(--black) 16%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--black) 16%, transparent);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.namnband-spar {
    display: flex;
    width: max-content;
    animation: namnband 90s linear infinite;
}
.namnband-grupp { flex: none; display: flex; }
.namnband:hover .namnband-spar { animation-play-state: paused; }
@keyframes namnband { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }

.namnband-post {
    flex: none;
    padding-right: 26px;
    font-family: var(--sans);
    font-size: var(--t-etikett);
    line-height: 1.4;
    color: var(--dampad);
    white-space: nowrap;
}
.namnband-post::after {
    content: '·';
    margin-left: 26px;
    color: color-mix(in srgb, var(--black) 30%, transparent);
}
.namnband-namn { color: var(--black); font-weight: 600; }
.namnband-titel::before { content: ', '; }

@media (prefers-reduced-motion: reduce) {
    .namnband-spar { animation: none; }
    .namnband { overflow-x: auto; }
}

/* ── Manifestet ────────────────────────────────────────────────────────────
   Ligger i uppropets högerspalt, bredvid rubriken. Ingen egen mellanrubrik:
   rubriken ÄR manifestets rubrik (8/9). Tidigare stod det i en egen centrerad
   sektion med h2 "Slopa inte karensen". */
.manifest-brev { max-width: none; }
.manifest-brev .brev-adressat { border-bottom: 0; }
.manifest-brev .brev-text > p {
    /* Tätare än Tillväxtuppropets 1,55/20px: hälften av styckena är enradiga,
       så mellanrummen stod för ~29 % av höjden. 1,5 och 0,7em håller ihop
       texten utan att de korta styckena läses som en lista (7/9). */
    font-size: var(--t-brod);
    line-height: 1.5;
    margin-bottom: 0.7em;
    text-wrap: pretty;
}

/* Första stycket fetare: det bär hela uppropets krav och läses först (11/9).
   600 och inte 700 — Archivo 700 mot 400 blir ett för stort hopp i 16px. */
.manifest-brev .brev-text > p:first-child { font-weight: 600; }

/* Slutraden: kursiv och dämpad — den signerar manifestet, den argumenterar
   inte (11/9). */
.manifest-brev .brev-text > p:last-child {
    font-style: italic;
    color: var(--dampad);
}

/* Kollapsat bakom en knapp, som undertecknarlistan. Kollapsen gäller bara där
   skript körs — utan JS står hela texten framme och knappen visas inte, i
   stället för en text som inte går att öppna. */
.manifest-kollaps { position: relative; }
.manifest-toggle-wrap { display: none; margin-top: var(--s-5); }
.manifest-toggle-wrap[hidden] { display: none; }
.manifest-toggle { padding: 12px 26px; font-size: var(--t-etikett); }
@media (scripting: enabled) {
    /* Visar cirka åtta stycken i stället för fyra, så att knappen hamnar
       på samma höjd som Skriv under i vänsterspalten — högerspalten slutade
       136px tidigare och det gjorde toppen tajt (9/9). */
    .manifest-kollaps--stangd { max-height: 21em; overflow: hidden; }
    .manifest-kollaps--stangd::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 7em;
        background: linear-gradient(to bottom, transparent, var(--papper));
        pointer-events: none;
    }
    .manifest-toggle-wrap { display: flex; }
}

/* Mobil (9/10): SN vill ha ordmärket och räknaren i full spaltbredd — de
   flesta läser i telefonen. Märkets bredd är 6,67 x graden och spalten är
   90vw (kanten är 5vw på var sida), alltså grad = 90/6,67 = 13,4vw. Räknaren
   ärver bredden ur --marke-bredd och följer med av sig själv. */
@media (max-width: 879px) {
    /* p { max-width: 60ch } kapade knappen till 619px vid 768 — räknarens
       åtgärdsrad är ingen löptext. */
    .raknare-atgard { max-width: none; }
    .raknare-atgard .btn { width: 100%; }
    .matare { height: 8px; }
}

/* Telefon: märket och räknaren fyller spalten. */
@media (max-width: 599px) {
    :root { --marke: 13.4vw; }
    .raknare-antal { font-size: 15vw; }
    .raknare-av    { font-size: 5.4vw; }

    /* Allt ett par steg högre upp: 96px luft över ordmärket är mycket när
       skärmen är 844px hög (10/9). */
    #uppropet { padding-top: var(--s-7); }

    /* Undertecknarlistan visar tre namn och tonar ut. En rad är uppmätt 85px
       på 390px vy — namn över titel. Knappen "Se hela listan" ligger direkt
       under och fäller ut resten. */
    .sig-kollaps--stangd { max-height: 258px; overflow: hidden; }
    .sig-kollaps--stangd::after { height: 96px; }
}

/* Surfplatta i stående läge: samma logik men dämpad — 13,4vw hade gett ett
   690px brett ordmärke vid 768. */
@media (min-width: 600px) and (max-width: 879px) {
    :root { --marke: 8vw; }
    .raknare-antal { font-size: 9vw; }
    .raknare-av    { font-size: 3.4vw; }
}