/* ==========================================================================
   dense-design · dense.css
   Bas + komponenter ovanpå tokens.css. Inga beroenden (ingen Pico, ingen Tailwind).
   Klassprefix: .dd-*   Kategori/status: .cat-*  (definieras i tokens.css)
   Ladda Inter själv:
   <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..800;1,14..32,400..700&display=swap" rel="stylesheet">
   ========================================================================== */

/* ---------- Bas ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--dd-fs-root); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--dd-font);
  font-size: var(--dd-fs-md);
  line-height: var(--dd-lh-body);
  font-weight: var(--dd-fw-regular);
  color: var(--dd-ink);
  background: var(--dd-paper);
  font-feature-settings: "cv11", "ss01";   /* Inter: enklare a/g – valfritt */
}
::selection { background: var(--dd-selection); }
img, svg, video { display: block; max-width: 100%; height: auto; }

/* Text */
p, ul, ol, h3 { margin: 0 0 var(--dd-para); }
ul { list-style: square; padding-left: 18px; }
ol { padding-left: 22px; }
li { margin: 0; }
li + li { margin-top: 0; }
b, strong { font-weight: var(--dd-fw-bold); }
em, i { font-style: italic; }
small, .dd-sm { font-size: var(--dd-fs-sm); line-height: var(--dd-lh-small); }
.dd-xs { font-size: var(--dd-fs-xs); line-height: var(--dd-lh-small); }
.dd-lg { font-size: var(--dd-fs-lg); line-height: var(--dd-lh-lead); }
.dd-xl { font-size: var(--dd-fs-xl); line-height: var(--dd-lh-tight); }
code, kbd, samp, .dd-code { font-family: var(--dd-font-mono); font-size: .95em; }
kbd { font-weight: var(--dd-fw-bold); background: var(--dd-ink); color: var(--dd-paper); padding: .05em .4em; border-radius: 4px; }
mark, .dd-hl { background: var(--dd-mark); color: inherit; padding: 0 .1em; }
hr { border: 0; border-top: var(--dd-border) solid var(--dd-rule); margin: var(--dd-s6) 0; }

/* Rubriker – h1 är sektionsrubrik (23/27, 700), h2 är posttitel (17/25, 600), h3 är underrad (17/25, 400, dämpad) */
h1, h2, h3, h4 { margin: 0; color: var(--dd-ink); }
h1 { font-size: var(--dd-fs-h1); line-height: var(--dd-lh-tight); font-weight: var(--dd-fw-heading); }
h2 { font-size: var(--dd-fs-md); line-height: var(--dd-lh-body); font-weight: var(--dd-fw-bold); }
h3 { font-size: var(--dd-fs-md); line-height: var(--dd-lh-body); font-weight: var(--dd-fw-regular); color: var(--dd-muted); }
h4 { font-size: var(--dd-fs-md); font-weight: var(--dd-fw-bold); }
.dd-display { font-size: var(--dd-fs-2xl); line-height: var(--dd-lh-display); font-weight: var(--dd-fw-heading); }
.dd-issue-no { font-size: var(--dd-fs-3xl); line-height: .94; font-weight: var(--dd-fw-display); }
.dd-issue-no span { color: var(--dd-masthead-muted); font-weight: var(--dd-fw-bold); }

/* Länkar: samma färg som texten, alltid understrukna. Rubriklänkar likaså. */
a { color: inherit; text-decoration: underline; text-underline-offset: .1rem; text-decoration-thickness: 1px; transition: color var(--dd-t-fast) var(--dd-ease), text-decoration-thickness var(--dd-t-fast) var(--dd-ease), text-underline-offset var(--dd-t-fast) var(--dd-ease); }
a:hover { color: var(--dd-ink-strong); text-decoration-thickness: 2px; text-underline-offset: .15rem; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--dd-border) solid var(--dd-ink); outline-offset: 2px; border-radius: 2px; }
a.dd-plain, .dd-plain a { text-decoration: none; }
a.dd-add { text-decoration: none; font-weight: var(--dd-fw-bold); }

/* Dämpad text – på tonad yta följer den kategorins dämpade färg */
.dd-muted, .dd-muted a, .dd-tint h3, .dd-tint .dd-muted { color: var(--dd-tint-muted); }
.dd-muted-alpha { color: var(--dd-muted-alpha); }
.dd-quote { color: var(--dd-tint-muted); }
.dd-intro .dd-quote, blockquote.dd-quote { padding-left: var(--dd-s12); padding-right: 0; margin-left: 0; }
.dd-intro p { padding-right: var(--dd-s12); font-size: var(--dd-fs-lg); line-height: var(--dd-lh-lead); }
.dd-intro .dd-quote { padding-right: 0; }
@media (max-width: 740px) {
  .dd-intro p, .dd-intro .dd-quote, blockquote.dd-quote { padding-left: 0; padding-right: 0; }
}

