/* Moralpanik – löpsedeln och facit.
   Paniken: löpsedelsgult, svart och larmrött med stora versaler. Facit: lugnt tidningspapper, serif och grönt. */

:root {
  --bg: #f3eee3;
  --bg-2: #e9e2d2;
  --card: #fbf8f1;
  --ink: #141210;
  --ink-2: #3f3a32;
  --muted: #6e665a;
  --line: #d3c9b5;
  --accent: #e10600;
  --accent-ink: #ffffff;
  --accent-soft: #fde0d9;
  --accent-deep: #a30400;
  --lemon: #ffd400;
  --mint: #2f6b4f;
  --licorice: #141210;
  --bill: #ffd400;
  --bill-ink: #141210;
  --facit: #2f6b4f;
  --gold: #e8c14a;
  --solid: #141210;      /* knappar, aktiva chips: svart tryck på ljust papper … */
  --on-solid: #ffd400;
  --band: #141210;
  --dots: radial-gradient(rgba(20, 18, 16, .13) 1px, transparent 1.4px);
  --shadow: 0 1px 0 rgba(20, 18, 16, .08);
  --shadow-lg: 4px 4px 0 var(--ink);
  --radius: 6px;
  --radius-sm: 4px;
  --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141210; --bg-2: #1e1b17; --card: #1b1815; --ink: #f3eee3; --ink-2: #d5ccbb; --muted: #a1978a;
    --line: #3b352d; --accent: #ff3b2e; --accent-ink: #141210; --accent-soft: #3a1512; --accent-deep: #ff7a6e;
    --facit: #6fbf95; --dots: radial-gradient(rgba(20, 18, 16, .16) 1px, transparent 1.4px);
    --shadow-lg: 4px 4px 0 #000;
    --solid: #ffd400; --on-solid: #141210; --band: #ffd400;
  }
}
:root[data-theme="dark"] {
  --bg: #141210; --bg-2: #1e1b17; --card: #1b1815; --ink: #f3eee3; --ink-2: #d5ccbb; --muted: #a1978a;
  --line: #3b352d; --accent: #ff3b2e; --accent-ink: #141210; --accent-soft: #3a1512; --accent-deep: #ff7a6e;
  --facit: #6fbf95; --shadow-lg: 4px 4px 0 #000;
  --solid: #ffd400; --on-solid: #141210; --band: #ffd400;
}

