/* Baslager ovanpå tokens. Semantisk HTML, mobil först. */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--hs-ui);
  color: #000;
  background: var(--hs-ullvit);
  line-height: 1.5;
  /* Profilen ger bara EN skärning av Akzidenz Grotesk: Medium. Utan det här
     syntetiserar webbläsaren fetstil ovanpå den - tecknen blir smetiga och
     ojämna. New Century Schoolbook och Georgia har riktiga feta skärningar
     och påverkas inte. Betoning i gränssnittet görs med färg, storlek och
     versaler i stället för med vikt. */
  font-synthesis-weight: none;
}

h1, h2, h3 {
  font-family: var(--hs-rubrik);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
}
/* Huvudrubriken bär profilens slöjddetaljerade Å/Ä/Ö */
h1 { font-size: 1.5rem; font-family: var(--hs-rubrik-dekor); }
h2 { font-size: 1.15rem; }
h3 { font-size: 0.95rem; }

a { color: var(--hs-bla-lank); }

/* Ordmärket delas av den publika startsidan och adminramen. Toledo-filen
   mappar de gemena tecknen i domännamnet till profilens versalglyfer, så
   kopierad text fortfarande blir "Slöjda.de". Ö:et hämtas från
   Handicraft, där prickarna bär slöjddetaljen. */