/* ---------- Layout ---------- */
.dd-page { max-width: var(--dd-measure); margin: 0 auto; }
.dd-pad { padding-left: var(--dd-gutter); padding-right: var(--dd-gutter); }
.dd-section { margin: var(--dd-page-rhythm) 0; }
@media (min-width: 768px)  { .dd-section { margin: 4rem 0; } }
@media (min-width: 1280px) { .dd-section { margin: 5rem 0; } }
.dd-spc { height: var(--dd-section-gap); }

/* Kolumner. Rastret är alltid 740px med 40px ytterkant och 20px per sida i mitten. */
.dd-cols { display: grid; gap: 0 calc(var(--dd-gutter-inner) * 2); }
.dd-cols-50 { grid-template-columns: 1fr 1fr; }
.dd-cols-40-60 { grid-template-columns: 2fr 3fr; }
.dd-cols-60-40 { grid-template-columns: 3fr 2fr; }
@media (max-width: 740px) { .dd-cols { grid-template-columns: 1fr; gap: var(--dd-s3) 0; } }

/* Sektionsrubrik med färgbalk – systemets signatur */
.dd-title {
  display: block;
  padding: var(--dd-s6) var(--dd-gutter) var(--dd-s6) 0;
}
.dd-title h1, h1.dd-title, .dd-title > * {
  display: block;
  padding-left: var(--dd-bar-gap);
  border-left: var(--dd-bar-w) solid var(--dd-accent);
  margin: 0;
}
@media (max-width: 740px) { .dd-title { padding-top: var(--dd-s2); padding-bottom: var(--dd-s2); } }

/* Webbvarianten: h3 med 1.4rem balk (hemsidans "What to expect") */
.dd-feature h3 {
  border-left: var(--dd-bar-w-web) solid var(--dd-accent);
  padding-left: var(--dd-bar-gap-web);
  margin-bottom: .5rem;
  color: var(--dd-ink);
  font-weight: var(--dd-fw-heading);
  font-size: 1.2rem;
  line-height: 1.2;
}
.dd-feature p { margin: 0; color: var(--dd-muted-alpha); }
.dd-feature { transition: all .1s var(--dd-ease); border-radius: 0; }
a.dd-feature, .dd-feature[href] { text-decoration: none; display: block; }
.dd-feature:hover { background: var(--dd-tint); box-shadow: var(--dd-halo); }
.dd-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (max-width: 575px) { .dd-features { grid-template-columns: 1fr; } }

/* Tonad yta (kategori eller status). Vita 5px-separatorer mellan staplade block. */
.dd-tint { background: var(--dd-tint); }
.dd-tint + .dd-tint { border-top: var(--dd-border-sep) solid var(--dd-paper); }
.dd-tint-block { background: var(--dd-tint); padding: var(--dd-s7) var(--dd-gutter) var(--dd-s4); }
.dd-tint-block > :last-child { margin-bottom: 0; }
.dd-panel { background: var(--dd-panel); }

/* Post: etikett (titel + underrad) vänster, brödtext höger. Nyhetsbrevets grundmodul. */
.dd-entry { display: grid; grid-template-columns: 2fr 3fr; gap: 0 calc(var(--dd-gutter-inner) * 2); padding: 0 var(--dd-gutter) var(--dd-s4); }
.dd-entry__label h2 { margin: 0; }
.dd-entry__label h3 { margin: 0; }
.dd-entry__body > :last-child { margin-bottom: 0; }
.dd-entry--stacked { display: block; }
.dd-entry--stacked .dd-entry__label { margin-bottom: var(--dd-para); }
@media (max-width: 740px) {
  .dd-entry { grid-template-columns: 1fr; gap: var(--dd-s3) 0; padding-left: var(--dd-gutter); padding-right: var(--dd-gutter); }
}

/* Media-post: titel på hel bredd, sedan brödtext | citat */
.dd-media { padding: 0 var(--dd-gutter) var(--dd-s4); }
.dd-media__head h2, .dd-media__head h3 { margin: 0; }
.dd-media__head { margin-bottom: var(--dd-para); }
.dd-media__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(var(--dd-gutter-inner) * 2); }
@media (max-width: 740px) { .dd-media__cols { grid-template-columns: 1fr; } }

/* Citatblock (Socials): stor text, sedan källa i fet och plattform dämpad */
.dd-quote-card { padding: var(--dd-s7) var(--dd-gutter) var(--dd-s4); }
.dd-quote-card .dd-lg { margin-bottom: var(--dd-para); }
.dd-quote-card h2 { margin: 0; }
.dd-quote-card h3 { margin: 0; }

/* Talblock (Numbers): stor siffra, sedan förklaring */
.dd-stat { padding: var(--dd-s7) 0 var(--dd-s4); }
.dd-stat .dd-xl { margin-bottom: var(--dd-para); font-weight: var(--dd-fw-regular); }
.dd-stat p:last-child { margin-bottom: 0; }

