/* Samma färger, kort och knappar som anvandare (och verktygsmallen mall.php på huvudsajten), så att hela sajten ser likadan ut.
   Obs: definiera inte --secondary/--light/--dark här, de används av huvudsajtens header och footer. */
:root {
  --bg: #f4f7f6;
  --surface: #ffffff;
  --text: #333333;
  --muted: #64748b;
  --line: #e2e8f0;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: #eff6ff;
  --v-dark: #0f172a;
  --accent: #c2410c;
  --ok: #166534;
  --ok-soft: #e4f4e9;
  --err: #991b1b;
  --err-soft: #fbe9e9;
  --warn-soft: #fff4de;
  --radius: 12px;
  --shadow: 0 4px 15px rgba(0, 0, 0, .08);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .6rem; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .9rem; }
small, .muted { color: var(--muted); }
code { background: #eef1f4; padding: .1em .35em; border-radius: 4px; font-size: .92em; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.vac { overflow-wrap: break-word; }

/* Artikelportalens menyrad under huvudsajtens header */
.ap-bar { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 1.2rem; color: var(--primary); text-decoration: none; }
.main-nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.main-nav a { text-decoration: none; color: var(--text); font-weight: 500; }
.main-nav a:hover { color: var(--primary); }
.nav-user { color: var(--muted); font-size: .92rem; }
.inline-form { display: inline; margin: 0; }
.link-button { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--text); cursor: pointer; }
.link-button:hover { color: var(--primary); }

main.wrap { padding-top: 1.5rem; padding-bottom: 3rem; min-height: 60vh; }

