/* 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 radbryter huvudnavigationen och kontot i EN gemensam flödande
rad-uppsättning i stället för var för sig. Med nav och konto som två egna
flex-lådor tog navet hela bredden för sig (den gamla flex-basis:100%
nedan), och då hamnade "Inställningar" - den sjätte länken hos
förvaltare/admin - ensam på en egen rad när den inte fick plats bredvid de
fem andra (TASK-1043). display:contents tar bort navets och kontots EGNA
lådor men lämnar länkarna kvar i DOM:et, så de blir direkta flex-barn till
.topprad-menyrad och radbryter tillsammans - "Inställningar" hamnar då på
samma rad som Hjälp/kontonamnet i stället för att stå ensam. Övriga
selektorer (.globalnav a, .kontomeny form, m.fl.) matchar fortfarande,
eftersom de bara kräver att elementen finns i trädet, inte att navet har
en egen låda. */
@media (max-width: 640px) {
.topprad-menyrad { flex-wrap: wrap; gap: 0.5rem 1rem; }
.globalnav, .kontomeny { display: contents; }
.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;
/* Utan tak växer panelen med sitt längsta menyval och sprängde rutan på
mobil - "Ångra: informationen om personuppgifter förmedlad" räckte
(2026-08-07). Menyn är absolut placerad mot högerkanten, så bredden får
inte överstiga skärmen minus lite luft. Posterna radbryts i stället. */
max-width: min(22rem, calc(100vw - 1.5rem));
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 . 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;
/* Utan raden ärvde posterna radhöjd av sin teknik i stället för av menyn:
.lankknapp har font: inherit och fick sidans 1.5, medan en med
.radknapp fick webbläsarens normal. Samma meny mätte 39,6 px på en post
och 36,2 på nästa, valt av vilken klass mallen råkade skriva - precis
det knappspråket finns för att stoppa (TASK-1029). */
line-height: 1.5;
cursor: pointer;
/* Knappar radbryter inte av sig själva. En etikett som säger VAD den gör
blir ibland lång, och den ska vika ned sig i stället för att bredda
menyn. */
white-space: normal;
overflow-wrap: break-word;
}
.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); }
/* VILKEN klass en åtgärd ska ha avgörs av docs/design.md, avsnittet
"Knappspråket" - inte av vad som råkar ligga i närheten. Kort: .knapp är
sammanhangets huvudåtgärd, .knapp.sekundar en sidoåtgärd med egen tyngd,
.knapp.fara det destruktiva som bekräftas i en modal, .tabort den lilla
som tar bort en rad ur ett formulär, .lankknapp posterna i en meny. */
.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; }
/* En rad med flera knappar. Låg tidigare som inline-element i ett stycke
med margin-left på den andra: vid 390 px bröt de till var sin rad, den
andra drogs in av sin marginal och luften mellan dem försvann, eftersom
inline-element inte har någon (Rasmus fynd 2026-08-19). Flex med gap
håller dem i linje oavsett hur många som får plats på raden. */
.knapprad {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.6rem 0 0.2rem;
}
/* Formuläret blir en flexrad det med. Utan den raden är knappen inuti ett
inline-block på en textrad, och radens line-height lägger på ett drygt
halvt tiotal pixlar under den - formuläret blir högre än sin knapp, raden
blir lika hög, och LÄNKEN bredvid sträcks till den höjden medan knappen
inte gör det. Resultatet var två knappar med olika höjd bredvid varandra
(Rasmus fynd 2026-08-19). */
.knapprad form { margin: 0; display: flex; }
/* Ett frågeblock i aktivitetsformuläret. Sparade frågor står hopfällda och
öppnas med redigera-knappen; fälten ligger kvar i DOM:en och postas även
när blocket är hopfällt. Åtgärderna sitter i sammanfattningen så ordningen
går att ändra utan att först öppna frågan. */
.frageblock {
border: 1px solid var(--hs-ram);
border-radius: 4px;
padding: 0.6rem 1rem;
margin-bottom: 0.6rem;
background: #fff;
}
.frageblock[open] { padding-bottom: 1rem; }
.frageblock > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.frageblock > summary::-webkit-details-marker { display: none; }
.frageblock[open] > summary { margin-bottom: 0.8rem; }
.frageblock-text {
/* Frågans egen text är blockets rubrik - det man läser listan efter när
allt är hopfällt. Black skiljer den från den grå räknaren bredvid; vid
Medium flyter "Fråga 1" och frågetexten ihop till en rad. Stod som 600,
vilket ritas som Black ändå (se tokens.css). */
font-weight: 900;
/* Långa frågor ska inte trycka ut åtgärderna ur raden. */
flex: 1 1 12rem;
min-width: 0;
overflow-wrap: anywhere;
}
.frageblock-atgarder {
display: flex;
gap: 0.3rem;
margin-left: auto;
flex: none;
}
/* Flyttpilarna står först i raden, före numret - de ändrar frågans plats,
och platsen är det numret säger. */
.frageblock-flytt {
display: flex;
gap: 0.25rem;
flex: none;
}
/* Knapparna i frågans sammanfattning. Egna regler och inte minitabellens:
de står i en summary, ska ha samma höjd som varandra oavsett om de bär en
pil eller ett ord, och måste tåla att radbrytas under frågetexten på en
smal skärm. */
.frageblock-atgarder .miniatgard,
.frageblock-flytt .miniatgard {
display: inline-flex;
align-items: center;
justify-content: center;
height: 1.7rem;
padding: 0 0.55rem;
font-family: var(--hs-ui);
font-size: 0.72rem;
line-height: 1;
border: 1px solid var(--hs-ram);
border-radius: 4px;
background: #fff;
color: var(--hs-bla-lank);
cursor: pointer;
transition: background-color 0.1s, border-color 0.1s;
}
.frageblock-atgarder .miniatgard:hover,
.frageblock-flytt .miniatgard:hover {
border-color: var(--hs-bla);
background: #eef6fb;
}
/* Tangentbordsfokus ska synas lika tydligt som ett musklick - knapparna är
små och ligger tätt. */
.frageblock-atgarder .miniatgard:focus-visible,
.frageblock-flytt .miniatgard:focus-visible {
outline: 2px solid var(--hs-bla);
outline-offset: 1px;
}
/* Pilarna är kvadratiska och bär bara sin symbol. Utan fast bredd blev de
olika breda i olika webbläsare, och två knappar bredvid varandra som inte
är lika stora ser ut som ett fel. */
.frageblock-flytt .miniatgard-pil {
width: 1.7rem;
padding: 0;
font-size: 0.9rem;
color: var(--hs-svag);
}
.frageblock-flytt .miniatgard-pil:hover { color: var(--hs-bla-lank); }
/* Redigera är gruppens huvudåtgärd och bär därför ramen i blått.
Vikten stod som 600, vilket inte finns: Akzidenz levereras i 500 och 900.
CSS:ens matchning väljer UPPÅT för en önskad vikt över 500, så 600 ritades
som Black - inte som Medium, vilket var det man trodde. Mätt 2026-08-08
(TASK-1029): 'Redigera' blir 49 px vid 500 och 54 px vid 600, 700, 800 och
900. Numret står nu som 900, alltså det som faktiskt ritas. Ändra det inte
till 600 igen i tron att det blir lättare. */
.frageblock-atgarder .miniatgard-primar {
border-color: var(--hs-bla-lank);
font-weight: 900;
}
.frageblock-atgarder .miniatgard-fara { color: var(--hs-svag); }
.frageblock-atgarder .miniatgard-fara:hover {
border-color: var(--hs-rod);
background: #fdeae6;
color: var(--hs-rod);
}
/* Åtgärderna hamnar under frågetexten på smal skärm. Då ska de ligga till
vänster som allt annat, inte pressas mot högerkanten. */
@media (max-width: 640px) {
.frageblock-atgarder { margin-left: 0; }
}
/* En hopfälld fråga som slutat ställas ska gå att se på avstånd. */
.frageblock:has([data-inaktivruta]:checked) .frageblock-text {
text-decoration: line-through;
color: var(--hs-svag);
}
/* Sammanställningen av svaren på en fråga. Med FLERA frågor blir rutorna en
accordion - fyra utfällda rutor sköt ned deltagarlistan under vikningen,
och den som öppnar sidan vill oftast till listan. Rubriken behåller sitt
utseende; det enda som tillkommer är att den går att klicka på. */
.fragesummering { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.fragesummering > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: baseline;
gap: 0.4rem;
}
.fragesummering > summary::-webkit-details-marker { display: none; }
.fragesummering > summary::after {
content: "\25be";
margin-left: auto;
color: #075b7d;
}
.fragesummering[open] > summary::after { content: "\25b4"; }
/* Rubriken ligger inuti summary för att bära samma stil som i en utfälld
ruta - h3 är block, och skulle annars trycka ned pilen på egen rad. */
.fragesummering > summary h3 { display: inline; margin: 0; }
.fragesummering[open] > summary { margin-bottom: 0.4rem; }
/* 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; }
/* Butikens artiklar. Ett kort per sak, med bild, pris och båda
betalvägarna - koden för den som skannar från en annan enhet, knappen för
den som redan är i telefonen. Minsta bredd 15rem så en artikel aldrig
klipps: ett pris som bryter mitt itu ser ut som ett fel. */
/* Artikelradens två åtgärder. Ändra blir en modalknapp via radmodal.js,
Ta bort står framme i rött - båda är sällan använda och ingen av dem är
den ena "som hör till läget", så en meny för två val vore ett klick i
vägen. */
.artikelatgarder { white-space: nowrap; }
.artikelatgarder > * { display: inline-block; vertical-align: middle; }
.artikelatgarder form { margin-left: .3rem; }
/* På smal skärm staplas de i stället. Bredvid varandra hamnade Ta bort
utanför cellen, och tabellen skrollar i sidled - man fick leta efter en
knapp som såg ut att saknas. Mätt vid 390 px. */
@media (max-width: 640px) {
.artikelatgarder > * { display: block; }
.artikelatgarder form { margin: .3rem 0 0; }
/* Knapparna behåller sin egen bredd. width:100% av en smal åtgärdscell
gav en knapp smalare än sin text, och "Ta bort" bröt till två rader. */
.artikelatgarder .knapp { display: block; }
}
.butiksrutnat {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
gap: 1rem;
margin: 1.2rem 0;
/* Korten i en rad blir lika höga. En artikel med en beskrivning är annars
högre än sina grannar och kanterna blir ojämna. Att knappen ändå hamnar
längst ned i alla löses av margin-top:auto nedan - det var därför den
här en gång stod på start (Rasmus 2026-09-09).
En artikel MED bild gör förstås sin rad högre, och det är avsikten. */
align-items: stretch;
}
.butiksartikel {
text-align: center;
display: flex;
flex-direction: column;
/* align-items, inte bara text-align: i en flexkolumn är bilden ett
flex-item, och text-align styr inte var ett sådant hamnar. Utan den
här stod QR-koden vänsterställd i ett kort med centrerad text. */
align-items: center;
}
/* Betalvägen sist, oavsett hur mycket text artikeln har - koden och
knappen ska ligga i linje mellan grannarna. Båda kan vara det sista
elementet beroende på vad enheten visar, så regeln träffar dem båda och
inte bara ett p. */
.butiksartikel > .butikskod,
.butiksartikel > .butikslank { margin-top: auto; }
.butiksartikel > .butikskod + .butikslank { margin-top: .4rem; }
.butiksartikel h2 { font-size: 1.05rem; margin: .4rem 0 .2rem; }
.butiksbild {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 4px;
}
.butikspris { font-weight: bold; font-size: 1.2rem; margin: 0 0 .4rem; }
.butikskod { max-width: 100%; height: auto; margin: .4rem auto; }
/* VILKEN BETALVÄG SOM VISAS.
En telefon kan inte skanna en kod på sin egen skärm, och den som sitter
vid en dator har ingen Swish-app att öppna. Enheten avgör därför i
förvalet - med pointer och hover, inte med user agent, som ljuger så
snart någon kopplar in ett tangentbord eller byter läge.
Ett val i växeln vinner över förvalet: en i styrelsen kan vilja hålla
fram SIN telefon med koderna åt någon annan att skanna. */
@media (hover: hover) and (pointer: fine) {
.butiksrutnat:not([data-visa]) .butikslank { display: none; }
}
@media (hover: none), (pointer: coarse) {
.butiksrutnat:not([data-visa]) .butikskod { display: none; }
}
.butiksrutnat[data-visa="kod"] .butikslank { display: none; }
.butiksrutnat[data-visa="lank"] .butikskod { display: none; }
/* Växeln finns bara med JavaScript - utan skript styr media queries, och
en knapp som inte gör något vore sämre än ingen knapp. Mallen döljer
den, skriptet visar den. */
.butiksvaxel { display: flex; flex-wrap: wrap; gap: .5rem;
align-items: center; margin: 1rem 0; }
.butiksvaxel .hjalp { margin: 0; }
.butiksvaxel button {
font-family: var(--hs-ui);
font-size: .85rem;
padding: .4rem .8rem;
border: 1px solid var(--hs-ram);
border-radius: 3px;
background: #fff;
cursor: pointer;
}
.butiksvaxel button[aria-pressed="true"] {
border-color: var(--hs-bla-lank);
background: var(--hs-ullvit);
font-weight: bold;
}
/* Symbolvalet i Swish-generatorn: märket visas, inte bara namnet. Radion
ligger kvar och syns - den bär valet för tangentbord och skärmläsare, och
en dold radio ersatt av en ram hade tagit bort fokusmarkeringen. */
.symbolval { display: flex; flex-wrap: wrap; gap: .5rem; }
.symbolval label {
display: flex;
align-items: center;
gap: .5rem;
font-weight: normal;
margin: 0;
padding: .5rem .8rem .5rem .6rem;
border: 1px solid var(--hs-ram);
border-radius: 4px;
cursor: pointer;
}
.symbolval label:has(input:checked) {
border-color: var(--hs-bla-lank);
background: var(--hs-ullvit);
}
.symbolval img { display: block; }
/* 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;
}
/* H3 är text där grannarna är ikoner. Black för att den ska väga lika mycket
som B och H i verktygsraden - stod som 700, som ritas som Black ändå. */
.EasyMDEContainer .editor-toolbar .rubrikniva-3::after {
content: "H3";
font-family: var(--hs-ui);
font-size: 0.72rem;
font-weight: 900;
}
.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; }
/* Att tabellen fortsätter i sidled ska SYNAS, inte bara fungera - annars
hittar man aldrig Status, Att betala och Åtgärder på en telefon (TASK-1039).
Innehållet tonas ut i kanten, det ligger INTE en skugga bakom det. En
bakgrundsskugga var första försöket och kan inte fungera i den här
tabellen: etiketterna har egen bakgrund och målade över den precis där den
behövdes, och den vita täckning som skulle dölja skuggan i fel ände tog
samtidigt bort radernas skiljelinjer och syntes som ett ljust band.
Masken sitter på behållarens box, inte på det som skrollar, så toningen
står stilla i kanten medan innehållet glider förbi. Vilket håll det finns
mer åt sätts av app/static/tabellsvep.js - utan skript sätts inget
attribut, ingen mask läggs på, och tabellen beter sig som förut. */
.tabellsvep { overflow-x: auto; }
.tabellsvep[data-mer="hoger"] {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent);
}
.tabellsvep[data-mer="vanster"] {
-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.2rem), transparent);
mask-image: linear-gradient(to left, #000 calc(100% - 2.2rem), transparent);
}
.tabellsvep[data-mer="bada"] {
-webkit-mask-image: linear-gradient(to right, transparent, #000 2.2rem,
#000 calc(100% - 2.2rem), transparent);
mask-image: linear-gradient(to right, transparent, #000 2.2rem,
#000 calc(100% - 2.2rem), transparent);
}
/* En öppen radmeny får sticka UT ur svepet på desktop (se regeln längre ner
som sätter overflow: visible). En mask klipper mot elementets box oavsett
overflow, så den måste bort samtidigt - annars tonas menyn ut mot kanten,
eller försvinner. Toningen behövs ändå inte just då: man läser menyn, inte
tabellen. */
.tabellsvep:has(.radmeny[open]) {
-webkit-mask-image: none;
mask-image: none;
}
/* Adminsökningens träfflista (TASK-993): en grupp per förening (om fler än
en), och inom den två undergrupper - Aktiviteter och Deltagare - så att
träfftyperna går att skilja åt även med bara en förening. */
/* Luften ligger på gruppen och inte bara mellan syskonen: annars klistras
den FÖRSTA föreningsrubriken direkt under träffräkningen. */
.sokgrupp { margin-top: 1.6rem; }
.sokgrupp + .sokgrupp { padding-top: 1.2rem; border-top: 1px solid #e6e3da; }
.sokgrupp-rubrik { margin: 0 0 0.6rem; }
.sokgrupp-undergrupp {
margin: 0.9rem 0 0.3rem;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--hs-svag);
}
.sokgrupp-undergrupp:first-of-type { margin-top: 0; }
/* Inställningssökningens träfflista (TASK-1253): en flytande panel under
fältet, inte en indragen som knuffar sidans innehåll. Samma
panelmönster som .atgardsmeny > div - absolut placerad, egen bakgrund,
skugga - men ankrad mot sökfältet i stället för mot en knapp, eftersom
det här är en sökruta och inte en meny. */
.installningssok { position: relative; max-width: 34rem; }
.installningssok-falt { width: 100%; box-sizing: border-box; }
.installningssok-traffar {
position: absolute;
left: 0;
right: 0;
z-index: 20;
margin: 0.35rem 0 0;
padding: 0.25rem 0;
list-style: none;
max-height: 60vh;
overflow-y: auto;
background: #fff;
border: 1px solid var(--hs-ram);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.installningssok-traffar[hidden] { display: none; }
/* Hela träffen är en enda klickyta - länken omsluter raden, inte bara
etiketten - men bara etiketten stryks under. Brödsmulan säger var
inställningen bor, den är ingen egen destination. */
.installningssok-lank {
display: block;
padding: 0.5rem 0.9rem;
text-decoration: none;
color: inherit;
}
.installningssok-lank:hover,
.installningssok-lank:focus-visible { background: var(--hs-ullvit); }
.installningssok-lank:focus-visible {
outline: 3px solid var(--hs-bla);
outline-offset: -2px;
}
.installningssok-brodsmula { display: block; margin-bottom: 0.1rem; }
.installningssok-etikett { display: block; font-weight: 900; color: var(--hs-brun); }
.installningssok-lank:hover .installningssok-etikett,
.installningssok-lank:focus-visible .installningssok-etikett { text-decoration: underline; }
.installningssok-varde { display: block; margin-top: 0.1rem; }
.installningssok-tom { padding: 0.6rem 0.9rem; margin: 0; }
/* 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å 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"],
/* EasyMDE gömmer textarean, så ramen måste sitta på containern - annars
märks ett tomt obligatoriskt editorfält inte alls. */
.EasyMDEContainer[aria-invalid="true"] .CodeMirror,
.EasyMDEContainer[aria-invalid="true"] .editor-toolbar {
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.
Knappen kommer från två håll - radmodal.js sätter in den som syskon till
sin details, mallen skriver den i ett formulär - 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å: det här är radens vanliga åtgärd, inte en
destruktiv.
Erbjud plats bar tidigare .tabort och tvingade fram ett undantag här,
eftersom den klassen är röd i hover och inte tar bort något. Den bär
.radknapp sedan 2026-08-08 (TASK-1029) - byt klass i stället för att böja
regeln nästa gång samma sak dyker upp.
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 .radknapp {
margin: 0;
padding: 0.3rem 0.7rem;
border: 1px solid var(--hs-ram);
border-radius: 4px;
background: none;
/* En ä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 .radknapp: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; }
/* Mötets tre steg (TASK-1286). Länkar och inte knappar - de byter vy, och
det hör hemma i URL:en. Formen lånar av toppradens globalnav: understruken
markering på den aktiva, ingen ram runt de andra, så raden läser som en
väg och inte som tre knappar att välja mellan. */
.motesteg { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem;
margin: 0 0 0.4rem; }
.motesteg a {
display: block;
padding: 0.35rem 0 0.5rem;
border-bottom: 3px solid transparent;
text-decoration: none;
color: var(--hs-bla-lank);
}
.motesteg a:hover { border-bottom-color: var(--hs-ram); }
/* Delstegen under mötet. Mindre än huvudstegen, eftersom de hör under ett av
dem - raden ska läsas som en indelning av Under mötet, inte som ett fjärde
huvudsteg. */
.motesteg-under-rad {
gap: 0.25rem 1.1rem;
margin-top: -0.4rem;
font-size: 0.85rem;
}
.motesteg-under-rad a { padding-bottom: 0.25rem; }
.motesteg a.aktiv { border-bottom-color: var(--hs-bla); color: var(--hs-brun); }
.motesteg-namn { display: block; font-weight: 900; font-size: 0.95rem; }
.motesteg-under { display: block; font-size: 0.78rem; color: var(--hs-svag); }
.motesteg-lage { margin-top: 0; border-top: 1px solid var(--hs-ram);
padding-top: 0.5rem; }
/* Datumfrågan på uppdragssidan: ett fält och en knapp på en rad, i fältets
bredd och inte i sidans. I en radrad blev knappen en fjärdedel av sidan
bred och läste som ett sparaformulär. */
.datumfraga { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem;
margin-bottom: 1.25rem; }
.datumfraga > div { display: flex; flex-direction: column; }
.datumfraga label { margin: 0; }
.datumfraga input { margin: 0; width: auto; }
.datumfraga .knapp { margin: 0; }
.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; }
/* Svarsalternativen är korta - "Soppa", "Paj" - och ett fält som spänner
över hela formuläret säger att man väntar sig en mening. Bredden är en
upplysning om vad som ska in, inte bara utrymme. Under 520px tar
.rad-regeln över och staplar raden, då gäller full bredd som för allt
annat. */
#fragealternativ .rad { max-width: 30rem; }
/* Samma sak för deltagarens Annat-svar: en rätt, inte en mening. */
#fragesvar_annat { max-width: 30rem; }
/* 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; }
/* Även select, och även när radmodal.js lyft formuläret in i modalen -
där gäller inte .andra-uppgifter längre. Luften under sista fältet är
det som skiljer dropdownen från spara-knappen, och den får inte hänga
på att ett fält bredvid råkar vara synligt: nyperson.js gömmer
namnfälten när en person valts ur listan, och då stod knappen tätt
mot dropdownen (Rasmus fynd 2026-08-19, TASK-1335). */
.andra-uppgifter input, .andra-uppgifter select,
.radmodal-innehall input, .radmodal-innehall select {
margin-bottom: 0.4rem;
}
/* En knapp DIREKT efter ett fält behöver egen luft. Fältens avstånd ligger
på fälten, och de flesta formulär har en hjälptext emellan som bär det -
men där den saknas hamnar knappen tätt mot rutan. Regeln finns för att
samma fel inte ska behöva hittas ett formulär i taget (Rasmus fynd
2026-08-19, samma familj som TASK-1335). */
/* DOLDA FÄLT RÄKNAS INTE. Nästan varje formulär börjar med en dold
csrf-input, och står knappen näst efter den fick den luft som ingen bad
om - i larmrutan sköt det ner knappen så att den blev lägre än länken
bredvid, som sträcktes till radens höjd (Rasmus fynd 2026-08-19). */
input:not([type=hidden]) + .knapp,
select + .knapp,
/* EasyMDE flyttar in textarean i en container, så knappen slutar vara
textareans syskon och tappade luften ovanför - dikt an mot editorns ram
(Rasmus fynd 2026-09-04). Samma värde som utan JS, annars flyttar sig
knappen när skriptet laddat. */
.EasyMDEContainer + .knapp,
textarea + .knapp { margin-top: 0.6rem; }
.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;
/* En ärver inte sidans typsnitt. Raden fanns bara på varianten
inuti .radatgarder-inre, så en knapp som stod bart i en cell - kostlistans
Ändra kostuppgift - sattes i webbläsarens Arial mot husets Akzidenz
Grotesk på grannytorna. Vikt 500 i Arial läser dessutom tunnare än 400
gör i Akzidenz, så knappen såg klenare ut trots högre vikt (TASK-1494). */
font-family: var(--hs-ui);
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;
/* I en tabellrad behåller knappen sin form och tabellen skrollar i stället.
Bröt etiketten blev knappen två rader hög i den trånga cellen och en rad
i den vida - samma sorts åtgärd i olika höjd, avgjort av hur många
kolumner tabellen råkade ha (TASK-1494). I en åtgärdsmeny gäller
motsatsen: där finns ingen skroll och en lång etikett SKA vika ned sig,
så .atgardsmeny > div .radknapp sätter tillbaka normal. */
white-space: nowrap;
}
.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: 900; }
.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å , 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;
}
/* Mejlexemplen består av en sida som i sin tur bäddar in det kompletta
HTML-mejlet. Den vanliga breda modalen gav därför två små rullningsytor
ovanpå varandra. Bara den här dialogen får ta nästan hela viewporten och
ramen fyller höjden som blir kvar efter rubrik och scenarioval. */
.modal-mejlexempel {
max-width: 78rem;
height: calc(100vh - 2rem);
height: calc(100dvh - 2rem);
max-height: 58rem;
}
.modal-mejlexempel[open] {
display: flex;
flex-direction: column;
}
.modal-mejlexempel .modal-huvud { flex: 0 0 auto; }
.modal-mejlexempel .modal-innehall {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
max-height: none;
overflow: hidden;
}
.mejlexempel-scenarier {
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0 0 0.8rem;
}
.mejlexempel-ram {
width: 100%;
min-height: 0;
flex: 1 1 auto;
border: 1px solid var(--hs-ram);
border-radius: 4px;
background: #fff;
}
@media (max-width: 640px) {
.modal-mejlexempel {
width: calc(100vw - 1rem);
height: calc(100vh - 1rem);
height: calc(100dvh - 1rem);
padding: 0.75rem;
}
}
/* Ett val som hör till åtgärden, ovanför knapparna */
.modal-val { margin: 0 0 1rem; font-size: 0.88rem; }
/* En uppgift som hör till beslutet - varför någon avanmäls. Etiketten är en
fråga och står därför ovanför fältet, inte bredvid det som kryssrutans. */
.modal-falt { margin: 0 0 1rem; }
.modal-falt label {
display: block;
margin-bottom: 0.25rem;
font-size: 0.88rem;
font-weight: bold;
}
.modal-falt input { width: 100%; margin: 0; }
.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%; }
}
/* 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. */
/* Fyra formatknappar som viker ned sig i stället för att skjuta ut ur
skärmen på en telefon. */
.prislistelankar { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Butikens prislista: en lapp att sätta på bordet.
Måtten är i mm eftersom papper mäts så - en kod angiven i rem krymper med
webbläsarens textstorlek och blir svårskannad utan att någon märker det.
35 mm är väl över Swish egen minsta rekommenderade storlek. */
.prislista { max-width: 100%; }
.prislistehuvud h1 { margin: 0 0 .2rem; }
.prislistehuvud p { margin: 0 0 1rem; color: var(--hs-svag); }
.prislisterutnat {
display: grid;
grid-template-columns: repeat(var(--kolumner, 2), 1fr);
gap: 6mm;
}
.prisruta {
text-align: center;
border: 1px solid var(--hs-ram);
border-radius: 4px;
padding: 4mm;
/* Håll ihop rutan över en sidbrytning. En artikel vars kod hamnar på
nästa sida är obrukbar. */
break-inside: avoid;
}
.prisruta img { width: 35mm; height: 35mm; display: block; margin: 0 auto 2mm; }
.prisruta h2 { font-size: 1rem; margin: 0 0 .2rem; }
.prisruta-pris { font-weight: bold; font-size: 1.3rem; margin: 0; }
.prisruta-info { font-size: .8rem; color: var(--hs-svag); margin: .2rem 0 0; }
.prislistefot { margin-top: 6mm; font-size: .85rem; }
.prislistefot p { margin: 0 0 .2rem; }
@media print {
.toppvarning, .topprad, .globalnav, .sidatgarder,
.larm, .rutnat, .tomt, .hjalp, .ej-utskrift,
form, details, button, .knapp, .lankknapp { display: none !important; }
/* Prislistans egna delar ska däremot MED - de är hela poängen med
papperet. Sidhuvudet nedan gäller adminsidor och hör inte hit. */
.prislista .prisruta-info { display: block !important; color: #333; }
.prislista { color: #000; }
.prisruta { border-color: #999; }
/* 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);
}
/* Den valda sidan av växeln bär både färg och vikt: reglaget är litet, och
en färgskillnad ensam är svag för den som ser färg dåligt. Stod som bold,
som ritas som Black ändå. */
.vaxel-etikett.aktiv {
color: var(--hs-brun);
font-weight: 900;
}
.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[type="button"] {
margin: 0;
padding: 0;
min-width: 2.6rem;
cursor: pointer;
}
.vaxel-reglage:disabled { opacity: .55; cursor: wait; }
.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