/* Kort med bild + text (Inspiration / Mood): bild 60 %, text 40 % */
.dd-card { display: grid; grid-template-columns: 3fr 2fr; gap: 0 var(--dd-gutter-inner); background: var(--dd-tint); }
.dd-card__media img + img { margin-top: 0; }
.dd-card__media.dd-lined { border: var(--dd-border-sep) solid var(--dd-tint); border-right: 0; }   /* vita bilder får ram i tonen */
.dd-card__body { padding: var(--dd-s7) var(--dd-gutter) var(--dd-s4) 0; }
.dd-card__body > :last-child { margin-bottom: 0; }
.dd-card + .dd-card { border-top: var(--dd-border-sep) solid var(--dd-paper); }
.dd-card--text-first { grid-template-columns: 2fr 3fr; }
.dd-card--text-first .dd-card__body { padding-left: var(--dd-gutter); padding-right: 0; }
@media (max-width: 740px) {
  .dd-card, .dd-card--text-first { grid-template-columns: 1fr; }
  .dd-card__body, .dd-card--text-first .dd-card__body { padding: var(--dd-s4) var(--dd-gutter); }
  .dd-card__media.dd-lined { border-right: var(--dd-border-sep) solid var(--dd-tint); border-bottom: 0; }
}

/* Lista med tjocka ljusa linjer (Classifieds) */
.dd-list { margin: 0; padding: 0; list-style: none; }
.dd-list > li { padding: 0 0 var(--dd-para); margin: 0; }
.dd-list > li + li { border-top: var(--dd-border-sep) solid var(--dd-panel); padding-top: var(--dd-para); }
.dd-list > li > :last-child { margin-bottom: 0; }

/* ---------- Masthead (nummer-huvud) ----------
   Hela ytan i numrets accentfärg; citat vänster (40 %), konstverk höger (60 %);
   logotypen hänger över nederkanten in på det vita. */