/* Sidfot */
.ap-foot { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .9rem; padding: 1rem 0; }
.ap-foot .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.foot-links { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Profilbilder (lagras av anvandare) */
.avatar { border-radius: 50%; object-fit: cover; vertical-align: middle; background: #e2e8f0; }
.avatar-ph { display: inline-block; text-align: center; color: #fff; font-weight: 700; }
.avatar-c0 { background: #2563eb; } .avatar-c1 { background: #0f766e; } .avatar-c2 { background: #b45309; } .avatar-c3 { background: #7c3aed; }
.avatar-c4 { background: #be123c; } .avatar-c5 { background: #0369a1; } .avatar-c6 { background: #4d7c0f; } .avatar-c7 { background: #475569; }
.who .avatar { margin-right: .35rem; }

/* Kort */
.vcard { background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--primary); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; }
.vcard.narrow { max-width: 620px; margin-left: auto; margin-right: auto; }
.vcard h2 { margin-bottom: .75rem; }
.empty { color: var(--muted); padding: 1rem 0; }

/* Meddelanden */
.flash { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid transparent; }
.flash-success { background: var(--ok-soft); color: var(--ok); border-color: #b7e0c4; }
.flash-error { background: var(--err-soft); color: var(--err); border-color: #f0c2c2; }
.flash-info { background: var(--primary-soft); color: var(--primary-dark); border-color: #bfdde4; }

/* Formulär */
.form label { display: block; font-weight: 600; margin-bottom: .9rem; }
.form label small { display: block; font-weight: 400; margin-top: .2rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input:not([type]), select, textarea {
  width: 100%;
  font: inherit;
  padding: .6rem .75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  margin-top: .3rem;
}
.form input, .form select, .form textarea { font-weight: 400; } /* annars ärvs etikettens fetstil */
textarea { resize: vertical; min-height: 6rem; }
input:focus, select:focus, textarea:focus, .vbtn:focus-visible, .link-button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .35);
  outline-offset: 1px;
}
.check { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400 !important; }
.check input { width: auto; margin-top: .3rem; }
.hp { position: absolute; left: -9999px; height: 0; width: 0; overflow: hidden; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Knappar */
.vbtn {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--primary); color: #fff; border: 1px solid var(--primary);
  padding: .6rem 1.1rem; border-radius: 6px; text-decoration: none;
}
.vbtn:hover { background: var(--primary-dark); color: #fff; }
.vbtn-secondary { background: #fff; color: var(--primary); }
.vbtn-secondary:hover { background: var(--primary-soft); color: var(--primary-dark); }
.vbtn-danger { background: #fff; color: var(--err); border-color: #e0a9a9; }
.vbtn-danger:hover { background: var(--err-soft); color: var(--err); }
.vbtn-small { padding: .3rem .65rem; font-size: .88rem; }
.vbtn-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* Märken (statusar) */
.vbadge { display: inline-block; font-size: .78rem; font-weight: 600; padding: .12rem .55rem; border-radius: 999px; background: #eceff3; color: #3d4b5b; }
.vbadge-published { background: var(--ok-soft); color: var(--ok); }
.vbadge-review, .vbadge-submitted { background: var(--warn-soft); color: #7a5b00; }
.vbadge-unpublished, .vbadge-rejected { background: var(--err-soft); color: var(--err); }
.vbadge-in_progress, .vbadge-returned { background: var(--primary-soft); color: var(--primary-dark); }
.vbadge-scheduled { background: #ede9fe; color: #5b21b6; }
.schedule-box { border: 1px solid var(--line); border-radius: 8px; padding: .7rem 1rem .9rem; margin: 0 0 1rem; }
.schedule-box legend { font-weight: 600; padding: 0 .3rem; font-size: 1rem; }
.schedule-box .check { margin-bottom: .4rem; align-items: center; flex-wrap: wrap; }
.schedule-box input[type=datetime-local] { width: auto; margin: 0 0 0 .3rem; }
.meta { color: var(--muted); font-size: .9rem; display: flex; gap: .5rem 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }

/* Bara för skärmläsare och tangentbord (t.ex. formulärets standardknapp) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Artikeleditorn */
.article-form { max-width: 980px; }
.editor { margin-bottom: 1.25rem; }
.editor > label { font-weight: 600; display: block; margin-bottom: .3rem; }
.editor-toolbar { display: flex; flex-wrap: wrap; gap: .3rem; padding: .4rem; background: #f1f5f9; border: 1px solid #ccc; border-bottom: 0; border-radius: 6px 6px 0 0; }
.editor-toolbar button { font: inherit; font-size: .88rem; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--text); cursor: pointer; }
.editor-toolbar button:hover { background: var(--primary-soft); border-color: var(--primary); }
.editor-toolbar:not([hidden]) + textarea { margin-top: 0; border-radius: 0 0 6px 6px; }
.editor textarea { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .95rem; line-height: 1.5; min-height: 22rem; }
.format-help { margin-top: .5rem; font-size: .92rem; }
.format-help summary { cursor: pointer; color: var(--primary); }
.format-help ul { margin: .4rem 0 0; }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.image-item { display: flex; flex-direction: column; gap: .35rem; font-size: .88rem; }
.image-item img { width: 100%; height: 140px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.image-pick { grid-column: 1 / -1; }
.form-actions { margin-top: .5rem; }
.review-note { border-top-color: var(--accent); }
.danger-zone { display: flex; gap: .6rem; flex-wrap: wrap; border-top-color: var(--err); }
.preview { border-top-color: var(--accent); }

/* Artikeltext (förhandsgranskning nu, publika artikelsidan i steg 3) */
.article { max-width: 760px; }
.article > h1 { font-size: 2rem; margin-bottom: .5rem; }
.article .lead { font-size: 1.15rem; color: #475569; }
.article-body { font-size: 1.05rem; line-height: 1.7; }
.article-body h2 { font-size: 1.4rem; margin: 1.8rem 0 .6rem; }
.article-body h3 { font-size: 1.15rem; margin: 1.4rem 0 .5rem; }
.article-body ul, .article-body ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.article-body li { margin-bottom: .3rem; }
.article-body blockquote { margin: 1.2rem 0; padding: .6rem 1rem; border-left: 4px solid var(--primary); background: var(--primary-soft); border-radius: 0 8px 8px 0; }
.article-body blockquote p { margin: 0; }
.article-image { margin: 1.4rem 0; }
.article-image img { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.article-image figcaption { font-size: .9rem; color: var(--muted); margin-top: .4rem; }
.video { position: relative; aspect-ratio: 16 / 9; max-width: 760px; margin: 1.4rem 0; background: #000; border-radius: var(--radius); overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Personal */
.subnav { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.subnav a { padding: .45rem .9rem; border-radius: 999px; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); font-weight: 500; }
.subnav a.active, .subnav a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filters a { padding: .3rem .8rem; border-radius: 999px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: .92rem; }
.filters a.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); font-weight: 600; }
.pager { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }

/* Tabeller */
table.data { width: 100%; border-collapse: collapse; background: var(--surface); }
table.data th, table.data td { text-align: left; padding: .65rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
table.data th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
table.data tr:hover td { background: #fafbfc; }
.table-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1rem; }
.mail-body { white-space: pre-wrap; font: inherit; font-size: .9rem; background: #f7f8fa; border-radius: 6px; padding: .6rem .8rem; margin: .5rem 0 0; }

/* Medlemmarnas utkast */
.member-draft { border-top-color: var(--accent); }
.draft-note { margin-top: .4rem; padding: .4rem .6rem; background: var(--warn-soft); border-radius: 6px; font-size: .92rem; }
.anon-check { margin: 0 0 1rem; padding: .8rem 1rem; background: var(--primary-soft); border-radius: 8px; }
.write-cta { border-top-color: var(--accent); }
.write-cta p { font-size: .95rem; }

/* Publika sidor */
/* Den blå listen överst på alla sidor: samma som .hero-tools i huvudsajtens mall.php – hela bredden, direkt under
   headern, med sidans rubrik. Länkraden (.ap-bar) sitter direkt under den. */
.ap-hero { background: linear-gradient(135deg, var(--v-dark), var(--primary)); color: #fff; padding: 2.5rem 5%; text-align: center; }
.ap-hero h1 { font-size: 2.2rem; margin: 0 0 .6rem; color: #fff; }
.ap-hero p { font-size: 1.05rem; opacity: .95; max-width: 700px; margin: 0 auto; line-height: 1.4; }
.ap-hero .search-form { max-width: 560px; margin: 1.2rem auto 0; }
/* Samma list i liten skala i förhandsgranskningen, så att den ser ut som den publicerade sidan */
.ap-hero-preview { border-radius: var(--radius); padding: 1.8rem 1.5rem; margin-bottom: 1.25rem; }
.ap-hero-preview h2 { font-size: 1.8rem; margin: 0 0 .5rem; color: #fff; }
/* Startsidans list har en film i bakgrunden, som videolisterna på huvudsajten (index.php, verktyg.php, spel.php …): samma
   uppbyggnad (film, mörkt lager, innehåll), samma höjd, samma textstorlek och samma mörka lager, så att texten går att läsa.
   Filmen är videoartiklar.mp4 i artikelportalens mapp – byt film genom att ersätta filen. Tills filmen har laddats (eller om
   den saknas) syns den vanliga blå gradienten under lagret, och den som har bett om mindre rörelse på skärmen
   (prefers-reduced-motion) får gradienten utan film. Två klasser i väljaren, så att mobilreglerna för .ap-hero längre ner
   inte tar över. */
.ap-hero.ap-hero-media { position: relative; overflow: hidden; padding: 6.5rem 5% 6rem; }
.ap-hero-video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); z-index: 1; }
.ap-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 30, 45, .65); z-index: 2; }
.ap-hero-content { position: relative; z-index: 3; }
.ap-hero.ap-hero-media h1 { font-size: 2.8rem; margin: 0 0 1.2rem; line-height: 1.2; }
.ap-hero.ap-hero-media p { font-size: 1.2rem; opacity: .96; max-width: 780px; line-height: 1.7; }
.ap-hero.ap-hero-media .search-form { margin-top: 2rem; }
@media (max-width: 700px) {
  .ap-hero.ap-hero-media { padding: 4.5rem 5% 4rem; }
  .ap-hero.ap-hero-media h1 { font-size: 2.2rem; }
  .ap-hero.ap-hero-media p { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-hero-video { display: none; }
}
.search-form { display: flex; gap: .5rem; margin: 0 0 1.5rem; max-width: 640px; }
.search-form input { margin: 0; }
/* Startsidan: rubriken ligger på en egen rad ovanför artikelkolumnen, så att artikelkorten och rutorna till höger
   börjar på samma höjd. */
.ap-grid { display: grid; grid-template-columns: minmax(0, 1fr) 325px; grid-template-areas: "head ." "main side"; column-gap: 1.5rem; align-items: start; }
.ap-head { grid-area: head; }
h2.ap-head { font-size: 1.35rem; margin: 0 0 .8rem; }
.ap-main { grid-area: main; }
/* Ett diskret lodrätt streck mellan artiklarna och rutorna till höger: kolumnen sträcks till artikelkolumnens höjd, och
   strecket ligger mitt i mellanrummet (1,5rem på var sida). Kolumnen är 25 px bredare, så rutorna är lika breda som förut. */
.ap-side { grid-area: side; align-self: stretch; border-left: 1px solid var(--line); padding-left: 1.5rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.card-image img { display: block; width: 100%; height: 170px; object-fit: cover; }
.card-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.card-body h3 { font-size: 1.15rem; margin: .2rem 0 0; }
.card-body h3 a { color: var(--text); text-decoration: none; }
.card-body h3 a:hover { color: var(--primary); text-decoration: underline; }
.card-body p { margin: 0; }
.card-body .meta { margin: auto 0 0; padding-top: .3rem; font-size: .85rem; }
.cat-chip { align-self: flex-start; display: inline-block; background: var(--primary-soft); color: var(--primary-dark); text-decoration: none; padding: .05rem .6rem; border-radius: 999px; font-weight: 600; font-size: .82rem; }
.cat-chip:hover { background: var(--primary); color: #fff; }
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li a { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem .6rem; border-radius: 8px; text-decoration: none; color: var(--text); }
.cat-list li a:hover { background: var(--primary-soft); color: var(--primary-dark); }
.cat-list li.active a { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; } /* kategorin man står i */
.cat-list .count { color: var(--muted); font-size: .88rem; }
.breadcrumbs { font-size: .9rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumbs a { color: var(--muted); }
.lead { font-size: 1.12rem; color: #475569; }
.byline .author { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--text); }
/* Annonser (Personal > Annonser): rutan under Kategorier och annonsen under artikeltexten. Koden är admins egen, så
   bilder och inbäddningar hålls inom sin plats. */
.ad-code { overflow: hidden; }
.ad-code img, .ad-code iframe { max-width: 100%; height: auto; }
.ad-article { max-width: 760px; margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.ad-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 .5rem; }
/* Reglaget (på/av) på sidan Annonser: en vanlig kryssruta som ser ut som en strömbrytare. */
.form label.switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; position: relative; margin-bottom: 1rem; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch .slider { flex: none; width: 46px; height: 26px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .2s; }
.switch .slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::after { transform: translateX(20px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--primary); outline-offset: 2px; }
textarea.code-input { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .9rem; }
/* Svar på artiklar (inc/comments.php): avsnittet under artikeln och annonsen, före Fler artiklar om …, sidan där man
   ändrar sitt svar (svara.php) och personalens granskning (personal/svar.php). Den som skrev ett svar som väntar eller är
   avböjt ser det med en färgad kant. */
.ap-comments { max-width: 760px; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
/* Huvudsajtens header ligger kvar överst när man scrollar (sticky), så en länk till svaren (#svar, #svar-12,
   #svar-formular) ska stanna under den och inte gömma svarets första rad. Under 1000 px är menyn hopfälld och headern
   60 px hög (header.php, samma brytpunkt, klassen va-js på <html>). Bredare bryts menyn under loggan (uppmätt 2026-10-24
   med inloggades menyer: 104–152 px upp till ca 1300 px bredd, 72–104 px bredare). Utan JavaScript fälls menyn inte
   ihop och blir 150–300 px hög på smala skärmar, därför reglerna med 175 och 275 px. */
.ap-comments, .ap-comment, .ap-comment-form, .ap-comment-mod { scroll-margin-top: 125px; }
@media (max-width: 1300px) {
  .ap-comments, .ap-comment, .ap-comment-form, .ap-comment-mod { scroll-margin-top: 175px; }
}
@media (max-width: 520px) {
  .ap-comments, .ap-comment, .ap-comment-form, .ap-comment-mod { scroll-margin-top: 275px; }
}
@media (max-width: 1000px) {
  .va-js .ap-comments, .va-js .ap-comment, .va-js .ap-comment-form, .va-js .ap-comment-mod { scroll-margin-top: 80px; }
}
.ap-comments > h2 { font-size: 1.3rem; }
.ap-comment { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.ap-comment-pending { border-left: 4px solid #e0b100; }
.ap-comment-rejected { border-left: 4px solid var(--err); }
.ap-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0 0 .6rem; color: var(--muted); font-size: .9rem; }
.ap-comment-head strong { color: var(--text); font-size: 1rem; }
.ap-comment-own { font-style: italic; }
.ap-badge-staff { background: var(--primary-soft); color: var(--primary-dark); }
.ap-comment-body p { margin: 0 0 .7rem; }
.ap-comment-body p:last-child { margin-bottom: 0; }
.ap-comment-status { font-size: .92rem; margin: 0 0 .6rem; }
.ap-comment-note { font-size: .92rem; margin: 0 0 .6rem; padding: .4rem .6rem; background: var(--err-soft); border-radius: 6px; }
.ap-comment-actions { margin: .8rem 0 0; }
.ap-comment-login { background: var(--primary-soft); border-radius: var(--radius); padding: 1rem 1.1rem; }
.ap-comment-login p { margin-bottom: .7rem; }
.ap-comment-form { margin-top: 1.5rem; }
.ap-comment-edit .ap-comment-form { margin-top: 0; }
.ap-comment-mod .ap-comment-body { margin-bottom: .4rem; }
.ap-comment-reject { margin-top: .8rem; }
.ap-comment-reject summary { cursor: pointer; color: var(--primary); font-weight: 500; }
.ap-comment-reject form { margin-top: .6rem; }
.related { margin-top: 2.5rem; max-width: 1100px; }
.related h2 { font-size: 1.3rem; }

@media (max-width: 800px) {
  .ap-grid { grid-template-columns: 1fr; grid-template-areas: "head" "main" "side"; }
  .ap-side { margin-top: 1.5rem; border-left: 0; padding-left: 0; }
  .ap-hero { padding: 1.75rem 5%; }
  .ap-hero h1 { font-size: 1.7rem; }
  .article > h1 { font-size: 1.6rem; }
  .grid-2 { grid-template-columns: 1fr; }
  h1 { font-size: 1.45rem; }
  /* Breda tabeller blir staplade kort på smala skärmar, så att sidan aldrig blir bredare än skärmen. */
  .table-wrap { overflow-x: visible; border: 0; box-shadow: none; border-radius: 0; }
  table.data, table.data tbody, table.data tr { display: block; width: 100%; }
  table.data thead { display: none; }
  table.data td { display: block; border-bottom: 0; padding: .3rem 0; }
  table.data tr { border-bottom: 1px solid var(--line); padding: .8rem 0; }
}