body { font-size: 18px; }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: .005em; line-height: 1.02; }
h1, h2 { text-transform: uppercase; }
h3, h4 { font-family: var(--font-body); font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
.mono, .eyebrow, .byline, .kicker, .badge, .hero-stats dt, .pr-cols, .meter-text { font-family: var(--font-mono); }
.mono { font-size: .78rem; letter-spacing: .04em; margin: 0; }
.eyebrow { font-weight: 500; font-size: .74rem; letter-spacing: .12em; color: var(--accent); }

/* Knappar: svart tryck, rött när man pekar */
.btn { border-radius: var(--radius); background: var(--solid); border-color: var(--solid); color: var(--on-solid); box-shadow: none; font-family: var(--font-mono); font-weight: 500; letter-spacing: .02em; }
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-ghost:hover { background: var(--solid); color: var(--on-solid); border-color: var(--solid); }
.btn-light { background: var(--bill); border-color: var(--bill); color: var(--ink); }
.btn-light:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* Sidhuvud */
.site-header { background: var(--bg); border-bottom: 3px solid var(--ink); box-shadow: none; }
.logo-mark { border-radius: 4px; }
.logo-word { font: 400 1.7rem/1 var(--font-display); font-style: normal; text-transform: uppercase; letter-spacing: .01em; }
.logo-word::after { content: '!'; color: var(--accent); }
.site-nav a:not(.btn) { font-family: var(--font-mono); font-size: .82rem; border-radius: var(--radius-sm); }
.site-nav a[aria-current="page"]:not(.btn) { background: var(--bill); color: var(--ink); }
.nav-cta { background: var(--accent); border-color: var(--accent); color: #fff; }
.nav-cta:hover { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }

/* Chips, märken och kort */
.chip { border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: .82rem; border-color: var(--ink); background: transparent; }
.chip.is-on { background: var(--solid); color: var(--on-solid); border-color: var(--solid); }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.badge { border-radius: 3px; }
.badge-reference { background: var(--ink); color: var(--bill); }
.badge-approved { background: color-mix(in srgb, var(--facit) 16%, var(--card)); color: var(--facit); }
.badge-bulk { background: #f2dfb6; color: #6b4a00; }
.badge-fallen { background: var(--accent); color: #fff; }
.badge-award { background: var(--gold); color: var(--ink); }
.bag-card, .post-card, .people-ratings, .sort-card, .share, .vote-promo, .builder-bag-sticky { border-radius: var(--radius); border: 2px solid var(--ink); box-shadow: none; }
.bag-card:hover, .post-card:hover, .sort-card:hover { box-shadow: var(--shadow-lg); transform: translate(-2px, -2px); border-color: var(--ink); }
.vote { border-radius: var(--radius-sm); border: 2px solid var(--ink); font-family: var(--font-mono); font-size: .86rem; }
.vote svg { stroke: var(--accent); }
.vote.is-voted { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.vote.is-voted svg { fill: var(--accent); stroke: var(--accent); }
.vote .vote-count { border-radius: 3px; }
.toast { border-radius: var(--radius); background: var(--solid); color: var(--on-solid); font-family: var(--font-mono); }

/* Stämplar */
.stamp { display: inline-block; border: 2.5px solid currentColor; border-radius: 4px; padding: 2px 8px 1px; font: 400 .95rem/1.15 var(--font-display); text-transform: uppercase; letter-spacing: .03em; transform: rotate(-5deg); background: color-mix(in srgb, var(--card) 70%, transparent); }
.stamp-big { font-size: 1.35rem; padding: 3px 12px 2px; border-width: 3px; }
.stamp-approved { color: var(--facit); }
.stamp-reference { color: var(--ink); transform: rotate(4deg); }
.stamp-bulk { color: #9a6a00; }
.stamp-fallen { color: var(--accent); }
.over { display: inline-block; font: 500 .78rem/1 var(--font-mono); padding: 5px 8px; border-radius: 3px; white-space: nowrap; }
.over-plus { background: var(--solid); color: var(--on-solid); }
.over-minus { background: var(--facit); color: #fff; }
.over-even { background: var(--bg-2); color: var(--ink-2); }

/* Mätare: fem segment */
.meter-seg { display: inline-flex; gap: 3px; vertical-align: -2px; }
.meter-seg i { width: 14px; height: 11px; border: 1.5px solid currentColor; opacity: .35; }
.meter-seg i.on { opacity: 1; }
.meter-panic { color: var(--accent); }
.meter-panic i.on { background: var(--accent); }
.meter-real { color: var(--facit); }
.meter-real i.on { background: var(--facit); }
.meter-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Löpsedeln mot facit */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border: 3px solid var(--ink); background: var(--card); }
.split-bill { background-color: var(--bill); background-image: var(--dots); background-size: 6px 6px; color: var(--bill-ink); padding: clamp(20px, 4vw, 40px); text-decoration: none; display: block; }
a.split-bill:hover { color: var(--bill-ink); }
.split-bill .mono { font-weight: 500; }
.bill-head { font: 400 clamp(2.2rem, 6vw, 4.6rem)/.95 var(--font-display); text-transform: uppercase; margin: 12px 0 10px; color: var(--bill-ink); overflow-wrap: anywhere; }
h2.bill-head { font-size: clamp(2rem, 5vw, 3.6rem); }
.bill-name { font: italic 500 1.1rem/1.3 var(--font-body); margin: 0 0 14px; }
.split-bill .meter-line { margin-top: 18px; }
.split-facit { padding: clamp(20px, 4vw, 36px); border-left: 3px solid var(--ink); display: flex; flex-direction: column; gap: 14px; }
.facit-label { color: var(--facit); font-weight: 500; }
.facit-verdict { font: 500 clamp(1.15rem, 2vw, 1.4rem)/1.45 var(--font-body); margin: 0; }
.facit-stamps { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: auto; padding-top: 8px; }
.split-facit .link-arrow { font-family: var(--font-mono); font-size: .85rem; }

/* En paniks sida */
.panic { padding: clamp(28px, 5vw, 56px) 0 24px; }
.panic-crumbs a { text-decoration: none; }
.panic-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: clamp(24px, 5vw, 64px); margin-top: clamp(28px, 5vw, 56px); align-items: start; }
.panic-photo { margin: 0 0 28px; border: 2px solid var(--ink); background: var(--card); }
.panic-photo img { width: 100%; max-height: 520px; object-fit: contain; background: var(--bg-2); filter: grayscale(.15) contrast(1.02); }
.panic-photo .photo-credit { padding: 6px 10px; margin: 0; text-align: left; font-family: var(--font-mono); }
.panic-main .prose h2 { font-size: 1.6rem; margin-top: 0; }
.panic-main section + section { margin-top: 36px; }
.facit-box { background: var(--card); border-left: 6px solid var(--facit); padding: 22px 26px; }
.facit-box h2 { color: var(--facit); }
.sources { font-size: .95rem; }
.sources h2 { font-size: 1.1rem; }
.sources ul, .sources ol { padding-left: 1.2em; }
.sources li { margin-bottom: .4em; overflow-wrap: anywhere; }
.panic-side { position: sticky; top: 96px; }
.panic-side .people-ratings { margin-top: 0; }
@media (max-width: 860px) {
  .split, .panic-body { grid-template-columns: 1fr; }
  .split-facit { border-left: 0; border-top: 3px solid var(--ink); }
  .panic-side { position: static; }
}

/* Folkets mätare */
.meters .pr-row { grid-template-columns: 128px minmax(0, 1fr) auto; }
.meters .pr-label { font-family: var(--font-mono); font-size: .8rem; }
.meters .pr-avg { display: flex; align-items: center; gap: 6px; }
.seg-mine { gap: 3px; }
.seg-btn { width: 18px; height: 16px; padding: 0; border: 1.5px solid var(--muted); background: transparent; cursor: pointer; border-radius: 2px; }
.seg-btn:hover { transform: none; }
.pr-panik .seg-btn.is-on, .pr-panik .seg-mine:hover .seg-btn { background: var(--accent); border-color: var(--accent); }
.pr-verklighet .seg-btn.is-on, .pr-verklighet .seg-mine:hover .seg-btn { background: var(--facit); border-color: var(--facit); }
.seg-mine .seg-btn:hover ~ .seg-btn { background: transparent !important; border-color: var(--muted) !important; }
.meters .pr-summary strong { font: 400 1.6rem var(--font-display); }

/* Arkivets kort */
.sort-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.panic-card { background: var(--card); }
.panic-card .sort-photo { aspect-ratio: 4 / 3; background: var(--bg-2); border-bottom: 2px solid var(--ink); }
.panic-card .sort-photo img { filter: grayscale(.2) contrast(1.03); }
.mini-bill { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; background-color: var(--bill); background-image: var(--dots); background-size: 5px 5px; }
.mini-bill span { font: 400 1.5rem/1 var(--font-display); text-transform: uppercase; color: var(--bill-ink); text-align: center; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.status-fallen .mini-bill span { color: var(--accent); }
.panic-card .stamp { position: absolute; bottom: 10px; right: 10px; font-size: .82rem; }
.gold-tag { position: absolute; top: 10px; left: 10px; background: var(--gold); color: var(--ink); font: 500 .7rem/1 var(--font-mono); padding: 5px 7px; border-radius: 3px; }
.pc-meta { font: 500 .72rem/1.3 var(--font-mono); color: var(--muted); letter-spacing: .03em; }
.panic-card .sort-text strong { font: 650 1.12rem/1.2 var(--font-body); margin-top: 3px; }
.pc-head { font: 400 .78rem/1.25 var(--font-display); text-transform: uppercase; color: var(--ink-2); letter-spacing: .02em; margin-top: 4px; }
.pc-foot { margin-top: 8px; }
.pc-foot:empty { display: none; }
.sort-tools select, .sort-tools input { border-radius: var(--radius-sm); border: 2px solid var(--ink); font-family: var(--font-body); }
.sort-intro { border: 2px solid var(--ink); border-radius: var(--radius); }
.cat-head h2 { font-size: 1.8rem; }

/* Startsidan */
.mp-hero { background-color: var(--bill); background-image: var(--dots); background-size: 7px 7px; color: var(--bill-ink); border-bottom: 3px solid var(--ink); padding: clamp(40px, 7vw, 96px) 0 clamp(36px, 6vw, 72px); }
.mp-hero .hero-kicker { font-weight: 500; }
.hero-bill { font: 400 clamp(3rem, 10vw, 7.4rem)/.9 var(--font-display); text-transform: uppercase; margin: 14px 0 18px; max-width: 14ch; color: var(--bill-ink); }
.hero-bill::after { content: '!'; color: var(--accent); }
.hero-lead { max-width: 60ch; font-size: 1.2rem; color: var(--bill-ink); }
.mp-hero .btn-ghost { border-color: var(--bill-ink); color: var(--bill-ink); }
.mp-hero .btn-ghost:hover { background: var(--bill-ink); color: var(--bill); }
.mp-hero .hero-stats dt { color: color-mix(in srgb, var(--bill-ink) 70%, transparent); }
.mp-hero .hero-stats dd { font: 400 2.4rem/1 var(--font-display); color: var(--bill-ink); }
.status-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.status-tile { display: grid; gap: 8px; padding: 18px 18px 16px; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--card); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.status-tile:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); color: var(--ink); }
.status-tile .stamp { justify-self: start; }
.status-tile b { font: 400 2.6rem/1 var(--font-display); }
.status-tile span:last-child { color: var(--ink-2); font-size: .95rem; }
.decades { display: flex; flex-wrap: wrap; gap: 10px; }
.decade { display: grid; padding: 12px 18px; border: 2px solid var(--ink); border-radius: var(--radius); text-decoration: none; min-width: 120px; background: var(--card); }
.decade b { font: 400 1.9rem/1 var(--font-display); }
.decade small { font: 500 .72rem var(--font-mono); color: var(--muted); }
.decade:hover { background: var(--solid); color: var(--on-solid); }
.decade:hover small { color: var(--on-solid); }
.mp-manifest { background: var(--card); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.cta-band { background: var(--band); color: var(--on-solid); }
.cta-band::after { display: none; }
.cta-band h2 { color: var(--on-solid); }
.cta-band p { color: var(--on-solid); opacity: .85; }
.cta-band .btn-light { background: var(--on-solid); border-color: var(--on-solid); color: var(--band); }

/* Folkets löp (påsar) */
.bag-card-visual, .bag-detail-visual { background: none; }
.bag-card-visual { padding: 18px 16% 8px; }
.newsbill-svg { filter: drop-shadow(3px 3px 0 var(--ink)); }
.bag-card:hover .bag-svg { transform: rotate(-1.5deg); }
.bag-card .rank { border-radius: 3px; font-family: var(--font-display); }
.builder-visual { width: 70%; }
.meter { border-radius: 2px; border: 1.5px solid var(--ink); }
.meter-fill { background: var(--accent); border-radius: 0; }
.slot { border-radius: var(--radius-sm); }
.pick { border-radius: var(--radius-sm); }
.pick .candy-blob { border-radius: 3px; background: var(--bill); box-shadow: inset 0 0 0 1.5px var(--ink); }
.slot-grams { font-family: var(--font-mono); font-weight: 500; }

/* Guldlöpet */
.gold-bill { background-color: var(--gold); background-image: var(--dots); background-size: 6px 6px; border: 3px solid var(--ink); padding: clamp(22px, 4vw, 40px); color: var(--ink); }
.gold-bill a { text-decoration: none; }
.gold-bill .award-citation { border-left-color: var(--ink); color: var(--ink); }
.award-banner { background: var(--gold); color: var(--ink); border-radius: var(--radius); border: 2px solid var(--ink); }

/* Panik i löptext */
.panic-feature { display: grid; grid-template-columns: 1fr; border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.pf-bill { display: grid; gap: 6px; padding: 16px; background-color: var(--bill); background-image: var(--dots); background-size: 5px 5px; color: var(--bill-ink); text-decoration: none; }
.pf-bill strong { font: 400 1.6rem/1 var(--font-display); text-transform: uppercase; }
.pf-facit { padding: 14px 16px 16px; display: grid; gap: 6px; }
.pf-facit .mono { color: var(--facit); }
.pf-facit h3 { margin: 0; font-size: 1.1rem; }
.pf-facit p { margin: 0; font-size: .95rem; }

/* Sidfot och mörka sidhuvuden */
.site-footer { background: #141210; color: #d5ccbb; border-top: 3px solid var(--bill); }
.site-footer a:hover { color: var(--bill); }
.page-hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin-top: .3em; } /* luft för ringen i Å och prickarna i Ä, Ö */
.page-hero-dark { background: var(--ink); color: var(--bg); }
.page-hero-dark .eyebrow { color: var(--bill); }
.fallen-box { background: var(--card); color: var(--ink); border-left: 6px solid var(--facit); border-radius: 0; }
.fallen-box h2 { color: var(--facit); }
.prose blockquote { border-left: 4px solid var(--accent); }
.share-native { background: var(--accent); }

/* På löpsedelsgult är trycket alltid svart, även i mörkt läge */
.mp-hero .btn, .split-bill .btn { background: #141210; border-color: #141210; color: #ffd400; }
.mp-hero .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.mp-hero .btn-ghost { background: transparent; color: #141210; border-color: #141210; }
.mp-hero .btn-ghost:hover { background: #141210; color: #ffd400; }
.mp-hero .hero-kicker, .mp-hero .hero-stats dd, .mp-hero .hero-stats dt { color: #141210; }
.mp-hero .lead a { color: #141210; }

/* ---------- Insändaren: urklipp ur tidningen ---------- */
:root { --paper: #f6efdc; --paper-ink: #1c1a16; --paper-ink-2: #4a443a; --paper-line: #cfc3a6; --thread: #a8201a; --linen: #efe6d2; }
/* Urklippen och bonaderna är föremål: de förblir ljust papper och linne även i mörkt läge */
.clip, .bonad { color: var(--paper-ink); }

.clip-grid { columns: 3 300px; column-gap: 28px; }
.clip-wrap { break-inside: avoid; margin: 0 0 34px; display: grid; gap: 12px; }
.clip {
  position: relative; background: var(--paper); padding: 26px 24px 22px; transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 3px 4px 0 rgba(20, 18, 16, .85);
  background-image: radial-gradient(circle at 18% 12%, rgba(160, 120, 40, .07), transparent 40%), radial-gradient(circle at 85% 90%, rgba(160, 120, 40, .09), transparent 45%);
}
/* Tejpbiten */
.clip::before { content: ''; position: absolute; top: -9px; left: 50%; width: 96px; height: 22px; margin-left: -48px; background: rgba(255, 255, 255, .55); transform: rotate(2.5deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, .04); }
.clip-mast { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 500 .66rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-ink-2); border-bottom: 2px solid var(--paper-ink); padding-bottom: 6px; margin-bottom: 12px; }
.clip-mast span:first-child { color: var(--paper-ink); font-weight: 600; }
.clip-title { font: 750 clamp(1.35rem, 2.4vw, 1.65rem)/1.08 var(--font-body); letter-spacing: -.015em; text-transform: none; margin: 0 0 10px; color: var(--paper-ink); }
h1.clip-title { font-size: clamp(1.9rem, 4.6vw, 2.8rem); }
.clip-title a { color: inherit; text-decoration: none; }
.clip-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.clip-body { font: 400 1rem/1.5 var(--font-body); color: var(--paper-ink); text-align: justify; hyphens: auto; }
.clip-full .clip-body { font-size: 1.12rem; }
.clip-body p { margin: 0 0 .7em; }
.clip-body p:first-child::first-letter { font-weight: 700; font-size: 1.15em; }
.clip-more { display: inline-block; font: 500 .8rem var(--font-mono); color: var(--paper-ink); margin-bottom: 4px; }
.clip-sign { margin: 10px 0 0; text-align: right; font: italic 600 1rem/1.3 var(--font-body); color: var(--paper-ink); }
.clip-sign::before { content: ''; display: block; width: 48px; height: 1px; background: var(--paper-line); margin: 0 0 8px auto; }
.clip-full { padding: clamp(28px, 5vw, 48px) clamp(22px, 5vw, 52px) clamp(26px, 4vw, 40px); }
.clip-full::before { width: 130px; margin-left: -65px; height: 26px; }

/* Facit från framtiden: rödpenna i marginalen */
.facit-note { margin: 18px -4px 2px; padding: 12px 14px 10px; border: 2.5px solid var(--thread); border-radius: 3px; transform: rotate(-1.4deg); color: var(--thread); background: rgba(255, 255, 255, .35); }
.facit-note-year { font: 400 1.05rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.facit-note p { margin: 6px 0 4px; font: 500 .98rem/1.4 var(--font-body); color: var(--paper-ink); }
.facit-note small { font: 500 .72rem var(--font-mono); color: var(--thread); }

/* Läsarnas dom */
.react { display: grid; gap: 8px; }
.react-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.react-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: 500 .84rem/1.1 var(--font-mono); cursor: pointer; transition: transform .12s; }
.react-btn b { font-weight: 600; background: var(--bg-2); border-radius: 3px; padding: 3px 6px; min-width: 1.6em; text-align: center; }
.react-btn:hover { transform: translateY(-1px); border-color: var(--accent); }
.react-agree.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.react-laugh.is-on { background: var(--facit); border-color: var(--facit); color: #fff; }
.react-me.is-on { background: var(--thread); border-color: var(--thread); color: #fff; }
.react-btn.is-on b { background: rgba(255, 255, 255, .22); color: inherit; }
.react-btn.pop { animation: react-pop .35s ease-out; }
@keyframes react-pop { 40% { transform: scale(1.08); } }
.react.is-busy { opacity: .6; pointer-events: none; }
.react-bar { height: 6px; background: var(--facit); border-radius: 2px; overflow: hidden; }
.react-bar i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.react-verdict { margin: 0; font: 500 .74rem/1.35 var(--font-mono); color: var(--muted); }
.clip-facit-link { font: 500 .8rem var(--font-mono); color: var(--ink-2); justify-self: start; }

/* Skriv en insändare */
.letters-hero .lead, .mormor-hero .lead { max-width: 64ch; }
.write-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 56px); align-items: start; }
.write-form { display: grid; gap: 14px; padding: clamp(20px, 3vw, 28px); background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius); }
.write-form h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.write-form input, .write-form textarea, .write-form select, .facit-form input, .facit-form textarea { border-radius: var(--radius-sm); border: 2px solid var(--ink); font-family: var(--font-body); font-size: 1.02rem; }
.field-row.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sign-row { display: flex; gap: 6px; }
.sign-row input { flex: 1; min-width: 0; }
.btn-dice { flex: none; width: 46px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--bill); font-size: 1.2rem; cursor: pointer; }
.btn-dice:hover { transform: rotate(-12deg); }
.write-preview { position: sticky; top: 96px; display: grid; gap: 10px; }
.write-preview .mono { color: var(--muted); }
.mormor-form { max-width: 760px; }
@media (max-width: 860px) {
  .write-grid { grid-template-columns: 1fr; }
  .write-preview { position: static; order: -1; }
  .write-preview .clip-body p:nth-child(n+2) { display: none; }
}
@media (max-width: 520px) { .field-row.two { grid-template-columns: 1fr; } }

/* En insändares sida */
.letter-detail { padding-top: clamp(28px, 5vw, 56px); }
.letter-detail-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.letter-detail-clip { display: grid; gap: 18px; }
.facits h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .2em; }
.facit-list { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; }
.facit-item { border-left: 4px solid var(--facit); background: var(--card); padding: 12px 14px; }
.facit-item.is-top { border-left-color: var(--thread); }
.facit-item.is-new { animation: react-pop .4s; }
.facit-item p { margin: 0 0 8px; font: 500 1.02rem/1.45 var(--font-body); }
.facit-item .empty, .facit-list .empty { color: var(--muted); }
.facit-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 500 .76rem var(--font-mono); color: var(--muted); }
.facit-vote { display: inline-flex; gap: 6px; align-items: center; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); border-radius: var(--radius-sm); padding: 4px 8px; font: 500 .76rem var(--font-mono); cursor: pointer; }
.facit-vote.is-on { background: var(--thread); border-color: var(--thread); color: #fff; }
.facit-form { display: grid; gap: 12px; padding: 18px; border: 2px dashed var(--ink); border-radius: var(--radius); }
@media (max-width: 860px) { .letter-detail-grid { grid-template-columns: 1fr; } }

/* ---------- Mormor sa…: bonader på väggen ---------- */
.bonad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px 24px; align-items: start; }
.bonad-wrap { display: grid; gap: 12px; }
.bonad {
  position: relative; margin: 0; padding: 30px 26px 26px; text-align: center; transform: rotate(var(--tilt, 0deg));
  background-color: var(--linen);
  background-image: repeating-linear-gradient(0deg, rgba(120, 100, 60, .07) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(120, 100, 60, .07) 0 1px, transparent 1px 4px);
  box-shadow: 0 0 0 7px var(--linen), 0 0 0 9px #8b6a3e, 4px 6px 0 9px rgba(20, 18, 16, .75);
  border-radius: 2px; margin: 9px;
}
/* Korsstygnsramen */
.bonad::before { content: ''; position: absolute; inset: 10px; border: 2px dashed var(--thread); pointer-events: none; }
.bonad-orn { display: block; color: var(--thread); font-size: .95rem; letter-spacing: .5em; margin-bottom: 8px; opacity: .9; }
.bonad-quote { margin: 0; }
.bonad-quote p, .bonad-quote h1 { margin: 0; font: italic 650 clamp(1.15rem, 2vw, 1.35rem)/1.3 var(--font-body); color: var(--thread); text-transform: none; letter-spacing: 0; }
.bonad-quote h1 { font-size: clamp(1.7rem, 4.4vw, 2.6rem); }
.bonad-quote a { color: inherit; text-decoration: none; }
.bonad-quote a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bonad-who { margin-top: 12px; font: 500 .72rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-ink-2); }
.bonad-stamp { position: absolute; right: -8px; bottom: -14px; }
.bonad-stamp .stamp { font-size: .8rem; background: var(--paper); }
.bonad-full { padding: clamp(40px, 7vw, 72px) clamp(28px, 6vw, 60px); }
.bonad-full .bonad-orn { font-size: 1.3rem; }
.bonad-full .bonad-who { font-size: .85rem; }
.bonad-full .bonad-stamp { right: 6px; bottom: -18px; }
.bonad-full .bonad-stamp .stamp { font-size: 1.2rem; }
.bonad-below { display: grid; gap: 10px; padding: 8px 4px 0; }
.bonad-facit { margin: 0; font-size: .95rem; line-height: 1.45; }
.bonad-facit b { font: 500 .74rem var(--font-mono); text-transform: uppercase; color: var(--facit); letter-spacing: .06em; }
.bonad-story { margin: 0; font: italic .95rem/1.45 var(--font-body); color: var(--ink-2); }
.stamp-unchecked { color: var(--muted); border-style: dashed; }
.section-mormor { background: var(--bg-2); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.mormor-detail { padding-top: clamp(28px, 5vw, 56px); }
.mormor-detail-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.mormor-detail-text { display: grid; gap: 16px; }
.mormor-detail-text .facit-stamps { margin: 0; padding: 0; }
.mormor-story { margin: 0; padding: 12px 16px; border-left: 4px solid var(--thread); background: var(--card); font-style: italic; }
.mormor-story p { margin: 0; }
@media (max-width: 860px) { .mormor-detail-grid { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .clip { box-shadow: 3px 4px 0 #000; }
  :root:not([data-theme="light"]) .bonad { box-shadow: 0 0 0 7px var(--linen), 0 0 0 9px #8b6a3e, 4px 6px 0 9px #000; }
}
:root[data-theme="dark"] .clip { box-shadow: 3px 4px 0 #000; }