.dd-masthead { background: var(--dd-masthead); color: var(--dd-masthead-ink); }
.dd-masthead__inner { max-width: var(--dd-measure); margin: 0 auto; padding-top: var(--dd-s4); }
.dd-masthead__cols { display: grid; grid-template-columns: 2fr 3fr; gap: 0 calc(var(--dd-gutter-inner) * 2); padding: var(--dd-s4) var(--dd-gutter) 0; }
.dd-masthead__cols .dd-muted, .dd-masthead .dd-muted { color: var(--dd-masthead-muted); }
.dd-masthead a:hover { color: var(--dd-masthead-ink); }
.dd-masthead__art { text-align: right; }
.dd-masthead__art img { border: 4px solid #000; margin-bottom: var(--dd-para); display: inline-block; }
.dd-masthead__logo { padding-left: var(--dd-gutter); line-height: 0; }
.dd-masthead__logo img, .dd-masthead__logo svg { width: 111px; height: auto; display: block; position: relative; top: 26px; }   /* hänger 26px över kanten */
.dd-masthead ~ .dd-page { padding-top: calc(var(--dd-s8) + 26px); }
@media (max-width: 740px) { .dd-masthead__cols { grid-template-columns: 1fr; gap: var(--dd-s3) 0; } .dd-masthead__art { text-align: left; } }

/* ---------- Knappar ----------
   Mörka, 2px-stilen från webben (radius .5rem, vikt 600). Hover = ren svart.
   Nyhetsbrevets variant: radius 10px, vikt 500, 7/15/8/15 padding. */
.dd-btn {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  font: inherit; font-weight: var(--dd-fw-bold); line-height: 1.5;
  color: var(--dd-paper); background: var(--dd-ink);
  border: var(--dd-border) solid var(--dd-ink); border-radius: var(--dd-radius);
  padding: var(--dd-field-py) 1rem; margin: .1rem 0;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: none; transition: background var(--dd-t-fast) var(--dd-ease), border-color var(--dd-t-fast) var(--dd-ease), color var(--dd-t-fast) var(--dd-ease);
}
.dd-btn:hover { background: var(--dd-ink-strong); border-color: var(--dd-ink-strong); color: var(--dd-paper); }
.dd-btn:focus-visible { outline: var(--dd-border) solid var(--dd-ink); outline-offset: 2px; }
.dd-btn:active { transform: translateY(1px); }
.dd-btn--outline { background: var(--dd-paper); color: var(--dd-ink); }
.dd-btn--outline:hover { background: var(--dd-ink); color: var(--dd-paper); }
.dd-btn--mail { border-radius: var(--dd-radius-btn); font-weight: var(--dd-fw-medium); padding: 7px 15px 8px; border: 0; }
.dd-btn--lg { padding: 10px 20px 11px; }
.dd-btn--sm { padding: calc(var(--dd-field-py) * .3) calc(var(--dd-field-px) * .5); font-size: 90%; }
.dd-btn--action { background: var(--dd-btn-action); border-color: var(--dd-btn-action); color: var(--dd-ink); }
.dd-btn--yes { background: var(--dd-btn-yes); border-color: var(--dd-btn-yes); color: var(--dd-ink); }
.dd-btn--no { background: var(--dd-btn-no); border-color: var(--dd-btn-no); color: var(--dd-ink); }
.dd-btn--action:hover, .dd-btn--yes:hover, .dd-btn--no:hover { filter: brightness(.94); background: inherit; color: var(--dd-ink); }
.dd-btn--accent { background: var(--dd-accent); border-color: var(--dd-accent); color: #fff; }
.dd-btn[disabled], .dd-btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }

/* Rund ikonknapp (dela-länk, kollaps-pil) */
.dd-btn--round {
  width: 1.6rem; height: 1.6rem; padding: 0; border-radius: var(--dd-radius-round);
  font-size: .8rem;
}
.dd-btn--round.dd-btn--outline { width: 2rem; height: 2rem; }
.dd-btn--round.dd-btn--lg { width: 2.4rem; height: 2.4rem; font-size: 1rem; }

/* Inaktiv ikon/pil (t.ex. "nästa" när det inte finns nästa) */
.dd-inactive { color: var(--dd-muted-alpha); cursor: default; pointer-events: none; }

/* ---------- Formulär ---------- */
.dd-label, label { display: block; font-size: var(--dd-fs-sm); font-weight: var(--dd-fw-bold); margin-bottom: .3rem; }
.dd-input, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]), textarea, select {
  width: 100%; font: inherit; color: var(--dd-ink);
  background: var(--dd-field-bg);
  border: var(--dd-border) solid var(--dd-field-border); border-radius: var(--dd-radius);
  padding: var(--dd-field-py) var(--dd-field-px);
  transition: border-color var(--dd-t-fast) var(--dd-ease), box-shadow var(--dd-t-fast) var(--dd-ease);
  box-shadow: none; outline: 0;
}
.dd-input::placeholder, input::placeholder, textarea::placeholder { color: var(--dd-field-placeholder); }
.dd-input:focus, input:focus, textarea:focus, select:focus { border-color: var(--dd-field-border-active); }
.dd-input[aria-invalid="true"], input[aria-invalid="true"] { border-color: var(--dd-error); }
.dd-input[aria-invalid="false"], input[aria-invalid="false"] { border-color: var(--dd-success); }
textarea { min-height: 6rem; resize: vertical; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23313131' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.2rem; }
input[type=checkbox], input[type=radio] { accent-color: var(--dd-ink); width: 1.1em; height: 1.1em; margin-right: .4em; vertical-align: -.15em; }
.dd-check { display: inline-flex; align-items: center; font-weight: var(--dd-fw-regular); font-size: var(--dd-fs-md); }

/* Sammanfogad grupp: fält + knapp (hemsidans prenumerationsfält) */
.dd-group { display: flex; width: 100%; }
.dd-group > .dd-input, .dd-group > input { border-radius: var(--dd-radius) 0 0 var(--dd-radius); border-right: 0; min-width: 0; }
.dd-group > .dd-btn { border-radius: 0 var(--dd-radius) var(--dd-radius) 0; margin: 0; padding-left: 1rem; padding-right: 1rem; flex-shrink: 0; }

/* Valbara alternativ (Friends-tiers): fyllda etiketter där valet tonas ut */
.dd-options { display: grid; gap: var(--dd-s1); }
.dd-option { display: flex; align-items: center; gap: .5rem; padding: .5rem; cursor: pointer; font-weight: var(--dd-fw-bold); background: var(--dd-tint); transition: transform var(--dd-t-fast) var(--dd-ease), opacity .2s; }
.dd-option:hover { transform: scale(1.02); }
.dd-option input { display: none; }
.dd-option[aria-checked="true"], .dd-option:has(input:checked) { outline: var(--dd-border) solid var(--dd-ink); }
.dd-options:has(input:checked) .dd-option:not(:has(input:checked)) { opacity: .6; background: var(--dd-rule); }

/* ---------- Ram, pill, lista (arkivbläddraren) ---------- */
.dd-frame { border: var(--dd-border) solid var(--dd-ink); border-radius: var(--dd-radius); overflow: hidden; background: var(--dd-paper); display: flex; flex-direction: column; min-height: 0; }
.dd-frame__head { display: flex; align-items: center; border-bottom: var(--dd-border) solid var(--dd-ink); background: var(--dd-panel); }
.dd-frame__head strong { margin-right: auto; padding-left: 1rem; }
.dd-frame__head .dd-icon { display: inline-flex; align-items: center; justify-content: center; padding: .4rem .5rem; min-width: 2.4rem; cursor: pointer; border-left: var(--dd-border) solid var(--dd-ink); transition: background var(--dd-t-fast) var(--dd-ease), color var(--dd-t-fast) var(--dd-ease); }
.dd-frame__head .dd-icon:hover { background: var(--dd-ink-strong); color: var(--dd-paper); }
.dd-frame__head .dd-icon.dd-inactive { color: var(--dd-muted-alpha); background: var(--dd-panel); }
.dd-frame__body { flex: 1; min-height: 0; overflow: auto; background: var(--dd-panel); }

.dd-nav-list { margin: 0; padding: 0; list-style: none; font-size: var(--dd-fs-sm); line-height: var(--dd-lh-small); }
.dd-nav-list li { position: relative; padding: .7rem 1rem; border-bottom: var(--dd-border) solid var(--dd-rule); cursor: pointer; transition: background var(--dd-t-fast) var(--dd-ease), padding-left var(--dd-t-fast) var(--dd-ease); }
.dd-nav-list li:last-child { border-bottom: 0; }
.dd-nav-list li:hover { background: var(--dd-paper); }
.dd-nav-list li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--dd-ink); transition: width var(--dd-t-fast) var(--dd-ease); }
.dd-nav-list li.is-active, .dd-nav-list li[aria-current] { background: var(--dd-mark); padding-left: calc(1rem + 4px); }
.dd-nav-list li.is-active::before, .dd-nav-list li[aria-current]::before { width: 4px; }
.dd-nav-list li:focus-visible { outline-offset: -2px; border-radius: 0; z-index: 1; }
.dd-nav-list li strong { display: block; }
.dd-nav-list li span { font-size: 80%; }
.dd-nav-list a { text-decoration: none; display: block; }