@font-face {
  font-family: "Toledo märke";
  src: url("/static/typsnitt/toledo-marke.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0061, U+0064, U+0065, U+006A, U+006C;
}
@font-face {
  font-family: "Toledo märke";
  src: url("/static/typsnitt/toledo-handicraft.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
  unicode-range: U+00F6;
}
.ordmarke {
  font-family: "Toledo märke", var(--hs-rubrik);
  font-size: 1.7rem;
  line-height: 1;
  margin: 0;
  color: var(--hs-brun);
}
.ordmarke .marke-namn { color: var(--hs-rod); }
.ordmarke .marke-slut { color: var(--hs-brun); }
.ordmarke .marke-punkt {
  color: var(--hs-bla);
  display: inline-block;
  margin: 0 0.1em;
}
/* Märket är en länk, men ska inte se ut som en. Den blå punkten är
   varumärkets, inte länkfärgens - utan den här regeln färgar länken om hela
   ordet och understryker det. */
.ordmarke-lank { text-decoration: none; color: inherit; display: inline-block; }
.ordmarke-lank:hover .marke-namn { color: var(--hs-brun); }
.ordmarke-lank:focus-visible { outline: 3px solid var(--hs-bla); outline-offset: 3px; }

/* Toppraden med ordmärket. Bor här och inte i publik.css eftersom
   inloggningssidan är en adminsida och bär samma rad - annars hade linjen
   funnits på landningssidan men inte på sidan man klickar sig till. */
.startrad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
  margin-bottom: 2.5rem;
  border-bottom: 3px solid var(--hs-brun);
}

/* Webbläsarens egen regel för hidden är [hidden] { display: none }, och den
   väger lättare än vilken klass som helst med display. Ett element som både
   har en display-klass och hidden visades därför ändå - bekräftelsemodalens
   valruta stod tom och etikettlös på varje fråga som inte hade något val.
   Ett !important här i stället för att jaga varje klass som råkar krocka. */
[hidden] { display: none !important; }

.ram { max-width: 1180px; margin: 0 auto; padding: 1rem; }

.toppvarning {
  background: var(--hs-gul);
  color: var(--hs-brun);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Toppraden. Tre zoner med olika vikt: vems system det är, vart man kan gå,
   och vem man är. Navigationen är textlänkar och inte knappar - knapparna i
   sidhuvudet nedanför är sidans åtgärder, och de två sakerna ska inte gå att
   förväxla. */
.topprad {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.7rem 1rem 0.6rem;
  border-bottom: 1px solid var(--hs-ram);
}
.topprad .identitet {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}
.topprad .systemnamn { flex: none; white-space: nowrap; }
.topprad-menyrad {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1rem 1.5rem;
  min-width: 0;
}
.foreningsnamn {
  flex: 0 1 28rem;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--hs-svag);
  display: block;
  max-width: min(28rem, 65vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Föreningsväljaren. Ser ut som texten den ersätter - den är en upplysning
   som råkar gå att ändra, inte en åtgärd i sig. */
.foreningsvaljare {
  position: relative;
  flex: 0 1 28rem;
  min-width: 0;
  font-size: 0.8rem;
}
.foreningsvaljare > summary {
  display: flex;
  align-items: baseline;
  min-width: 0;
  list-style: none;
  cursor: pointer;
  color: var(--hs-bla-lank);
}
.foreningsvaljare > summary::-webkit-details-marker { display: none; }
.foreningsvaljare > summary::after { content: "\00a0\25be"; flex: none; }
.foreningsetikett {
  display: block;
  min-width: 0;
  max-width: min(28rem, 65vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.foreningsvaljare form {
  position: absolute;
  left: 0;
  z-index: 20;
  min-width: 14rem;
  margin-top: 0.35rem;
  background: #fff;
  border: 1px solid var(--hs-ram);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
}
.foreningsvaljare button {
  text-align: left;
  padding: 0.55rem 0.85rem;
  text-decoration: none;
}
.foreningsvaljare button:hover:not(:disabled) { background: var(--hs-ullvit); }
/* Den man redan står i är inte ett val - den visas som läge, inte som länk */
.foreningsvaljare button:disabled {
  color: var(--hs-brun);
  cursor: default;
  opacity: 1;
}
/* Väljaren står en bit in på raden, så en meny som fälls ut åt höger sticker
   ut utanför skärmen på mobil. Där fälls den åt vänster i stället. */
@media (max-width: 640px) {
  .foreningsvaljare form { left: auto; right: 0; min-width: 12rem; }
}

.globalnav {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 1.1rem;
  min-width: 0;
  font-size: 0.85rem;
}
.globalnav a {
  color: var(--hs-brun);
  text-decoration: none;
  padding-bottom: 0.15rem;
  border-bottom: 2px solid transparent;
}
.globalnav a:hover { border-bottom-color: var(--hs-ram); }
/* Aktiv sida markeras med linje OCH färg. Bara färg räcker inte för den som
   inte skiljer dem åt. */
.globalnav a.aktiv { color: var(--hs-bla-lank); border-bottom-color: var(--hs-bla); }

.kontomeny {
  margin-left: auto;
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.8rem;
}
.kontomeny form { margin: 0; display: inline; }
.notisklocka { position: static; }
.notisklocka > summary {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--hs-bla-lank);
}
.notisklocka > summary::-webkit-details-marker { display: none; }
.notisklocka > summary::marker { content: ""; }
.notisklocka svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.notisantal {
  position: absolute;
  top: -.45rem;
  right: -.55rem;
  min-width: 1.05rem;
  padding: .05rem .2rem;
  border-radius: 1rem;
  background: var(--hs-rod);
  color: #fff;
  font-size: .65rem;
  line-height: 1;
  text-align: center;
}
.notispanel {
  position: absolute;
  z-index: 20;
  top: calc(100% + .5rem);
  right: 0;
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(32rem, calc(100vh - 8rem));
  overflow-y: auto;
  padding: .85rem;
  border: 1px solid var(--hs-ram);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
  white-space: normal;
}
.notispanel h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.notisstatus { margin: .25rem 0; }
.notislista { margin: 0; padding: 0; list-style: none; }
.notislista li { padding: .65rem 0; border-top: 1px solid var(--hs-ram); }
.notislista strong, .notislista span { display: block; }
.notislista time { display: block; margin-top: .25rem; color: var(--hs-svag); }

/* På mobil får huvudnavigationen hela bredden. Kontot ligger kvar under den
   om det inte ryms, medan föreningsnamnet aldrig påverkar menyradens bredd. */
@media (max-width: 640px) {
  .topprad-menyrad { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .globalnav { flex-basis: 100%; gap: 1rem; }
  .kontomeny { margin-left: 0; }
  .foreningsnamn,
  .foreningsetikett { max-width: calc(100vw - 9.5rem); }
}

header.sidhuvud {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  /* Toppjusterat, inte centrerat. Med center hamnade knapparna olika högt
     beroende på hur många rader underrubriken tog, så de hoppade när man
     gick mellan Deltagare och Redigera. Nu ligger de i linje med rubriken
     oavsett vad som står under den. */
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 3px solid var(--hs-brun);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}

.sidatgarder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  position: relative;
}

/* Filter över en lista. Länkar och inte knappar - valet ligger i URL:en, så
   en filtrerad vy går att spara och skicka vidare. */
.filterrad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.filterrad a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--hs-ram);
  border-radius: 999px;
  background: #fff;
  color: var(--hs-bla-lank);
  text-decoration: none;
  font-size: 0.8rem;
}
.filterrad a:hover { border-color: var(--hs-bla); }
.filterrad a.aktiv {
  background: var(--hs-bla);
  border-color: var(--hs-bla);
  color: #fff;
}
.filterrad .antal { color: var(--hs-svag); font-size: 0.75rem; }
.filterrad a.aktiv .antal { color: #fff; }

/* En enkel innehållsförteckning för det långa aktivitetsformuläret. Länkarna
   fungerar utan JavaScript och ändrar varken formulärets ordning eller vilka
   villkorade fält som visas. */
.formularnav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .75rem;
  margin: 0 0 1.25rem;
  font-size: .82rem;
}
.formularnav span { color: var(--hs-svag); }
.formularnav a { white-space: nowrap; }
.formularankare,
fieldset[id^="avsnitt-"] { scroll-margin-top: 1rem; }

/* Sidor med fler åtgärder än två samlar resten här. Deltagarlistan hade fem
   likvärdiga knappar, vilket varken gav rangordning eller fick plats i mobil.
   Native details, ingen JS. */
.atgardsmeny { position: relative; }
.atgardsmeny > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.55rem 1rem;
  border: 2px solid var(--hs-bla);
  border-radius: 4px;
  background: #fff;
  color: var(--hs-bla-lank);
  font-weight: 900;
  font-size: 0.85rem;
}
.atgardsmeny > summary::-webkit-details-marker { display: none; }
.atgardsmeny > summary::after { content: " \25be"; }
.atgardsmeny > div {
  position: absolute;
  right: 0;
  z-index: 20;
  min-width: 12rem;
  margin-top: 0.35rem;
  background: #fff;
  border: 1px solid var(--hs-ram);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
}
.atgardsmeny > div a {
  padding: 0.6rem 0.9rem;
  text-decoration: none;
  color: var(--hs-bla-lank);
  font-size: 0.85rem;
}
/* En meny blandar länkar och formulärknappar - "Kopiera aktiviteten" är en
   POST och kan inte vara en <a>. Utan det här ärvde den bara .lankknapp och
   stack ut som understruken småtext mitt bland menyns poster (TASK-743).
   Knappen ska se ut som posterna omkring den, inte som sin teknik. */
.atgardsmeny > div a,
.atgardsmeny > div .lankknapp,
.atgardsmeny > div .radknapp {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.6rem 0.9rem;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
  text-decoration: none;
  color: var(--hs-bla-lank);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.atgardsmeny > div a:hover,
.atgardsmeny > div .lankknapp:hover,
.atgardsmeny > div .radknapp:hover { background: var(--hs-ullvit); }
/* Det som tar bort någon ur listan ska inte se ut som resten. */
.atgardsmeny > div .fara-text { color: #a52d13; }
/* På mobil får menyn inte hänga på sin egen knapp: står knappen långt ut
   sticker menyn utanför skärmkanten. Där mäts den mot hela sidhuvudet i
   stället, som börjar vid ramens marginal, och begränsas till skärmbredden. */
@media (max-width: 640px) {
  .atgardsmeny, .sidatgarder { position: static; }
  .atgardsmeny > div {
    left: 0;
    right: auto;
    max-width: calc(100vw - 2.5rem);
  }
}

.knapp {
  background: var(--hs-bla);
  color: #fff;
  border: 0;
  padding: 0.55rem 1rem;
  border-radius: 4px;
  font-family: var(--hs-ui);
  font-weight: 900;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.knapp.sekundar { background: #fff; color: var(--hs-bla-lank); border: 2px solid var(--hs-bla); }
.knapp.fara { background: var(--hs-rod); color: #fff; }

/* En sekundärknapp som markerar ett VALT läge - scenarioväxeln i
   mejlexemplen. Utan detta ser den valda likadan ut som de andra, och
   aria-current är då ett påstående bara skärmläsaren hör. */
.knapp.sekundar[aria-current] {
  background: var(--hs-bla);
  color: #fff;
}

.notis-teststatus {
  min-height: 1.35rem;
  margin: 0.5rem 0 0;
}
.notis-teststatus[data-lage="ok"] { color: #1d6b4f; }
.notis-teststatus[data-lage="fel"] { color: #a52d13; }
.notis-aterstall {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hs-ram);
}
.notis-aterstall p { margin: 0 0 0.6rem; }
.notis-aterstall form { margin: 0; }
.notis-aterstall .tabort {
  background: #fff;
  border-color: #a52d13;
  color: #a52d13;
}

.larm {
  border-radius: 4px;
  padding: 0.85rem;
  margin-bottom: 1.25rem;
  border: 2px solid;
}
.larm.fel { background: #fdeae6; border-color: var(--hs-rod); }
.larm.fel h3 { color: var(--hs-rod); }
.larm.beslut { background: #fff8e8; border-color: var(--hs-gul); }
.larm.beslut h3 { color: #7a5a0a; }
.larm.info { background: #eef6fb; border-color: var(--hs-bla); }
.larm.info h3 { color: #075b7d; }

/* Larmets rubrik är en länk till aktiviteten, men ska se ut som en rubrik -
   larmfärgen är det som säger hur allvarligt det är, och en blå länk mitt i
   en röd ruta motsäger den signalen. Understrykningen kommer vid hover. */
.larm h3 a { color: inherit; text-decoration: none; }
.larm h3 a:hover { text-decoration: underline; }
/* Föreningschippet står bredvid rubriken och ska inte ärva versalerna. */
.larm h3 .markor { margin-left: 0.4rem; vertical-align: middle; }

.rutnat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.kort { border: 1px solid var(--hs-ram); border-radius: 4px; padding: 0.85rem; background: #fff; }
.kort h3 { font-size: 0.78rem; color: #5c4436; }
.foreningstext { max-width: 72ch; margin-bottom: 2rem; }
.foreningstext h2 { margin-top: 1.6rem; }
.modulrubrik { margin-top: 2rem; }
.modulkort .kort h3 { font-size: 1rem; }
.modullankar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.redigeringsmodal { width: min(720px, calc(100vw - 2rem)); }
.redigeringsmodal textarea { min-height: 16rem; }
/* EasyMDE ersätter bara textarea-fält märkta med data-easymde. Stilen är
   gemensam för alla sådana editorer, även när de används utanför en modal. */
.EasyMDEContainer { font-family: var(--hs-ui); }
.EasyMDEContainer .editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  border-color: var(--hs-ram);
  border-radius: 3px 3px 0 0;
  background: var(--hs-ullvit);
}
.EasyMDEContainer .editor-toolbar button {
  float: none;
  color: var(--hs-bla-lank);
}
.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active {
  border-color: var(--hs-bla);
  background: #fff;
}
.EasyMDEContainer .editor-toolbar .rubrikniva-3::after {
  content: "H3";
  font-family: var(--hs-ui);
  font-size: 0.72rem;
  font-weight: 700;
}
.EasyMDEContainer .editor-toolbar i.separator {
  float: none;
  margin: 0.3rem 0.15rem;
}
.EasyMDEContainer .CodeMirror {
  height: min(46vh, 24rem);
  border-color: var(--hs-ram);
  border-radius: 0 0 3px 3px;
  font-family: ui-monospace, monospace;
  font-size: 0.9rem;
}
@media (max-width: 480px) {
  .EasyMDEContainer .editor-toolbar button { min-width: 2.15rem; }
  .EasyMDEContainer .editor-toolbar i.separator { display: none; }
  .EasyMDEContainer .CodeMirror { height: 42vh; }
}
/* Toledo levereras som ExtraBold - be om 800, inte 700, så matchningen
   är exakt i stället för närmaste. */
.siffra { font-family: var(--hs-rubrik); font-size: 1.9rem; font-weight: 800; line-height: 1; }

/* Markdown-underrubriken använder brödtextens feta serif i stället för
   Toledo, så nivåskillnaden syns även när rubrikerna står nära varandra. */
.brodtext h3,
.foreningstext h3 {
  font-family: var(--hs-brod);
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

table { width: 100%; border-collapse: collapse; font-size: 0.86rem; background: #fff; }
th {
  text-align: left;
  /* Ärvs som bold från webbläsarens egen stilmall om den inte sätts. Versaler
     och spärrning bär rubriken i stället. */
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5c4436;
  border-bottom: 2px solid var(--hs-brun);
  padding: 0.45rem 0.5rem;
}
td { padding: 0.55rem 0.5rem; border-bottom: 1px solid #e6e3da; vertical-align: top; }
.tabellsvep { overflow-x: auto; }

/* Används både publikt och i admins förhandsgranskningar, och hör
   därför till baslagret. */
/* Faktaruta: etikett och värde sida vid sida på desktop, staplade på mobil */
.fakta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 1.25rem 0;
  padding: 0.9rem;
  background: #fff;
  border: 1px solid var(--hs-ram);
  border-radius: 4px;
  font-size: 0.92rem;
}
.fakta dt {
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5c4436;
  padding-top: 0.12rem;
}
.fakta dd { margin: 0; }

@media (max-width: 460px) {
  .fakta { grid-template-columns: 1fr; gap: 0.1rem; }
  .fakta dd { margin-bottom: 0.6rem; }
}


.markor {
  display: inline-block;
  max-width: 100%;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: break-word;
}
.m-ok { background: #e3f2ec; color: #1d6b4f; }
.m-fel { background: #fdeae6; color: #a52d13; }

/* Hjälptext som säger att något är fel, till exempel en upptagen
   adress. Samma röda som larmen, men utan ruta - beskedet hör till
   fältet och ska inte konkurrera med sidans egna larm. */
.hjalp.fel-text { color: #a52d13; }
.m-info { background: #e2f2fa; color: #075b7d; }
.m-neutral { background: #eeece5; color: #5c4436; }
/* Beslutsläge, inte fel. Gult som textfärg klarar inte kontrastkravet på
   ljus botten - därför gul botten och mörkbrun text. */
.m-beslut { background: #fff8e8; color: #7a5a0a; }

/* Profilen har Medium och Black, ingenting däremellan. Black är tung för
   löpande betoning i en tabell, så <strong> får färgen i stället - Black
   sparas till knappar, markörer och ingress. */
strong { font-weight: 500; color: var(--hs-brun); }

.svag { color: var(--hs-svag); font-size: 0.8rem; }

/* En åtgärd som hör till en anteckning i en tabellcell. Ska se ut som texten
   den ersätter, inte som en knapp - men vara en riktig knapp, eftersom den
   utför något. */
.lankknapp {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--hs-bla-lank);
  text-decoration: underline;
  cursor: pointer;
}

/* Ingen fetstil: vi levererar bara Akzidenz Medium, så bold får webbläsaren
   att syntetisera fetstil ovanpå en redan halvfet skärning. Etiketten skiljs
   från fältet med färg och storlek i stället. */
label {
  display: block;
  font-weight: normal;
  font-size: 0.82rem;
  color: var(--hs-brun);
  margin: 0.9rem 0 0.25rem;
}
input[type=text], input[type=password], input[type=email], input[type=search] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #b9b2a5;
  border-radius: 3px;
  font-family: var(--hs-ui);
  font-size: 0.9rem;
}

.inloggning { max-width: 380px; margin: 3rem auto; background: #fff; padding: 1.5rem; border-radius: 4px; }
.tomt { background: #fff; border: 1px dashed var(--hs-ram); border-radius: 4px; padding: 2rem; text-align: center; color: var(--hs-svag); }

fieldset { border: 1px solid var(--hs-ram); border-radius: 4px; min-width: 0;
  padding: 1.1rem .95rem .95rem; margin: 1.25rem 0; background: #fff; }
/* Legenden sitter på fieldsetens kant. Utan egen bakgrund delas den visuellt
   av gränsen mellan sidans ullvita botten och kortets vita yta. */
legend {
  font-family: var(--hs-rubrik);
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  /* Versaler i liten grad behöver spärras för att gå att läsa. Toledo är
     dessutom tät från början - den är ritad för stora rubriker. */
  letter-spacing: .12em;
  background: #fff;
  color: var(--hs-brun);
  /* Toledo är en display-skärning med hög versalhöjd. I versaler och liten
     grad fyller den chippet helt om luften inte läggs till för hand. */
  /* Extra höger: den spärrade texten lämnar ett mellanrum efter sista
     tecknet, som annars gör chippet optiskt osymmetriskt. */
  padding: .42rem .8rem .38rem .92rem;
  margin-left: .35rem;
  border: 1px solid var(--hs-ram);
  border-radius: 999px;
}
select, textarea, input[type=number], input[type=date], input[type=time],
input[type=datetime-local], input[type=tel], input[type=url] {
  width: 100%; padding: .5rem; border: 1px solid #b9b2a5; border-radius: 3px;
  font-family: var(--hs-ui); font-size: .9rem; background: #fff;
}
textarea { min-height: 70px; resize: vertical; }
.hjalp { font-size: .76rem; color: var(--hs-svag); margin: .2rem 0 0; }

/* Fält som ett serversidesfel pekar ut, se aktivitet-form.html. Kanten
   räcker - ett rött fält bredvid en länkad rad i fellistan ovanför räcker
   för att koppla ihop dem, utan att lägga en egen ikon i varje fält. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--hs-rod);
}

/* Vad som inte gått ut till en deltagare, samlat i deltagarlistans
   statuskolumn. Rubriken bär den gula varningsfärgen, posterna under är
   vanliga länkknappar - annars konkurrerar tre gula rader per tabellrad
   med statusmarkören de står under. */
.saknas { margin: .35rem 0 0; }
.saknas-rubrik {
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #7a5a0a;
}
.saknas-post { font-size: .78rem; color: #7a5a0a; }

/* Deltagarradens åtgärdsmeny. Ärver .atgardsmeny men i radformat: knappen
   ska väga mindre än sidhuvudets, och panelen behöver plats för de
   formulärknappar radmodal.js sätter in. */
/* Primär åtgärd och meny på samma rad. Flexen ligger på en INNE-behållare
   och aldrig på cellen: en td som blir flexbehållare upphör att vara
   tabellcell, och då slutar raden dela höjd och underkantslinje med de
   andra cellerna - raderna såg avbrutna ut till höger. */
.radatgarder { white-space: nowrap; }
.radatgarder-inre { display: flex; gap: .4rem; align-items: flex-start;
                    justify-content: flex-end; }
.radmeny { display: inline-block; }
.radmeny > summary,
.radmeny-lank {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-style: solid;
  border-width: 1px;
  border-color: var(--hs-ram);
  border-radius: 4px;
  font-weight: normal;
  font-size: 0.78rem;
  line-height: 1.5;
  text-decoration: none;
}
.radmeny > summary:hover,
.radmeny-lank:hover { border-color: var(--hs-bla); }
.radmeny-lank::after { content: " \25be"; }
/* Radens primära åtgärd står bredvid Åtgärder och måste dela dess mått.
   .radknapp sätts av radmodal.js, .tabort av mallen - två tekniker för
   samma sak, och de bar var sin egen storlek: Betalningar mätte 24 px mot
   grannens 30, och låg dessutom 7 px lägre eftersom .radknapp har en egen
   margin-top som hör hemma inuti menyn, inte här. Hover är blå och aldrig
   röd: .tabort bär i dag Erbjud plats, som inte tar bort något.

   Selektorn tar BARA knappen som står framme: menypanelen ligger också
   inuti .radatgarder-inre, och dess poster har sin egen stil. */
.radatgarder-inre > .radknapp,
.radatgarder-inre > form .tabort {
  margin: 0;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--hs-ram);
  border-radius: 4px;
  background: none;
  /* En <button> ärver varken typsnitt eller radhöjd av sidan. Utan de här
     två raderna satt knappen i Arial mot summeringens Akzidenz Grotesk och
     såg tunnare ut trots samma vikt, och blev 4 px lägre vid identisk
     padding. */
  font-family: var(--hs-ui);
  line-height: 1.5;
  font-size: 0.78rem;
  font-weight: normal;
  color: var(--hs-bla-lank);
}
.radatgarder-inre > .radknapp:hover,
.radatgarder-inre > form .tabort:hover {
  border-color: var(--hs-bla);
  color: var(--hs-bla-lank);
}
.radmeny > div { min-width: 14rem; padding: 0.25rem 0; }
/* Tabellen scrollar i sidled, och en absolut panel inuti en scrollande
   behållare klipps av den - menyn sköt ut tabellens scrollbredd i stället
   för att lägga sig ovanpå. Klippningen släpps medan en meny är öppen, så
   den horisontella scrollen finns kvar när den behövs.

   Bara över 640 px. På smal skärm är tabellen bredare än fönstret, och
   samma regel hade gett hela SIDAN en sidledsscroll så länge menyn stod
   öppen - mätt till 392 px spill vid 390 px bredd. Där behålls
   klippningen, och panelen mäts mot fönstret i stället (se nedan).

   :has() är stött i alla webbläsare vi bryr oss om; faller det bort är
   utfallet det gamla, inte ett trasigt läge. */
@media (min-width: 641px) {
  .tabellsvep:has(.radmeny[open]) { overflow: visible; }
}
/* Samma undanflykt som ovan flyttar panelens referensram från tabellcellen
   till skärmen (se .atgardsmeny-regeln kring rad 404), men "left: 0" därifrån
   la panelen vid skärmens vänsterkant - en smal remsa och inte en meny.
   Radens egen panel får i stället ligga centrerad med en bredd som känns som
   en meny, TASK-950. Bara under 640 px; över det ska högerställningen mot
   knappen stå kvar orörd. */
@media (max-width: 640px) {
  .radmeny > div {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(90vw, 20rem);
    max-width: min(90vw, 20rem);
  }
}
/* Åtgärder som hör ihop skiljs med en linje i stället för en rubrik.
   Rubriker i en meny som redan har en rubrik läser som ett formulär. */
.menygrupp { border-top: 1px solid var(--hs-ram); margin-top: 0.25rem;
             padding-top: 0.25rem; }
.radrad { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
.qr-forhandsvisning {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 0.8rem;
  border: 1px solid var(--hs-ram);
  border-radius: 4px;
}
.qr-forhandsvisning[hidden] { display: none; }
.qr-forhandsvisning img {
  display: block;
  width: min(220px, 42vw);
  height: auto;
  flex: 0 0 auto;
}
.qr-forhandsvisning figcaption { max-width: 34rem; }
.qr-forhandsvisning figcaption .hjalp { display: block; margin-top: 0.25rem; }
@media (max-width: 520px) {
  .qr-forhandsvisning { align-items: flex-start; }
  .qr-forhandsvisning img { width: min(150px, 38vw); }
}
.val { display: flex; gap: .5rem; align-items: flex-start; margin: .45rem 0; font-size: .87rem; }
.val input { margin-top: .2rem; flex: 0 0 auto; width: auto; }
.villkorad { border-left: 3px solid var(--hs-bla); padding-left: .8rem; }

.kryssrutor { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.kryss { display: inline-flex; align-items: center; gap: .35rem; font-weight: normal;
  font-size: .85rem; margin: 0; cursor: pointer; }
.kryss input { width: auto; margin: 0; }

.rad { display: flex; gap: .6rem; align-items: flex-end; margin-bottom: .6rem; }
/* Kostformuläret i kostlistan. Samma mönster som ändringen av en deltagares
   uppgifter, men i den åtkomstbegränsade vyn - artikel 9-uppgiften får inte
   flytta in i deltagarlistan. */
.kostform > summary {
  list-style: none;
  display: inline-block;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--hs-ram);
  border-radius: 4px;
  color: var(--hs-bla-lank);
  font-size: 0.75rem;
  white-space: nowrap;
}
.kostform > summary::-webkit-details-marker { display: none; }
.kostform > summary::after { content: " \25be"; }
.kostform > summary:hover { border-color: var(--hs-bla); }
.kostform form { min-width: 14rem; max-width: 22rem; margin-top: 0.5rem; }
.kostform label { font-size: 0.75rem; margin-bottom: 0.1rem; }
.kostform input[type="text"], .kostform select { margin-bottom: 0.4rem; }
.kostform button { font-size: 0.75rem; padding: 0.35rem 0.7rem; }

/* Redigering av en deltagares uppgifter, inne i tabellraden. Knappen ska se
   ut som radens andra åtgärder - som svag text såg den inte klickbar ut. */
.andra-uppgifter { margin-top: 0.4rem; }
.andra-uppgifter > summary {
  list-style: none;
  display: inline-block;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--hs-ram);
  border-radius: 4px;
  color: var(--hs-bla-lank);
  font-size: 0.75rem;
}
.andra-uppgifter > summary::-webkit-details-marker { display: none; }
.andra-uppgifter > summary::after { content: " \25be"; }
.andra-uppgifter > summary:hover { border-color: var(--hs-bla); }
.andra-uppgifter[open] > summary { margin-bottom: 0.5rem; }
.andra-uppgifter form { min-width: 13rem; max-width: 20rem; }
.andra-uppgifter label { font-size: 0.75rem; margin-bottom: 0.1rem; }
.andra-uppgifter input { margin-bottom: 0.4rem; }
.andra-uppgifter .hjalp { margin: 0 0 0.5rem; }
.andra-uppgifter button { font-size: 0.75rem; padding: 0.35rem 0.7rem; }

/* Knappen som radmodal.js sätter i utfällningens ställe. Ser ut som
   summeringen gjorde, så raden inte byter utseende när JS finns. */
.radknapp {
  /* inline-flex och min-height: radknapparna hamnar i olika sammanhang -
     några skapas av radmodal.js som syskon till sin details, andra står i
     ett formulär i cellen - och ärvde därför olika radhöjd. Ångra avanmälan
     blev 24 px bredvid Betalningar på 30. Höjden sätts här så att raden
     läses som en rad likvärdiga knappar, oavsett var knappen kommer
     ifrån (TASK-846). */
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  margin-top: 0.4rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--hs-ram);
  border-radius: 4px;
  background: none;
  color: var(--hs-bla-lank);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
}
.radknapp:hover { border-color: var(--hs-bla); }
/* I modalen finns plats. Fälten ska inte ärva cellens trängsel. */
.radform form { min-width: 0; max-width: none; }
.radform label { font-size: 0.85rem; }
.radform input { margin-bottom: 0.6rem; }
.radform button { font-size: 0.9rem; padding: 0.5rem 0.9rem; }
/* Modalen bär inte alltid ett formulär. Villkorsvisningen är ren text, och
   utan det här ärvde den tabellcellens typografi i stället för modalens. */
.radform p, .radform h4 { font-size: 0.9rem; }

/* En deltagares sparade kopia av villkoren eller integritetstexten. Ramad
   och indragen för att den ska läsas som ett citat av något som redan hänt
   - den går inte att ändra här, och ska inte se ut som ett fält. */
.sparad-text {
  border-left: 3px solid var(--hs-ram);
  padding-left: 0.8rem;
  max-height: 40vh;
  overflow-y: auto;
}
.sparad-text p { margin: 0 0 0.5rem; font-size: 0.85rem; }

/* Betalningsraderna i utfällningen. Tät, eftersom den läses som en
   lista att matcha mot bankappen och inte som en tabell att bläddra i. */
.minitabell { width: 100%; font-size: 0.8rem; margin-bottom: 0.6rem; }
.minitabell td { padding: 0.3rem; border-bottom: 1px solid var(--hs-ram);
                 vertical-align: middle; }
/* Beloppen ska gå att följa i kolumn. Siffror i variabel bredd hoppar i
   sidled mellan raderna och gör summan svårare att kontrollera för hand -
   tabular-nums låser dem. */
.minitabell .belopp { text-align: right; font-variant-numeric: tabular-nums;
                      white-space: nowrap; }
.minitabell-atgard { width: 1%; text-align: right; }
.minitabell-atgarder { display: flex; gap: 0.25rem; justify-content: flex-end;
                       flex-wrap: wrap; }
/* Summeringsraden hör till tabellen men är inte en transaktion. Tyngre text
   och ingen underkantslinje, så den läses som ett facit och inte som en rad
   till att stämma av. */
.minitabell-summa td { border-bottom: 0; padding-top: 0.45rem; font-weight: 700; }
.minitabell-summa .svag, .minitabell-summa .markor { font-weight: normal; }
/* Små åtgärder ska synas utan att konkurrera med beloppen, därför ram i
   stället för understrykning. Bara den destruktiva åtgärden blir röd. */
/* Klassen står före .radform button i filen och skulle annars förlora på
   specificitet - modalens generella knappstil är gjord för Registrera. */
.minitabell .miniatgard {
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--hs-ram);
  border-radius: 3px;
  background: none;
  color: var(--hs-svag);
  font-family: var(--hs-ui);
  font-size: 0.72rem;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
}
.minitabell .miniatgard:hover { border-color: var(--hs-bla); color: var(--hs-bla); }
.minitabell .miniatgard-fara:hover { border-color: var(--hs-rod); color: var(--hs-rod); }

.tabort { background: none; border: 1px solid var(--hs-ram); color: var(--hs-svag);
  border-radius: 3px; padding: .5rem .7rem; font-size: .78rem; cursor: pointer;
  font-family: var(--hs-ui); white-space: nowrap; }
.tabort:hover { border-color: var(--hs-rod); color: var(--hs-rod); }
@media (max-width: 520px) { .rad { flex-direction: column; align-items: stretch; } }

/* Tillfällen: datum, från, till, slutdatum - i den ordning man tänker.
   min-width:0 behövs, annars tar datumfältens egen minimibredd över och
   spränger rutnätet på smala skärmar. */
.datumrad {
  display: grid;
  grid-template-columns: 1.1fr .8fr .8fr 1.1fr auto;
  gap: .6rem;
  align-items: end;
}
.datumrad > div { min-width: 0; }
.datumrad label { margin: 0 0 .2rem; }
.datumrad input { min-width: 0; width: 100%; }
@media (max-width: 720px) {
  .datumrad { grid-template-columns: 1fr 1fr; }
  .datumrad .tabort { grid-column: 1 / -1; }
}

/* Väntebesked, se app/static/vantan.js. Snurran ligger i knappen och
   beskedet under den - rörelse ensam räcker inte som besked. */
.snurra {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.45em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: snurr 0.7s linear infinite;
}

@keyframes snurr { to { transform: rotate(360deg); } }

/* Respektera den som bett om mindre rörelse - då pulserar den i stället */
@media (prefers-reduced-motion: reduce) {
  .snurra { animation: pulsera 1.4s ease-in-out infinite; }
  @keyframes pulsera { 50% { opacity: 0.3; } }
}

.vantebesked { margin: 0.45rem 0 0; }
/* I åtgärdsmenyn ligger beskedet dikt mot kanterna - menyns egen padding
   sitter på posterna, inte på behållaren, och beskedet skjuts in mellan dem
   av vantan.js. Samma sidopadding som posterna, så texten linjerar med
   knappen den hör till (TASK-847). */
.atgardsmeny > div .vantebesked {
  padding: 0 0.9rem 0.5rem;
  margin-top: 0.25rem;
}

/* Bekräftelsemodal, se app/static/modal.js. Bygger på <dialog>, så
   fokusfångst och Escape sköts av webbläsaren. */
.modal {
  border: 2px solid var(--hs-brun);
  border-radius: 4px;
  padding: 1.25rem;
  max-width: 30rem;
  width: calc(100vw - 2rem);
  background: #fff;
  color: #000;
}
.modal::backdrop { background: rgba(54, 31, 21, 0.55); }
.modal-rubrik { margin-bottom: 0.5rem; }
.modal-text { margin: 0 0 1rem; font-size: 0.9rem; }
/* Förhandsgranskning: mejlet behöver plats, och rubriken en stängknapp
   eftersom innehållet kan vara långt och Escape inte är uppenbart. */
.modal-bred { max-width: 52rem; }
.modal-huvud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.modal-huvud .modal-rubrik { margin: 0; }
/* scrollbar-gutter: scrollbaren ritades OVANPÅ innehållet - clientWidth var
   lika med offsetWidth, alltså tog den noll pixlar av bredden - och lade sig
   över texten i högerkanten. Med stable reserveras utrymmet, och modalens
   egen högerpadding flyttas hit så det inte blir en tom remsa i de modaler
   som inte scrollar (TASK-776). */
.modal-innehall {
  max-height: 72vh;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 0.5rem;
  margin-right: -0.5rem;
}

/* Ett val som hör till åtgärden, ovanför knapparna */
.modal-val { margin: 0 0 1rem; font-size: 0.88rem; }

.modal-knappar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}
/* Avbryt först i DOM:en så den får fokus - men den utförande knappen
   längst till höger, där ögat söker den. */
@media (max-width: 380px) {
  .modal-knappar { flex-direction: column-reverse; }
  .modal-knappar .knapp { width: 100%; }
}

/* Förhandsgranskning av hur aktiviteten blir hos riksförbundet.
   Medvetet neutral: en efterapning av deras tema skulle vara en gissning, och
   en preview man litar för mycket på är sämre än ingen. Det här visar
   innehållets STRUKTUR - rubriker, listor, styckeindelning, textmängd. */
.puff {
  max-width: 22rem;
  background: #fff;
  border: 1px solid var(--hs-ram);
  border-radius: 4px;
  padding: 0.9rem;
  margin-bottom: 1rem;
}
.puff-arrangor {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5c4436;
}
.puff-rubrik { margin: 0.25rem 0 0.35rem; font-size: 1.05rem; }
.puff-datum { margin: 0 0 0.4rem; font-size: 0.8rem; color: var(--hs-svag); }
.puff-text { margin: 0; font-family: var(--hs-brod); font-size: 0.9rem; }

.rf-sida {
  background: #fff;
  border: 1px solid var(--hs-ram);
  border-radius: 4px;
  padding: 1.5rem;
  max-width: 44rem;
}
.rf-rubrik { font-size: 1.6rem; margin-bottom: 1rem; }
.rf-innehall { font-family: var(--hs-brod); font-size: 1rem; line-height: 1.6; }
.rf-innehall p { margin: 0 0 0.9rem; }
/* Temats ingressstil. Deras ser annorlunda ut - det här säger bara att
   stycket ÄR en ingress. */
.rf-innehall .is-style-preamble {
  font-family: var(--hs-ui);
  font-size: 1.05rem;
  color: var(--hs-brun);
  border-left: 3px solid var(--hs-gul);
  padding-left: 0.8rem;
}
.rf-innehall h2 { font-size: 1.15rem; margin: 1.4rem 0 0.5rem; }
.rf-innehall ul, .rf-innehall ol { margin: 0 0 0.9rem 1.2rem; padding: 0; }
.rf-innehall li { margin-bottom: 0.25rem; }
.rf-knapp {
  display: inline-block;
  background: var(--hs-rod);
  color: #fff;
  padding: 0.7rem 1.4rem;
  border-radius: 4px;
  text-decoration: none;
  font-family: var(--hs-ui);
  font-weight: 900;
  font-size: 0.9rem;
}
.rf-fakta { max-width: none; }

/* Sorterbara kolumnrubriker. Länkar, inte knappar - de byter vy och går att
   bokmärka. */
.sortlank {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.sortlank:hover { text-decoration: underline; }
.sortlank.sorterad { color: var(--hs-bla-lank); }

/* ------------------------------------------------------------------ */
/* Utskrift: listan man tar med till kursen                            */
/*                                                                     */
/* Kursledaren står i lokalen med ett papper och bockar av. Skärmens    */
/* knappar för avanmälan, betalning och överlåtelse ska inte följa med  */
/* dit, och inte heller navigation eller driftvarningar.               */
/*                                                                     */
/* Kostuppgifter finns aldrig i deltagarlistan och ska inte heller      */
/* smygas in här - de har egen vy och egen behörighet.                  */
@media print {
  .toppvarning, .topprad, .globalnav, .sidatgarder,
  .larm, .rutnat, .tomt, .hjalp, .ej-utskrift,
  form, details, button, .knapp, .lankknapp { display: none !important; }

  /* Sidhuvudet ska däremot med - man ska se vilken kurs papperet gäller */
  .sidhuvud { display: block; border-bottom: 1px solid #000; }

  /* Utskriftsstämpel: syns bara på papperet. Ett papper som legat i en
     väska i tre veckor ska inte gå att förväxla med en aktuell lista. */
  .utskriftsstampel { display: block !important; margin: 0.3rem 0 0.8rem; color: #333; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .tabellsvep { overflow: visible; }
  table { width: 100%; border-collapse: collapse; }
  th, td { border-bottom: 1px solid #999; padding: 0.3rem 0.2rem; }
  a { color: #000; text-decoration: none; }

  /* Utan detta saknar sida två av en lång lista kolumnrubriker */
  thead { display: table-header-group; }

  /* Rutan att bocka i. Finns bara vid utskrift - på skärmen är den brus,
     eftersom närvaro inte registreras i systemet. */
  .bockruta { display: table-cell !important; width: 2.2rem; }
  .bockruta::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
  }
  thead .bockruta::after { display: none; }

  /* Personnummer fylls i för hand av studieförbundets samordnare - se
     .personnummer nedan. Bred nog för tolv siffror med marginal. */
  .personnummer { display: table-cell !important; width: 6rem; }

  /* Sidbrytning mitt i en deltagare är obrukbart på upprop */
  tr { page-break-inside: avoid; break-inside: avoid; }
}

/* Utskriftsstämpeln syns bara vid utskrift */
.utskriftsstampel { display: none; }

/* Bockrutan syns bara i utskrift */
.bockruta { display: none; }

/* Personnumret skrivs bara på papperet - systemet varken samlar in eller
   lagrar det, se docs/datamodell.md. */
.personnummer { display: none; }

/* Könumret (TASK-936): smal som bockrutan och personnumret, men syns på
   skärmen - det är själva poängen med kolumnen, till skillnad från de två
   ovan som bara finns för papperet. */
.koplats { width: 2.2rem; text-align: center; }

/* Ansvarigväljaren i aktivitetsformuläret (TASK-766). Sammanfattningen står
   i formuläret så de valda syns utan att modalen öppnas - annars vet man
   inte vad som är sparat utan att klicka. */
.valda-sammanfattning { margin: 0 0 0.5rem; font-size: 0.9rem; }
.ansvarigsok-etikett { font-size: 0.85rem; }
.ansvarigsok { margin-bottom: 0.6rem; }
/* Kryssrutorna staplas i modalen. I formuläret låg de på rad, vilket var
   poängen när de var få - i en modal är listan det man läser. */
.ansvarig-innehall .kryssrutor { flex-direction: column; gap: 0.1rem; }
.ansvarig-innehall .kryss { padding: 0.35rem 0; }

/* Engångslösenordet vid återställning (TASK-641). Monospace och luft runt
   om: det ska gå att läsa upp i telefon utan att blanda ihop tecken, och
   markeras med musen utan att man råkar få med texten omkring. */
.engangslosen {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  background: #fff;
  border: 1px solid var(--hs-ram);
  border-radius: 4px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  user-select: all;
}

/* Följdkryss under ett annat val - koståtkomsten hör till den ansvariga
   ovanför och ska läsas som en del av den raden (TASK-783). */
.kryss-under { margin-left: 1.6rem; font-size: 0.82rem; }

/* Varning om att platsnamnet liknar en befintlig. Gul och inte röd: det är
   en upplysning, inte ett fel - en kurs kan mycket väl hållas i
   "Slöjdlokalen, lilla salen" (TASK-782). */
.hjalp.platsvarning { color: #7a5a0a; }

/* Mejlhistoriken i deltagarraden. Listan ska gå att skanna - en rad per
   utskick, med det som skiljer dem åt först. */
.mejlhistorik { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.mejlhistorik li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--hs-ram);
  font-size: 0.87rem;
}
.mejlhistorik li:last-child { border-bottom: 0; }

/* Växel mellan två lägen, byggd som en länk och inte en kryssruta: valet
   ska fungera utan JS, och adressen ska gå att spara och skicka vidare.
   Etiketterna står på båda sidor så att man ser vad man växlar MELLAN, inte
   bara vad man växlar till. */
.vaxel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--hs-ui);
  font-size: .9rem;
}
.vaxel-etikett {
  color: var(--hs-svag);
}
.vaxel-etikett.aktiv {
  color: var(--hs-brun);
  font-weight: bold;
}
.vaxel-reglage {
  display: inline-block;
  position: relative;
  width: 2.6rem;
  height: 1.4rem;
  border-radius: .7rem;
  background: var(--hs-ram);
  border: 1px solid var(--hs-ram);
  transition: background .12s ease-in-out;
}
.vaxel-reglage:focus-visible {
  outline: 2px solid var(--hs-bla-lank);
  outline-offset: 2px;
}
.vaxel-reglage[aria-checked="true"] {
  background: var(--hs-bla);
  border-color: var(--hs-bla);
}
.vaxel-knopp {
  position: absolute;
  top: .1rem;
  left: .1rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transition: transform .12s ease-in-out;
}
.vaxel-reglage[aria-checked="true"] .vaxel-knopp {
  transform: translateX(1.2rem);
}

/* QR-koden till en aktivitets anmälan (TASK-593). Koden ska gå att syna
   innan den trycks, så den visas stor - men aldrig bredare än ytan, annars
   spränger den sidan på en telefon. */
.qr-yta {
  margin: 1rem 0;
}
.qr-knapp {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.qr-yta img {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
  padding: .5rem;
  border: 1px solid var(--kant, #d8d2c8);
  border-radius: 4px;
}
.qr-adress {
  margin: .5rem 0 0;
  word-break: break-all;
}

/* Återanvändbara QR-koder på föreningssidan (TASK-886). */
.foreningskoder { margin-top: 2rem; }
.foreningskod-figur { margin: 0; }
.foreningskod img {
  display: block;
  width: min(100%, 20rem);
  height: auto;
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--kant, #d8d2c8);
  border-radius: 4px;
}
@media (min-width: 641px) {
  .foreningskod img { width: 10rem; }
}


/* Förstoring i en modal, delad av publika sidor och admin. Låg här
   tidigare bara i publik.css, men QR-koden i admin behöver samma sak:
   den som ska visa koden för någon annan håller fram telefonen, och då
   ska koden fylla skärmen (TASK-593). */
.lightbox {
  border: 2px solid var(--hs-brun);
  border-radius: 4px;
  padding: 1rem;
  /* Bredd och inte max-width: platshållarna har ingen egen storlek att växa
     till, så rutan hade krympt ihop till samma format som på sidan och
     förstoringen blivit meningslös. En riktig <img> begränsas av
     .lightbox-bild img nedan. */
  width: min(64rem, calc(100vw - 2rem));
  background: #fff;
  color: #000;
}
.lightbox::backdrop { background: rgba(54, 31, 21, 0.72); }
.lightbox-bild { max-height: 76vh; overflow: auto; }
/* Klonen bär kvar klassnamnen, men i dialogen är den bara en bild - inte
   något man klickar vidare på. Se lightbox.js, som också tar bort
   data-lightbox från kopian. */
.lightbox-bild .skarmbildsyta,
.lightbox-bild .qr-knapp { cursor: default; }
.lightbox-bild button[disabled] { opacity: 1; }
.lightbox-bild img { display: block; width: 100%; height: auto; }
.lightbox-text {
  font-family: var(--hs-ui);
  font-size: 0.85rem;
  color: var(--hs-svag);
  margin: 0.6rem 0 0;
}
.lightbox-stang {
  float: right;
  margin: -0.4rem -0.3rem 0 0.5rem;
  border: 0;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--hs-brun);
}

/* Händelseloggens filter, klistrade vid fönstrets topp (TASK-903). Loggen
   kan bli hundratals rader - utan detta fick den som skrollat långt ned
   skrolla hela vägen upp igen för att byta filter. Toppraden i bas.html är
   inte själv klistrad, så den försvinner vid skroll och lämnar plats här -
   ett z-index räcker, ingen offset mot en fast header behövs. */
.handelser-filter {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--hs-ullvit);
  padding-top: 0.6rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--hs-ram);
}
/* Utvald aktivitetsbild: samma 3:2-yta i aktuell bild, uppladdning och val. */
.aktivitetsbild-uppladdning { margin-bottom: 2rem; }
.aktivitetsbild-aktuell {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.aktivitetsbild-aktuell img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: .25rem;
}
.bildval-miniatur {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: .25rem;
}
.bildval-miniatur img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bildval-info { min-width: 0; overflow-wrap: anywhere; }
.bildbeskarare {
  width: min(100%, 42rem);
  height: min(55vh, 28rem);
  margin: 1rem 0 .5rem;
}
.bildbeskarare > img { display: block; max-width: 100%; }
.aktivitetsbild-form {
  display: block;
  width: min(100%, 20rem);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: .25rem;
}
.bildval-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}
.bildval-kort {
  display: grid;
  gap: .35rem;
  padding: .6rem;
  border: 1px solid var(--hs-ram);
  border-radius: .3rem;
  cursor: pointer;
  font-weight: normal;
  min-width: 0;
  overflow: hidden;
}
.bildval-kort:has(input:checked) {
  outline: 3px solid var(--hs-bla);
  outline-offset: 1px;
}
@media (max-width: 600px) {
  .aktivitetsbild-aktuell { grid-template-columns: 1fr; }
  .bildbeskarare { height: 22rem; }
}