/* Titelpill: vit, 2px ram, rund dela-knapp i; används flytande över innehåll */
.dd-pill { display: inline-flex; align-items: center; height: 2.4rem; padding-left: 1rem; background: var(--dd-paper); color: var(--dd-ink); border: var(--dd-border) solid var(--dd-ink); border-radius: var(--dd-radius); font-size: var(--dd-fs-sm); white-space: nowrap; }
.dd-pill .dd-btn--round { margin-left: .9rem; margin-right: .4rem; }
.dd-pill .dd-pill__nav { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 100%; border-left: var(--dd-border) solid var(--dd-ink); margin-left: .4rem; }
.dd-pill--float { position: absolute; top: 1rem; right: 1rem; z-index: 11; }

/* ---------- Tabell ---------- */
.dd-table { width: 100%; border-collapse: collapse; font-size: var(--dd-fs-sm); line-height: var(--dd-lh-small); }
.dd-table th { text-align: left; font-weight: var(--dd-fw-bold); padding: .6rem .8rem; border-bottom: var(--dd-border) solid var(--dd-ink); }
.dd-table td { padding: .6rem .8rem; border-bottom: var(--dd-border) solid var(--dd-rule); vertical-align: top; }
.dd-table tr:last-child td { border-bottom: 0; }
.dd-table tbody tr { transition: background var(--dd-t-fast) var(--dd-ease); }
.dd-table tbody tr:hover { background: var(--dd-panel); }
.dd-table tbody tr[tabindex] { cursor: pointer; }
.dd-table tr.is-active td, .dd-table tr[aria-current] td { background: var(--dd-mark); }
.dd-table tr.is-active td:first-child, .dd-table tr[aria-current] td:first-child { box-shadow: inset 4px 0 0 var(--dd-ink); }
.dd-table tbody tr:focus-visible { outline-offset: -2px; border-radius: 0; }
.dd-table .dd-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Meddelande (#sys-message): vit, 5px ram i statusfärg, fet text i samma färg ---------- */
.dd-alert { position: relative; background: var(--dd-paper); color: var(--dd-accent); border: var(--dd-border-alert) solid var(--dd-accent); padding: .5rem .8rem; font-weight: var(--dd-fw-bold); margin: 0 0 var(--dd-para); }
.dd-alert a { color: inherit; }
.dd-alert p { margin: 0 0 .4rem; }
.dd-alert p:last-child { margin: 0; }
.dd-alert--float { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); width: 90%; max-width: 500px; z-index: 1000; }
.dd-alert__close { position: absolute; top: -.7rem; right: -.7rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--dd-paper); color: var(--dd-accent); border: 0; font: inherit; font-weight: 700; cursor: pointer; line-height: 1; }

/* ---------- Resultat/stapel (poll): bokstavsruta i accent, stapel på 50 % opacitet bakom svaret ---------- */
.dd-result { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: stretch; background: var(--dd-paper); margin: 0 0 .3rem; }
.dd-result__key { z-index: 2; display: flex; align-items: center; justify-content: center; width: 2rem; padding: .2rem; background: var(--dd-accent); color: #fff; font-weight: var(--dd-fw-bold); text-transform: uppercase; }
.dd-result__label { z-index: 20; display: flex; align-items: center; padding: .4rem .6rem; font-weight: var(--dd-fw-bold); }
.dd-result__label em { margin-left: auto; padding-left: 8px; font-style: normal; font-weight: var(--dd-fw-regular); opacity: .5; }
.dd-result__bar { position: absolute; top: 0; left: 0; height: 100%; z-index: 1; opacity: .5; background: var(--dd-accent); padding-left: 2rem; box-sizing: border-box; }

/* Mätare (friends-drive): 2px ram i accent, fylld del i accent med vit text */
.dd-meter { position: relative; background: var(--dd-paper); border: var(--dd-border) solid var(--dd-accent); color: var(--dd-accent); }
.dd-meter__fill { position: absolute; inset: 0 auto 0 0; background: var(--dd-accent); color: #fff; padding: .5rem 0; text-indent: .8rem; white-space: nowrap; overflow: hidden; }
.dd-meter__text { display: block; padding: .5rem .8rem; white-space: nowrap; }

/* Numrerad regel (p.rule): mörk cirkel med siffra */
.dd-rule-item { display: flex; align-items: flex-start; gap: .8rem; }
.dd-rule-item strong { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--dd-ink); color: var(--dd-panel); }

/* Citatkort på hemsidan: tonad yta, centrerad text, stjärnor överhängande */
.dd-testimonial { position: relative; background: var(--dd-info-tint); padding: 1.5rem 2rem; text-align: center; line-height: 1.4; margin: 0; }
.dd-testimonial .dd-stars { position: absolute; top: -.5rem; left: 50%; transform: translateX(-50%); color: var(--dd-info); font-size: 90%; letter-spacing: .1em; }

/* Skärmbild/foto med tunn grå ram (hemsidans staplade förhandsvisningar) */
.dd-shot { border: var(--dd-border) solid var(--dd-rule); background: var(--dd-paper); }
.dd-avatar { width: 5rem; height: 5rem; border-radius: 50%; border: var(--dd-border) solid var(--dd-ink); object-fit: cover; }
.dd-dashed { border: 4px dashed var(--dd-ink); }

/* ---------- Appskal: sidopanel på panelgrå + innehåll med 2px kant ---------- */
.dd-app { display: grid; grid-template-columns: 1fr; min-height: 100dvh; background: var(--dd-panel); }
.dd-app__nav { display: flex; flex-direction: column; padding: 1rem; gap: 1rem; min-height: 0; }
.dd-app__main { position: relative; background: var(--dd-paper); border-top: var(--dd-border) solid var(--dd-ink); min-height: 0; overflow: auto; }
@media (min-width: 1024px) {
  .dd-app { grid-template-columns: minmax(18rem, 1fr) 2fr; height: 100dvh; }
  .dd-app--wide { grid-template-columns: minmax(18rem, 1fr) 3fr; }
  .dd-app__nav { padding: 1.5rem; height: 100dvh; }
  .dd-app__main { border-top: 0; border-left: var(--dd-border) solid var(--dd-ink); height: 100dvh; }
  .dd-app--collapsed { grid-template-columns: 4rem 1fr; }
}
@media (min-width: 1280px) { .dd-app__nav { padding: 2rem; } }
.dd-app__brand { display: grid; grid-template-columns: auto 1fr; gap: 1rem 2rem; align-items: start; }
.dd-app__brand img, .dd-app__brand svg { max-width: 4rem; opacity: .8; transition: opacity var(--dd-t-fast) var(--dd-ease); }
.dd-app__brand img:hover, .dd-app__brand svg:hover { opacity: 1; }
.dd-app__brand .dd-sm { align-self: end; }
.dd-app__actions { display: flex; gap: 5px; }
.dd-app__actions .dd-btn { flex: 1; }

/* Kollaps-flik på panelkanten */
.dd-collapse { position: absolute; bottom: 1rem; right: -1.8rem; width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center; padding-right: .2rem; background: var(--dd-ink); color: var(--dd-paper); border-radius: 0 50% 50% 0; cursor: pointer; z-index: 99; }
.dd-collapse:hover { background: var(--dd-ink-strong); }

/* ---------- Flikar: 2px linje under raden, aktiv flik bär en 2px bläckbalk ---------- */
.dd-tabs { display: flex; gap: 1.2rem; border-bottom: var(--dd-border) solid var(--dd-rule); margin-bottom: var(--dd-para); overflow-x: auto; }
.dd-tabs button, .dd-tabs a { position: relative; background: none; border: 0; font: inherit; font-weight: var(--dd-fw-bold); color: var(--dd-muted); padding: .5rem 0 .6rem; margin-bottom: calc(var(--dd-border) * -1); cursor: pointer; text-decoration: none; white-space: nowrap; transition: color var(--dd-t-fast) var(--dd-ease); }
.dd-tabs button::after, .dd-tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--dd-border); background: var(--dd-ink); transform: scaleX(0); transform-origin: left; transition: transform var(--dd-t-med) var(--dd-ease-out); }
.dd-tabs button:hover, .dd-tabs a:hover { color: var(--dd-ink); }
.dd-tabs [aria-selected="true"], .dd-tabs .is-active { color: var(--dd-ink); }
.dd-tabs [aria-selected="true"]::after, .dd-tabs .is-active::after { transform: scaleX(1); }
.dd-tabpanel[hidden] { display: none; }
.dd-tabpanel { animation: dd-fade var(--dd-t-med) var(--dd-ease-out); }

/* Detaljer/summary: markör som roterar */
details.dd-details { border-top: var(--dd-border) solid var(--dd-rule); }
details.dd-details:last-of-type { border-bottom: var(--dd-border) solid var(--dd-rule); }
details.dd-details summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .8rem 0; font-weight: var(--dd-fw-bold); }
details.dd-details summary::-webkit-details-marker { display: none; }
details.dd-details summary::before { content: ""; width: .5rem; height: .5rem; border-right: 2px solid var(--dd-ink); border-bottom: 2px solid var(--dd-ink); transform: rotate(-45deg); transition: transform var(--dd-t-fast) var(--dd-ease); flex-shrink: 0; }
details.dd-details[open] summary::before { transform: rotate(45deg); }
details.dd-details > :not(summary) { padding-bottom: .8rem; }
details.dd-details[open] > :not(summary) { animation: dd-fade var(--dd-t-med) var(--dd-ease-out); }

/* ---------- Webbplats: sidhuvud, hero, staplade skärmbilder, fördelar, sidfot ---------- */
.dd-container { max-width: 72rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px) { .dd-container { padding-left: 2rem; padding-right: 2rem; } }
.dd-site-header { display: flex; align-items: center; gap: 1.5rem; padding: 1rem 0; }
.dd-site-header .dd-logo { display: flex; align-items: end; width: 3.5rem; opacity: .8; transition: opacity var(--dd-t-fast) var(--dd-ease); text-decoration: none; }
.dd-site-header .dd-logo:hover { opacity: 1; }
.dd-site-header nav { display: flex; gap: 1.2rem; margin-left: auto; font-weight: var(--dd-fw-bold); }
.dd-site-header nav a { text-decoration: none; }
.dd-site-header nav a:hover, .dd-site-header nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
@media (min-width: 1024px) { .dd-site-header .dd-logo { width: 4rem; } }

.dd-hero { background: var(--dd-tint); padding: 1rem 0 0; transition: background 1s var(--dd-ease); }
.dd-hero__inner { display: grid; gap: 2rem; align-items: end; }
.dd-hero__copy { display: flex; flex-direction: column; justify-content: space-between; min-height: 24rem; padding-bottom: 1.5rem; text-align: center; }
.dd-hero__copy h1 { font-size: var(--dd-fs-2xl); line-height: var(--dd-lh-display); font-weight: var(--dd-fw-heading); margin: 1.5rem 0 1rem; }
.dd-hero__copy .dd-lg { margin-bottom: 1.5rem; }
.dd-hero__meta { color: var(--dd-muted-alpha); font-size: var(--dd-fs-sm); line-height: 1.6; margin: 0; }
.dd-hero__meta a { color: inherit; }
@media (min-width: 768px) {
  .dd-hero { padding-top: 2rem; }
  .dd-hero__inner { grid-template-columns: 1fr 1fr; }
  .dd-hero__copy { text-align: left; min-height: 30rem; }
  .dd-hero__copy h1 { font-size: 2.5rem; }
}
@media (min-width: 1280px) { .dd-hero { padding-top: 3rem; } .dd-hero__copy h1 { font-size: 2.65rem; } }

/* Staplade skärmbilder: fem lager förskjutna 5 %, främsta överst */
.dd-shots { position: relative; width: 100%; height: 24rem; overflow: hidden; }
.dd-shots img, .dd-shots .dd-shot { position: absolute; bottom: -2px; width: 80%; background: var(--dd-paper); border: var(--dd-border) solid var(--dd-rule); transition: top var(--dd-t-slow) var(--dd-ease), right var(--dd-t-slow) var(--dd-ease), opacity .15s var(--dd-ease); }
.dd-shots > :nth-child(1) { z-index: 10; top: 20%; right: 20%; }
.dd-shots > :nth-child(2) { z-index: 20; top: 15%; right: 15%; }
.dd-shots > :nth-child(3) { z-index: 30; top: 10%; right: 10%; }
.dd-shots > :nth-child(4) { z-index: 40; top: 5%; right: 5%; }
.dd-shots > :nth-child(5) { z-index: 50; top: 0; right: 0; }
.dd-shots .dd-btn { position: absolute; z-index: 60; left: 50%; bottom: 1rem; transform: translateX(-50%); transition: bottom .2s var(--dd-ease), background var(--dd-t-fast) var(--dd-ease), color var(--dd-t-fast) var(--dd-ease); }
.dd-shots:hover .dd-btn { bottom: 2rem; }
@media (min-width: 768px) { .dd-shots { height: 30rem; } }
@media (min-width: 1024px) { .dd-shots { height: 34rem; } }

.dd-benefits { display: grid; gap: 2rem; text-align: center; }
.dd-benefits .dd-benefit i, .dd-benefits .dd-benefit svg { font-size: 200%; width: 2.2rem; height: 2.2rem; margin: 0 auto; }
.dd-benefits .dd-benefit h3 { color: var(--dd-ink); font-weight: var(--dd-fw-heading); font-size: 1.2rem; margin: 1rem 0; }
.dd-benefits .dd-benefit p { margin: 0; }
@media (min-width: 576px) { .dd-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dd-benefits { grid-template-columns: repeat(4, 1fr); } }

.dd-site-footer { padding: 0; }
.dd-site-footer .dd-signup { background: var(--dd-panel); padding: 2rem 0 1rem; }
.dd-site-footer .dd-signup h2 { margin: 0 0 1rem; font-size: 1.75rem; line-height: 1.15; font-weight: var(--dd-fw-heading); }
.dd-site-footer .dd-fnav { margin: 3rem 0 2rem; text-align: center; }
.dd-site-footer .dd-fnav p { margin: 0 0 .5rem; }
.dd-site-footer .dd-fnav p a { padding: 0 .3rem; display: inline-block; }
.dd-site-footer .dd-fnav .dd-socials { font-size: 130%; }

/* ---------- Rörelse ----------
   Allt är kort (.15–.3s) och går åt ett håll: in, uppåt, tydligare. Inget studsar, inget loopar. */
@keyframes dd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dd-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dd-drop { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.dd-alert { animation: dd-rise var(--dd-t-med) var(--dd-ease-out); }
.dd-alert--float { animation: dd-drop var(--dd-t-med) var(--dd-ease-out); }
.dd-alert.is-closing { opacity: 0; transform: translateY(-4px); transition: opacity var(--dd-t-fast) var(--dd-ease), transform var(--dd-t-fast) var(--dd-ease); }
.dd-pill--float { animation: dd-rise var(--dd-t-med) var(--dd-ease-out); }
.dd-masthead__art img, .dd-masthead__art > div { animation: dd-fade var(--dd-t-slow) var(--dd-ease-out); }

/* Reveal vid scroll: kräver dense.js; utan JS syns allt direkt */
html.dd-js .dd-reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--dd-ease-out), transform .5s var(--dd-ease-out); }
html.dd-js .dd-reveal.is-visible { opacity: 1; transform: none; }
html.dd-js .dd-reveal-group > .is-visible:nth-child(2) { transition-delay: .06s; }
html.dd-js .dd-reveal-group > .is-visible:nth-child(3) { transition-delay: .12s; }
html.dd-js .dd-reveal-group > .is-visible:nth-child(4) { transition-delay: .18s; }

/* Temabyte: mjuk övergång, bara under själva bytet (klass sätts av dense.js) */
html.dd-theme-anim, html.dd-theme-anim body, html.dd-theme-anim * { transition: background-color var(--dd-t-med) var(--dd-ease), color var(--dd-t-med) var(--dd-ease), border-color var(--dd-t-med) var(--dd-ease) !important; }

/* Halo-hover på valfritt tonat kort */
.dd-hover-halo { transition: background var(--dd-t-fast) var(--dd-ease), box-shadow var(--dd-t-fast) var(--dd-ease); }
.dd-hover-halo:hover { background: var(--dd-tint); box-shadow: var(--dd-halo); }

/* ---------- Laddning ---------- */
[aria-busy="true"]:not(input):not(select):not(textarea)::before {
  content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -.15em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: dd-spin 1s linear infinite; opacity: .5;
}
@keyframes dd-spin { to { transform: rotate(360deg); } }

/* ---------- Sidfot: panelgrå, 60/40, mörk knapp till höger ---------- */
.dd-footer { background: var(--dd-panel); padding: var(--dd-s8) 0 var(--dd-s4); border-bottom: var(--dd-border-sep) solid var(--dd-paper); }
.dd-footer .dd-cols { padding: 0 var(--dd-gutter); }
.dd-footer p { margin-bottom: var(--dd-para); }
.dd-footer::after { content: ""; display: block; height: var(--dd-s5); background: var(--dd-masthead); margin-top: var(--dd-s4); }
@media (max-width: 740px) { .dd-footer { padding: var(--dd-s4) 0 var(--dd-s1); } }

/* ---------- Verktygsklasser (5px-raster) ---------- */
.dd-center { text-align: center; } .dd-right { text-align: right; } .dd-left { text-align: left; }
.dd-nowrap { white-space: nowrap; }
.dd-bold { font-weight: var(--dd-fw-bold); } .dd-normal { font-weight: var(--dd-fw-regular); }
.dd-red { color: var(--dd-error) !important; }
.dd-ink { color: var(--dd-ink) !important; }
.dd-accent { color: var(--dd-accent); }
.dd-bg-accent { background: var(--dd-accent); color: #fff; }
.dd-mob-hide { } @media (max-width: 740px) { .dd-mob-hide { display: none !important; } }
.mt0{margin-top:0}.mt5{margin-top:5px}.mt10{margin-top:10px}.mt15{margin-top:15px}.mt20{margin-top:20px}.mt30{margin-top:30px}.mt40{margin-top:40px}.mt60{margin-top:60px}
.mb0{margin-bottom:0}.mb5{margin-bottom:5px}.mb10{margin-bottom:10px}.mb15{margin-bottom:15px}.mb20{margin-bottom:20px}.mb30{margin-bottom:30px}.mb40{margin-bottom:40px}.mb60{margin-bottom:60px}
.pt0{padding-top:0}.pt5{padding-top:5px}.pt10{padding-top:10px}.pt15{padding-top:15px}.pt20{padding-top:20px}.pt30{padding-top:30px}.pt35{padding-top:35px}.pt40{padding-top:40px}
.pb0{padding-bottom:0}.pb5{padding-bottom:5px}.pb10{padding-bottom:10px}.pb15{padding-bottom:15px}.pb20{padding-bottom:20px}.pb30{padding-bottom:30px}.pb40{padding-bottom:40px}
.pl0{padding-left:0}.pl20{padding-left:20px}.pl40{padding-left:40px}.pr0{padding-right:0}.pr20{padding-right:20px}.pr40{padding-right:40px}
.dd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}