ett paragraftecken — och då sköt
kolumnen in tre centimeter luft efter varje "1 §" och lade lydelsen i en
spalt för sig. Etiketterna har nu en egen lista, paragraftecknet en egen
klass, och de två delar ingen regel längre. */
/* Lagtexten sätts större och luftigare än gränssnittet omkring. --text-m är
rätt för en etikett i en meny och för trångt för femtio paragrafer i rad:
raderna är långa, meningarna är inskjutna, och 1,5 i radhöjd knep ihop dem
till en grå massa. Det här är det enda stället i tjänsten som sätts som en
lässida, och därför det enda som går utanför typskalan. */
.innehall.lagtext { font-size: 1rem; line-height: 1.62; }
/* Rubriknivåerna är fyra i en svensk författning, och de betyder olika saker.
Första h2 är lagens titel. Följande h2 är en avdelning — socialförsäkrings-
balken har åtta, "AVD. A ÖVERGRIPANDE BESTÄMMELSER" — och de fick tidigare
titelns utseende med marginalen bortnollad, så att en avdelning som börjar
mitt i dokumentet klistrade sig fast i paragrafen ovanför. h3 är kapitel,
h4 är paragrafrubriken. */
.lagtext h2 {
margin: var(--rum-5) 0 var(--rum-3);
padding-top: var(--rum-3); border-top: var(--linje) solid var(--line);
font-size: var(--text-s); text-transform: uppercase;
letter-spacing: var(--spar-etikett); color: var(--dim);
}
.lagtext h2:first-child {
margin: 0 0 var(--rum-4); padding-top: 0; border-top: none;
font-size: 1.45rem; line-height: var(--radhojd-tat); text-transform: none;
letter-spacing: var(--spar-rubrik); color: var(--fg);
}
/* Kapitelrubriken bär ett streck och ska ha luft ovanför strecket, annars
klistrar den sig i paragrafen före. Paragrafrubriken var mindre än
brödtexten den rubricerade — en rubrik kan sänka rösten, men inte krympa
under det den står över. */
.lagtext h3 { margin: var(--rum-6) 0 var(--rum-4); padding-top: var(--rum-4);
border-top: var(--linje) solid var(--line); font-size: 1.2rem; }
.lagtext h4 { margin: var(--rum-5) 0 var(--rum-2); font-size: 1rem;
color: var(--dim); }
/* Riksdagen sätter kapitelhänvisningarna i och radar upp dem med
mellanslag. Texten är lagtext och ingen kod — den behåller sin fasta bredd
för att uppställningen ska hålla, men inte kodrutans platta och ram. */
/* Uppställningen håller sin fasta bredd, men i en smal panel går den utanför
den — och då ska den gå att rulla i sig själv i stället för att kapas mot
kanten. */
.lagtext pre { background: none; padding: 0; border-radius: 0;
margin: var(--rum-2) 0; font-size: .875em;
color: var(--fg); overflow-x: auto; }
.lagtext p { margin: var(--rum-4) 0; }
/* Huvudet: etikett och värde i två spalter, som ett dokumenthuvud ska stå. */
.lagmeta {
display: grid; grid-template-columns: 11rem 1fr;
gap: .3rem var(--rum-3); margin: 0 0 var(--rum-5);
padding-bottom: var(--rum-4); border-bottom: var(--linje) solid var(--line);
font-size: var(--text-s);
}
.lagmeta dt { color: var(--dim); }
.lagmeta dd { margin: 0; }
/* Dokumenthuvudet stänger med ett streck, och rubriken efter det — oftast
"Innehåll:" — öppnar med ett eget. Två linjer fyrtio pixlar isär läser sig
som ett fel i sättningen. Den andra stryks; huvudets streck räcker som
avslut. Riksdagen packar ibland in rubriken i en , ibland inte, så
båda formerna måste träffas. */
.lagtext .lagmeta + :is(h2, h3),
.lagtext .lagmeta + div > :is(h2, h3):first-child {
border-top: none; padding-top: 0; margin-top: var(--rum-5);
}
/* Paragraftecknet hänger ut i marginalen och lydelsen radar upp sig i en
spalt under sig själv — så är svensk lagtext satt, och så går den att
ögna igenom efter ett nummer. */
.lagtext .paragrafnr {
display: inline-block; min-width: 1.9rem; margin-right: .5rem;
font-weight: var(--vikt-rubrik); color: var(--fg);
/* text-indent ÄRVS, och en inline-block har en egen första rad att lägga
den på. Utan nollställningen drogs paragraftecknet undan två gånger: en
gång som första ordet på styckets rad, en gång inuti sin egen ruta — och
andra gången bar det ut siffran genom panelens vänsterkant. Rutan låg
kvar där den skulle, så inget mätvärde avslöjade det; bara ögat, som såg
"3 §" bli "§". */
text-indent: 0;
}
.lagtext p:has(> .paragrafnr) { padding-left: 2.4rem; text-indent: -2.4rem; }
/* En
-rad inuti ett stycke är i praktiken en post i en lista: en definition
i 1 kap. 4 §, ett kapitel i uppräkningen i 2 §. Som block med hängande
indragning syns det vilken rad som är en egen post och vilken som bara är
fortsättningen på raden ovanför — som ren radbrytning gick de inte att
skilja åt. */
.lagtext .lagrad { display: block; padding-left: 1.5rem; text-indent: -1.5rem; }
.lagtext .lagrad + .lagrad { margin-top: .3rem; }
.lagtext p:has(> .paragrafnr) .lagrad:first-child { padding-left: 0; text-indent: 0; }
/* Ändringsförfattningen efter en lydelse — "Lag (2022:596)" — är en hänvisning
och inte en del av regeln. Den behåller sin kursiv men sänker rösten. */
.lagtext i { color: var(--dim); font-size: .875em; }
.lagtext ul { padding-left: 1.2rem; }
.lagtext li { margin: .15rem 0; }
@media (max-width: 560px) {
.lagmeta { grid-template-columns: 1fr; gap: 0 0; }
.lagmeta dt { margin-top: var(--rum-2); }
.lagtext p:has(> .paragrafnr) { padding-left: 2.2rem; text-indent: -2.2rem; }
.lagtext .paragrafnr { min-width: 1.7rem; margin-right: .4rem; }
}
/* ---- designväxel (arbetsredskap, inte del av produkten) --------------- */
.designval { display: flex; gap: var(--rum-2); align-items: baseline;
margin-bottom: var(--rum-4); font-size: var(--text-s);
font-family: var(--font-ui); }
.designrubrik { color: var(--dim); font-size: var(--text-xs);
text-transform: var(--etikett-transform);
letter-spacing: var(--spar-etikett); }
.designval a { border: var(--linje) solid var(--line); border-radius: var(--rundning-pill);
padding: .1rem .7rem; text-decoration: none; color: var(--fg);
opacity: var(--meny-opacitet); }
.designval a:hover { opacity: 1; }
.designval a.vald { background: var(--chip-pa); color: var(--chip-pa-fg);
border-color: var(--chip-pa); opacity: 1; }
/* =====================================================================
* PORTALEN — startsidans uppbyggnad
*
* Tre våningar i full bredd: herobandet med sökfältet och nästa reform,
* innehållet som typkort, och materialets och tjänstens skick längst ner.
* Banden går kant i kant; innehållet hålls in av .hjul.
*
* Fyra färgfamiljer säger vad en sida är för slags källa — bindande
* författning, en aktör, ett belopp, eller något som varken binder eller
* beslutar. Elva typer och elva färger vore brus; fyra är en upplysning.
*
* Accenten är handlingsblå och används på ett enda ställe — hämtningsknappen —
* så att blicken vet var det går att göra något. Den var bärnsten tidigare,
* men tjänsten har redan en färg som betyder "härifrån leder något vidare":
* --handling-fg på railens handlingar. Två accenter för samma sak är en för
* mycket, och den som fanns på två ställen vann.
* ================================================================== */
:root {
/* Samma blå som --handling-fg. Där bär den text på en ljus platta, här
är den plattan själv — vitt på #0a5ec9 ger 6,7:1 och håller. */
--kr-accent: #0a5ec9;
--kr-accent-fg: #ffffff;
--kr-ok: #2f7d52;
--kr-varning: #b4761d;
--kr-horisont: #7b5ea8;
--kr-yta: var(--yta);
--kr-botten: #f6f6f8;
--kr-ram: var(--line);
/* Familjerna. Botten bär ikonen, färgen bär strecket. */
--fam-forfattning-bg: #ebe7f2;
--fam-forfattning-fg: #7b5ea8;
--fam-aktor-bg: #e0ebe5;
--fam-aktor-fg: #2f7d52;
--fam-belopp-bg: #faf0e0;
--fam-belopp-fg: #c1811f;
--fam-neutral-bg: #f2f2f7;
--fam-neutral-fg: rgba(0, 0, 0, .55);
/* Auktoriteten är inte en familj — den säger hur hårt sidan binder, inte
vad slags källa den är. Bindande får plommon, en egen ton som inte
kolliderar med författningsfamiljens lavendel. */
--auktoritet-bindande-bg: #f3e3ec;
--auktoritet-bindande-fg: #8a3b62;
/* Framtida lydelser är varken en varning eller en familj: texten gäller,
men inte än. Teal är den enda lediga tonen i paletten — inte gult som
varnar, inte rött som upphäver, inte lavendel som redan bär författning. */
--framtid-bg: #e3eff1;
--framtid-fg: #14676f;
--framtid-ram: #b9d8dc;
/* Kategorier ovanpå familjerna. Familjen säger vad slags källa sidan är;
kategorin pekar ut en snävare grupp som ska läsas som en enhet. Den här
är bindande svensk författning — lag, förordning, föreskrift. EU-rättsakt
och förarbete ingår inte: det ena är EU-rätt, det andra binder inte alls.
Fylld färg med vit text, inte en pastell med mörk text som familjerna.
Den skillnaden är hela poängen — kategorin ska sticka ut ur familjen.
Samma värden i båda lägena; en fylld yta behöver inte ljusna i mörkt. */
--kat-forfattning-bg: #4a6d8b;
--kat-forfattning-fg: #ffffff;
/* Branschvillkoren: avtalsgrundade, inte författning. Egen fylld färg så
att de läses som en grupp bredvid författningarna, inte som en av dem. */
--kat-avtal-bg: #4b765a;
--kat-avtal-fg: #ffffff;
/* EU-rättsakterna: bindande, men EU-rätt och inte svensk författning. */
--kat-eu-bg: #3f3d8a;
--kat-eu-fg: #ffffff;
/* Myndigheter och organisationer: vit yta med mörkgrå ram och text — den
enda kategorin som inte är fylld, för att de är aktörer, inte rättskällor. */
--kat-myndighet-bg: #ffffff;
--kat-myndighet-fg: #48484a;
/* Förarbetena: vit yta med streckad lila ram — hör till författningarna
men binder inte, och ramen säger just det. */
--kat-forarbete-bg: #ffffff;
--kat-forarbete-fg: #7b5ea8;
/* Reformen: vit yta med streckad röd ram — det som kommer, inte det som
gäller. */
--kat-reform-bg: #ffffff;
--kat-reform-fg: #b23a3a;
/* Fotnoter som ska finnas men aldrig läsas först. */
--viskning: rgba(0, 0, 0, .25);
--portalbredd: 1140px;
--skugga-kort: 0 4px 20px rgba(0, 0, 0, .07);
--skugga-panel: 0 12px 40px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .06);
}
:root[data-tema="morkt"] {
/* Mörkt läge vänder paret precis som förut: ljus platta, mörk text.
Tonen är --handling-fg:s mörka syskon. */
--kr-accent: #6ea8f5;
--kr-accent-fg: #14161a;
--kr-ok: #57b07d;
--kr-varning: #d99a4a;
--kr-horisont: #a68ccc;
--kr-botten: #0f1114;
--viskning: rgba(255, 255, 255, .28);
--fam-forfattning-bg: #2b2438;
--fam-forfattning-fg: #a68ccc;
--fam-aktor-bg: #1c2b23;
--fam-aktor-fg: #57b07d;
--fam-belopp-bg: #2f2718;
--fam-belopp-fg: #d99a3f;
--fam-neutral-bg: #2c2c2e;
--fam-neutral-fg: rgba(255, 255, 255, .5);
--auktoritet-bindande-bg: #33202b;
--auktoritet-bindande-fg: #d98cb3;
--framtid-bg: #10262a;
--framtid-fg: #59b3bc;
--framtid-ram: #1e3f45;
--skugga-kort: 0 4px 20px rgba(0, 0, 0, .5);
--skugga-panel: 0 12px 40px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
}
/* Startsidan är den enda vyn utan huvudkort: heron bär sökfältet direkt, och
typkorten ligger på arket. Alltså vitt och inte duk under bandet. */
body.portal { background: var(--bg); }
/* Banden går kant i kant, innehållet hålls in. En regel, inte en per band. */
/* width behövs: i en flex-behållare krymper annars .hjul till sitt
innehåll och centreras, och banden hamnar ur linje med sidan under. */
.hjul { width: 100%; max-width: var(--portalbredd); margin: 0 auto; }
/* ---- herobandet -------------------------------------------------------
*
* Startsidans band är en hero och inget kort: motivet i full bredd, ankrat
* höger där bilden har sitt motiv, och rubriken och sökfältet i EN spalt mitt
* i det. Reformkortet som satt i en högerspalt är borta, och med det den
* tvåspaltiga rutan — en ensam spalt i en tvåspaltig ruta står inte i mitten,
* den står till vänster.
*
* Ingen toning över bilden: motivet är ljust nog att bära texten självt, och
* en slöja som inte behövs är en slöja som gör bilden gråare än den är.
*/
.overband.hero {
padding: 0 0 4rem;
min-height: 27rem;
display: flex; flex-direction: column;
background-color: var(--kr-botten);
}
.overband.hero .bandbild {
inset: 0; height: 100%; object-position: right center;
}
.overband.hero .bandinnehall { flex: 1; display: flex; flex-direction: column; }
.heromitt {
position: relative; flex: 1;
display: flex; align-items: center;
padding: 2rem 1.25rem 0;
}
.herotext {
width: 100%; max-width: 46rem; margin: 0 auto;
display: flex; flex-direction: column; align-items: center;
gap: var(--rum-4);
}
.heroleda {
margin: 0; width: 100%; text-align: center;
font-size: 2.2rem; font-weight: 300;
letter-spacing: -.02em; line-height: 1.15;
}
/* Heron har ingen slöja: motivet är ljust nog att bära svart text självt. I
mörkt läge är texten ljus, och då måste bilden dämpas i stället. */
:root[data-tema="morkt"] .overband.hero .bandbild { filter: brightness(.3); }
@media (max-width: 899.98px) {
.overband.hero { min-height: 22rem; padding-bottom: 2.5rem; }
.heroleda { font-size: 1.8rem; }
}
/* ---- sökfältet och panelen -------------------------------------------- */
.sokfalt { position: relative; width: 100%; }
.sokram {
display: flex; align-items: center; gap: .6rem;
background: var(--yta);
border: var(--linje) solid var(--line);
border-radius: var(--rundning);
padding: .9rem 1rem;
}
.sokram:focus-within { border-color: var(--kr-horisont); }
.sokram:focus-within .sokikon { color: var(--kr-horisont); }
.sokikon { display: inline-flex; color: var(--dim); flex-shrink: 0; }
.sokikon svg { width: 20px; height: 20px; }
/* Fältet bär ingen egen ram — ramen är .sokram. */
.sokram input {
flex: 1; min-width: 0;
border: none; background: none; padding: 0;
font: inherit; font-size: 1rem; color: var(--fg);
}
.sokram input:focus { outline: none; }
.sokram input::placeholder { color: var(--dim); }
.sokram input::-webkit-search-cancel-button { display: none; }
.sokrensa {
display: inline-flex; align-items: center; justify-content: center;
width: 1.5rem; height: 1.5rem; flex-shrink: 0;
border: none; border-radius: 50%;
background: var(--chip); color: var(--dim);
cursor: pointer; padding: 0;
}
.sokrensa svg { width: 13px; height: 13px; }
/* Panelen ligger över sidan i stället för att trycka undan den. Man ska
kunna läsa en träfflista utan att tappa var på sidan man var. */
.sokpanel {
position: absolute; top: 100%; left: 0; right: 0;
margin-top: var(--rum-2);
z-index: 40;
background: var(--yta);
border: var(--linje) solid var(--line);
border-radius: var(--rundning);
box-shadow: var(--skugga-panel);
padding: var(--rum-1) 1rem var(--rum-2);
}
.sokpanel[hidden] {
display: none; opacity: 0; transform: translateY(-4px);
transition: opacity .1s ease-out, transform .1s cubic-bezier(.32, .72, 0, 1),
display .1s allow-discrete;
}
/* Panelen faller ner från fältet i stället för att slå i mellan två bildrutor,
och tonar ut samma väg. Bara vid första visningen — vid fortsatt skrivning
står elementet kvar och bara innehållet byts.
Uttoningen är kortare än inträdet (100 mot 160 ms): Esc och klick utanför är
avfärdanden, och där ska systemet svara snabbt, inte göra en föreställning.
`display` måste stå med i transitionen med allow-discrete, annars rycks
panelen bort på första bildrutan och uttoningen syns aldrig.
start.js tömmer inte längre panelen vid stängning — gjorde den det blinkade
en tom ruta fram under uttoningen. */
.sokpanel {
transition: opacity .16s cubic-bezier(.32, .72, 0, 1),
transform .16s cubic-bezier(.32, .72, 0, 1),
display .16s allow-discrete;
}
@starting-style {
.sokpanel { opacity: 0; transform: translateY(-4px); }
}
.sokhuvud {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rum-2);
padding: .6rem .1rem var(--rum-2);
border-bottom: var(--linje) solid var(--line);
}
.sokrubrik { font-size: var(--text-xs); font-weight: var(--vikt-rubrik);
letter-spacing: .04em; text-transform: uppercase; }
.sokantal { font-size: var(--text-xs); color: var(--dim);
font-variant-numeric: tabular-nums; }
.soknot { margin-left: auto; font-size: .72rem; color: var(--viskning); }
.sokrader { list-style: none; margin: 0; padding: 0; }
.sokrader li { border-bottom: var(--linje) solid var(--line); }
.sokrader li:last-child { border-bottom: none; }
.sokrader a {
display: block; padding: .6rem .1rem;
color: var(--lank); text-decoration: none;
border-radius: var(--rundning-liten);
}
.sokrader a:hover, .sokrader a.vald { background: var(--hover); text-decoration: none; }
.sokrad { display: flex; align-items: baseline; gap: var(--rum-2); }
.soktitel {
font-size: .88rem; font-weight: var(--vikt-rubrik); flex: 1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sokinlankar { font-size: .72rem; color: var(--dim);
font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Ett utdrag på en rad. Klipps det av är det för att raden är viktigare än
meningen — den som vill läsa hela öppnar sidan. */
.sokutdrag {
display: block; margin-top: .2rem;
font-size: var(--text-xs); color: var(--dim);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sokutdrag mark {
background: var(--traffbg); color: var(--fg);
padding: 0 .1rem; border-radius: 3px;
}
.sokfot {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--rum-2);
padding: .6rem .1rem .3rem;
border-top: var(--linje) solid var(--line);
}
.sokfot a { font-size: .8rem; font-weight: var(--vikt-rubrik);
color: var(--kr-horisont); text-decoration: none; }
.sokfot a:hover { text-decoration: underline; }
.sokingen { padding: var(--rum-3) .1rem; margin: 0; }
/* ---- snabblänkar och reformkortet ------------------------------------- */
.snabblankar {
display: flex; flex-wrap: wrap; align-items: baseline;
gap: var(--rum-2) var(--rum-4); font-size: var(--text-s);
}
.snabbetikett { color: var(--dim); }
.snabblankar a { text-decoration: underline; }
.reformkort {
background: var(--yta);
border: var(--linje) solid var(--line);
border-radius: var(--rundning);
padding: 1.4rem 1.5rem;
box-shadow: var(--skugga-kort);
}
.reformogonbryn {
display: block; font-size: var(--text-xs); font-weight: var(--vikt-rubrik);
color: var(--kr-horisont); margin-bottom: var(--rum-2);
letter-spacing: .04em; text-transform: uppercase;
}
.reformlag {
display: block; font-size: var(--text-l); font-weight: var(--vikt-rubrik);
line-height: var(--radhojd-tat); color: var(--lank); text-decoration: none;
}
.reformlag:hover { text-decoration: underline; }
.nedrakning { display: flex; align-items: baseline; gap: var(--rum-2);
margin: var(--rum-3) 0; }
.nedrakningtal {
font-size: 2.6rem; line-height: 1; font-weight: 300;
letter-spacing: -.04em; color: var(--kr-horisont);
font-variant-numeric: tabular-nums;
}
.nedrakningetikett { font-size: var(--text-s); color: var(--dim); }
.reformbrod { margin: 0 0 var(--rum-3); font-size: var(--text-s);
color: var(--dim); text-wrap: pretty; }
.reformfot {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rum-2);
padding-top: var(--rum-3); border-top: var(--linje) solid var(--line);
font-size: var(--text-xs); color: var(--dim);
}
.reformdatum { font-weight: var(--vikt-rubrik); color: var(--fg);
font-variant-numeric: tabular-nums; }
/* ---- typbandet -------------------------------------------------------- */
.typband { padding: 2.5rem 1.25rem; }
.statusband { background: var(--chip); padding: 2.5rem 1.25rem 4rem; }
.bandhuvud { display: flex; align-items: baseline; gap: var(--rum-3);
margin-bottom: var(--rum-4); }
.bandhuvud h2 { margin: 0; font-size: var(--text-l); flex: 1; }
.banddetalj { font-size: var(--text-xs); color: var(--dim); }
.typrutnat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--rum-4); }
.typkort {
display: flex; flex-direction: column; gap: .7rem;
background: var(--yta);
border: var(--linje) solid var(--line);
border-radius: var(--rundning);
padding: 1.25rem;
color: var(--lank); text-decoration: none;
}
/* Färgbytet vid hover och vid val tonas i stället för att slå om. Samma
mjukhet som utfällningen; annars blinkar kortet innan panelen börjar växa. */
.typkort { transition: background-color .22s ease, border-color .22s ease; }
/* Trycket ska kännas, inte bara synas i färg. Kurvan gäller aldrig under ett
drag: folj() sätter inline-transform varje bildruta, och en transition där
skulle få kortet att släpa efter handen. */
.typkort:not(.dras) { transition: background-color .22s ease, border-color .22s ease,
transform .16s ease-out; }
.typkort:not(.dras):active { transform: scale(.97); }
.typrutnat.drar .typkort { transition: none; }
@media (hover: hover) and (pointer: fine) {
.typkort:hover { background: var(--hover); text-decoration: none; }
.typkort:hover .typrubrik { text-decoration: none; }
}
.typrad { display: flex; align-items: center; gap: var(--rum-3); }
.typikon {
display: inline-flex; align-items: center; justify-content: center;
width: 2.5rem; height: 2.5rem; border-radius: 50%; flex-shrink: 0;
background: var(--fam-neutral-bg); color: var(--fam-neutral-fg);
transition: background-color .22s ease, color .22s ease;
}
.typikon svg { width: 22px; height: 22px; }
.typkort[data-familj="forfattning"] .typikon {
background: var(--fam-forfattning-bg); color: var(--fam-forfattning-fg); }
.typkort[data-familj="aktor"] .typikon {
background: var(--fam-aktor-bg); color: var(--fam-aktor-fg); }
.typkort[data-familj="belopp"] .typikon {
background: var(--fam-belopp-bg); color: var(--fam-belopp-fg); }
.typrubrik { font-size: var(--text-m); font-weight: var(--vikt-rubrik); flex: 1; }
/* Talet är kortets huvudsak och får bära vikt genom storlek, inte fetstil —
en tunn stor siffra läser sig som ett mått, en fet som ett utrop. */
.typantal {
font-size: var(--text-l); font-weight: 300; letter-spacing: -.02em;
font-variant-numeric: tabular-nums; color: var(--fg);
}
.typchevron { display: inline-flex; color: var(--fam-neutral-fg); }
.typchevron svg { width: 14px; height: 14px; }
/* Andelsstrecket: samma tal en gång till, men läsbart på avstånd. Det säger
var tyngden i wikin ligger utan att man behöver jämföra elva siffror. */
.typstreck {
display: block; height: .3rem; border-radius: var(--rundning-pill);
background: var(--chip); overflow: hidden;
}
.typstreck > span { display: block; height: 100%; opacity: .55;
background: var(--fam-neutral-fg); }
/* Det utfällda kortet fylls i familjens färg och bär en chevron. */
.typkort[data-vald] { background: var(--fam-neutral-bg);
border-color: var(--fam-neutral-fg); }
.typkort[data-vald] .typikon { background: var(--fam-neutral-bg); }
.typkort[data-familj="forfattning"] .typstreck > span { background: var(--fam-forfattning-fg); }
.typkort[data-familj="aktor"] .typstreck > span { background: var(--fam-aktor-fg); }
.typkort[data-familj="belopp"] .typstreck > span { background: var(--fam-belopp-fg); }
.typkort[data-familj="forfattning"][data-vald] {
background: var(--fam-forfattning-bg); border-color: var(--fam-forfattning-fg); }
.typkort[data-familj="forfattning"][data-vald] .typikon,
.typkort[data-familj="forfattning"][data-vald] .typchevron {
background: var(--fam-forfattning-bg); color: var(--fam-forfattning-fg); }
.typkort[data-familj="aktor"][data-vald] {
background: var(--fam-aktor-bg); border-color: var(--fam-aktor-fg); }
.typkort[data-familj="aktor"][data-vald] .typikon,
.typkort[data-familj="aktor"][data-vald] .typchevron {
background: var(--fam-aktor-bg); color: var(--fam-aktor-fg); }
.typkort[data-familj="belopp"][data-vald] {
background: var(--fam-belopp-bg); border-color: var(--fam-belopp-fg); }
.typkort[data-familj="belopp"][data-vald] .typikon,
.typkort[data-familj="belopp"][data-vald] .typchevron {
background: var(--fam-belopp-bg); color: var(--fam-belopp-fg); }
/* Kategorin slår familjen även på kortets ikon: lag, förordning och föreskrift
bär den fyllda författningsfärgen, samma som deras typpill. Står efter
valt-läget så att ikonen förblir fylld när kortet är utfällt. */
.typkort[data-typ="lag"] .typikon,
.typkort[data-typ="förordning"] .typikon,
.typkort[data-typ="föreskrift"] .typikon,
.typkort[data-typ="lag"][data-vald] .typikon,
.typkort[data-typ="förordning"][data-vald] .typikon,
.typkort[data-typ="föreskrift"][data-vald] .typikon {
background: var(--kat-forfattning-bg); color: var(--kat-forfattning-fg); }
.typkort[data-typ="lag"] .typstreck > span,
.typkort[data-typ="förordning"] .typstreck > span,
.typkort[data-typ="föreskrift"] .typstreck > span { background: var(--kat-forfattning-bg); }
/* Branschvillkoren på samma sätt, i avtalsfärgen. */
.typkort[data-typ="bransch-villkor"] .typikon,
.typkort[data-typ="bransch-villkor"][data-vald] .typikon {
background: var(--kat-avtal-bg); color: var(--kat-avtal-fg); }
.typkort[data-typ="bransch-villkor"] .typstreck > span { background: var(--kat-avtal-bg); }
/* EU-rättsakterna på samma sätt, i EU-färgen. */
.typkort[data-typ="eu-rättsakt"] .typikon,
.typkort[data-typ="eu-rättsakt"][data-vald] .typikon {
background: var(--kat-eu-bg); color: var(--kat-eu-fg); }
.typkort[data-typ="eu-rättsakt"] .typstreck > span { background: var(--kat-eu-bg); }
/* Myndigheterna: vit yta, mörkgrå ram. Strecket tar ramens färg. */
.typkort[data-typ="myndighet"] .typikon,
.typkort[data-typ="myndighet"][data-vald] .typikon,
.typkort[data-typ="organisation"] .typikon,
.typkort[data-typ="organisation"][data-vald] .typikon {
background: var(--kat-myndighet-bg); color: var(--kat-myndighet-fg);
box-shadow: inset 0 0 0 var(--linje) var(--kat-myndighet-fg); }
.typkort[data-typ="myndighet"] .typstreck > span,
.typkort[data-typ="organisation"] .typstreck > span { background: var(--kat-myndighet-fg); }
.typkort[data-typ="förarbete"] .typstreck > span { background: var(--kat-forarbete-fg); }
.typkort[data-typ="reform"] .typstreck > span { background: var(--kat-reform-fg); }
/* Ikonerna på korten är dolda tills vidare; rubriken bär färgen i stället,
som ett piller i familjens ton — och i kategorins där en sådan finns.
Antalet sitter inne i pillret: rubriken är dess vänstra halva, talet dess
högra, så att greppet uppe till höger får stå ostört. */
.typkort .typikon { display: none; }
.typkort .typrad { gap: 0; }
.typkort .typrubrik, .typkort .typantal {
flex: 0 1 auto;
display: inline-flex; align-items: center;
padding: .3rem .85rem; line-height: var(--radhojd-tat);
font-size: var(--text-s); font-weight: var(--vikt-rubrik);
background: var(--fam-neutral-bg); color: var(--fam-neutral-fg);
}
.typkort .typrubrik {
border-radius: var(--rundning-pill) 0 0 var(--rundning-pill); padding-right: .35rem; }
.typkort .typantal {
margin-right: auto; letter-spacing: 0; font-weight: 400;
border-radius: 0 var(--rundning-pill) var(--rundning-pill) 0; padding-left: .35rem; }
.typkort .typchevron { margin-left: var(--rum-3); }
.typkort[data-familj="forfattning"] .typrubrik, .typkort[data-familj="forfattning"] .typantal {
background: var(--fam-forfattning-bg); color: var(--fam-forfattning-fg); }
.typkort[data-familj="aktor"] .typrubrik, .typkort[data-familj="aktor"] .typantal {
background: var(--fam-aktor-bg); color: var(--fam-aktor-fg); }
.typkort[data-familj="belopp"] .typrubrik, .typkort[data-familj="belopp"] .typantal {
background: var(--fam-belopp-bg); color: var(--fam-belopp-fg); }
.typkort[data-typ="lag"] .typrubrik, .typkort[data-typ="lag"] .typantal,
.typkort[data-typ="förordning"] .typrubrik, .typkort[data-typ="förordning"] .typantal,
.typkort[data-typ="föreskrift"] .typrubrik, .typkort[data-typ="föreskrift"] .typantal {
background: var(--kat-forfattning-bg); color: var(--kat-forfattning-fg); }
.typkort[data-typ="bransch-villkor"] .typrubrik, .typkort[data-typ="bransch-villkor"] .typantal {
background: var(--kat-avtal-bg); color: var(--kat-avtal-fg); }
.typkort[data-typ="eu-rättsakt"] .typrubrik, .typkort[data-typ="eu-rättsakt"] .typantal {
background: var(--kat-eu-bg); color: var(--kat-eu-fg); }
.typkort[data-typ="myndighet"] .typrubrik, .typkort[data-typ="myndighet"] .typantal,
.typkort[data-typ="organisation"] .typrubrik, .typkort[data-typ="organisation"] .typantal {
background: var(--kat-myndighet-bg); color: var(--kat-myndighet-fg); }
/* Ramen ritas bara på ytterkanterna, annars går ett streck mellan halvorna. */
.typkort[data-typ="myndighet"] .typrubrik, .typkort[data-typ="organisation"] .typrubrik {
box-shadow: inset var(--linje) 0 0 0 var(--kat-myndighet-fg),
inset 0 var(--linje) 0 0 var(--kat-myndighet-fg),
inset 0 calc(-1 * var(--linje)) 0 0 var(--kat-myndighet-fg); }
.typkort[data-typ="myndighet"] .typantal, .typkort[data-typ="organisation"] .typantal {
box-shadow: inset calc(-1 * var(--linje)) 0 0 0 var(--kat-myndighet-fg),
inset 0 var(--linje) 0 0 var(--kat-myndighet-fg),
inset 0 calc(-1 * var(--linje)) 0 0 var(--kat-myndighet-fg); }
/* Förarbetena: streckad ram kräver en riktig border; paddingen minskas med
linjens bredd så pillret blir lika högt som de fyllda. */
.typkort[data-typ="förarbete"] .typrubrik, .typkort[data-typ="förarbete"] .typantal {
background: var(--kat-forarbete-bg); color: var(--kat-forarbete-fg);
border: var(--linje) dashed var(--kat-forarbete-fg);
padding-top: calc(.3rem - var(--linje)); padding-bottom: calc(.3rem - var(--linje)); }
.typkort[data-typ="förarbete"] .typrubrik { border-right: 0; }
.typkort[data-typ="förarbete"] .typantal { border-left: 0; }
.typkort[data-typ="reform"] .typrubrik, .typkort[data-typ="reform"] .typantal {
background: var(--kat-reform-bg); color: var(--kat-reform-fg);
border: var(--linje) dashed var(--kat-reform-fg);
padding-top: calc(.3rem - var(--linje)); padding-bottom: calc(.3rem - var(--linje)); }
.typkort[data-typ="reform"] .typrubrik { border-right: 0; }
.typkort[data-typ="reform"] .typantal { border-left: 0; }
/* ---- ordna om typkorten ------------------------------------------------ */
/* Raden under rutnätet: hur man gör, och vägen tillbaka. Den står dämpad —
ordningen är en bekvämlighet, inte sidans ärende. */
.kortordning {
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
gap: var(--rum-2) var(--rum-3);
font-size: var(--text-xs); color: var(--dim);
}
.kortordningater { font-size: var(--text-xs); padding: .1rem .6rem; }
.kortordningsbesked:not(:empty) { color: var(--kr-varning); }
/* Tomt besked tar ingen plats — annars lägger flexens gap luft efter knappen
och den hamnar en bit in från rutnätets högerkant. */
.kortordningsbesked:empty { display: none; }
/* Kortet som dras lyfts ur rutnätet och ligger över de andra medan de glider
undan. Markeringen sitter på rutnätet och inte på kortet, så att texten inte
markeras när musen dras över de andra korten. */
.typrutnat.drar { user-select: none; -webkit-user-select: none; }
/* Utan de här två öppnar iOS sin egen förhandsvisning av länken vid ett långt
tryck, och draget hinner aldrig börja på den skärm som mest behöver det. */
.typkort { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
/* Greppet i övre högra hörnet bär hela upplysningen om att kortet går att
dra. Handen ligger på det och inte på kortet: kortet är först och främst en
länk, och en öppen hand över hela ytan hade tagit bort den enda upplysning
en mus får om att det går att klicka.
Punkterna står dämpade tills man närmar sig — de ska finnas när man söker
dem, inte tävla med talet om uppmärksamheten. På pekskärm finns ingen hover;
där står de kvar på sin grundton, vilket är hela poängen med att de syns
från början. */
.typkort { position: relative; }
.typdrag {
position: absolute; top: .55rem; right: .55rem;
display: inline-flex; padding: .3rem;
color: var(--fg); opacity: .3;
cursor: grab;
transition: opacity .18s ease;
}
.typdrag svg { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) {
.typkort:hover .typdrag { opacity: .5; }
.typdrag:hover { opacity: .9; }
}
.typdrag:active { cursor: grabbing; }
/* Medan något dras är handen sluten var pekaren än befinner sig. */
.typrutnat.drar, .typrutnat.drar .typkort, .typrutnat.drar .typdrag {
cursor: grabbing;
}
.typkort.dras {
z-index: 3;
box-shadow: var(--skugga-panel);
}
/* ---- typen utfälld på plats ------------------------------------------- */
/* Panelen spänner över hela rutnätet och ramas in i familjens färg, så att
det syns vilket kort den hör till även när den ligger en rad ner. */
.utfallt {
grid-column: 1 / -1;
background: var(--yta);
border: var(--linje) solid var(--fam-neutral-fg);
border-radius: var(--rundning);
padding: 1.25rem 1.5rem;
}
.utfallt[data-familj="forfattning"] { border-color: var(--fam-forfattning-fg); }
.utfallt[data-familj="aktor"] { border-color: var(--fam-aktor-fg); }
.utfallt[data-familj="belopp"] { border-color: var(--fam-belopp-fg); }
.utfallthuvud {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rum-3);
margin-bottom: var(--rum-4); padding-bottom: var(--rum-3);
border-bottom: var(--linje) solid var(--line);
}
.utfallthuvud h2 {
margin: 0; font-size: var(--text-s); font-weight: var(--vikt-rubrik);
letter-spacing: .06em; text-transform: uppercase;
color: var(--fam-neutral-fg);
}
.utfallt[data-familj="forfattning"] .utfallthuvud h2,
.utfallt[data-familj="forfattning"] .utfalltvarsel { color: var(--fam-forfattning-fg); }
.utfallt[data-familj="aktor"] .utfallthuvud h2,
.utfallt[data-familj="aktor"] .utfalltvarsel { color: var(--fam-aktor-fg); }
.utfallt[data-familj="belopp"] .utfallthuvud h2,
.utfallt[data-familj="belopp"] .utfalltvarsel { color: var(--fam-belopp-fg); }
.utfalltnot { font-size: var(--text-xs); color: var(--dim); }
.utfalltvarsel { margin-left: auto; font-size: var(--text-xs);
color: var(--fam-neutral-fg); }
/* Rutnät, inte spalter. Spalter balanserar höjden bättre, men de packar
varje spalt för sig: bara den översta gruppen i varje spalt hamnar i
linje med grannen, resten glider isär i takt med att listorna är olika
långa. Med ett rutnät börjar varje grupp överst i sin rad, så
områdeshuvudena ligger på samma höjd tvärs över raden. Priset är ojämna
underkanter — raden blir så hög som sin högsta grupp. */
.omraden {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--rum-5);
row-gap: var(--rum-4);
align-items: start;
}
.omrade { min-width: 0; }
.omradehuvud {
display: flex; align-items: baseline; gap: var(--rum-2);
padding-bottom: .35rem;
border-bottom: var(--linje) solid var(--fam-neutral-fg);
}
.utfallt[data-familj="forfattning"] .omradehuvud { border-color: var(--fam-forfattning-fg); }
.utfallt[data-familj="aktor"] .omradehuvud { border-color: var(--fam-aktor-fg); }
.utfallt[data-familj="belopp"] .omradehuvud { border-color: var(--fam-belopp-fg); }
.omradehuvud h3 {
margin: 0; font-size: var(--text-xs); font-weight: var(--vikt-rubrik);
letter-spacing: .04em; text-transform: uppercase;
color: var(--fam-neutral-fg);
}
.utfallt[data-familj="forfattning"] .omradehuvud h3 { color: var(--fam-forfattning-fg); }
.utfallt[data-familj="aktor"] .omradehuvud h3 { color: var(--fam-aktor-fg); }
.utfallt[data-familj="belopp"] .omradehuvud h3 { color: var(--fam-belopp-fg); }
.omradeantal { font-size: .72rem; color: var(--dim);
font-variant-numeric: tabular-nums; }
.omrade ul { list-style: none; margin: 0; padding: 0; }
.omrade li {
display: flex; align-items: baseline; gap: var(--rum-2);
padding: .4rem .5rem; margin: 0 -.5rem;
border-bottom: var(--linje) solid var(--line);
border-radius: calc(var(--rundning) / 2);
}
.omrade li:last-child { border-bottom: none; }
.omrade li:has(a:hover) { background: var(--hover); }
.omrade a { flex: 1; font-size: .8rem; font-weight: 500;
color: var(--lank); text-decoration: none; }
.omradetal { font-size: .72rem; color: var(--dim); white-space: nowrap;
font-variant-numeric: tabular-nums; }
/* Upphävs-märket är rött oavsett familj: det är reformens färg, och det som
upphävs gör det på grund av reformen. */
.upphavsmark {
display: inline-flex; border-radius: var(--rundning-pill);
padding: .05rem .5rem; font-size: .7rem; white-space: nowrap;
background: var(--kat-reform-fg); color: #ffffff;
}
/* Kategorin slår familjen i utfällningen också: panelens ram, rubrik,
varsel och områdeshuvuden tar kategorins färg i stället för familjens.
Det utfällda kortet ligger i hover-grått med kategorins ram — det är
markerat, inte färgat. */
.typkort[data-vald][data-familj] { background: var(--hover); }
.typkort .typchevron { display: none; }
.typkort[data-typ="lag"][data-vald],
.typkort[data-typ="förordning"][data-vald],
.typkort[data-typ="föreskrift"][data-vald] { border-color: var(--kat-forfattning-bg); }
.utfallt[data-typ="lag"],
.utfallt[data-typ="förordning"],
.utfallt[data-typ="föreskrift"] { border-color: var(--kat-forfattning-bg); }
.utfallt[data-typ="lag"] .utfallthuvud h2,
.utfallt[data-typ="lag"] .utfalltvarsel,
.utfallt[data-typ="lag"] .omradehuvud h3,
.utfallt[data-typ="förordning"] .utfallthuvud h2,
.utfallt[data-typ="förordning"] .utfalltvarsel,
.utfallt[data-typ="förordning"] .omradehuvud h3,
.utfallt[data-typ="föreskrift"] .utfallthuvud h2,
.utfallt[data-typ="föreskrift"] .utfalltvarsel,
.utfallt[data-typ="föreskrift"] .omradehuvud h3 { color: var(--kat-forfattning-bg); }
.utfallt[data-typ="lag"] .omradehuvud,
.utfallt[data-typ="förordning"] .omradehuvud,
.utfallt[data-typ="föreskrift"] .omradehuvud { border-color: var(--kat-forfattning-bg); }
.typkort[data-typ="bransch-villkor"][data-vald] { border-color: var(--kat-avtal-bg); }
.utfallt[data-typ="bransch-villkor"] { border-color: var(--kat-avtal-bg); }
.utfallt[data-typ="bransch-villkor"] .utfallthuvud h2,
.utfallt[data-typ="bransch-villkor"] .utfalltvarsel,
.utfallt[data-typ="bransch-villkor"] .omradehuvud h3 { color: var(--kat-avtal-bg); }
.utfallt[data-typ="bransch-villkor"] .omradehuvud { border-color: var(--kat-avtal-bg); }
.typkort[data-typ="eu-rättsakt"][data-vald] { border-color: var(--kat-eu-bg); }
.utfallt[data-typ="eu-rättsakt"] { border-color: var(--kat-eu-bg); }
.utfallt[data-typ="eu-rättsakt"] .utfallthuvud h2,
.utfallt[data-typ="eu-rättsakt"] .utfalltvarsel,
.utfallt[data-typ="eu-rättsakt"] .omradehuvud h3 { color: var(--kat-eu-bg); }
.utfallt[data-typ="eu-rättsakt"] .omradehuvud { border-color: var(--kat-eu-bg); }
.typkort[data-typ="myndighet"][data-vald],
.typkort[data-typ="organisation"][data-vald] { border-color: var(--kat-myndighet-fg); }
.utfallt[data-typ="myndighet"],
.utfallt[data-typ="organisation"] { border-color: var(--kat-myndighet-fg); }
.utfallt[data-typ="myndighet"] .utfallthuvud h2,
.utfallt[data-typ="myndighet"] .utfalltvarsel,
.utfallt[data-typ="myndighet"] .omradehuvud h3,
.utfallt[data-typ="organisation"] .utfallthuvud h2,
.utfallt[data-typ="organisation"] .utfalltvarsel,
.utfallt[data-typ="organisation"] .omradehuvud h3 { color: var(--kat-myndighet-fg); }
.utfallt[data-typ="myndighet"] .omradehuvud,
.utfallt[data-typ="organisation"] .omradehuvud { border-color: var(--kat-myndighet-fg); }
.typkort[data-typ="förarbete"][data-vald] { border-color: var(--kat-forarbete-fg); }
.utfallt[data-typ="förarbete"] { border-color: var(--kat-forarbete-fg); }
.utfallt[data-typ="förarbete"] .utfallthuvud h2,
.utfallt[data-typ="förarbete"] .utfalltvarsel,
.utfallt[data-typ="förarbete"] .omradehuvud h3 { color: var(--kat-forarbete-fg); }
.utfallt[data-typ="förarbete"] .omradehuvud { border-color: var(--kat-forarbete-fg); }
.typkort[data-typ="reform"][data-vald] { border-color: var(--kat-reform-fg); }
.utfallt[data-typ="reform"] { border-color: var(--kat-reform-fg); }
.utfallt[data-typ="reform"] .utfallthuvud h2,
.utfallt[data-typ="reform"] .utfalltvarsel,
.utfallt[data-typ="reform"] .omradehuvud h3 { color: var(--kat-reform-fg); }
.utfallt[data-typ="reform"] .omradehuvud { border-color: var(--kat-reform-fg); }
.typantal { font-size: var(--text-xs); color: var(--dim);
font-variant-numeric: tabular-nums; }
.typbrod { font-size: var(--text-s); color: var(--dim); text-wrap: pretty; }
/* ---- statusbandet ----------------------------------------------------- */
.kolumner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--rum-5); align-items: start; }
.kolumnhuvud { display: flex; align-items: baseline; gap: var(--rum-3);
margin-bottom: var(--rum-3); }
.kolumnhuvud h2 {
margin: 0; flex: 1;
font-size: var(--text-s); font-weight: var(--vikt-rubrik);
letter-spacing: .06em; text-transform: uppercase;
}
.kolumnhuvud a { font-size: var(--text-xs); color: var(--dim);
text-decoration: underline; }
.ruta {
background: var(--yta);
border: var(--linje) solid var(--line);
border-radius: var(--rundning);
padding: var(--rum-1) 1.25rem var(--rum-4);
}
.talrad, .synklista { list-style: none; margin: 0; padding: 0; }
.talrad li, .synklista li {
display: flex; align-items: baseline; gap: var(--rum-2);
padding: .6rem 0; border-bottom: var(--linje) solid var(--line);
}
.talrad li:last-child { border-bottom: none; }
.synklista li { border-bottom: none; padding: .3rem 0; }
.talrad a { flex: 1; font-size: var(--text-s); font-weight: var(--vikt-rubrik);
color: var(--lank); text-decoration: none; }
.talrad a:hover { text-decoration: underline; }
.etikett { flex: 1; font-size: var(--text-s); }
.tal { font-size: var(--text-xs); color: var(--dim);
white-space: nowrap; font-variant-numeric: tabular-nums; }
.tal.stark { font-size: var(--text-m); font-weight: var(--vikt-rubrik);
color: var(--fg); }
.tal.kod { font-family: var(--font-mono); font-size: var(--text-s);
font-weight: var(--vikt-rubrik); color: var(--fg); }
.prick { width: .5rem; height: .5rem; border-radius: 50%; flex-shrink: 0; }
.prick[data-ton="ok"] { background: var(--kr-ok); }
.prick[data-ton="varning"] { background: var(--kr-varning); }
.prick[data-ton="lugn"] { background: var(--dim); opacity: .5; }
.huvudknapp {
display: inline-flex; align-items: center; justify-content: center;
gap: .45rem; width: 100%; margin-top: var(--rum-4);
background: var(--kr-accent); color: var(--kr-accent-fg);
border: none; border-radius: var(--rundning-liten);
padding: .55rem .9rem;
font: inherit; font-size: var(--text-s); font-weight: var(--vikt-rubrik);
cursor: pointer;
}
.huvudknapp { transition: transform .14s ease-out, opacity .22s ease; }
@media (hover: hover) and (pointer: fine) {
.huvudknapp:hover { opacity: .9; background: var(--kr-accent); }
}
.huvudknapp:active:not(:disabled) { transform: scale(.97); }
.huvudknapp svg { width: 13px; height: 13px; }
.huvudknapp:disabled { opacity: .5; cursor: default; }
.fotnot { margin: var(--rum-2) 0 0; font-size: var(--text-xs); color: var(--dim); }
.fotnot.mitten { text-align: center; }
/* ---- listvyn bakom typkorten ------------------------------------------ */
.listtopp { padding-top: var(--rum-5); }
.listbrod { margin: 0 0 var(--rum-4); font-size: var(--text-m); color: var(--dim); }
.sorteringsrad { display: flex; flex-wrap: wrap; align-items: center;
gap: .35rem; margin-bottom: var(--rum-4); }
.sorteringsrad .snabbetikett { margin-right: var(--rum-1); font-size: var(--text-xs); }
.listrader { list-style: none; margin: 0; padding: 0; }
.listrader li {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rum-2);
padding: .6rem 0; border-bottom: var(--linje) solid var(--line);
}
.listrader li:last-child { border-bottom: none; }
.listtitel { font-size: var(--text-s); font-weight: var(--vikt-rubrik);
color: var(--lank); text-decoration: none; }
.listtitel:hover { text-decoration: underline; }
.listdetalj { margin-left: auto; font-size: var(--text-xs); color: var(--dim);
white-space: nowrap; }
/* Typmärket bär familjens färg — samma upplysning som ikonen på kortet. */
.typpill {
display: inline-flex; border-radius: var(--rundning-pill);
padding: .05rem .75rem; font-size: .72rem; white-space: nowrap;
background: var(--fam-neutral-bg); color: var(--fam-neutral-fg);
}
.typpill[data-familj="forfattning"] {
background: var(--fam-forfattning-bg); color: var(--fam-forfattning-fg); }
.typpill[data-familj="aktor"] {
background: var(--fam-aktor-bg); color: var(--fam-aktor-fg); }
.typpill[data-familj="belopp"] {
background: var(--fam-belopp-bg); color: var(--fam-belopp-fg); }
.typpill[data-auktoritet="bindande"] {
background: var(--auktoritet-bindande-bg); color: var(--auktoritet-bindande-fg); }
/* Kategorin slår familjen. Typerna står utskrivna här och inte som ännu ett
fält i frontmatter — samma mönster som hero-bilderna längre ner: att lägga
till en typ i gruppen är en rad css, inte en ny kolumn genom hela kedjan. */
.typpill[data-typ="lag"],
.typpill[data-typ="förordning"],
.typpill[data-typ="föreskrift"] {
background: var(--kat-forfattning-bg);
color: var(--kat-forfattning-fg);
}
.typpill[data-typ="bransch-villkor"] {
background: var(--kat-avtal-bg);
color: var(--kat-avtal-fg);
}
.typpill[data-typ="eu-rättsakt"] {
background: var(--kat-eu-bg);
color: var(--kat-eu-fg);
}
.typpill[data-typ="myndighet"],
.typpill[data-typ="organisation"] {
background: var(--kat-myndighet-bg);
color: var(--kat-myndighet-fg);
box-shadow: inset 0 0 0 var(--linje) var(--kat-myndighet-fg);
}
.typpill[data-typ="förarbete"] {
background: var(--kat-forarbete-bg);
color: var(--kat-forarbete-fg);
border: var(--linje) dashed var(--kat-forarbete-fg);
padding-top: calc(.05rem - var(--linje)); padding-bottom: calc(.05rem - var(--linje));
}
.typpill[data-typ="reform"] {
background: var(--kat-reform-bg);
color: var(--kat-reform-fg);
border: var(--linje) dashed var(--kat-reform-fg);
padding-top: calc(.05rem - var(--linje)); padding-bottom: calc(.05rem - var(--linje));
}
/* ---- sidvyn ----------------------------------------------------------
Bandet bär sidans typ som bild och som färg. Bilden kommer ur --sidbild,
satt per sida, så css:en slipper veta vilka typer som finns — nya
kategorier är en rad i TYPBILD och en fil i statiskt/. */
/* TYPSERIENS BAND — INTE INKOPPLAT.
Sidvyn bar förut sin typs motiv, en bild per kategori. Skisserna har ett
motiv genom hela tjänsten, och sidvyn ärver numera bandet ur bas.html som
alla andra vyer. Reglerna står kvar därför att skissen själv pekar ut
typseriens motiv som alternativet — men ingen mall sätter klassen i dag.
Kopplas de in igen räcker det med ett bandyta-block i sida.html.
Bilden ankras höger och fyller bandets HÖJD, inte `cover`: serien är
komponerad som hela bilder, och en 3:2-bild som täcker bredden på ett
34rem-band visar ett uppförstorat fragment. */
.sidbild {
background-color: rgb(var(--bandpapper, 246 246 248));
background-repeat: no-repeat;
background-size: auto 100%;
background-position: right center;
}
/* Vilken typ som bär vilken bild — och bildens egen pappersyta.
*
* Det här måste bo i stilfilen och inte i mallen: tjänstens CSP tillåter bara
* stilar från egen fil, så ett `style="--sidbild: …"` blockeras av
* webbläsaren. Markupen ser rätt ut, bandet blir ändå tomt.
*
* Att lägga till en kategori är två rader här plus en fil i statiskt/. Tonen
* mäts på bildens vänsterkant i halv höjd; utan den möter bandet bilden i en
* synlig kant mitt i fältet.
*/
.sidbild[data-typ="lag"] { --sidbild: url(/statiskt/hero-lag.jpg); --bildton: 242 238 226; }
.sidbild[data-typ="förordning"] { --sidbild: url(/statiskt/hero-forordning.jpg); --bildton: 225 220 214; }
.sidbild[data-typ="föreskrift"] { --sidbild: url(/statiskt/hero-foreskrift.jpg); --bildton: 242 234 223; }
.sidbild[data-typ="eu-rättsakt"] { --sidbild: url(/statiskt/hero-eu.jpg); --bildton: 243 233 221; }
.sidbild[data-typ="begrepp"] { --sidbild: url(/statiskt/hero-begrepp.jpg); --bildton: 241 236 230; }
.sidbild[data-typ="myndighet"] { --sidbild: url(/statiskt/hero-myndighet.jpg); --bildton: 233 226 208; }
.sidbild[data-typ="förarbete"] { --sidbild: url(/statiskt/hero-forarbete.jpg); --bildton: 234 228 212; }
.sidbild[data-typ="vägledning"] { --sidbild: url(/statiskt/hero-vagledning.jpg); --bildton: 235 228 218; }
.sidbild[data-typ="bransch-villkor"] { --sidbild: url(/statiskt/hero-bransch-villkor.jpg); --bildton: 242 233 216; }
.sidbild[data-typ="reform"] { --sidbild: url(/statiskt/hero-reform.jpg); --bildton: 246 238 227; }
/* Pappersytan bakom motivet, så att bilden möter bandet utan synlig kant. */
.sidbild[data-typ="lag"],
.sidbild[data-typ="förordning"],
.sidbild[data-typ="föreskrift"],
.sidbild[data-typ="eu-rättsakt"],
.sidbild[data-typ="begrepp"],
.sidbild[data-typ="reform"],
.sidbild[data-typ="förarbete"],
.sidbild[data-typ="myndighet"],
.sidbild[data-typ="vägledning"],
.sidbild[data-typ="bransch-villkor"] {
--bandpapper: var(--bildton, 246 246 248);
background-image: var(--sidbild);
}
/* I mörkt läge är pappersytan mörk, och bilden får dessutom tonas ner —
en ljus bild i full styrka mot en svart sida blir en lampa. */
:root[data-tema="morkt"] .sidbild { --bandpapper: 22 21 19; }
/* Bilden tonas ner. En ljus bild i full styrka mot en svart sida blir en
lampa, och slöjan ovanför räcker bara i bandets överkant. */
:root[data-tema="morkt"] .bandbild { filter: brightness(.5); }
/* Vägen tillbaka ska synas som en knapp, inte som en brödsmula i småtext.
Den ligger ovanför rubriken därför att det är dit blicken går först när
man inser att man hamnat fel. */
.tillbaka {
display: inline-flex; align-items: center; gap: var(--rum-2);
align-self: flex-start; margin-bottom: var(--rum-3);
padding: .3rem .8rem .3rem .6rem;
border: var(--linje) solid var(--line);
border-radius: var(--rundning-pill);
background: var(--yta);
color: var(--fg); text-decoration: none;
font-size: var(--text-s); font-weight: var(--vikt-rubrik);
font-family: var(--font-ui);
}
.tillbaka:hover { background: var(--hover); text-decoration: none; }
.tillbaka svg { width: 15px; height: 15px; }
/* Tillbakapillen står överst i kortets vänsterspalt, före rubriken: det är dit
blicken går först när man inser att man hamnat fel. Den är mörk och inte vit
här — kortet är vitt, och en vit pille på vitt är en kontur utan kropp.
Regeln gäller alla vyer med kort, inte bara sidvyn: den formen är
toppradens valda menypost, och den ska se likadan ut var man än står. */
.sidhuvudtext > .tillbaka {
background: var(--navvald); color: var(--navvald-fg); border-color: transparent;
padding: .42rem 1.2rem .42rem 1rem; font-size: .95rem; font-weight: 400;
}
.sidhuvudtext > .tillbaka:hover { background: var(--navvald); opacity: .85; }
/* Luften under pillret bärs av rubriken, inte av pillret: rubriken finns
alltid, vägen tillbaka bara på undersidor. */
.tillbaka + .storrubrik { margin-top: 1.7rem; }
.sidleda { margin: var(--rum-2) 0 0; font-size: var(--text-m); color: var(--dim);
max-width: 34rem; text-wrap: pretty; }
/* ---- railen i sidvyn ---------------------------------------------------
Källan, inlänkarna och de två vägarna ut ur sidan står som rader i railen,
inte som egna kort i en högerspalt. Alla har samma form — namn till vänster,
ett tecken till höger — så att raden läses som "något man kan göra" oavsett
vad den leder till. */
.railnedrakning { padding: 0 0 var(--rum-1); }
.railnedrakning .nedrakning { margin: 0; }
/* Talet i railen är sidans bläck. Det säger hur mycket något är, inte att
något är fel — färgen är reserverad för sidvyns nedräkning. */
.railnedrakning .nedrakningtal { color: var(--fg); }
/* Talet bär railens vanliga horisontfärg. Rött är reserverat för sidvyns
nedräkning mot ett upphävande — det är det enda tal i tjänsten som säger att
något slutar gälla. */
.sidvy .railnedrakning .nedrakningtal { color: var(--kat-reform-fg); }
.railpost, .railhandling, .railutfallning > summary {
display: flex; align-items: center; justify-content: space-between;
gap: var(--rum-3);
border-radius: var(--rundning); padding: .65rem 1.15rem;
background: var(--tonad); color: var(--fg);
text-decoration: none; cursor: pointer; list-style: none;
transition: background-color .12s ease, transform .14s ease-out;
}
/* Railens rader är sidvyns största tryckytor, och i mobilen håller man i en
telefon. Trycket ska kännas och inte bara leda någonstans — samma mått som
huvudknappen och typkorten. */
.railpost:active, .railhandling:active, .railutfallning > summary:active {
transform: scale(.97);
}
.railutfallning > summary::-webkit-details-marker { display: none; }
/* Källraden bär två mål: öppna källan, och hämta originalet. Fyllningen flyttas
från raden till länkarna, så att öppna-länken sträcks över hela raden utom
hämtningen — träffytan blir densamma som när raden själv var länken. */
.railpost.kallrad { padding: 0; gap: 0; overflow: hidden; }
.kallrad-oppna {
flex: 1; min-width: 0;
display: flex; align-items: center; justify-content: space-between;
gap: var(--rum-3); padding: .65rem 1.15rem;
color: inherit; text-decoration: none;
}
.kallrad-hamta {
display: inline-flex; align-items: center; flex-shrink: 0;
padding: .65rem 1rem; color: var(--dim);
border-inline-start: var(--linje) solid var(--line);
}
.kallrad-hamta:hover { color: var(--fg); }
.kallrad-hamta svg { width: 15px; height: 15px; }
/* Hovern gäller bara en riktig pekare. På en pekskärm hänger den kvar efter
ett tryck och lämnar raden markerad som om den vore vald. */
@media (hover: hover) and (pointer: fine) {
.railpost:hover, .railhandling:hover, .railutfallning > summary:hover {
text-decoration: none; background: var(--hover);
}
}
/* Namnet tar överskottet, så att talet dockar intill ikonen i stället för att
flyta mitt i raden. Med space-between och tre barn delade raden luften i två
lika delar, och talets läge bestämdes av hur långt namnet råkade vara: "6"
efter Notislänkar hamnade 33 pixlar från "67" efter Sidor som länkar hit.
Nu står talen i en egen kolumn vid högerkanten, högerställda mot varandra —
siffra under siffra, som tabular-nums redan förutsatte. */
.railpostnamn { font-size: .88rem; font-weight: var(--vikt-rubrik);
flex: 1; min-width: 0; }
.railpost svg, .railhandling svg, .railutfallning > summary svg {
width: 15px; height: 15px; flex-shrink: 0; color: var(--dim);
}
.railtal { font-size: .8rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.railutfallning > summary > span:last-of-type,
.railutfallning > summary { align-items: center; }
/* Samma vridning som textutfällningen och källbegäran. Utan varaktigheten
hoppade railens chevron mellan två lägen medan tjänstens två andra vred
sig. */
.railutfallning > summary svg { transition: transform .15s ease-out; }
.railutfallning[open] > summary svg { transform: rotate(180deg); }
/* Handlingarna bär accentens ton: de leder någon annanstans, till skillnad
från railens övriga rader som beskriver sidan. */
/* En handling som är en utfällning måste nämnas med sin summary-selektor:
.railutfallning > summary är mer specifik än .railhandling och hade annars
gett den grå postens ton åt en rad som är en handling. */
.railhandling, .railutfallning > summary.railhandling {
background: var(--handling-bg); color: var(--handling-fg);
}
@media (hover: hover) and (pointer: fine) {
.railhandling:hover, .railutfallning > summary.railhandling:hover {
background: var(--handling-bg); opacity: .85;
}
}
.railhandling svg { color: currentColor; }
/* Panelen ligger över innehållet i stället för att skjuta railen lång: en
lista med 67 rader gör panelen längre än sidan den hänger på. */
.railutfallning { position: relative; }
/* Panelen har med flit ingen infällning. Den enda pure-CSS-vägen dit går via
::details-content, och i Chrome 151 matchar den selektorn men varken
transitions eller animationer utlöses på den — Chromes eget recept med
block-size och content-visibility allow-discrete gav noll rörelse när det
mättes. En keyframe på .railpanel själv spelar bara vid FÖRSTA öppningen:
innehållet ligger kvar renderat under content-visibility: hidden, så
omstarten uteblir vid nästa öppning. Resten kräver javascript, och railen
ska fungera utan. Panelen visas därför direkt. */
.railpanel {
position: absolute; top: calc(100% + .5rem); inset-inline-end: 0;
/* Panelen får vara bredare än railen på skrivbordet — den ligger över
artikeln med flit. I mobilen stämmer det inte, och rättas i mobilblocket
sist i filen. */
width: 22rem; max-width: min(22rem, calc(100vw - 2rem)); z-index: 40;
background: var(--yta); border: var(--linje) solid var(--line);
border-radius: var(--rundning); padding: .6rem 1.2rem 1rem;
box-shadow: var(--skugga-panel);
}
/* En panel som bär hela listan rullar i sig själv i stället för att växa
förbi sidfoten. Panelen ligger ändå över innehållet, så höjden kostar inget
i layouten — bara i hur långt läsaren måste titta. */
.railpanel.langlista { max-height: min(60vh, 28rem); overflow-y: auto; }
.railrad {
display: flex; align-items: baseline; gap: var(--rum-3);
padding: .45rem 0; border-bottom: var(--linje) solid var(--line);
color: var(--lank); text-decoration: none; font-size: .8rem; line-height: 1.4;
}
.railrad:last-of-type { border-bottom: none; }
/* ---- källorna i railens panel -----------------------------------------
Källorna låg förut som egna rader i railen, en per dokument. På en sida med
fyra författningar blev det fyra rader som alla började med "SFS", och
railen lästes som en nummerlista. Nu ligger de i en utfällning som de andra,
och raden bär namnet med numret under.
Raden är en div och ingen länk: en PDF-källa har två mål — öppna och hämta
originalet — och två klickmål kan inte vara en
i en . Ramen på
.railrad flyttas därför hit, annars behåller varje rad sin linje och den
sista får en linje för mycket. */
.kallpanelrad {
display: flex; align-items: baseline; gap: var(--rum-2);
border-bottom: var(--linje) solid var(--line);
}
.kallpanelrad:last-of-type { border-bottom: none; }
.kallpanelrad .railrad { flex: 1; min-width: 0; border-bottom: none; }
/* Numret är radens andra upplysning och inte dess första: namnet säger vilken
lag det är, numret bekräftar vilken version. Samma delning som sidvyns
storrubrik gör mellan .tung och .latt. */
.kallnummer { display: block; margin-top: .1rem;
font-size: var(--text-xs); color: var(--dim); }
.kallpanelhamta {
display: inline-flex; align-items: center; flex-shrink: 0;
padding: .45rem 0 .45rem .6rem; color: var(--dim);
}
.kallpanelhamta:hover { color: var(--fg); }
.kallpanelhamta svg { width: 15px; height: 15px; }
.railrad:hover { text-decoration: underline; }
.railrad > span:first-child { flex: 1; overflow-wrap: anywhere; }
/* ---- dokumentets våningar ---------------------------------------------
Under huvudet är sidan en text och ingen stapel kort: hårfina streck delar
av, och varje avsnitt bär en etikettpille i stället för en rubrik. */
.kortstreck {
width: 100%; height: 1px; margin-top: var(--rum-5);
background: var(--line);
}
.kortavsnitt { width: 100%; max-width: 46rem; margin-top: 1.8rem; }
.avsnittsetikett {
display: inline-flex; align-items: center;
background: var(--etikettpill-bg); color: var(--etikettpill-fg);
border-radius: var(--rundning-pill); padding: .3rem .75rem;
font-size: var(--text-s); font-weight: var(--vikt-rubrik); letter-spacing: .04em;
text-transform: uppercase;
}
.framtidalista {
list-style: none; margin: .9rem 0 0; padding: 0;
display: flex; flex-direction: column; gap: var(--rum-2);
/* Samma grad som railens rader i höger spalt: de två spalterna står bredvid
varandra i sidvyn och ska läsas i samma skala. */
font-size: var(--text-bas); line-height: 1.6;
}
.framtidalista li { display: flex; gap: var(--rum-3); }
/* Ett etiketterat avsnitt får en egen ram, och pillret sitter grensle över
ramens överkant som en fältetikett — samma grepp som .framtidaetikett i
källpanelen. Pillret är opakt och bryter linjen bakom sig, så ramen behöver
ingen lucka. Ramen kommer bara på avsnitt som faktiskt har en etikett;
brödtextens .innehall är också ett .kortavsnitt och ska inte ramas in. */
.kortavsnitt:has(> .avsnittsetikett) {
position: relative;
margin-top: 2.4rem;
padding: 1.5rem 1.25rem 1.25rem;
border: var(--linje) solid var(--line);
border-radius: var(--rundning);
}
.kortavsnitt > .avsnittsetikett {
position: absolute; top: 0; left: 1.25rem;
transform: translateY(-50%);
}
.kortavsnitt:has(> .avsnittsetikett) > .framtidalista { margin-top: 0; }
/* Faktarutan står under strecket, i textens spalt och inte i full kortbredd. */
.sidvy .faktaruta { width: 100%; max-width: 46rem; margin-top: 1.8rem; }
/* Aktualitetsnotisen i sidvyn bär samma form som det etiketterade avsnittet
ovanför: en ram med radie och pillret grensle över överkanten. Den är ingen
section utan ett blockcitat i brödtexten, så formen sätts här i stället för
att ärvas — men måtten och färgparet är avsnittets, så de två blocken
matchar. Ingen tonad fyllning: två olika bakgrunder inuti samma kort hade
sagt att blocken var olika slags upplysning, och det är de inte.
Etiketten är inget eget element utan det inledande **Aktualitet:** som
_marka_blockcitat känner igen; saknas den renderas notisen som vanligt. */
.sidvy .innehall blockquote.notis {
margin: 1.4rem 0 var(--rum-5);
padding: 1.5rem 1.25rem 1.25rem;
background: none;
border: var(--linje) solid var(--line);
border-radius: var(--rundning);
font-size: .95rem; line-height: 1.65; color: var(--fg);
}
.sidvy .innehall blockquote.notis > p:first-child { margin-top: 0; }
.sidvy .innehall blockquote.notis > p:first-child > strong:first-child {
left: 1.25rem; margin-bottom: 0;
background: var(--etikettpill-bg); color: var(--etikettpill-fg);
padding: .3rem .75rem; font-size: var(--text-s);
}
.sidmarken { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.kodpill, .talpill {
display: inline-flex; align-items: baseline;
background: var(--yta); color: var(--dim);
border-radius: var(--rundning-pill); padding: .1rem .6rem;
font-size: var(--text-xs);
}
.kodpill { font-family: var(--font-mono); }
.sidmarken .typpill { padding: .1rem .85rem; font-size: var(--text-xs); }
.sidkropp { padding: var(--rum-5) 1.25rem 3rem; }
.sidlayout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem;
gap: var(--rum-5); align-items: start; }
.sidspalt { display: flex; flex-direction: column; gap: var(--rum-4); }
.sidpanel { display: flex; flex-direction: column; gap: var(--rum-4); }
/* Faktablocket är ett rutnät, inte en lista: fälten är korta och läses
hellre bredvid varandra än under. */
.faktarutnat {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .9rem; padding: 1.25rem;
}
/* Rutan startar hopfälld: bara första raden syns, resten fälls ut med
knappen under. Vilka fält som är "första raden" följer kolumnantalet,
så regeln upprepas vid brytpunkten. Utan javascript tas attributet aldrig
bort — därför sätter fakta.js det i stället för mallen att lita på det. */
.faktaruta[data-hopfallt] .faktafalt:nth-child(n+5) { display: none; }
/* Växeln är en chevron i rutans övre högra hörn; den vrids när rutan är
utfälld. Rutnätet får luft till höger så första radens sista fält inte
hamnar under den. */
.faktaruta { position: relative; }
.faktaruta .faktarutnat { padding-right: 3rem; }
.faktavaxel {
position: absolute; top: .75rem; right: .75rem;
display: inline-flex; align-items: center; justify-content: center;
width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%;
color: var(--dim);
}
.faktavaxel svg { width: 16px; height: 16px; transition: transform .22s ease; }
.faktaruta:not([data-hopfallt]) .faktavaxel svg { transform: rotate(180deg); }
.faktafalt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.faktaetikett { font-size: var(--text-xs); color: var(--dim); }
.faktavarde { font-size: var(--text-s); font-weight: var(--vikt-rubrik);
overflow-wrap: anywhere; }
.faktavarde.kod { font-family: var(--font-mono); }
/* Blockcitatet bär två skilda saker, och de får inte se likadana ut.
Renderaren märker ut skillnaden i app/wiki.py.
Citatet — ordalydelsen ur en lag, ett standardvillkor, ett avgörande — är
det material sidan finns för. Det sätts i brödtextens storlek och lyfts med
en ribba i sidans eget bläck, utan fyllning: en sida kan bära femton citat,
och femton fyllda rutor efter varandra gör brödtexten till en lista av
lådor. Ribban räcker för att ögat ska se var lydelsen börjar och slutar.
Notisen om aktualitet är metadata om sidans färskhet, en per sida. Den får
den fyllda tonade rutan i stället, mindre och dämpad — den ska gå att hoppa
över av den som redan vet hur färsk sidan är. */
.innehall blockquote {
margin: var(--rum-4) 0;
padding: .1rem 0 .1rem 1.15rem;
border-left: 3px solid var(--citatram);
background: none;
border-radius: 0;
font-size: var(--text-m);
line-height: 1.55;
}
.innehall blockquote > :first-child { margin-top: 0; }
.innehall blockquote > :last-child { margin-bottom: 0; }
.innehall blockquote p + p { margin-top: var(--rum-2); }
/* Källraden efter ett citat är inte en del av lydelsen — den talar om varifrån
den kommer, och sätts därefter. */
.innehall blockquote p.citatkalla {
margin-top: var(--rum-2);
font-size: var(--text-s); color: var(--dim);
}
.innehall blockquote p.citatkalla a { color: inherit; }
.innehall blockquote.notis {
position: relative;
margin: 1rem 0 var(--rum-4);
padding: 1.3rem 1.1rem .9rem;
border-left: none;
background: var(--tonad);
border-radius: var(--rundning);
font-size: var(--text-s);
line-height: 1.5;
color: var(--dim);
}
.innehall blockquote.notis strong { color: var(--fg); }
/* Samma form som .framtidaetikett: ordet rider på överkanten och stycket
börjar direkt med upplysningen. Etiketten är här inget eget element utan
det inledande **Aktualitet:** som _marka_blockcitat känner igen — därför
pekas den ut som första strong i första stycket, och parsningen lämnas
ifred. Saknas den renderas notisen som vanligt.
Fyllningen är --chip-fg med --chip som text, alltså sidans bläck och dess
ljusaste yta i omvänd ordning. Notisen har ingen accentfärg att låna, och
ett piller som korsar en kant måste vara ogenomskinligt — --fg och --dim är
rgba och hade släppt igenom skarven, och --tonad är rutans egen bakgrund
och hade sett ut som ett hål i den. Paret vänder med läget av sig självt
och ger mörkt piller på ljus sida, ljust på mörk. */
.innehall blockquote.notis > p:first-child > strong:first-child {
position: absolute; top: 0; left: 1.1rem;
transform: translateY(-50%);
display: inline-block;
padding: .2rem .7rem; line-height: 1.5;
border-radius: var(--rundning-pill);
background: var(--chip-fg); color: var(--chip);
font-size: var(--text-xs); font-weight: var(--vikt-rubrik);
letter-spacing: .04em; text-transform: uppercase;
}
/* Framtida lydelser bär samma slags upplysning på varje sida — därför samma
färg på varje sida. Tidigare ärvde rutan sidans familj och bytte ton mellan
lagen och myndigheten som beskrev den, vilket sa något som inte var sant.
Formen är en tidslinje och inte en punktlista: datumet är det läsaren
letar efter, och AGENTS.md föreskriver att varje rad inleds med det. */
.framtida {
position: relative;
border: var(--linje) solid var(--framtid-ram);
border-left: 3px solid var(--framtid-fg);
background: var(--framtid-bg);
border-radius: 0 var(--rundning) var(--rundning) 0;
/* Toppen bär pillret och behöver plats för dess nedre halva; marginalen
uppåt är för den övre, som ligger utanför rutan. Bottenmarginalen är
densamma som förut. */
padding: 1.3rem 1.25rem 1rem;
margin: 1rem 0 var(--rum-4);
}
/* Etiketten rider på överkanten i stället för att stå som första rad inuti:
rutan blir en avgränsad sak med ett namn på kanten, och innehållet börjar
direkt med den första lydelsen.
Pillret fylls med accentfärgen och inte med rutans bakgrund. Det korsar
kanten, så halva ligger mot sidans yta och halva mot rutans — en fyllning
som matchar den ena hade sett ut som ett hål i den andra. Texten tar
rutans bakgrundsfärg, vilket ger mörkt på ljust i ljust läge och tvärtom i
mörkt, utan en egen regel per läge.
Vänsterläget följer rutans textindrag, så att pillret står i lod med
datumkolumnen under. */
.framtidaetikett {
position: absolute; top: 0; left: 1.25rem;
transform: translateY(-50%);
display: inline-block; margin: 0;
padding: .2rem .7rem; line-height: 1.5;
border-radius: var(--rundning-pill);
background: var(--framtid-fg); color: var(--framtid-bg);
font-size: var(--text-xs); font-weight: var(--vikt-rubrik);
letter-spacing: .04em; text-transform: uppercase;
}
.framtida ul { list-style: none; margin: 0; padding: 0; font-size: var(--text-s); }
.framtida li { display: flex; gap: var(--rum-3); align-items: baseline;
padding: .4rem 0; }
.framtida li + li { border-top: var(--linje) solid var(--framtid-ram); }
.framtida li:first-child { padding-top: 0; }
.framtida li:last-child { padding-bottom: 0; }
/* Datumet står i egen kolumn med tabellsiffror, så att raderna radar upp sig
under varandra och går att läsa som en följd i stället för som en lista. */
.framtidadatum {
flex: none; width: 6.9rem; font-variant-numeric: tabular-nums;
font-size: var(--text-bas); font-weight: var(--vikt-rubrik);
color: var(--framtid-fg);
}
.framtidatext { flex: 1; min-width: 0; }
@media (max-width: 560px) {
/* Datumet lägger sig över texten i stället för bredvid: en datumspalt på en
telefon lämnar för smal spalt åt lydelsen, som då bryts på var tredje ord. */
.framtida li, .framtidalista li { flex-direction: column; gap: .15rem; }
.framtidadatum { width: auto; }
}
/* Brödtexten fyller sin spalt. Förlagan kapar den på 38rem, men den
sidvyn visade var ren prosa — reformsidans tabeller får inte plats där,
och spalten är redan ett rimligt radlängdsmått. */
.innehall { font-size: var(--text-m); line-height: 1.6; }
/* Tabeller i brödtexten: avdelare mellan rader, aldrig ramar runt celler.
Breda tabeller rullar i sin egen ruta så att sidan aldrig gör det. */
.tabellrulle { overflow-x: auto; margin: 0 0 var(--rum-4); }
.innehall table { width: 100%; border-collapse: collapse;
font-size: var(--text-s); }
.innehall thead th { text-align: left; font-size: var(--text-xs);
letter-spacing: .04em; text-transform: uppercase;
color: var(--dim); font-weight: var(--vikt-rubrik);
padding: 0 var(--rum-3) var(--rum-1) 0;
border-bottom: var(--linje) solid var(--line); }
.innehall td { padding: .55rem var(--rum-3) .55rem 0; vertical-align: top;
border-bottom: var(--linje) solid var(--line); text-wrap: pretty; }
.innehall tr:last-child td { border-bottom: none; }
/* Automatisk kolumnfördelning ger en smal förstakolumn bara sin minsta
bredd, och då bryts ett datum vid bindestrecket: "2026-" på en rad och
"06-18" på nästa. Ett golv som rymmer ett datum räcker; bredare kolumner
påverkas inte. */
.innehall th:first-child, .innehall td:first-child { min-width: 6.5rem; }
.fragalank a { display: inline-flex; align-items: center; gap: var(--rum-2);
font-size: var(--text-s); text-decoration: underline; }
/* ---- portalen i mobilen ------------------------------------------------
Mobilen ska fungera. Rutnäten faller till en spalt, herobandet
tappar sin höjd, och reformkortet hamnar under sökfältet i stället för
bredvid — ordningen är densamma som blicken tar dem i. */
@media (max-width: 900px) {
.typrutnat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.omraden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kolumner { grid-template-columns: 1fr; gap: var(--rum-4); }
.sidlayout { grid-template-columns: 1fr; gap: var(--rum-4); }
/* Sidopanelen faller under artikeln i mobilen, och på en lag med 400
paragrafer hamnar då källknapparna utom räckhåll — man ska inte behöva
rulla förbi hela ellagen för att öppna själva lagtexten. display: contents
löser upp panelen så att dess block blir egna rutnätsrader, och källorna
flyttas upp före artikeln. Resten av panelen — inlänkarna — står kvar
under. */
.sidpanel { display: contents; }
.sidkallor { order: -1; }
.faktarutnat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faktaruta[data-hopfallt] .faktafalt:nth-child(n+5) { display: flex; }
.faktaruta[data-hopfallt] .faktafalt:nth-child(n+3) { display: none; }
}
@media (max-width: 620px) {
.typrutnat { grid-template-columns: 1fr; }
.omraden { grid-template-columns: 1fr; }
.sidbild[data-typ="lag"],
.sidbild[data-typ="förordning"],
.sidbild[data-typ="föreskrift"],
.sidbild[data-typ="eu-rättsakt"],
.sidbild[data-typ="begrepp"],
.sidbild[data-typ="reform"],
.sidbild[data-typ="förarbete"],
.sidbild[data-typ="myndighet"],
.sidbild[data-typ="vägledning"],
.sidbild[data-typ="bransch-villkor"] {
min-height: 0;
background-size: auto, cover;
background-position: center, center;
background-image:
linear-gradient(180deg, var(--kr-botten) 0%, rgba(246, 246, 248, .92) 55%,
rgba(246, 246, 248, .7) 100%),
var(--sidbild);
}
.utfallt { padding: 1rem 1.1rem; }
.heroleda { font-size: 1.75rem; }
/* Bilden är ett img-element numera och ligger bakom texten av sig själv;
objektpositionen mitt i motivet i stället för i högerkanten. */
.overband.hero .bandbild { object-position: center; }
.listdetalj { margin-left: 0; width: 100%; }
}
/* ---- ytor och avgränsare ---------------------------------------------
* Sidan är ett vitt ark. Listor och tabeller står direkt på det, avdelade
* med hårfina linjer, medan block som ska hållas ihop får en tonad yta.
* Hierarki byggs med avstånd, vikt och ton — inte med ramar.
* ------------------------------------------------------------------ */
/* Listor och tabeller står direkt på arket, utan ram och utan egen yta.
Avdelare i stället för behållare: en hårfin linje mellan träffarna räcker,
och sidan slipper 190 ytor som konkurrerar om uppmärksamheten. */
.filtabell, .adminttabell { background: transparent; border: none; }
.filtabell, .adminttabell { display: table; }
/* Block som ska hållas ihop får en ton i stället för en kontur. */
.faktablock, .framtida, .varning, .papperskorg[open] {
background: var(--tonad); border: none; border-radius: var(--rundning); }
/* Avgränsare bara mellan rader, aldrig runt celler. */
.filtabell th, .filtabell td, .adminttabell th, .adminttabell td {
border-bottom: var(--linje) solid var(--line); padding: var(--rum-3) var(--rum-4); }
.filtabell tr:last-child td, .adminttabell tr:last-child td { border-bottom: none; }
.innehall table th, .innehall table td { border: none;
border-bottom: var(--linje) solid var(--line); }
.faktablock, .framtida { padding: var(--rum-4); }
.varning { border-left: none; padding: var(--rum-3) var(--rum-4); }
.papperskorg[open] { padding: var(--rum-3) var(--rum-4); }
/* Sektioner skiljs med luft, inte med streck. */
.adminblock, .guideblock, .ansvarsrad, .fragaform {
border-top: none; padding-top: 0; margin-top: var(--rum-6); }
/* Toppradens egen geometri står numera i avsnittet TOPPRADEN längst upp:
huvudet är ingen list över innehållet utan en rad som flyter i bandbilden,
och spalten är huvudkortets och inte portalbredden. Reglerna som låg här —
glasytan, understrykningen och rutnätet med tre spalter — hörde till den
gamla listen och gjorde det nya huvudet ogenomskinligt igen. */
/* Chattens turer blir bubblor med samma rundning som allt annat. */
.fran-anvandare { background: var(--accent); color: #ffffff;
border-radius: var(--rundning); }
/* =====================================================================
* ARBETSYTAN — bandet, fillistan och de två korten
*
* Läggs sist i filen: reglerna här ska vinna över de äldre .filtabell- och
* .papperskorg-reglerna utan att någon behöver ta bort dem, eftersom admin
* fortfarande använder samma tabellklasser.
*
* Ytan har två våningar, som portalen: ett band som säger vems ytan är och
* vad man gör här, och därunder listan. Listan är det enda som ritas som ett
* kort — allt annat står direkt på arket, eftersom en sida där varje del bär
* ram gör att ingen del sticker ut.
*
* Inga nya tokens. Bandet lånar --kr-botten från portalens heroband, märkena
* lånar familjefärgerna, och accenten är bärnstenen på ett enda ställe:
* uppladdningsknappen. Det är den man är här för att trycka på.
* ================================================================== */
/* ---- listhuvudet ------------------------------------------------------
Raden mellan sidhuvudet och listan: var man står, hur mycket som ligger där,
och de två handlingar som gäller just den listan. Handlingarna står HÄR och
inte i railen — den som ska lägga till något i en lista ska slippa gå upp i
huvudet för att göra det. */
/* Toppjusterad och inte centrerad: när "Ny mapp" fäller ned sitt namnfält
växer det chippet på höjden, och med `center` gled grannarna nedåt så att
raden såg trasig ut. Är inget utfällt är alla lika höga och det syns
ingen skillnad. */
.listhuvud {
width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start;
gap: var(--rum-2) var(--rum-3); margin-top: 1.8rem;
}
.listhandlingar { margin-inline-start: auto; display: flex; flex-wrap: wrap;
gap: var(--rum-2); align-items: flex-start; }
/* flex-wrap och min-width: 0 är inte pynt: utan dem kan varken formuläret
radbryta eller fälten krympa, och raden växte till 401px i ett kort på 318
så fort namnfältet fälldes fram — knappen Skapa hamnade utanför skärmen. */
.listhandlingar form { display: inline-flex; align-items: center;
flex-wrap: wrap; min-width: 0;
gap: var(--rum-2); margin: 0; }
.listchip {
display: inline-flex; align-items: center; gap: var(--rum-2);
border: none; background: var(--tonad); color: var(--fg);
border-radius: var(--rundning-pill); padding: .45rem 1rem;
font-size: var(--text-s); cursor: pointer;
}
.listchip:hover { background: var(--hover); }
/* Optisk balans i knappar med ikon — se regeln vid .ikonknapp längre ned. */
/* Chippet är en knapp till formen. Är det en länk ska den inte bära
tjänstens understrykning — den hör till löpande text, inte till knappar. */
a.listchip, a.listchip:hover { text-decoration: none; }
.listchip svg { width: 14px; height: 14px; color: var(--dim); }
/* Namnfältet fälls fram bredvid knappen och ska inte knuffa raden. */
.fallutruta { display: inline-flex; gap: var(--rum-2); align-items: center; }
/* Också i listhuvudet fälls fältet ned UNDER knappen, inte ut bredvid den:
samma rörelse överallt, och raden knuffar inte isär sig i sidled när man
börjar skriva ett mappnamn. */
.listhandlingar .namnform { flex-direction: column; align-items: flex-start; }
.listhandlingar .fallutruta {
margin-top: var(--rum-2);
padding: .55rem;
background: var(--tonad);
border-radius: var(--rundning-liten);
}
.listhuvud .utfallsknappar, .listhandlingar .utfallsknappar { flex: none; }
.listhuvud .utfallsknappar > *, .listhandlingar .utfallsknappar > * { flex: none; }
.namnform input[type=text] { width: 10rem; padding: .35rem .6rem; }
/* Huvudknappen är full bredd inuti ett kort. Där den står i en rad med annat
ska den vara lika bred som sin text. */
.huvudknapp.smal { width: auto; margin-top: 0; }
/* Hopfällningen i sidhuvudet: en rubrik man kan öppna, inte en ruta.
Rubriken är en vanlig fet mellanrubrik och inget piller. */
.textutfallning { margin-top: 1.8rem; max-width: 40rem; }
.textutfallning > summary {
display: inline-flex; align-items: center; gap: var(--rum-2);
cursor: pointer; list-style: none;
font-size: 1.05rem; font-weight: var(--vikt-rubrik);
letter-spacing: var(--spar-rubrik); line-height: 1.3;
}
.textutfallning > summary::-webkit-details-marker { display: none; }
.textutfallning > summary svg { width: 15px; height: 15px; flex-shrink: 0;
color: var(--dim);
transition: transform .15s ease-out; }
.textutfallning[open] > summary svg { transform: rotate(180deg); }
.textutfallning p { margin: .8rem 0 0; font-size: .95rem; line-height: 1.65;
text-wrap: pretty; }
.textutfallning p.dampad { color: var(--dim); }
/* Railens brödtext under ett tal. */
.railbrod { margin: .8rem 0 0; font-size: .88rem; line-height: 1.6;
color: var(--dim); text-wrap: pretty; }
/* ---- innehållsspalten ------------------------------------------------- */
/* Avstånden mellan delarna sätts en gång, av spalten. Delarna själva bär
inga marginaler — då hamnar de aldrig i otakt med varandra. */
.arbetsspalt { display: flex; flex-direction: column; gap: var(--rum-4); }
.arbetsspalt > .varning { margin: 0; }
.arbetsspalt > .ansvarsrad { margin-top: var(--rum-2); }
/* Brödsmulorna är borta ur arbetsytan: listan är ett träd och man går inte
längre in i en mapp. Reglerna för .brodsmulor, .smulnu och .smulpil är
borttagna med dem — en regel som inte pekar på något i någon mall ser ut att
ta hand om en rad och gör ingenting. Bordets egna smulor heter .bordsmulor
och lever kvar. */
/* ---- fillistan --------------------------------------------------------- */
/* Listan står direkt på kortet. En ram runt en tabell inuti ett kort är en
kant för mycket — raderna avdelas av hårfina linjer i stället. */
.fillista { width: 100%; margin-top: var(--rum-3); }
/* Åtgärdskolumnen har en bestämd bredd och inte auto: rubrikraden är tom där,
och en auto-kolumn skulle då bli noll bred och skjuta alla rubriker ur linje
med sina egna värden. */
.filhuvud, .filrad {
display: grid;
grid-template-columns: minmax(0, 1fr) 6rem 9.5rem 17rem;
gap: var(--rum-4);
align-items: center;
padding: .7rem 0;
border-bottom: var(--linje) solid var(--line);
}
.filhuvud { font-size: var(--text-xs); color: var(--dim);
letter-spacing: .06em; text-transform: uppercase; }
.filrader { list-style: none; margin: 0; padding: 0; }
.filrad:last-child { border-bottom: none; }
/* ---- hela raden är målet ----------------------------------------------
Att behöva träffa åtta bokstäver för att fälla ut en mapp är en muspekares
precision. På en pekskärm har man en tumme, och raden är målet — inte namnet
i den. Gäller både mappar och filer: raden gör det namnet gör.
Länken sträcks över raden med ::after och inte med en klickhanterare i
javascript. Då är det fortfarande en riktig länk: den går att öppna i ny
flik, den läses upp som en länk, och den fungerar med skript avstängt.
Åtgärderna får INGET z-index. De ligger ändå ovanpå den sträckta länken,
för positionerade element utan z-index målas i trädordning och
åtgärdscellen kommer efter namnet. Ett `z-index: 1` här gjorde varje
åtgärdscell till en egen stapelkontext, och då blev radmenyns `z-index: 40`
inlåst i sin egen rad: panelen hamnade UNDER nästa rads Fråga AI-chips. */
.filrad { position: relative; }
.filtitel::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) and (pointer: fine) {
.filrad:has(.filtitel):hover { background: var(--hover); }
}
.filcell { font-size: var(--text-xs); color: var(--dim); min-width: 0; }
.filcell.tal { font-variant-numeric: tabular-nums; }
/* Namncellen är vanlig radsättning och inte flex. Ett långt filnamn ska brytas
mitt i och märket flyta med efter det — i en flexrad hoppar i stället ikonen
ner på egen rad så fort namnet inte får plats. */
.filnamnscell {
font-size: var(--text-s); color: var(--fg);
overflow-wrap: anywhere;
}
.filikon { display: inline-flex; color: var(--dim);
vertical-align: -.2em; margin-right: var(--rum-2); }
.filikon svg { width: 17px; height: 17px; }
/* ---- trädet -----------------------------------------------------------
Indraget ligger på namncellen och inte på raden: rutnätets övriga kolumner
ska stå i linje också för en fil tre nivåer ned. En rad som flyttar hela sig
själv i sidled tar storleken och datumet med sig, och listan slutar vara en
tabell. */
/* En regel per nivå och ingen inline-stil: tjänstens CSP är `style-src 'self'`,
och ett style-attribut faller därför tyst bort — indraget syntes inte, och
markupen såg ändå rätt ut. Djupare än MAX_DJUP i arbetsyta.py ritas aldrig. */
.filnamnscell[data-niva="1"] { padding-inline-start: 1.65rem; }
.filnamnscell[data-niva="2"] { padding-inline-start: 3.3rem; }
.filnamnscell[data-niva="3"] { padding-inline-start: 4.95rem; }
.filnamnscell[data-niva="4"] { padding-inline-start: 6.6rem; }
.filnamnscell[data-niva="5"] { padding-inline-start: 8.25rem; }
.filnamnscell[data-niva="6"] { padding-inline-start: 9.9rem; }
.filnamnscell[data-niva="7"] { padding-inline-start: 11.55rem; }
.filnamnscell[data-niva="8"] { padding-inline-start: 13.2rem; }
.filnamnscell[data-niva="9"] { padding-inline-start: 14.85rem; }
.filnamnscell[data-niva="10"] { padding-inline-start: 16.5rem; }
.filnamnscell[data-niva="11"] { padding-inline-start: 18.15rem; }
/* Chevronen ersätter mappikonen. Den är själva kontrollen — hela ytan runt
tecknet ska gå att träffa med en tumme — och den vrids ett kvarts varv när
mappen är utfälld, som tjänstens övriga utfällningar. */
.filvik {
display: inline-flex; align-items: center; justify-content: center;
width: 1.5rem; height: 1.5rem; margin-inline-end: .15rem;
vertical-align: -.35em;
border-radius: var(--rundning-liten);
color: var(--dim);
}
.filvik svg { width: 15px; height: 15px; transition: transform .15s ease-out; }
/* Stängd pekar den åt höger, utfälld nedåt: mappen öppnar sig NEDÅT i listan,
och tecknet ska säga vart innehållet tar vägen. Grundformen pekar nedåt, så
det är det stängda läget som vrids. */
.filvik[aria-expanded="false"] svg { transform: rotate(-90deg); }
@media (hover: hover) and (pointer: fine) {
.filvik:hover { background: var(--hover); color: var(--fg); }
}
/* Mappnamnet fäller ut det också. Att behöva träffa just chevronen när hela
raden ändå bara gör en sak är en onödig precision. */
.filtitel.filmapp { font-weight: var(--vikt-rubrik); }
.filtitel {
font-size: var(--text-s); font-weight: var(--vikt-rubrik);
color: var(--lank); text-decoration: none;
}
.filtitel:hover { text-decoration: underline; }
/* Märkena säger vad tjänsten vet om filen, inte vad användaren gjort med den.
Flaggan är det enda som är ett val, och bär därför familjefärgen; resten är
iakttagelser och står tyst. */
.filmark {
display: inline-block; margin-left: var(--rum-1);
border-radius: var(--rundning-pill);
padding: .05rem .55rem; font-size: var(--text-xs); white-space: nowrap;
background: var(--fam-neutral-bg); color: var(--fam-neutral-fg);
}
.filmark[data-ton="flaggad"] {
background: var(--fam-belopp-bg); color: var(--fam-belopp-fg); }
.filatgarder {
display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end;
/* Radens menyer ställs mot den HÄR cellen och inte mot sin egen knapp. På
skrivbordet ligger cellen i högerkanten och skillnaden syns knappt; i
mobilen är den vänsterställd och full radbredd, och en panel som ankras i
plusknappens kant hamnar då utanför skärmen. Bara en meny kan vara öppen
i taget (name="radmeny"), så de kan dela plats. */
position: relative;
}
.filatgarder form { display: inline-flex; margin: 0; }
/* Radhandlingarna är chips och inte knappar: de hör till raden de står på,
och en ram runt var och en hade gjort listan till ett rutnät av lådor. */
.radchip {
display: inline-flex; align-items: center; gap: .35rem;
border: none; background: var(--tonad); color: var(--fg);
border-radius: var(--rundning-pill); padding: .3rem .7rem;
font-size: var(--text-xs); white-space: nowrap;
text-decoration: none; cursor: pointer;
}
.radchip:hover { background: var(--hover); text-decoration: none; }
.radchip svg { width: 12px; height: 12px; color: var(--dim); }
/* Fråga AI leder någon annanstans och bär railhandlingarnas ton. */
.radchip.handling { background: var(--handling-bg); color: var(--handling-fg); }
.radchip.handling:hover { background: var(--handling-bg); opacity: .85; }
/* Borttagning ska gå att hitta men aldrig dra blicken till sig. */
.radchip.tyst { background: none; color: var(--dim); }
.radchip.tyst:hover { background: var(--hover); color: var(--fg); }
/* ---- radens åtgärdsmeny -----------------------------------------------
Prickarna bär det man gör sällan: flytta och ta bort. Fråga AI och Flagga
står kvar framme, för de görs på filen man just läst och ska inte kosta ett
extra klick.
Formen är knappens och inte chipets: en ikon utan ord i en rad av ord blir
en fläck om den inte har en egen yta. Tonad och inte hover — en kontroll
vilar aldrig på hoverytan (DESIGN.md). */
.radmeny { display: inline-flex; }
.radmeny > summary {
display: inline-flex; align-items: center; justify-content: center;
width: 1.85rem; height: 1.85rem;
border-radius: var(--rundning-pill);
background: var(--tonad); color: var(--dim);
cursor: pointer; list-style: none;
}
.radmeny > summary::-webkit-details-marker { display: none; }
.radmeny > summary svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
.radmeny > summary:hover { background: var(--hover); color: var(--fg); }
}
/* Öppet läge byter bara text- och ikonfärg. Panelen sitter fast under
knappen och säger själv att menyn är öppen — och hoverytan är hoverns,
inte ett viloläges (DESIGN.md, tester/test_stil.py). */
.radmeny[open] > summary { color: var(--fg); }
/* Samma panel som kontomenyns, i mindre format: en meny i tjänsten ska se ut
som tjänstens menyer. inset-inline-end: 0 håller den innanför högerkanten —
raden är det sista i sin kolumn och en vänsterställd panel hade hamnat
utanför kortet. */
.radmenypanel {
position: absolute; top: calc(100% + .4rem); inset-inline-end: 0;
width: 15rem; z-index: 40; text-align: start;
background: var(--yta); border: var(--linje) solid var(--line);
border-radius: var(--rundning); padding: .3rem;
box-shadow: var(--skugga-panel);
}
.radmenypanel form { display: flex; flex-wrap: wrap; margin: 0; }
/* Tilläggsmenyn delar allt med prickarna utom tecknet — två knappar av samma
sort ska se ut som två knappar av samma sort. Namnet är inte "plusmeny":
den klassen finns redan i chatten och bär `position: relative`, vilket gjorde
radens panel ankrad i sin egen knapp i stället för i åtgärdscellen. */
.radmeny.tillaggsmeny > summary svg { width: 14px; height: 14px; }
/* Varje formulär i menyn är en spalt: knappen på en rad, kontrollen den
fäller fram på nästa. Regeln satt förut bara på .namnform, och när flytten
fick samma utfällning hade den behövt en egen kopia.
`flex-wrap: nowrap` är inte pynt. Wrap ärvdes från när formuläret var en RAD,
och i en spalt betyder det att flexlinjen får sin egen bredd ur det bredaste
innehållet: fältet på 10 rem plus Spara blev 271 px i en panel på 240, och
knappen hamnade utanför panelens högerkant. Det var det som såg konstigt ut. */
.radmenypanel form { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
/* Det utfällda öppnas UNDER knappen som fällde ut det, som ett eget stycke:
egen yta, egen rundning, och luft både uppåt och nedåt så att det inte klibbar
ihop med raderna omkring. Utan luften såg menyn ut som fem rader där två råkat
få fel höjd, i stället för fyra rader varav en är öppen.
Fältet ligger på egen rad och knapparna under. Tre kontroller bredvid varandra
i en panel på 15 rem lämnar ingen av dem läsbar. */
.radmenypanel .fallutruta {
display: flex; flex-direction: column; align-items: stretch;
gap: .4rem;
margin: .25rem .1rem .1rem;
padding: .55rem;
background: var(--tonad);
border-radius: var(--rundning-liten);
}
/* Luften mot raderna omkring läggs på FORMULÄRET och inte på rutan: linjen
mellan menyns rader ritas på formulärets överkant, och en marginal på rutan
hade skjutit den öppna gruppen från sin egen linje i stället för från
grannarna. `:has` finns redan i filen (.kortavsnitt) — ingen ny sorts regel. */
.radmenypanel form:has(> .fallutruta:not([hidden])) { padding-block: .3rem .45rem; }
/* Knappen är rubrik över det öppna stycket och ska läsas ihop med det. */
.fallut[aria-expanded="true"] { color: var(--fg); font-weight: var(--vikt-rubrik); }
.radmenypanel .fallutruta input, .radmenypanel .fallutruta select { width: 100%; min-width: 0; }
/* Spara och Avbryt delar bredden lika: ingen av dem är den självklara, och en
bred knapp bredvid en smal säger att den breda är den man ska trycka på. */
.utfallsknappar { display: flex; gap: .35rem; }
.utfallsknappar > * { flex: 1; justify-content: center; }
/* === PROJEKT ==============================================================
Projektvyerna (docs/plan-projekt.md 5) lånar admin- och railkomponenterna.
Det som behövs utöver dem är litet, med flit: två tillägg och ingen ny
komponent.
========================================================================== */
/* Kontaktvalet i formuläret för nytt projekt: en grupp radioknappar. Gruppen
tar hela formulärraden och ritas utan fieldsetets ram — det är en lista av
svar, inte en ruta. Varje val är en label.kryss, så knappen står före sin
text (regeln under .adminrutform). */
.valrad {
grid-column: 1 / -1; border: 0; padding: 0; margin: 0; min-width: 0;
display: flex; flex-direction: column; gap: var(--rum-2);
}
.valrad legend { padding: 0; margin-bottom: var(--rum-1); color: var(--dim); }
.valrad .radchip { align-self: flex-start; margin-top: var(--rum-1); }
.valrad .dampad { margin: var(--rum-2) 0 0; }
/* En handling i railen som ändrar något (avsluta, öppna igen) är en knapp i
ett formulär, inte en länk. Den ska se ut som raderna över den: full bredd,
texten till vänster, samma yta att trycka på. */
.rail form { display: flex; flex-direction: column; }
.rail button.railhandling { width: 100%; border: 0; font: inherit; text-align: left; }
/* Ett brev i en tråd (5.7). Texten står i ett pre med radbrytning: den är
text och ingenting annat, och citat och signaturer får se ut som de gör i
brevet. Kundens brev har en ton, de egna en annan. */
.brevtrad { display: flex; flex-direction: column; gap: var(--rum-4); }
.brev { padding: var(--rum-3) var(--rum-4); border-radius: var(--rundning); background: var(--tonad); }
.brev.brevut { background: transparent; border: var(--linje) solid var(--line); }
.brevhuvud { display: flex; flex-wrap: wrap; gap: var(--rum-1) var(--rum-3); align-items: baseline; font-size: var(--text-s); }
.brevfran { font-weight: 600; }
.brevtill { flex-basis: 100%; }
.brevtext {
margin: var(--rum-3) 0 0; font: inherit; font-size: var(--text-s);
white-space: pre-wrap; overflow-wrap: anywhere; max-width: 46rem;
}
.brevbilagor { margin: var(--rum-2) 0 0; font-size: var(--text-s); }
/* Två klasser väger tyngre än `[hidden]` sist i filen, som bara räcker mot
selektorer med en. Utan den här raden stod väljaren och Spara-knappen framme
i menyn fast de var `hidden`, och utfällningen var ingen utfällning. */
.radmenypanel .fallutruta[hidden] { display: none; }
/* Flytten: väljaren och knappen är EN kontroll och sitter ihop som en.
Skiljda åt läses de som två handlingar, och man hinner tro att valet i sig
flyttade filen. Väljaren tar resten av bredden — mappnamn är långa, och
knappen behöver bara rymma sitt ord. */
/* Linjen under flytten skiljer det som ändrar var filen ligger från det som
tar bort den. Två handlingar med olika allvar ska inte se ut som två rader i
samma lista. */
.flyttaval {
flex: 1; min-width: 0; padding: .25rem .4rem;
font-size: var(--text-xs);
border-radius: var(--rundning-pill);
}
/* Menyns rader är fullbreda och vänsterställda: en meny läses uppifrån och
ned, och ett centrerat ord i en 15 rem bred panel ser ut att sakna sällskap. */
.radmenyval {
display: flex; align-items: center; gap: .45rem;
width: 100%; border: none; cursor: pointer;
background: none; color: var(--dim);
border-radius: var(--rundning-liten); padding: .5rem .55rem;
font: inherit; font-size: var(--text-xs); text-align: start;
}
.radmenyval svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
.radmenyval:hover { background: var(--hover); color: var(--fg); }
}
.filrad.filtom { display: block; padding: var(--rum-4) 0; }
/* ---- de två korten under listan --------------------------------------- */
/* align-items: start — papperskorgen växer när den fälls upp, och kortet
bredvid ska inte växa med den och bli en tom yta. */
.ytkort { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--rum-4); align-items: start; }
.ytruta {
background: var(--tonad);
border: none; border-radius: var(--rundning);
padding: var(--rum-4) 1.25rem;
}
.ytogonbryn {
display: block; font-size: var(--text-xs); font-weight: var(--vikt-rubrik);
letter-spacing: .06em; text-transform: uppercase; color: var(--fg);
margin-bottom: var(--rum-2);
}
.ytbrod { margin: 0; font-size: var(--text-s); color: var(--dim); text-wrap: pretty; }
/* Papperskorgen är en och ska se ut som kortet bredvid tills man
fäller upp den. Triangeln tas bort — "Öppna papperskorgen" säger samma sak
med ord, och orden ryms i mobilen. */
.papperskorg.ytruta { margin-top: 0; font-size: var(--text-s); }
.papperskorg.ytruta > summary {
cursor: pointer; list-style: none;
display: flex; flex-direction: column; gap: var(--rum-1);
}
.papperskorg.ytruta > summary::-webkit-details-marker { display: none; }
.ytoppna { font-size: var(--text-s); color: var(--lank); text-decoration: underline; }
.papperskorg.ytruta[open] .ytoppna { color: var(--dim); }
.korglista { list-style: none; margin: var(--rum-4) 0 0; padding: 0; }
.korglista li {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rum-2);
padding: var(--rum-2) 0; border-bottom: var(--linje) solid var(--line);
}
.korglista li:last-child { border-bottom: none; }
.korgnamn { flex: 1 1 12rem; font-size: var(--text-s);
font-weight: var(--vikt-rubrik); overflow-wrap: anywhere; }
.korglista form { margin: 0; }
.korglista button { font-size: var(--text-xs); padding: .15rem .65rem; }
/* ---- arbetsytan i mobilen ---------------------------------------------
Mobilen ska fungera. Tabellen slutar vara en tabell och blir en
lista: filnamnet på egen rad, uppgifterna om filen som en löpande rad
under, och åtgärderna sist. Kolumnrubrikerna behövs inte då — de förklarar
en ordning som inte längre finns.
------------------------------------------------------------------ */
@media (max-width: 900px) {
.filhuvud { display: none; }
.filrad {
display: flex; flex-wrap: wrap; align-items: baseline;
gap: var(--rum-1) .6rem;
}
.filnamnscell { flex: 1 1 100%; }
/* Tomma celler försvinner helt — en mapp har varken typ eller storlek, och
en tom cell som ändå tar plats ser ut som en uppgift som saknas. */
.filrad .filcell:empty { display: none; }
/* Punkten sätts av cellen till höger, så att den aldrig hamnar först i
raden och aldrig efter något som inte finns. */
.filcell:not(.filnamnscell):not(:empty) ~ .filcell:not(:empty)::before {
content: "·"; margin-right: .5rem; opacity: .5;
}
.filatgarder { margin-left: auto; }
.ytkort { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
.arbetsband { padding: var(--rum-4) 1.25rem; }
/* Verktygen tar full bredd var för sig — två halva formulär bredvid
varandra blir två fält som ingetdera går att träffa med tummen.
Reglerna pekade tidigare på .arbetsverktyg, en klass som inte finns i
någon mall längre. De såg ut att ta hand om raden och gjorde ingenting.
Nu pekar de på .listhandlingar, som är det raden faktiskt heter. */
.listhandlingar { width: 100%; margin-inline-start: 0; }
.listhandlingar form { flex: 1 1 100%; }
.namnform input[type=text] { flex: 1 1 auto; width: auto; min-width: 0; }
.fallutruta { flex: 1 1 100%; }
.fillista { padding: 0 var(--rum-4) var(--rum-2); }
/* Åtgärderna får en egen rad i stället för att knuffas ut i kanten. */
.filatgarder { flex: 1 1 100%; margin-left: 0; justify-content: flex-start;
margin-top: var(--rum-1); }
}
/* =====================================================================
* FRÅGA AI — chattsidan
*
* Samma uppbyggnad som portalen: ett band kant i kant med bilden och sidans
* löfte, sedan innehållet i .hjul. Två spalter — samtalet och frågefältet i
* den breda, tidigare samtal i den smala.
*
* Sidan har ingen egen rullningsyta. Chatt.js rullar fönstret (rulla()) när
* ett svar strömmar in; en scrollbox i mitten skulle göra den rörelsen
* verkningslös och gömma det som just skrevs.
*
* Reglerna ligger sist i filen med flit: de skriver över det äldre
* chattavsnittet högre upp (blå användarbubbla, blå frågeknapp, smal
* .tidigare-spalt) utan att någon rad behöver tas bort där.
* ================================================================== */
/* ---- bandet ----------------------------------------------------------- */
/* Bildreferensen står i css och inte i mallen — ett url() i ett inline
style-attribut byts aldrig ut mot bilddatan. Gradienten håller vänsterhalvan
nära ogenomskinlig så att rubriken alltid har kontrast mot bilden.
Bandet är lägre än startsidans: här är frågefältet nedanför sidans ärende,
och ett hero som fyller skärmen skjuter det under vecket. */
.band-fraga {
background-color: var(--kr-botten);
background-image:
linear-gradient(90deg, var(--kr-botten) 0%, rgba(246, 246, 248, .95) 30%,
rgba(246, 246, 248, .5) 48%, rgba(246, 246, 248, 0) 66%),
url(/statiskt/hero-fraga-webb.jpg);
background-size: auto, cover;
background-position: center, right center;
background-repeat: no-repeat, no-repeat;
border-bottom: var(--linje) solid var(--line);
padding: var(--rum-5) 1.25rem;
}
:root[data-tema="morkt"] .band-fraga {
background-image:
linear-gradient(90deg, var(--kr-botten) 0%, rgba(15, 17, 20, .94) 30%,
rgba(15, 17, 20, .55) 48%, rgba(15, 17, 20, .12) 66%),
url(/statiskt/hero-fraga-webb.jpg);
}
.fragahuvud {
display: flex; flex-wrap: wrap; align-items: flex-end;
gap: var(--rum-2) var(--rum-4);
}
.fragahuvud > div { flex: 1; min-width: min(20rem, 100%); }
.fragahuvud h1 { margin: 0; }
.fragaleda {
margin: var(--rum-1) 0 0; max-width: var(--matt);
font-size: var(--text-s); color: var(--dim); text-wrap: pretty;
}
/* Beskedet står längst ut till höger, alltså ovanpå bilden. Därför en egen
halvgenomskinlig yta under texten — utan den avgör fotografiet om raden går
att läsa, och den raden är en utfästelse som måste synas. */
.zonbesked {
display: flex; align-items: center; gap: var(--rum-2); margin: 0;
font-size: var(--text-xs); color: var(--dim);
background: color-mix(in srgb, var(--yta) 72%, transparent);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
border-radius: var(--rundning-pill); padding: .25rem .8rem;
}
.zonikon { display: inline-flex; }
.zonikon svg { width: 15px; height: 15px; }
/* ---- spalterna -------------------------------------------------------- */
.fragaband { padding: var(--rum-5) 1.25rem var(--rum-6); }
/* Den smala spalten står kvar även när det inte finns några tidigare samtal.
Frågefältet ska ligga på samma plats och ha samma bredd före och efter den
första frågan — annars flyttar sig sidans huvudsak när historiken dyker upp. */
.fragahjul {
display: grid; grid-template-columns: minmax(0, 1fr) 17rem;
gap: var(--rum-5); align-items: start;
}
.samtalskolumn { display: flex; flex-direction: column; gap: var(--rum-4);
min-width: 0; }
.utgangssida { margin: 0; font-size: var(--text-s); color: var(--dim); }
.utgangssida a { color: var(--lank); }
/* ---- exempelfrågorna -------------------------------------------------- */
/* Chipsen ligger i en egen wrappande spalt. Låg de i samma flexrad som
etiketten började den tredje om vid containerns kant i stället för under
sina syskon. Ramen är streckad: förslagen är inte knappar man ska trycka
på i tur och ordning, utan exempel på vad man kan skriva själv. */
.exempelfragor { display: flex; align-items: baseline; gap: .7rem;
margin-top: 1.5rem; }
.exempeletikett { flex-shrink: 0; color: var(--dim); font-size: .8rem; }
.exempellista { display: flex; flex-wrap: wrap; gap: var(--rum-2); min-width: 0; }
.exempelfragor a {
background: none; border: var(--linje) dashed var(--dim);
border-radius: var(--rundning-pill); padding: .35rem .9rem;
font-size: .82rem; color: var(--fg); text-decoration: none;
}
.exempelfragor a:hover { background: var(--hover); }
/* Så snart en tur finns i samtalet är exemplen i vägen. Att låta css se det
sparar en rad javascript som annars måste hållas i takt med strömningen. */
.fragasida:has(#samtal .tur) .exempelfragor,
.fragasida:has(#samtal .tur) .faltrubrik { display: none; }
/* ---- samtalet --------------------------------------------------------- */
#samtal { display: flex; flex-direction: column; gap: var(--rum-4);
margin-bottom: 0; }
/* Utan detta lägger flexluften till ett tomrum före frågefältet på en tom sida.
:empty duger inte — mallen lämnar radbrytningar inne i behållaren. */
#samtal:not(:has(.tur)) { display: none; }
/* Frågan är kort och personlig och får en bubbla; svaret är långt och ska
läsas som ett dokument och får ett kort.
Bubblan är neutralt grå och inte färgad: färg betyder i den här tjänsten
antingen vad slags källa något är eller att det går att klicka på. En
färgad bubbla hade lästs som det ena eller det andra, och den är ingetdera —
den är användarens egen röst. */
.fran-anvandare {
align-self: flex-end; max-width: min(100%, 32rem);
background: var(--chip); color: var(--fg);
border-radius: var(--rundning); padding: .8rem 1rem;
font-size: var(--text-m); white-space: pre-wrap;
}
.fran-ai {
align-self: flex-start; max-width: min(100%, 42rem); width: 100%;
background: var(--yta); border: var(--linje) solid var(--line);
border-radius: var(--rundning); padding: 1rem 1.1rem;
}
.fran-ai .turtext {
max-width: none; white-space: pre-wrap;
font-size: var(--text-m); line-height: 1.6;
}
.fran-ai .turtext:empty { display: none; }
.arbetsrad { color: var(--dim); font-size: var(--text-s); font-style: italic; }
.notisrad {
color: var(--varning); background: var(--varningsbg);
border-radius: var(--rundning-liten); padding: var(--rum-2) .6rem;
font-size: var(--text-s); margin-bottom: var(--rum-2);
}
.felrad { color: var(--varning); font-style: normal; }
/* ---- källfoten -------------------------------------------------------- */
.turfot {
display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
margin-top: .9rem; padding-top: var(--rum-3);
border-top: var(--linje) solid var(--line);
font-size: var(--text-xs); font-family: var(--font-ui);
}
/* Etiketten står i css eftersom foten byggs på två håll — ur mallen för
inläst historik och ur chatt.js under strömningen. Den ska se likadan ut i
båda, och :has låter den utebli när svaret saknar källor. */
.turfot:has(a, .dokmark, .citatmark)::before {
content: "Källor"; order: 0;
color: var(--dim); margin-right: var(--rum-1);
}
/* Chatt.js lägger modellmärket först i dokumentet. Ordningen rättas här i
stället för i skriptet: källorna är svarets sak, modellen är en not. */
.turfot > * { order: 1; }
.turfot .modellmark { order: 2; margin-left: auto; }
.turfot a, .dokmark, .citatmark {
display: inline-flex; align-items: baseline;
background: var(--chip); color: var(--dim);
border-radius: var(--rundning-pill); padding: .1rem .6rem;
text-decoration: none;
/* Versaler för att märkena ska läsas som etiketter och inte som en mening
mitt i svaret. */
text-transform: uppercase; letter-spacing: .03em;
}
.turfot a:hover { background: var(--hover); color: var(--fg); }
.modellmark { background: none; color: var(--dim); padding: 0; }
/* ---- två modeller på samma fråga -------------------------------------- */
.jamforrad {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--rum-2);
margin-top: var(--rum-3); padding-top: var(--rum-3);
border-top: var(--linje) solid var(--line); font-size: var(--text-xs);
}
/* Det andra svaret dras in och märks i kanten, så att det syns att det är
samma fråga en gång till och inte ett nytt turtag. */
.jamforelse {
border-left: 2px solid var(--fam-forfattning-fg);
padding-left: .9rem; margin: 0;
}
.jamforelse .fran-ai { max-width: 100%; }
/* ---- frågefältet ------------------------------------------------------ */
/* Formuläret står direkt på kortet: ingen ram, ingen egen yta. Fältet ÄR
formen — en ruta inuti en ruta gör frågan till en detalj i ett block. */
.fragaform { background: none; border: none; padding: 0; margin-top: 1.8rem; }
.faltrubrik { margin: 0 0 1rem; font-size: 1.05rem; }
/* Fältet: en rad med plats för texten och skickknappen i högerkanten. */
.fragerad {
display: flex; align-items: center; gap: .7rem;
border: var(--linje) solid var(--line); border-radius: 14px;
padding: .45rem .45rem .45rem 1.05rem; background: var(--yta);
}
.fragerad:focus-within { border-color: var(--kr-horisont); }
.fragerad textarea {
flex: 1; min-width: 0; resize: none;
border: none; background: none; padding: .45rem 0;
font: inherit; font-size: .95rem; line-height: 1.5; color: var(--fg);
field-sizing: content; max-height: 12rem;
}
.fragerad textarea:focus { outline: none; }
.fragerad textarea::placeholder { color: var(--dim); }
/* Skickknappen är en ikon och inget ord: fältet säger redan vad man gör där,
och en rund knapp i kanten läses som "iväg" utan att behöva stavas. */
.fragerad button {
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; width: 2.1rem; height: 2.1rem; padding: 0;
border: none; border-radius: 10px;
background: var(--accent); color: #ffffff;
}
.fragerad button svg { width: 16px; height: 16px; }
.fragerad button:hover { opacity: .9; background: var(--accent); }
.fragerad button[disabled] { opacity: .5; }
/* Raden UNDER fältet bär det som lagts till, inte vägarna att lägga till.
Vägarna bor i plusmenyn. */
.bifogarad {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--rum-2);
margin-top: .5rem;
font-size: var(--text-xs); color: var(--dim);
}
.bifogarad select { font-size: var(--text-xs); }
.filnamn { font-size: var(--text-xs); }
/* Modellvalet hör inte till bifogandet och skjuts därför ifrån det. */
.modellvaljare { margin-left: auto; }
/* Plusmenyn: en handling med två vägar, inte två handlingar. */
.plusmeny { position: relative; }
.plusmeny > summary {
display: inline-flex; align-items: center; justify-content: center;
width: 2.4rem; height: 2.4rem; margin-inline-start: -.55rem;
color: var(--fg); cursor: pointer; list-style: none;
}
.plusmeny > summary::-webkit-details-marker { display: none; }
.plusmeny > summary svg { width: 19px; height: 19px; }
.plusval {
position: absolute; bottom: calc(100% + .4rem); inset-inline-start: 0;
width: 17rem; z-index: 40;
background: var(--yta); border: var(--linje) solid var(--line);
border-radius: var(--rundning); padding: .35rem;
box-shadow: var(--skugga-panel);
}
.plusval label {
display: flex; align-items: center; gap: var(--rum-2);
padding: .55rem .6rem; border-radius: var(--rundning-liten);
font-size: .95rem; color: var(--fg); cursor: pointer;
}
.plusval label:hover { background: var(--hover); }
.plusval label svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--dim); }
.plusval select { width: 100%; margin: 0 0 .35rem; }
.fragaform .varning { margin: var(--rum-3) 0 0; }
.ansvarsrad {
margin: 1.5rem 0 0; padding-top: 0; border-top: none;
font-size: var(--text-xs); color: var(--dim); text-wrap: pretty;
}
/* ---- samtalets huvud och tidigare samtal ------------------------------- */
/* Rubriken är kolumnen `rubrik` i tabellen samtal, samma sträng som listan
Tidigare samtal visar — så att det man klickade på och det man landar i
heter likadant. */
.samtalshuvud {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rum-3);
max-width: none;
}
.samtalshuvud h2 { margin: 0; font-size: 1.05rem; flex: 1; }
.samtalsdatum { font-size: var(--text-s); color: var(--dim);
font-variant-numeric: tabular-nums; }
/* I grundläget är historiken en riktig lista: det finns ingen konkurrens om
ytan, och en rubrik plus datum gör det möjligt att känna igen ett samtal
utan att öppna det. */
.samtalslista { list-style: none; margin: 0; padding: 0; width: 100%; }
.samtalslista li {
display: flex; align-items: baseline; gap: var(--rum-3);
padding: .7rem 0; border-bottom: var(--linje) solid var(--line);
}
.samtalslista li:last-child { border-bottom: none; }
.samtalslista a { flex: 1; color: var(--lank); text-decoration: none;
font-weight: var(--vikt-rubrik); font-size: .95rem; }
.samtalslista a:hover { text-decoration: underline; }
/* Railens besked: ett tal eller ett namn, och en rad om vad det betyder. */
/* Innehållsförteckningen i railen: sidan är en text, och det man vill är att
hoppa i den. Raderna står som en lista och inte som railposter — de leder
ingen annanstans, bara längre ner på samma sida. */
.innehallsforteckning { display: flex; flex-direction: column; gap: .55rem; }
.railetikett { font-size: var(--text-s); color: var(--dim); margin-bottom: var(--rum-2); }
.innehallsforteckning a { color: var(--lank); text-decoration: none;
font-size: .92rem; }
.innehallsforteckning a:hover { text-decoration: underline; }
.railbesked { padding: 0 0 var(--rum-1); }
.railrubrik { font-size: 1.35rem; line-height: 1.2; font-weight: var(--vikt-rubrik);
letter-spacing: -.02em; }
.railbesked .railbrod { margin-top: .55rem; }
.samtalslista a { font-size: var(--text-s); color: var(--lank);
text-decoration: none; }
.samtalslista a:hover { text-decoration: underline; }
.samtalsdatum { display: block; margin-top: .15rem;
font-size: var(--text-xs); color: var(--dim);
font-variant-numeric: tabular-nums; }
/* ---- chatten i mobilen -------------------------------------------------
I telefonen faller spalterna till en, och
historiken hamnar under frågefältet — den är ett uppslagsverk, inte det
man kom för. */
@media (max-width: 900px) {
.fragahjul { grid-template-columns: 1fr; gap: var(--rum-4); }
.band-fraga { padding: var(--rum-4) 1.25rem; }
.fragaband { padding: var(--rum-4) 1.25rem var(--rum-5); }
.fran-anvandare, .fran-ai { max-width: 100%; }
}
@media (max-width: 620px) {
/* Bilden ligger bakom texten i stället för bredvid — en gradient uppifrån
håller kontrasten där orden står. */
.band-fraga {
background-position: center, center;
background-image:
linear-gradient(180deg, var(--kr-botten) 0%, rgba(246, 246, 248, .92) 55%,
rgba(246, 246, 248, .7) 100%),
url(/statiskt/hero-fraga-webb.jpg);
}
.fragaform { padding: 0; }
.fran-ai { padding: .8rem .9rem; }
/* Skickknappen är en rund ikon i fältets kant och ska inte lägga sig som en
bred knapp under det — fältet är EN kontroll, inte ett formulär med en
knapp efter. */
.fragerad { flex-wrap: nowrap; }
.modellvaljare { margin-left: 0; }
}
/* Samma vändning som ovan, men med det mörka lägets botten. */
@media (max-width: 620px) {
:root[data-tema="morkt"] .band-fraga {
background-image:
linear-gradient(180deg, var(--kr-botten) 0%, rgba(15, 17, 20, .92) 55%,
rgba(15, 17, 20, .7) 100%),
url(/statiskt/hero-fraga-webb.jpg);
}
}
/* Andelsstreckets bredd kan inte stå inline — CSP:n tillåter bara stilar
från egen fil. Ett steg per procent räcker för ett streck.
Reglerna är inte bundna till .typstreck: samma trappa bär portalens
typkort och adminsidans kostnadsstapel, och två uppsättningar hade glidit
isär vid första ändringen. */
[data-andel="0"] { width: 0%; }
[data-andel="1"] { width: 1%; }
[data-andel="2"] { width: 2%; }
[data-andel="3"] { width: 3%; }
[data-andel="4"] { width: 4%; }
[data-andel="5"] { width: 5%; }
[data-andel="6"] { width: 6%; }
[data-andel="7"] { width: 7%; }
[data-andel="8"] { width: 8%; }
[data-andel="9"] { width: 9%; }
[data-andel="10"] { width: 10%; }
[data-andel="11"] { width: 11%; }
[data-andel="12"] { width: 12%; }
[data-andel="13"] { width: 13%; }
[data-andel="14"] { width: 14%; }
[data-andel="15"] { width: 15%; }
[data-andel="16"] { width: 16%; }
[data-andel="17"] { width: 17%; }
[data-andel="18"] { width: 18%; }
[data-andel="19"] { width: 19%; }
[data-andel="20"] { width: 20%; }
[data-andel="21"] { width: 21%; }
[data-andel="22"] { width: 22%; }
[data-andel="23"] { width: 23%; }
[data-andel="24"] { width: 24%; }
[data-andel="25"] { width: 25%; }
[data-andel="26"] { width: 26%; }
[data-andel="27"] { width: 27%; }
[data-andel="28"] { width: 28%; }
[data-andel="29"] { width: 29%; }
[data-andel="30"] { width: 30%; }
[data-andel="31"] { width: 31%; }
[data-andel="32"] { width: 32%; }
[data-andel="33"] { width: 33%; }
[data-andel="34"] { width: 34%; }
[data-andel="35"] { width: 35%; }
[data-andel="36"] { width: 36%; }
[data-andel="37"] { width: 37%; }
[data-andel="38"] { width: 38%; }
[data-andel="39"] { width: 39%; }
[data-andel="40"] { width: 40%; }
[data-andel="41"] { width: 41%; }
[data-andel="42"] { width: 42%; }
[data-andel="43"] { width: 43%; }
[data-andel="44"] { width: 44%; }
[data-andel="45"] { width: 45%; }
[data-andel="46"] { width: 46%; }
[data-andel="47"] { width: 47%; }
[data-andel="48"] { width: 48%; }
[data-andel="49"] { width: 49%; }
[data-andel="50"] { width: 50%; }
[data-andel="51"] { width: 51%; }
[data-andel="52"] { width: 52%; }
[data-andel="53"] { width: 53%; }
[data-andel="54"] { width: 54%; }
[data-andel="55"] { width: 55%; }
[data-andel="56"] { width: 56%; }
[data-andel="57"] { width: 57%; }
[data-andel="58"] { width: 58%; }
[data-andel="59"] { width: 59%; }
[data-andel="60"] { width: 60%; }
[data-andel="61"] { width: 61%; }
[data-andel="62"] { width: 62%; }
[data-andel="63"] { width: 63%; }
[data-andel="64"] { width: 64%; }
[data-andel="65"] { width: 65%; }
[data-andel="66"] { width: 66%; }
[data-andel="67"] { width: 67%; }
[data-andel="68"] { width: 68%; }
[data-andel="69"] { width: 69%; }
[data-andel="70"] { width: 70%; }
[data-andel="71"] { width: 71%; }
[data-andel="72"] { width: 72%; }
[data-andel="73"] { width: 73%; }
[data-andel="74"] { width: 74%; }
[data-andel="75"] { width: 75%; }
[data-andel="76"] { width: 76%; }
[data-andel="77"] { width: 77%; }
[data-andel="78"] { width: 78%; }
[data-andel="79"] { width: 79%; }
[data-andel="80"] { width: 80%; }
[data-andel="81"] { width: 81%; }
[data-andel="82"] { width: 82%; }
[data-andel="83"] { width: 83%; }
[data-andel="84"] { width: 84%; }
[data-andel="85"] { width: 85%; }
[data-andel="86"] { width: 86%; }
[data-andel="87"] { width: 87%; }
[data-andel="88"] { width: 88%; }
[data-andel="89"] { width: 89%; }
[data-andel="90"] { width: 90%; }
[data-andel="91"] { width: 91%; }
[data-andel="92"] { width: 92%; }
[data-andel="93"] { width: 93%; }
[data-andel="94"] { width: 94%; }
[data-andel="95"] { width: 95%; }
[data-andel="96"] { width: 96%; }
[data-andel="97"] { width: 97%; }
[data-andel="98"] { width: 98%; }
[data-andel="99"] { width: 99%; }
[data-andel="100"] { width: 100%; }
/* =====================================================================
* ADMIN — bandet, korten och formulären
*
* Läggs sist i filen, av samma skäl som arbetsytan och chatten: reglerna här
* ska vinna över de äldre .adminblock-, .adminttabell- och .radform-reglerna
* högre upp utan att någon rad behöver tas bort där. Stilguiden visar
* fortfarande den gamla adminvyn och lever på dem.
*
* Sidan har två våningar, som arbetsytan: ett band som säger var man är och
* vad månaden kostat, och därunder ett rutnät av kort — ett kort per sak man
* kan styra. Kortet är .ruta, rubrikraden är .kolumnhuvud; samma två delar
* som statusbandet på startsidan, bara upprepade.
*
* Inga nya tokens. Bandet lånar --kr-botten av portalens heroband, märkena
* lånar familjefärgerna, och accenten — bärnstenen — finns på ett enda
* ställe: knappen som lägger in API-nyckeln. Utan nyckel gör tjänsten
* ingenting alls, och det är den handlingen en tom adminsida finns till för.
* Allt annat här är underhåll och ska se ut som underhåll.
* ================================================================== */
/* Bandet med titel och mätare finns inte längre — huvudet är .sidhuvud som
på övriga vyer, och månadens siffra står i railen. Stapeln under den är
samma tal en gång till, läsbart på avstånd: hur nära taket man är. */
.railstapel {
display: block; height: .35rem; margin-top: var(--rum-3);
border-radius: var(--rundning-pill); background: var(--chip); overflow: hidden;
}
.railstapel > span { display: block; height: 100%; background: var(--kr-ok); }
.railstapel[data-hog="ja"] > span { background: var(--kr-varning); }
/* ---- spalten och rutnätet --------------------------------------------- */
/* Avstånden mellan delarna sätts en gång, av spalten. Delarna bär inga egna
marginaler — då hamnar de aldrig i otakt med varandra. */
.adminspalt { display: flex; flex-direction: column; gap: var(--rum-5); }
.adminspalt > .varning { margin: 0; }
.adminspalt > .ansvarsrad { margin: 0; }
/* align-items: start — korten är olika höga och ett kort ska inte sträckas ut
till en tom yta bara för att grannen fällt upp något. */
.adminrutnat {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--rum-5); align-items: start;
width: 100%; margin-top: 1.8rem;
}
/* minmax(0, 1fr) och inte 1fr: en grid-spalt på auto-min krymper aldrig under
sitt innehåll, och en bred tabell i ett kort sköt då ut ur huvudkortet. */
@media (max-width: 899.98px) {
.adminrutnat { grid-template-columns: minmax(0, 1fr); }
}
/* Register, konton och anropsloggen har rader som inte går att läsa i en halv
spalt. De tar hela bredden i stället för att radbrytas sönder. */
.adminkort { min-width: 0; }
.adminkort[data-bredd="hel"] { grid-column: 1 / -1; }
/* ---- förbrukningen ----------------------------------------------------- */
.adminsumma {
display: flex; align-items: baseline; gap: var(--rum-2);
margin: var(--rum-3) 0;
}
.adminsummatal {
font-size: 2.6rem; line-height: 1; font-weight: 300; letter-spacing: -.04em;
font-variant-numeric: tabular-nums;
}
.adminsummaenhet { font-size: var(--text-s); color: var(--dim); }
/* Stapeln är portalens .typstreck en gång till — bredden ligger i den
befintliga data-andel-serien, eftersom CSP:n inte tillåter ett style-
attribut och en andra serie för samma sak skulle kunna hamna i otakt.
Här är den lite tjockare: den läses på avstånd, inte i förbifarten. */
.takstapel { height: .5rem; margin-bottom: var(--rum-3); }
/* Fylld och tyst tills budgeten börjar ta slut. Då byter den ton — det är
enda gången ett tal på den här sidan behöver dra blicken till sig. */
.takstapel > span { opacity: 1; background: var(--dim); }
.takstapel[data-lage="nara"] > span { background: var(--varning); }
/* ---- korten ------------------------------------------------------------ */
/* Kortets rubrikrad är .kolumnhuvud och står utanför rutan, som i
statusbandet. Rubriken behöver inte samma luft som en sektionsrubrik. */
.adminkort > .kolumnhuvud { margin-bottom: var(--rum-2); }
/* ---- raderna ----------------------------------------------------------- */
/* En radform för alla kort. Namnet bär raden, talen står efter det, och
åtgärderna trycks ut i kanten. Det som inte får plats radbryts i stället
för att klippas — en nyckels felmeddelande måste gå att läsa helt. */
.adminlista { list-style: none; margin: 0; padding: 0; }
/* Radavståndet är större än kolumnavståndet: när raden bryts är den nya raden
ett eget stycke — ett formulär eller ett felmeddelande — och inte fortsatt
uppräkning. */
.adminrad {
display: flex; flex-wrap: wrap; align-items: baseline;
gap: var(--rum-2) var(--rum-3);
padding: .7rem 0;
border-bottom: var(--linje) solid var(--line);
}
.adminrad:last-child { border-bottom: none; }
.adminnamn {
flex: 1 1 11rem; min-width: 0;
font-size: var(--text-s); font-weight: var(--vikt-rubrik);
overflow-wrap: anywhere;
}
/* Pricken är ett block med mått. Inuti namnet, som inte är en flexbehållare,
måste den få mått själv — annars blir den en tom inline-ruta utan storlek. */
.adminnamn .prick { display: inline-block; margin-right: var(--rum-2); }
/* .tal är satt att aldrig brytas — det är gjort för korta tal i portalens
listor. Här bär samma klass hela meningar om tokens och tidpunkter, och de
måste få radbrytas. Talen inuti hålls ihop av hårda mellanslag i stället. */
.adminrad .tal { white-space: normal; }
/* Beskrivningar och felmeddelanden får hela raden under det de hör till. */
.adminbrod {
flex: 1 1 100%; margin: 0;
font-size: var(--text-xs); color: var(--dim); text-wrap: pretty;
}
.adminbrod.felmark { color: var(--varning); }
.adminidentitet {
font-family: var(--font-mono); font-size: var(--text-xs);
background: var(--chip); color: var(--dim);
border-radius: var(--rundning-liten); padding: .05rem .45rem;
overflow-wrap: anywhere;
}
/* ---- åtgärderna på en rad ---------------------------------------------- */
/* Lösenordsfältet står i formuläret och inte bakom en dialogruta. Fälten är
små och tysta: de är en bekräftelse, inte något man kommit hit för. */
.adminatgarder {
display: flex; flex-wrap: wrap; align-items: center;
gap: .4rem; margin-left: auto;
}
.adminatgarder form { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.adminatgarder button { font-size: var(--text-xs); padding: .15rem .65rem; }
.adminatgarder input[type=password],
.adminatgarder input[type=text],
.adminatgarder select { font-size: var(--text-xs); width: 8rem; padding: .2rem .45rem; }
/* Det som tar bort eller stänger av ska gå att hitta men aldrig dra blicken
till sig. Samma tysta knapp som borttagningen i arbetsytan. */
.adminatgarder button.tyst { color: var(--dim); }
/* ---- formulären -------------------------------------------------------- */
.adminform {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--rum-2) var(--rum-3); margin: 0;
font-size: var(--text-s);
}
.adminform label {
display: inline-flex; align-items: center; gap: var(--rum-2);
color: var(--dim);
}
/* Tak och kurs: tre korta fält som hör ihop. Etiketten står över fältet, för
orden är längre än talen. Reglerna måste stå EFTER .adminform label —
samma specificitet, och den som skrivs sist vinner. */
.takform { align-items: flex-end; margin-top: var(--rum-4); }
.takform label { flex-direction: column; align-items: flex-start; gap: var(--rum-1); }
.takform input { width: 6.5rem; }
/* Kontots inställningar hör till kontot och lägger sig under det, indragna så
att det syns att raden ovanför äger dem. */
.anvandarform {
flex: 1 1 100%;
margin-top: var(--rum-2); padding-left: var(--rum-4);
border-left: 2px solid var(--line);
}
.anvandarform select { max-width: 14rem; }
.anvandarform input[type=text] { width: 7rem; }
/* Rutnätsformuläret: etikett över fält, så många spalter som ryms. Det som
läggs till här görs sällan och får ta plats när det görs. */
.adminrutform {
display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: var(--rum-3); font-size: var(--text-s);
}
.adminrutform label {
display: flex; flex-direction: column; gap: var(--rum-1); color: var(--dim);
}
/* Kryssrutan står före sin text och inte under den — den är ett svar, inte
ett fält. */
.adminrutform label.kryss, .adminform label.kryss {
flex-direction: row; align-items: center; gap: var(--rum-2);
}
.adminkryss {
grid-column: 1 / -1;
display: flex; flex-wrap: wrap; gap: var(--rum-2) var(--rum-4);
}
.adminskicka { grid-column: 1 / -1; display: flex; }
/* Ett formulär som står direkt i kortet kommer efter en lista och behöver
luft ifrån den. Ett formulär inne i en utfällning har redan sin linje. */
.ruta > .adminrutform { margin-top: var(--rum-4); }
/* Fälten i korten får en aning mer höjd än grundformen: de fylls i med
tummen. Kryssrutor undantas — de har ingen insida att stoppa luft i. */
.adminkort input:not([type=checkbox]), .adminkort select, .adminkort textarea {
padding: .35rem .55rem;
}
.adminkort input:not([type=checkbox]), .adminkort select { max-width: 100%; }
/* ---- utfällningarna ---------------------------------------------------- */
/* Att lägga till en modell eller ett konto är sällsynt. Det ligger under en
linje längst ner i kortet, inte som ett fält som står framme och ser ut som
något man måste fylla i för att komma vidare. Triangeln tas bort — orden
säger samma sak och ryms i mobilen. */
.adminutfallning {
margin-top: var(--rum-4); padding-top: var(--rum-3);
border-top: var(--linje) solid var(--line);
}
.adminutfallning > summary {
cursor: pointer; list-style: none;
font-size: var(--text-s); font-weight: var(--vikt-rubrik);
color: var(--lank); text-decoration: underline;
}
.adminutfallning > summary::-webkit-details-marker { display: none; }
.adminutfallning[open] > summary { color: var(--dim); margin-bottom: var(--rum-3); }
/* ---- anropsloggen ------------------------------------------------------ */
/* Anropen är det enda på sidan som verkligen är en tabell: sex korta fält som
läses spaltvis, inte som meningar. Rubrikraden får bestämda bredder så att
varje rubrik står över sitt eget värde. */
.anropshuvud, .anropsrad {
display: grid;
grid-template-columns: 8.5rem 7rem 10rem 10rem minmax(0, 1fr) minmax(0, 1fr);
gap: var(--rum-3);
align-items: baseline;
padding: .6rem 0;
border-bottom: var(--linje) solid var(--line);
}
.anropshuvud { font-size: var(--text-xs); color: var(--dim); }
.anropsrad:last-child { border-bottom: none; }
.anropscell {
font-size: var(--text-xs); color: var(--dim); min-width: 0;
overflow-wrap: anywhere;
}
/* Samma sak som i raderna ovan: .tal bryter aldrig, men den här cellen bär en
mening om tokens och inte ett tal. */
.anropscell.tal { white-space: normal; }
.anropsnamn { font-size: var(--text-s); color: var(--fg); font-weight: var(--vikt-rubrik); }
.anropsrad.anropstom { display: block; padding: var(--rum-4) 0; }
/* ---- admin i mobilen ---------------------------------------------------
Mobilen ska fungera, och Jesper administrerar därifrån lika ofta
som från skrivbordet. Rutnätet faller till en spalt, anropsloggen slutar
vara en tabell och blir en lista, och åtgärderna får egna rader i stället
för att klämmas ihop i kanten där ingen träffar dem med tummen.
------------------------------------------------------------------ */
@media (max-width: 900px) {
.adminrutnat { grid-template-columns: 1fr; gap: var(--rum-4); }
.anropshuvud { display: none; }
.anropsrad {
display: flex; flex-wrap: wrap; align-items: baseline;
gap: var(--rum-1) .6rem;
}
/* Användarnamnet är radens rubrik och lyfts först, fast det står som andra
cell i markupen — tabellens ordning är tidens, listans är namnets. */
.anropsnamn { order: -1; flex: 1 1 100%; }
/* Punkten sätts av cellen till höger, så att den aldrig hamnar först i
raden. Namncellen står utanför både som sättare och som mottagare: den
har en egen rad, och en punkt före tiden vore en punkt om ingenting. */
.anropscell:not(.anropsnamn) ~ .anropscell:not(.anropsnamn)::before {
content: "·"; margin-right: .5rem; opacity: .5;
}
}
@media (max-width: 620px) {
.adminband { padding: var(--rum-4) 1.25rem; }
/* Siffran hamnar under rubriken och ska då börja där rubriken börjar. */
.adminmatare { align-items: flex-start; text-align: left; }
/* Åtgärderna får egna rader. Ett lösenordsfält på en halv tumbredd är ett
fält man skriver fel i. */
.adminatgarder { flex: 1 1 100%; margin-left: 0; margin-top: var(--rum-2); }
/* Formuläret måste få radbryta och fälten måste få krympa. Utan flex-wrap
och min-width: 0 höll två lösenordsfält plus en knapp fast vid 416px i en
spalt på 310, och raden slutade 473px in på en 390px skärm: både Sätt
lösenord och Byt roll låg utanför skärmkanten, och hela adminsidan gick
att dra i sidled. Regeln fanns, den bara bet inte. */
.adminatgarder form { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
.adminatgarder input[type=password],
.adminatgarder input[type=text],
.adminatgarder select { flex: 1 1 100%; width: auto; min-width: 0; }
.adminatgarder button { flex: 1 1 100%; }
.anvandarform { padding-left: var(--rum-3); }
.anvandarform label, .takform label { flex: 1 1 100%; }
.anvandarform select, .anvandarform input[type=text],
.takform input { width: 100%; }
.adminrutform { grid-template-columns: 1fr; }
.adminsummatal { font-size: 2.2rem; }
}
/* Ingen ny ikon behövs: låset i knappen "Spara och testa" är ikon("las") som
redan finns i mallar/_ikon.html, och inget annat kort bär en ikon.
Vill du märka korten med ikoner senare saknas två — en för konton och en
för flaggade filer. Förslag att klistra in i _ikon.html om det blir aktuellt:
{%- elif namn == "person" -%}
. */
.arendeanmalan > summary > span, .kallbegaran > summary > span {
text-decoration: underline; text-underline-offset: 2px;
}
.kallbegaran > summary > .sparattal { text-decoration: none; }
.arendeanmalan > summary::-webkit-details-marker,
.kallbegaran > summary::-webkit-details-marker { display: none; }
.arendeanmalan > summary:hover, .kallbegaran > summary:hover { color: var(--fg); }
.arendeanmalan[open] > summary, .kallbegaran[open] > summary {
margin-bottom: var(--rum-3);
}
/* Chevronen pekar nedåt: raden fäller ut ett formulär, den leder inte till en
annan sida. Den vänder när utfällningen är öppen. */
.kallbegaran > summary svg { width: 14px; height: 14px; flex-shrink: 0;
transition: transform .15s ease-out; }
.kallbegaran[open] > summary svg { transform: rotate(180deg); }
/* Den svävande varianten på startsidan: formuläret ligger som ett lager över
innehållet under i stället för att trycka undan det, så att heron inte
hoppar när raden öppnas. */
.kallbegaran.svavande { position: relative; width: 100%; max-width: 34rem;
margin: 0 auto; text-align: center; }
.kallbegaran.svavande[open] > summary { margin-bottom: 0; }
/* Raden under sökrutan: begäran och Sparat bredvid varandra. Raden bär bredden
som .kallbegaran.svavande hade själv, och de två utfällningarna krymper till
sina egna ord. Wrap och inte krympning i mobilen — två understrukna rader
som delar en radbredd blir två halva meningar. */
.startrad {
display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
gap: var(--rum-2) var(--rum-4);
width: 100%; max-width: 34rem; margin: 0 auto;
}
.startrad > .kallbegaran.svavande { width: auto; max-width: none; margin: 0; }
/* Panelen ställs mot RADEN och inte mot sin egen knapp. Knapparna är smala och
står i var sin ände: en panel som centreras under sin knapp hänger utanför
skärmkanten i mobilen, och en som ankras i knappens kant hänger utanför den
andra. Raden ligger alltid innanför sidan, så en panel som följer den gör det
också. Bara en av dem kan vara öppen (name="startrad"), så de kan dela plats. */
.startrad { position: relative; }
.startrad > .kallbegaran.svavande { position: static; }
.startrad .kallbegaranpanel { width: 100%; }
.sparatmeny > summary svg:first-of-type { width: 13px; height: 13px; }
/* Talet säger hur många innan man öppnar. Chip och inte bara en siffra — en
ensam siffra efter ett ord läses som en del av ordet. */
.sparattal {
background: var(--chip); color: var(--chip-fg);
border-radius: var(--rundning-pill); padding: 0 .4rem;
font-size: var(--text-xs); font-variant-numeric: tabular-nums;
/* Understrykningen hör till ordet och inte till talet — ett understruket
tal i ett chip ser ut som en egen länk. `text-decoration: none` biter
inte: strecket ritas av summaryn och går rakt igenom sina barn. Ett
inline-block är däremot en atomär inline och stryks aldrig under. */
display: inline-block;
}
/* Panelen bär sin egen yta. Begäranspanelen bredvid ser ut att ha en, men den
kommer från .arendeform inuti — en lista har inget sådant kort att låna, och
utan ytan lade sig posterna direkt på bandbilden. */
.sparatpanel {
max-height: min(60vh, 26rem); overflow-y: auto;
background: var(--yta); border: var(--linje) solid var(--line);
border-radius: var(--rundning); padding: .4rem 1.1rem;
box-shadow: var(--skugga-panel);
}
.sparatlista { list-style: none; margin: 0; padding: 0; }
.sparatlista a {
display: flex; align-items: baseline; gap: var(--rum-3);
padding: .5rem .2rem; border-bottom: var(--linje) solid var(--line);
color: var(--lank); text-decoration: none; font-size: var(--text-s);
}
.sparatlista li:last-child a { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
.sparatlista a:hover { text-decoration: underline; }
}
.sparattitel { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Beteckningen är dokumentets nummer och inte dess namn: den står till höger,
tyst, som talen i railen. */
.sparatbet { flex: none; color: var(--dim); font-size: var(--text-xs);
font-variant-numeric: tabular-nums; }
.kallbegaranpanel {
position: absolute; top: calc(100% + .7rem); inset-inline-start: 0;
width: 100%; z-index: 40; text-align: start;
}
.kallbegaranpanel .arendeform {
max-width: none; padding: 1.2rem 1.3rem 1.3rem;
border-radius: var(--rundning);
box-shadow: var(--skugga-panel);
}
/* Anmälan i sidvyn hänger under railens handling som en svävande panel och
inte sist i artikelspalten: den hör till sidan och inte till lydelsen, och
dokumentets botten ska vara textens slut. Railpanelen bär redan rutan, så
formuläret lämnar ifrån sig sin egen — annars blir det en ram i en ram. */
.railpanel.arendepanel { padding: 1rem 1.2rem 1.2rem; }
.railpanel.arendepanel .arendeform {
max-width: none; padding: 0;
background: none; border: none; border-radius: 0;
}
/* Kvar för stilguidens visning av den fristående, hopfällda anmälan. */
.arendeanmalan {
margin-top: calc(var(--rum-2) * -1);
padding-top: var(--rum-3);
border-top: var(--linje) solid var(--line);
}
/* ---- formuläret -------------------------------------------------------- */
.arendeform {
display: flex; flex-direction: column; gap: var(--rum-2);
max-width: var(--matt);
padding: var(--rum-4);
background: var(--yta);
border: var(--linje) solid var(--line);
border-radius: var(--rundning);
}
.arendeform label {
font-size: var(--text-xs); color: var(--dim);
}
.arendeform input[type=text], .arendeform textarea {
width: 100%; padding: var(--rum-2) .6rem;
font: inherit; font-size: var(--text-s);
color: var(--fg); background: var(--bg);
border: var(--linje) solid var(--line); border-radius: var(--rundning-liten);
}
.arendeform textarea { resize: vertical; min-height: 4.5rem; }
.arendeform input:focus, .arendeform textarea:focus {
outline: none; border-color: var(--kr-horisont, var(--accent));
}
/* Etiketten hör till sitt fält och ska stå närmare det än fälten står
varandra. Marginalen drar tillbaka spaltens gap till en fjärdedel. */
.arendeform label + input,
.arendeform label + textarea { margin-top: calc(var(--rum-1) - var(--rum-2)); }
/* Knappen och villkoret står på samma rad: det man gör, och vad som händer
när man gjort det. Noten är inte en varning och ska inte se ut som en. */
.arendeskicka {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--rum-2) var(--rum-3); margin-top: var(--rum-2);
}
.arendenot {
flex: 1 1 14rem; min-width: 0;
font-size: var(--text-xs); color: var(--dim); text-wrap: pretty;
}
/* Citatet som följde med markeringen. Blockcitatets streck i litet format —
samma bild som i artikeln, så att man känner igen att det är sidans ord. */
.arendecitat {
margin: 0; padding-left: var(--rum-3);
border-left: 2px solid var(--line);
font-size: var(--text-xs); color: var(--dim); text-wrap: pretty;
}
.arendecitatetikett, .arendesvaretikett {
display: inline-block; margin-right: var(--rum-2);
font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
color: var(--viskning, var(--dim));
}
/* ---- listorna: mina ärenden och kön ------------------------------------ */
/* Raden är .adminrad med statusen först. Läsarens text står hel under raden i
stället för att klippas: det är den man känner igen sitt ärende på, och den
som ska läsas innan ett ärende skickas vidare. */
.arenderad .adminnamn { flex: 1 1 12rem; }
.arendetext {
flex: 1 1 100%;
color: var(--fg); font-size: var(--text-s);
white-space: pre-wrap; overflow-wrap: anywhere;
}
.arendesvar { color: var(--fg); }
.arendestatus {
display: inline-flex; align-items: center;
border-radius: var(--rundning-pill); padding: .1rem .65rem;
font-size: .72rem; white-space: nowrap;
background: var(--chip); color: var(--dim);
}
/* Två toner räcker: det som väntar på någon, och det som är avslutat. Ett
ärende i kön är inget fel — det är det normala läget för ett nytt ärende. */
.arendestatus[data-status="nytt"] { background: var(--varningsbg); color: var(--varning); }
.arendestatus[data-status="skickat"] { background: var(--chip); color: var(--fg); }
.arendestatus[data-status="klart"] { background: var(--chip); color: var(--kr-ok, var(--fg)); }
/* "Nytt" är inte en status utan en upplysning om att statusen ändrats sedan
läsaren senast var inne. Därför accentfärgen och inte statuspalettens toner:
den ska läsas som ett märke på raden, inte som ett fjärde tillstånd. */
.arendeny {
display: inline-flex; align-items: center;
border-radius: var(--rundning-pill); padding: .1rem .55rem;
font-size: .72rem; white-space: nowrap;
background: var(--accent); color: var(--chip-pa-fg);
}
/* Den tonade raden dras ut i sidled med negativ marginal: tonen ska ha luft
runt texten utan att texten flyttar sig när märket försvinner. */
.arendenyrad {
margin-inline: calc(var(--rum-3) * -1);
padding-inline: var(--rum-3);
border-radius: var(--rundning-liten);
background: var(--tonad);
}
.nyabesked { color: var(--accent); }
/* Åtgärderna i kön: tre formulär som var för sig avslutar eller flyttar
ärendet. De får hela raden under texten — ett svarfält på en halv tumbredd
är ett fält man skriver fel i. */
.arendeatgarder { flex: 1 1 100%; margin-left: 0; margin-top: var(--rum-2); }
.arendeatgarder input[type=text] { width: 11rem; }
@media (max-width: 620px) {
.arendeatgarder form { flex: 1 1 100%; }
.arendeatgarder input[type=text] { flex: 1; width: auto; }
.arendemark .arendedatum { margin-left: 0; }
}
/* ---- temaväxeln --------------------------------------------------------
Två lägen: ljust och mörkt. Datorns eget läge läses inte — attributet på
avgör ensamt, och den mörka paletten ligger därför utanför sitt
mediablock (se toppen av filen).
Den är en länk och inte en knapp — den byter adress, svaret sätter kakan,
och den fungerar utan javascript som resten av tjänsten. role="switch" och
aria-checked står i markupen, eftersom en länk annars läses upp som en länk
och inte som ett läge.
Den bor i kontomenyn. Utseendet är en arbetsinställning och ingen handling
man gör ofta — den hör hemma bakom samma klick som utloggningen. */
/* Raden är namnet till vänster och spåret till höger, som en inställningsrad
och inte som en knapp med en etikett. */
.temavaxel {
display: flex; align-items: center; justify-content: space-between;
gap: var(--rum-3);
}
.temaspar {
flex-shrink: 0; position: relative;
width: 3.4rem; height: 1.8rem; border-radius: var(--rundning-pill);
background: var(--chip); border: var(--linje) solid var(--line);
transition: background-color .18s ease, border-color .18s ease;
}
/* Tecknen ligger på spåret, ett i varje halva, och knoppen glider över det som
gäller. De ligger över knoppen i staplingen: det aktiva tecknet ska synas
PÅ den, inte under. */
.temasol, .temamane {
position: absolute; top: 50%; z-index: 2;
display: flex; transform: translate(-50%, -50%);
color: var(--temaikon-av);
transition: color .18s ease;
}
.temasol { left: 25%; }
.temamane { left: 75%; }
.temasol svg, .temamane svg { width: 12px; height: 12px; }
.temavaxel[data-lage="ljust"] .temasol,
.temavaxel[data-lage="morkt"] .temamane { color: var(--temaikon-pa); }
/* Knoppen är sidans bläck och spåret dess papper — samma par som navpillret,
så att växeln inte inför en tredje färglogik för ett val. Den bär dessutom
tecknet för läget: en sol i ljust, en måne i mörkt. Båda ligger i markupen
och en av dem visas, så att bytet inte kräver javascript. */
.temaknopp {
position: absolute; top: 50%; left: 3px; z-index: 1;
width: 1.45rem; height: 1.45rem; border-radius: 50%;
background: var(--temaknopp);
box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
transform: translateY(-50%);
transition: transform .18s cubic-bezier(.32, .72, 0, 1);
}
/* Vägen är spårets bredd minus knoppen och de två marginalerna, räknad i
samma enheter som måtten ovan så att den följer med om graden ändras. */
/* Vägen är spårets bredd minus knoppen och de två marginalerna. */
.temavaxel[data-lage="morkt"] .temaknopp {
transform: translateY(-50%) translateX(calc(3.4rem - 1.45rem - 6px));
}
.temavaxel:active .temaknopp { transform: translateY(-50%) scale(.94); }
.temavaxel[data-lage="morkt"]:active .temaknopp {
transform: translateY(-50%) translateX(calc(3.4rem - 1.45rem - 6px)) scale(.94);
}
.toppenhoger {
flex: 1;
display: flex; align-items: center; justify-content: flex-end; gap: .9rem;
}
/* Hamburgaren. Kryssrutan ligger kvar i tabbordningen men utanför bild, och
etiketten är det man ser och trycker på. På bred skärm finns knappen inte
alls och menyn står som en rad — samma markup, två former. */
.menyvaxel { position: absolute; width: 1px; height: 1px;
opacity: 0; pointer-events: none; }
.menyknapp { display: none; }
.menyknapp svg { width: 20px; height: 20px; }
/* 899.98 och inte 900: vid exakt 900 px gäller även min-width-frågan som gör
huvudet till ett rutnät med tre spalter, och hamburgaren hade blivit en
fjärde spalt och brutit linjeringen mot .hjul. */
@media (max-width: 899.98px) {
.toppen { gap: var(--rum-2) var(--rum-3); }
/* Ordmärket får inte äta upp raden när hamburgaren ska rymmas bredvid. */
.hem { flex: 0 1 auto; font-size: 1.25rem; }
.menyknapp {
display: inline-flex; align-items: center; gap: var(--rum-2);
margin-left: auto; cursor: pointer; color: var(--fg);
font-family: var(--font-ui); font-size: var(--text-s);
border: var(--linje) solid var(--line); border-radius: var(--rundning-pill);
padding: .45rem .9rem; min-height: 2.75rem;
}
/* Ihopfälld meny döljer märket inne i den. Pricken på knappen säger att det
finns något att öppna för; talet står kvar där det hör hemma.
Den ligger i knappens flöde och inte absolut i ett hörn: hörnet är en
rundning, och en prick i en rundning ser klippt ut. */
.menyprick {
width: .45rem; height: .45rem; border-radius: 50%;
background: var(--accent);
}
.menyvaxel:focus-visible + .menyknapp { outline: 2px solid var(--accent);
outline-offset: 1px; }
.menyvaxel:checked + .menyknapp { background: var(--hover); }
/* Stängd meny tar ingen plats. Öppen lägger sig som fulla rader under
huvudets första rad — huvudet växer i flödet i stället för att lägga ett
lager över sidan, så inget hamnar under menyn och blir oklickbart. */
.meny, .toppenhoger { display: none; }
.menyvaxel:checked ~ .meny,
.menyvaxel:checked ~ .toppenhoger {
display: flex; width: 100%; margin: 0;
padding-top: var(--rum-2);
}
.menyvaxel:checked ~ .meny {
flex-direction: column; gap: 0; align-items: stretch;
padding: var(--rum-2) 0 0;
background: var(--yta); box-shadow: none; border-radius: 0;
border-top: var(--linje) solid var(--line);
}
/* Menyposterna blir träffytor i stället för ord på en rad: full bredd och
tumhöjd, för den som står upp med telefonen i handen. */
.menyvaxel:checked ~ .meny a {
padding: .7rem var(--rum-3); opacity: 1; font-size: var(--text-m);
border-radius: 0; border-bottom: var(--linje) solid var(--line);
}
.menyvaxel:checked ~ .meny a:last-child { border-bottom: none; }
.menyvaxel:checked ~ .toppenhoger {
justify-content: space-between; align-items: center;
border-top: var(--linje) solid var(--line);
padding-bottom: var(--rum-2);
}
}
/* ---- så funkar det ---------------------------------------------------- */
/* Rubrikerna är vanliga feta mellanrubriker som på arbetsytan och Fråga AI,
inte den lilla dämpade etikett de var när sidan stod utan kort. */
.hjalptext h2 { margin: 2rem 0 .9rem; font-size: 1.05rem;
color: var(--fg); letter-spacing: var(--spar-rubrik);
text-transform: none; }
.hjalptext h2:first-child { margin-top: 0; }
.hjalptext p { margin: 0 0 1rem; font-size: .95rem; line-height: 1.65;
text-wrap: pretty; }
.hjalptext a { color: var(--lank); text-decoration: underline;
text-underline-offset: 2px; }
/* ---- listvyn i kortet -------------------------------------------------- */
/* Filtren och listan står direkt på huvudkortet. Rutan runt listan var en ram
utanpå en ram så snart vyn flyttade in i kortet. */
.listtopp { width: 100%; margin-top: 1.8rem; }
.listtopp .sorteringsrad { margin-bottom: var(--rum-3); }
.listvy .listtopp > .ruta {
background: none; border: none; border-radius: 0; padding: 0;
margin-top: var(--rum-4);
}
/* ---- stilguidens egna ramar ------------------------------------------
Guiden visar delar ur sina sammanhang. Rutan ger dem en yta att stå på så
att bandet inte flyter ut över hela guidesidan. */
.guidescen { display: block; padding: 0 1.25rem var(--rum-5); }
.guidetoppen { padding: 1.5rem 2.5rem; max-width: var(--bandbredd); }
.guidehero { min-height: 20rem; padding-bottom: 2rem; border-radius: var(--rundning-kort);
overflow: hidden; margin: 0 1.25rem var(--rum-5); }
.guidehero .bandinnehall { display: flex; flex-direction: column; flex: 1; }
.guideband { padding: 0 1.25rem 2rem; margin-bottom: var(--rum-5);
border-radius: var(--rundning-kort); overflow: hidden; }
.guideband .huvudkort { margin-top: 2.5rem; }
/* =====================================================================
* MOBILEN — det som bara går fel på en telefon
*
* Blocket ligger sist med flit. Reglerna här ska vinna över komponenternas
* egna, och de flesta av dem är lika specifika som sina förlagor — då avgör
* ordningen i filen. Flyttas blocket upp slutar hälften att gälla.
* ================================================================== */
@media (max-width: 899.98px) {
/* iOS Safari zoomar in HELA sidan när ett formulärfält under 16px får
fokus, och zoomar aldrig ut igen. 16px är alltså en gräns och ingen
rekommendation. 82 fält i tjänsten låg under den — chattens frågefält,
ärendeanmälan, hela adminsidan — och den som skrev sin första fråga
lämnades kvar i en inzoomad, sidledsrullad sida.
Vill man ha tillbaka det mindre optiska måttet får det ske med padding
eller transform. Aldrig med font-size. */
input, select, textarea,
main.inloggning input,
.fragerad textarea,
.bifogarad select,
.modellvaljare,
.namnform input[type=text],
/* .flyttaval sätter font-size med en KLASS (0,1,0) och vinner därför över
den nakna `select` ovan (0,0,1) hur sent den än står. Väljaren i radens
flyttmeny låg kvar på 12 px och zoomade in sidan. */
.flyttaval,
.arendeform input[type=text], .arendeform textarea,
.adminatgarder input[type=password],
.adminatgarder input[type=text],
.adminatgarder select,
.adminkort input:not([type=checkbox]), .adminkort select, .adminkort textarea {
font-size: 16px;
}
/* Tummen är inte en muspekare. Apples golv är 44px, WCAG 2.5.8 säger 24 —
kontrollerna nedan låg på 22-34 och är alla sådant som ändrar något:
arbetsytans två huvudhandlingar, adminradernas knappar, skickknappen i
chatten, och de utfällningsrubriker som är enda vägen till förklaringen.
Utseendet står kvar; det är träffytan som växer. */
.listchip,
.adminatgarder button,
.adminutfallning > summary,
.huvudknapp {
min-height: 2.75rem;
}
.listchip { padding-inline: 1.1rem; }
.adminatgarder button { padding: .5rem 1rem; }
.adminutfallning > summary { padding-block: .6rem; }
/* Skickknappen är rund och måttet är dess diameter. */
.fragerad button { width: 2.75rem; height: 2.75rem; }
/* Radlistor: luften sitter på li:t och gör länken till en 20px hög textbox
med död zon runt om — 166 rader i innehållsförteckningen där man måste
träffa bokstäverna. Luften flyttas till länken, så växer träffytan utan
att raden gör det. Bara här: med en mus är 20px ingen svårighet, och på
skrivbordet är listan tätare med flit. */
.listrader li { padding-block: 0; }
.listtitel { display: inline-block; padding-block: .6rem; }
.railrad { padding: .6rem 0; min-height: 2.75rem; }
/* Railpanelens klämma mäter fönstret och inte spalten den hänger i:
100vw - 2rem är 358px på en telefon medan railen är 318, så panelen blev
22rem = 352 och trycktes 14px utanför kortets vänsterkant. På skrivbordet
är överhänget avsiktligt; här är det bara fel. */
.railpanel { max-width: 100%; }
/* Källänkarna i innehållsförteckningen: 373 stycken på 20px, en per källa
och rad. Samma grepp som titeln — luften på länken, inte på raden. */
.kallrad a { display: inline-block; padding-block: .5rem; }
/* Filterpillren är kontroller och inte etiketter. En pille är inline och
tar inte emot min-height förrän den blir en flexruta. */
.chip { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* Fälten fick 16px ovan, men höjden följer inte med av sig själv: med
tjänstens padding landar de på 32px. Chattens fält står utanför — det
växer med innehållet (field-sizing) och har sitt eget mått. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
select,
.arendeform textarea,
.adminkort textarea {
min-height: 2.75rem;
}
/* Kryssrutans etikett är hela tryckytan, och den var 20px. Rutan i sig
ritas 13px av systemet och växer inte med etiketten. */
label.kryss { min-height: 2.75rem; }
label.kryss input[type=checkbox] { width: 1.15rem; height: 1.15rem; }
/* Kortens egna spara-knappar. .adminatgarder-knapparna är radernas och togs
ovan; de här är formulärens, och de låg kvar på 24px. */
.adminkort button, .adminform button, button.ytknapp {
min-height: 2.75rem; padding-inline: 1rem;
}
}
/* === RIKSDAGENS ÖPPNA DATA ================================================
*
* Portalens andra lager, läsvyn, och sökpanelen som är gemensam för båda.
*
* Kortens FORM är wikins och ritas av reglerna för .typkort — det är samma
* rutnät, samma pille, samma utfällning. Här står bara det som skiljer: att
* korten bär ett datum i stället för ett andelsstreck, och att utfällningen
* är en lista i stället för rättsområden.
*/
/* --- lagerväxeln --------------------------------------------------------- */
/* Segmenterad kontroll: två segment i ett spår med en fylld pille som glider
till det valda. Den är inte en toggle switch — en switch är på/av, och lagren
är jämlikar — men den har växelknappens form: segmenten möts utan mellanrum,
och pillen fyller sin halva helt i stället för att sitta som en markering
inuti den.
Färgerna är menyns och inte växelknappens. Grått spår med en svart pille är
exakt navpillret i toppraden — --chip mot --navvald — och portalen talar
redan det språket. Ett fyllt spår med en ljus pille hade varit en andra
färglogik för samma sorts val. */
/* Rutnät och inte flexrad, och det är ett rörelsebeslut. Med segment som
mättes efter sitt eget ord blev pillen 80 px bred under Wikin och 115 under
Riksdagen, och den fick alltså ändra bredd under förflyttningen. Två lika
breda spalter — båda lika breda som det längsta ordet — gör flytten till en
ren translateX. Kontrollen blir 35 px bredare; rörelsen blir riktig. */
.lagerval {
display: inline-grid; grid-template-columns: repeat(2, 1fr);
align-items: center;
padding: 4px; border-radius: var(--rundning-pill);
/* Spåret är en kontur och ingen fylld yta. Med två fyllningar — grå kapsel
och svart pille — bar kontrollen mer bläck än den behövde för att säga
vilket av två ord som gäller.
Konturen är --line och inte --chip. Fyllningens egen färg som kant gav
#f2f2f7 mot ett kort på #ffffff, fyra steg i grått, och kapseln syntes
inte: kvar blev en svart pille bredvid ett grått ord, utan något som band
ihop dem till en växel. --line är tjänstens hårfina linje — samma som
korten, källpanelen och railpanelen ritar med — och håller formen utan
att väga något.
Två pixlar och inte --linje. Tjänstens hårfina linje är till för att dela
AV en yta, och den här ramen ska hålla ihop en — en pille och ett ord ska
läsas som en kontroll. Vikten gör det arbetet i stället för en mörkare
färg, som hade gjort ramen lika stark som den ovalda etikettens text och
satt den att tävla med pillret. Det är enda stället i tjänsten som ritar
en tjockare kant, och det är därför det står utskrivet här. */
border: 2px solid var(--line); background: none;
flex-shrink: 0;
}
.lagerflik {
border-radius: var(--rundning-pill); padding: .45rem 1.25rem;
font-size: var(--text-m); font-weight: var(--vikt-rubrik); white-space: nowrap;
text-align: center;
color: var(--dim); text-decoration: none;
/* Pillen ligger inuti länken och ska ligga BAKOM texten. `isolation` gör
länken till en egen stapelkontext, så att pillens `z-index: -1` stannar
där och inte faller igenom bakom spårets egen bakgrund — utan den är
pillen osynlig i stället för mörk. Samma fälla som .meny a har. */
position: relative; isolation: isolate;
/* Färgbytet sker numera i den levande DOM:en — start.js flyttar aria-current
vid klicket — och därför hinner den här övergången faktiskt spelas. Förut
låg bytet i vytransitionen, där hela bandhuvudet byttes ut på en bildruta
och övergången aldrig kunde utlösas. */
transition: color .18s ease, transform .14s ease-out;
}
.lagerflik[aria-current],
.lagerflik[aria-current]:hover { color: var(--navvald-fg); }
/* Trycket ska kännas i samma ögonblick som fingret landar, och det ska kännas
som ett tryck. Segmentet dimmades förut till .65 — det enda stället i
tjänsten som svarade på ett finger med att blekna i stället för att ge efter.
Samma mått som huvudknappen, typkorten och railens rader. */
.lagerflik:active { transform: scale(.97); }
.lagerpille {
position: absolute; inset: 0; z-index: -1;
border-radius: var(--rundning-pill); background: var(--navvald);
}
@media (hover: hover) and (pointer: fine) {
.lagerflik:not([aria-current]):hover { color: var(--fg); text-decoration: none; }
}
/* --- rörelsen i lagerbytet ----------------------------------------------
*
* Wikin och riksdagen ligger bredvid varandra, och rörelsen säger det: korten
* lämnar åt det håll man kom ifrån och det nya lagret kommer in från andra
* hållet. Sökrutan står still — den är samma kontroll i båda lagren, och en
* ruta som gled undan hade påstått att hela sidan byttes ut. Bara ledtexten
* över den tonar.
*
* Namnen sätts BARA under bytet, via klassen som start.js lägger på .
* Ett permanent view-transition-name på rutnätet hade gällt varje navigering
* bort från portalen — @view-transition står på auto — och klickar man sig då
* in på en wiki-sida tonar en ögonblicksbild av rutnätet bort som ett spöke
* över den nya vyn.
*/
html.lagerbyte .typrutnat { view-transition-name: lagerkort; }
html.lagerbyte .heroleda { view-transition-name: heroleda; }
/* Pillen står INTE här, och det är med flit. Låg den i vytransitionen rörde
den sig först när hämtningen kommit hem — sekunder när riksdagens tal inte
är cachade — och kontrollen såg död ut under tiden. Dessutom är old och new
ögonblicksbilder som sträcks till gruppens låda, så en pille med 999 px
radie fick utdragna ändar på vägen. Den flyttas i stället i den levande
DOM:en av start.js, med FLIP, innan hämtningen ens börjat. */
/* Sträckan är fast och inte i procent. En procentsats räknas mot gruppens
egen bredd, och rutnätet är tre gånger bredare på skrivbordet än i mobilen
— samma rörelse hade blivit tre gånger längre där.
Skalan följer med slaget. Ett lager som bara glider i sidled läses som att
något sköts undan; ett som samtidigt drar sig ihop en aning läses som att
det lämnar och något annat kommer fram. Aldrig under .96 — under det blir
det en effekt i stället för en rörelse. */
@keyframes lagerkort-ut-vanster {
to { transform: translateX(-6rem) scale(.97); opacity: 0; }
}
@keyframes lagerkort-in-hoger {
from { transform: translateX(6rem) scale(.97); opacity: 0; }
}
@keyframes lagerkort-ut-hoger {
to { transform: translateX(6rem) scale(.97); opacity: 0; }
}
@keyframes lagerkort-in-vanster {
from { transform: translateX(-6rem) scale(.97); opacity: 0; }
}
/* Ut och in överlappar inte i tiden, och det är hela poängen.
*
* Förut körde båda hela längden samtidigt. Mellan 5 och 25 procent av
* rörelsen låg då två LÄSBARA lager över varandra: "Lagar 33" ovanpå
* "Författningar 11549", och två brödtexter genom varandra. Det är ingen
* övertoning, det är en dubbelexponering, och den syns.
*
* Nu lämnar det gamla på 130 ms och det nya kommer in på 200 ms med 100 ms
* fördröjning. Överlappet är trettio millisekunder i lägena närmast noll och
* ett, där ingendera är läsbar. Hela bytet landar på 300 ms.
*
* `animation-fill-mode: backwards` är inte valfri. Utan den står det nya
* lagret i sitt naturliga läge — fullt synligt — under fördröjningen, och
* kommer alltså inte in utan finns där hela tiden. */
html.lagerbyte::view-transition-old(lagerkort),
html.lagerbyte::view-transition-old(heroleda) {
animation-duration: .13s;
animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}
html.lagerbyte::view-transition-new(lagerkort),
html.lagerbyte::view-transition-new(heroleda) {
animation-duration: .2s;
animation-delay: .1s;
animation-fill-mode: backwards;
animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}
/* Gruppen bär storleks- och lägesbytet och spänner därför över hela bytet.
Rutnäten är olika höga — tretton kort mot tio — och den höjdändringen ska
följa med rörelsen och inte hoppa i slutet. */
html.lagerbyte::view-transition-group(lagerkort) {
animation-duration: .3s;
animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}
html.till-riksdagen::view-transition-old(lagerkort) {
animation-name: lagerkort-ut-vanster;
}
html.till-riksdagen::view-transition-new(lagerkort) {
animation-name: lagerkort-in-hoger;
}
html.till-wikin::view-transition-old(lagerkort) {
animation-name: lagerkort-ut-hoger;
}
html.till-wikin::view-transition-new(lagerkort) {
animation-name: lagerkort-in-vanster;
}
/* Den globala regeln längre upp når inte in i pseudoträdet under
::view-transition. Rörelsen måste stängas av på egen hand — samma sak som
gäller navpillret. start.js hoppar dessutom över hela transitionen när
prefers-reduced-motion är satt, så det här är andra spärren. */
@media (prefers-reduced-motion: reduce) {
html.lagerbyte::view-transition-group(lagerkort),
html.lagerbyte::view-transition-group(heroleda) { animation: none; }
/* Grupperna räckte inte. Slaget på 6 rem sitter på old och new, och stod
kvar här — hade den första spärren i start.js någon gång fallerat hade
den som bett om mindre rörelse fått hela kastet. */
html.lagerbyte::view-transition-old(lagerkort),
html.lagerbyte::view-transition-new(lagerkort),
html.lagerbyte::view-transition-old(heroleda),
html.lagerbyte::view-transition-new(heroleda) { animation: none; }
}
/* Upphovet står där kortordningens hjälprad står i wikilagret. Riksdagens
villkor kräver att källan anges, och bandhuvudet är det enda stället där
den syns utan att tränga sig på. */
.lagernot { font-size: var(--text-xs); color: var(--dim); }
.lagernot a { color: var(--dim); }
/* --- typfiltret i sökpanelen --------------------------------------------- */
/* En fritextsökning i riksdagen ger tusen träffar av nio slag — "ellagen" ger
1249 — och den som söker vet oftast vilket slag han vill ha. Raden ligger
mellan panelens huvud och träffarna, där man ser antalet och genast kan
göra något åt det.
På skrivbordet bryter raden rad. Den rullade först i sidled, men en rad
som klipps mot panelkanten ser avslutad ut: de fyra minsta typerna fanns
inte, och ingenting sa att de låg utanför bilden. Två rader chippar kostar
trettio pixlar och visar alla tio.
I mobilen rullar den ändå. Tio chippar bryter till fem rader på 390 px och
trycker träfflistan ur bild — mitt i det ögonblick raden finns till för att
hjälpa — och på en pekskärm är sidledsrullning både väntad och synlig. */
.sokfilter {
display: flex; flex-wrap: wrap; gap: var(--rum-2);
padding: var(--rum-3) var(--rum-4);
}
.sokfilter .chip {
display: inline-flex; align-items: center; gap: .4rem;
flex-shrink: 0; cursor: pointer;
font-family: inherit; line-height: var(--radhojd-tat);
transition: background-color .16s ease, color .16s ease;
}
/* Talet är chippets halva besked — "Propositioner 367" säger både vad och hur
mycket. Det står tunnare än etiketten så att raden går att skumma på namnen. */
.chiptal { font-variant-numeric: tabular-nums; opacity: .65; font-weight: 400; }
@media (hover: hover) and (pointer: fine) {
.sokfilter .chip:hover { background: var(--hover); }
.sokfilter .chip.pa:hover { background: var(--chip-pa); }
}
/* --- typkorten i riksdagslagret ------------------------------------------ */
/* Datumet tar andelsstreckets plats. Wikins streck säger var tyngden i
materialet ligger; riksdagen har 258 000 motioner mot 460
granskningsrapporter, och ett streck där hade varit fullt i ena änden och
osynligt i den andra. "Senast 2026-08-20" säger i stället det man vill veta
om en samling man ändå inte kan överblicka: om den lever. */
.typsenast {
font-size: var(--text-xs); color: var(--dim);
font-variant-numeric: tabular-nums;
}
/* --- utfällningen: de senaste dokumenten --------------------------------- */
.rdutfallt .rdlista { margin-top: var(--rum-3); }
.rdlista { list-style: none; margin: 0; padding: 0; }
/* Raden är två celler: länken tar all plats, stjärnan står kvar till höger.
Stjärnan ligger UTANFÖR länken och inte i den — ett formulär går inte att
lägga i ett , och en knapp inuti en länk är inte klickbar för sig. */
.rdrad {
display: flex; align-items: flex-start; gap: var(--rum-2);
padding: var(--rum-3) 0;
border-top: var(--linje) solid var(--line);
}
.rdrad:first-child { border-top: 0; }
.rdlank {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: .25rem;
color: var(--lank); text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.rdlank:hover .rdtitel { text-decoration: underline; }
}
.rdtitel { font-size: var(--text-m); font-weight: var(--vikt-rubrik);
line-height: var(--radhojd-tat); }
.rdmeta {
display: flex; flex-wrap: wrap; gap: .3rem var(--rum-3);
font-size: var(--text-xs); color: var(--dim);
}
.rddatum, .rdbeteckning { font-variant-numeric: tabular-nums; }
/* Utdraget är riksdagens eget, med träffordet markerat. Två rader räcker för
att känna igen rätt dokument; fler gör listan till en textmassa. */
.rdutdrag {
font-size: var(--text-s); color: var(--dim); line-height: var(--radhojd);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.rdutdrag mark, .sokutdrag mark { background: var(--traffbg); color: var(--traffbg-fg);
border-radius: 3px; padding: 0 .1em; }
/* Stjärnan. Tom knapp utan ram — märkningen ska kunna göras i förbifarten och
inte se ut som en handling man behöver tänka på. Fylld stjärna i accentens
ton när den sitter, konturerad och dämpad när den inte gör det. */
.rdstjarna { margin: 0; flex-shrink: 0; }
.rdstjarna button {
display: inline-flex; align-items: center; justify-content: center;
width: 2.5rem; height: 2.5rem; padding: 0;
background: none; border: 0; border-radius: 50%;
color: var(--dim); cursor: pointer;
transition: color .18s ease, background-color .18s ease;
}
.rdstjarna button svg { width: 20px; height: 20px; }
.rdstjarna button[data-pa] { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
.rdstjarna button:hover { background: var(--chip); color: var(--fg); }
.rdstjarna button[data-pa]:hover { color: var(--accent); }
}
/* --- märket: wikin har en egen sida om dokumentet ------------------------ */
/* Poängen med hela riksdagslagret är att komma åt det wikin INTE har. Då är
det motsatta beskedet lika viktigt: den som söker på köplagen ska se att
wikin redan skrivit om den, och läsa den sidan i stället för lagtexten.
Märket är grönt och inte accentblått. Blått betyder "valt" i tjänsten —
pillret i menyn, chippet i filtret — och det här är ingenting man valt. Det
är ett tillstånd hos dokumentet. */
.wikimark {
display: inline-flex; align-items: center; flex-shrink: 0;
padding: .05rem .4rem; border-radius: var(--rundning-liten);
background: var(--wikimark-bg); color: var(--wikimark-fg);
font-size: var(--text-xs); font-weight: var(--vikt-rubrik);
letter-spacing: var(--spar-etikett); white-space: nowrap;
}
/* I utfällningen är märket en riktig länk. Där ligger stjärnan redan utanför
radlänken, så en andra länk bryter ingen tangentbordsbläddring — och det är
den länken man faktiskt vill ha när wikin har skrivit om lagen.
Klassen heter rdwikilank och inte wikilank. `wikilank` är wikins EGEN klass
på varje intern brödtextlänk (app/wiki.py sätter den), och en regel på det
namnet färgade om samtliga länkar inne i sidvyerna och tog bort deras
understrykning. Mobilkollen fångade det: sida--reform gick från 59 till 70
för små tryckytor, och alla elva var brödtextlänkar. */
.rdwikilank {
display: inline-flex; align-items: center; gap: .15rem; flex-shrink: 0;
align-self: center; text-decoration: none; color: var(--wikimark-fg);
}
.rdwikilank svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
.rdwikilank:hover .wikimark { background: var(--wikimark-fg); color: var(--yta); }
}
/* Railposten till wiki-sidan bär samma ton, så att den läses som samma besked
som märket i listan — inte som ännu en väg ut ur sidan. */
.railhandling.railwiki { background: var(--wikimark-bg); }
.railhandling.railwiki .railpostnamn,
.railhandling.railwiki svg { color: var(--wikimark-fg); }
/* --- läsvyn -------------------------------------------------------------- */
/* Favoritknappen är railens huvudhandling. Den sitter som knappen den är och
inte som en railhandling: railhandlingarna leder någon annanstans, den här
ändrar något. */
.railfavorit { margin: 0 0 var(--rum-4); }
.railfavorit .huvudknapp {
display: inline-flex; align-items: center; gap: var(--rum-2);
width: 100%; justify-content: center;
}
.railfavorit .huvudknapp svg { width: 17px; height: 17px; }
/* Sparad: knappen backar från fylld till konturerad. Handlingen som återstår
är att TA BORT, och den ska inte se ut som sidans starkaste erbjudande. */
.railfavorit .huvudknapp.pa {
background: none; color: var(--accent);
border: var(--linje) solid var(--accent);
}
.railfavorit .railbrod { margin-top: var(--rum-2); }
/* Läsvyns lagtext ligger i huvudkortet och inte i källpanelen, så den får
textens eget mått i stället för panelens bredd. */
.riksdagsdokument .innehall.lagtext { max-width: none; }
/* Två streck under varandra. Kapitelrubriken i lagtexten bär ett eget streck
ovanför sig, och i källpanelen är det rätt — där finns inget annat. Här
ligger kortstrecket redan mellan sidhuvudet och artikeln, och den första
rubrikens streck hamnade en centimeter under det. Bara den första. */
.riksdagsdokument .lagtext > :first-child,
.riksdagsdokument .lagtext > :first-child > :first-child { margin-top: 0; }
.riksdagsdokument .lagtext > h3:first-child,
.riksdagsdokument .lagtext > :first-child > h3:first-child {
border-top: 0; padding-top: 0;
}
/* Uppgiftslistan i utfällningen står tätare än i källpanelen: den är en
fotnot om författningen, inte dess ingress. */
.riksdagsdokument .textutfallning .lagmeta { margin: var(--rum-3) 0 0;
font-size: var(--text-s); }
.rdkalla { margin-top: var(--rum-5); font-size: var(--text-xs); color: var(--dim); }
@media (max-width: 620px) {
/* Lagerväxeln är hela funktionens huvudkontroll på en telefon, och 27 px
är ingen tryckyta. Luften läggs på länken och inte på raden, så att
understrykningen får ligga kvar nära ordet. */
.lagerflik { padding-top: .5rem; padding-bottom: .35rem; }
/* Upphovsraden la sig mellan de två flikarna när de bröt rad, och delade
växeln i två halvor som inte såg ihop. Den får en egen rad under. */
.bandhuvud { flex-wrap: wrap; }
.lagerval { flex: 1 0 100%; }
.lagernot { flex: 1 0 100%; }
/* Filterchippen är sökningens kontroll och ska gå att träffa med en tumme.
Raden rullar i sidled, så höjden kostar ingen bredd. Slöjan i högerkanten
säger att den gör det — en rad som slutar tvärt mot panelkanten ser
avslutad ut. */
.sokfilter {
flex-wrap: nowrap;
overflow-x: auto; scrollbar-width: none;
overscroll-behavior-x: contain;
mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.sokfilter::-webkit-scrollbar { display: none; }
.sokfilter .chip { min-height: 2.25rem; padding-inline: .85rem; }
/* Organet ryms inte och behövs inte för att känna igen ett dokument. */
.rdorgan { display: none; }
/* Attributionsraden är länkar i brödtextstorlek. Samma grepp som
källänkarna i innehållsförteckningen: luften läggs på länken och inte på
raden, så att tummen får något att träffa utan att stycket glesnar. */
.rdkalla a, .lagernot a { display: inline-block; padding-block: .65rem; }
}
/* ==========================================================================
ARBETSBORDET
Arbetsytan som helskärmsläge — skisser/arbetsytan-desktop-bordet-v1.html
(artboard 1) och docs/plan-arbetsbordet.md.
Bordet är den enda vyn i tjänsten som inte är ett kort på en duk. Här ligger
flera ark på ett bord, och duken syns bara som fogar mellan dem. Ingenting
scrollar sidan: skivan är exakt så hög som fönstret, och varje yta rullar
för sig.
Allt bygger på tokens ur :root. Mörkt läge behöver därför inga egna regler
här — paletten byts ovanför, och bordet följer med.
========================================================================== */
body.bordkropp {
height: 100dvh;
margin: 0;
overflow: hidden;
display: flex;
flex-direction: column;
background: var(--duk);
}
/* --- bordslisten --------------------------------------------------------- */
.bordslist {
flex: none;
height: 3.25rem;
display: flex;
align-items: center;
gap: var(--rum-4);
padding: 0 .85rem;
background: var(--yta);
border-bottom: 1px solid var(--line);
}
.bordfyllnad { flex: 1; }
/* Vägen ut. Tjänstens tillbakapille: vit yta, hårfin ram, chevron före
texten. Ordet är "Arbetsytan" och inte "Tillbaka" — man ska veta vart man
kommer, inte bara att man lämnar. */
.bordut {
display: inline-flex;
align-items: center;
gap: .35rem;
flex: none;
border: 1px solid var(--line);
border-radius: var(--rundning-pill);
padding: .3rem .8rem .3rem .6rem;
font-size: var(--text-s);
color: var(--fg);
text-decoration: none;
}
.bordut:hover { background: var(--hover); text-decoration: none; }
.bordut svg { width: 15px; height: 15px; }
.bordanvandare { font-size: var(--text-s); color: var(--dim); }
.bordstreck { width: 1px; height: 1.4rem; background: var(--line); }
/* Segmenterad växel i navigationskapselns formspråk: tonad ränna, valt läge
som en vit bricka med skugga. */
.bordlagen {
display: inline-flex;
align-items: center;
gap: .2rem;
background: var(--tonad);
border-radius: var(--rundning-pill);
padding: .2rem;
}
.bordlagen a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 1.7rem;
border-radius: var(--rundning-pill);
color: var(--dim);
}
.bordlagen a svg { width: 15px; height: 15px; }
.bordlagen a[aria-pressed="true"] {
background: var(--yta);
color: var(--fg);
box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.bordlagen[aria-disabled="true"] { opacity: .45; }
.bordpanelpille {
display: inline-flex;
align-items: center;
gap: .4rem;
border-radius: var(--rundning-pill);
padding: .35rem .85rem;
font-size: var(--text-s);
/* Hopfälld hade pillen ingen yta alls, och bordslisten är --yta: knappen
försvann i sin egen bakgrund och blev lös text. Vilande bär den samma
tonade yta som lägesväxeln bredvid — de är två kontroller för hur bordet
är ställt och ska väga lika mycket. Hover lättar till --hover, alltså
uppåt: i den här paletten betyder ljusare "lyft", precis som den valda
segmentknappen i lägesväxeln som går till --yta. */
background: var(--tonad);
color: var(--fg);
text-decoration: none;
/* Fyllningen följer chevronen. Utan den slocknar den mörka ytan tvärt medan
ikonen fortfarande vrider sig, och de två lägena ser ut att bytas i två
steg i stället för ett. */
transition: background-color .3s cubic-bezier(.32, .72, 0, 1),
color .3s cubic-bezier(.32, .72, 0, 1);
}
.bordpanelpille:hover { background: var(--hover); text-decoration: none; }
.bordpanelpille[aria-checked="true"] {
background: var(--navvald);
color: var(--navvald-fg);
}
.bordpanelpille[aria-checked="true"]:hover { background: var(--navvald); }
.bordpanelpille svg { width: 14px; height: 14px; }
/* Vikningen, och orden är ikonen: UTFÄLLD pekar nedåt — panelen ligger uppe och
utlagd — IHOPFÄLLD pekar uppåt, som något som fällts undan. Utfällt är
chevronens eget läge i rutnätet, alltså rotate(0); vägen mellan lägena är ett
halvt varv, och den syns eftersom växeln inte laddar om sidan. */
.bordvik {
display: inline-flex;
line-height: 0;
margin-inline-start: .05rem;
margin-inline-end: -.25rem;
transform: rotate(0deg);
transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}
.bordpanelpille[aria-checked="false"] .bordvik { transform: rotate(180deg); }
.bordpilletal { font-variant-numeric: tabular-nums; opacity: .7; }
.bordpilletal.tyst { color: var(--dim); opacity: 1; }
/* --- bordsskivan --------------------------------------------------------- */
.bordskiva {
flex: 1;
min-height: 0;
display: flex;
gap: 10px;
padding: 10px;
}
.bordlada,
.bordpanel,
.bordanteckningar {
background: var(--yta);
border: 1px solid var(--line);
border-radius: var(--rundning);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 0;
}
/* --- lådan --------------------------------------------------------------- */
/* Lådan är ett flytande ark över dokumenten, inte en spalt (beslutat
2026-09-08, docs/plan-arbetsbordet.md). En spalt bred nog att läsa filnamn
i tog ytan från två dokument bredvid varandra; ett ark kan vara 26 rem och
ändå lämna hela bordet åt texten när det är infällt. Läget står på
kroppen (data-lada) och i adressen (?lada=). Öppet: ligger över vänstra
delen av bordsskivan. Infällt: skjuts ut åt vänster och blir inert. */
.bordskiva { position: relative; }
.bordlada {
position: absolute;
top: 10px; bottom: 10px; left: 10px;
width: min(26rem, calc(100% - 20px));
z-index: 35;
box-shadow: var(--skugga-panel);
transition: transform .28s cubic-bezier(.32, .72, 0, 1), opacity .2s ease;
}
body.bordkropp[data-lada="av"] .bordlada {
transform: translateX(calc(-100% - 14px));
opacity: 0;
pointer-events: none;
}
.bordladahuvud {
flex: none;
display: flex; align-items: center; justify-content: space-between; gap: .6rem;
padding: .7rem .9rem .2rem;
}
.bordladarubrik {
font-weight: var(--vikt-rubrik); font-size: var(--text-m);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bordladastang {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 2rem; height: 2rem; border-radius: var(--rundning-pill);
color: var(--dim); background: var(--tonad);
}
.bordladastang:hover { background: var(--hover); color: var(--fg); }
.bordladastang svg { width: 14px; height: 14px; }
/* Pillen i listen: var man står och hur många rader lådan har. Samma form
som anteckningspillen, samma växel-semantik (role=switch). */
.bordladapille {
display: inline-flex; align-items: center; gap: .45rem;
padding: .35rem .8rem; border-radius: var(--rundning-pill);
background: var(--tonad); color: var(--fg); text-decoration: none;
font-size: var(--text-s); max-width: 22rem;
}
.bordladapille:hover { background: var(--hover); text-decoration: none; }
.bordladapille[aria-checked="true"] { background: var(--navvald); color: var(--navvald-fg); }
.bordladapille svg { width: 14px; height: 14px; flex: none; }
.bordladapille .bordpilletal { margin-inline-start: .1rem; }
/* Raden: länken tar bredden, menyn står till höger. Namnet får radbrytas —
lådan finns för att namnen ska gå att läsa, och en ellips är motsatsen. */
.bordfilrad { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; }
/* Två klasser i selektorn: .bordfil a längre ned sätter fyllningen och väger
lika mycket som .bordfilrad > a — och står efter. Plats för prickarna. */
.bordlada .bordfilrad > a { flex: 1 1 auto; min-width: 0; padding-inline-end: 2.4rem; }
/* Prickarna står i radens övre högra hörn, öppen som stängd. Menyn fälls ut
på plats UNDER raden i hela lådans bredd, i stället för att ligga över
den: lådan rullar, och en flytande panel hade klippts av rullytan. Öppen
tar detaljen hela raden (flex-basis 100 %) och summary lyfts tillbaka till
hörnet. */
.bordfilrad .radmeny { position: absolute; inset-inline-end: .25rem; top: .25rem; }
.bordlada .radmeny[open] { position: static; flex-basis: 100%; display: flex; flex-direction: column; }
.bordlada .radmeny[open] > summary { position: absolute; inset-inline-end: .25rem; top: .25rem; }
.bordlada .radmenypanel {
position: static; width: auto; align-self: stretch; box-shadow: none;
margin: .1rem 0 .5rem 2.2rem; padding: .25rem;
}
.bordsok {
display: flex;
align-items: center;
gap: .4rem;
margin: .7rem .7rem .55rem;
padding: .35rem .7rem;
background: var(--tonad);
border-radius: var(--rundning-pill);
}
.bordsok svg { width: 13px; height: 13px; color: var(--dim); flex: none; }
.bordsok input {
flex: 1;
min-width: 0;
border: 0;
background: none;
font: inherit;
font-size: var(--text-s);
color: var(--fg);
}
.bordsok input:focus { outline: none; }
.bordsmulor {
display: flex;
align-items: center;
gap: .25rem;
padding: .1rem .85rem .5rem;
font-size: .78rem;
border-bottom: 1px solid var(--tonad);
}
.bordsmulor a { color: var(--dim); text-decoration: none; }
.bordsmulor a:hover { text-decoration: underline; }
.bordsmulanu { font-weight: var(--vikt-rubrik); }
.bordsmulpil { color: var(--dim); opacity: .6; margin: 0 .1rem; }
.bordfiler {
flex: 1;
min-height: 0;
overflow-y: auto;
list-style: none;
margin: 0;
padding: .4rem .5rem;
}
.bordfil a {
display: flex;
align-items: center;
gap: .5rem;
padding: .42rem .55rem;
border-radius: var(--rundning-liten);
font-size: var(--text-s);
color: var(--fg);
text-decoration: none;
}
.bordfil a:hover { background: var(--hover); text-decoration: none; }
/* Markeringen för "ligger på bordet" är tonad yta plus sifferbricka, inte fet
text: raden ska kunna läsas som vanligt när man letar efter nästa dokument. */
.bordfil.pa-bordet a { background: var(--tonad); }
.bordfilikon { flex: none; display: inline-flex; }
.bordfilikon svg { width: 15px; height: 15px; color: var(--dim); }
.bordfilnamn { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.bordfiltal svg { width: 12px; height: 12px; color: var(--line); }
.bordfil.utantext a { color: var(--dim); }
.bordfilmark {
margin: -.15rem 0 .3rem 2.05rem;
font-size: var(--text-xs);
color: var(--dim);
}
.bordfilmark[data-ton="flaggad"] { color: var(--accent); }
.bordbricka {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.05rem;
height: 1.05rem;
border-radius: 5px;
background: var(--navvald);
color: var(--navvald-fg);
font-size: .66rem;
font-weight: var(--vikt-rubrik);
font-variant-numeric: tabular-nums;
}
.bordbricka.tyst { background: var(--tonad); color: var(--dim); }
.bordtomlada, .bordtomlappar {
padding: .8rem .6rem;
font-size: var(--text-s);
color: var(--dim);
line-height: 1.6;
list-style: none;
}
.bordladafot {
flex: none;
display: flex;
align-items: center;
gap: .4rem;
padding: .6rem .7rem;
border-top: 1px solid var(--tonad);
}
.bordyttal { font-size: var(--text-xs); color: var(--dim); font-variant-numeric: tabular-nums; }
/* --- dokumentpanelen ----------------------------------------------------- */
.bordpanel { flex: 1; min-width: 0; }
.bordpanelhuvud {
flex: none;
padding: .75rem 1rem .6rem;
border-bottom: 1px solid var(--tonad);
}
.bordpaneltopp { display: flex; align-items: center; gap: .5rem; }
.bordpaneltitel {
flex: 1;
min-width: 0;
margin: 0;
font-size: var(--text-m);
font-weight: var(--vikt-rubrik);
letter-spacing: -.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bordstang {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.7rem;
height: 1.7rem;
border-radius: var(--rundning-pill);
color: var(--dim);
}
.bordstang:hover { background: var(--hover); }
.bordstang svg { width: 14px; height: 14px; }
.bordmeta { display: flex; align-items: center; gap: .55rem; margin-top: .45rem; }
/* Text är det man läser i panelen; Original hämtar filen. Ordningen är med
flit den här: avskriften är det normala läget, originalet är undantaget man
tar när avskriften inte räcker. */
.bordlagesval {
display: inline-flex;
align-items: center;
gap: .15rem;
background: var(--tonad);
border-radius: var(--rundning-pill);
padding: .15rem;
}
.bordlagesval > * {
border-radius: var(--rundning-pill);
padding: .18rem .6rem;
font-size: .74rem;
color: var(--dim);
text-decoration: none;
}
.bordlagesval .bordvalt {
background: var(--yta);
color: var(--fg);
box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.bordmetatal {
flex: 1;
min-width: 0;
font-size: .74rem;
color: var(--dim);
font-variant-numeric: tabular-nums;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---- handlingarna i panelhuvudet --------------------------------------
Bredvid, Hämta filen, Redigera och Fråga AI står på samma rad och är samma
sorts sak: en handling på dokumentet i panelen. De är därför EN klass och
inte fyra nästan lika deklarationsblock — de tre första var redan kopior av
varandra, och Redigera hade glidit ut ur familjen: bart bläck utan yta, som
en bildtext. Bredvid Fråga AI:s fyllda pille syntes den knappt, och en
kontroll som inte ser ut som en kontroll är ingen kontroll.
Geometrin står här en gång. Bara ytan skiljer, och den säger vart handlingen
leder: tonad = något som ställs om i panelen (Bredvid, Hämta filen,
Redigera), handling = något som lämnar bordet (Fråga AI). */
.bordmetachip {
flex: none;
display: inline-flex;
align-items: center;
gap: .3rem;
background: var(--tonad);
color: var(--fg);
border: none;
border-radius: var(--rundning-pill);
padding: .22rem .65rem;
font-size: .74rem;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
}
.bordmetachip svg { width: 12px; height: 12px; color: var(--dim); }
@media (hover: hover) and (pointer: fine) {
.bordmetachip:hover { background: var(--hover); text-decoration: none; }
}
/* Fråga AI lämnar bordet och bär railhandlingarnas ton. Ikonen följer texten
där — --dim mot den blå ytan blir gröt. */
.bordmetachip.handling { background: var(--handling-bg); color: var(--handling-fg); }
.bordmetachip.handling svg { color: currentColor; }
@media (hover: hover) and (pointer: fine) {
.bordmetachip.handling:hover { background: var(--handling-bg); opacity: .85; }
}
.bordtext {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 1.4rem 1.6rem 3rem;
/* Ytan är sina styckens offsetParent. Vändningen mellan läsning och skrivning
bär rullningsläget över med offsetTop, och det måttet räknas från närmaste
positionerade förälder — är det inte den här blir avståndet fel på ett sätt
som inte syns förrän någon lägger en `position` ovanför. */
position: relative;
}
/* ---- Word-kortet: läsvyn och editorn som två sidor --------------------
Kortet är en vändning och inte två vyer, för det ÄR samma dokument. Att
`.bordtext` redan är en egen rullyta med fast storlek är det som gör
vändningen möjlig: det som roterar är fönstret, inte de fyra meter text som
ligger bakom det.
Sidorna ligger i samma rutnätsruta i stället för absolut positionerade —
då bestämmer den högsta av dem panelens höjd, och ingen av dem kan hamna
utanför sin panel. */
.bordkort {
flex: 1; min-height: 0;
display: grid;
perspective: 1400px;
}
.bordsida {
grid-area: 1 / 1;
min-height: 0;
display: flex; flex-direction: column;
backface-visibility: hidden;
transition: transform .18s ease-in, opacity .18s ease-in;
}
/* Bara den sida som gäller ritas. `inert` sätts av servern och av skriptet, så
den bortvända sidan går varken att tabba in i eller läsa upp — men den finns
kvar i markupen, och det är den som gör att sidorna aldrig kan glida isär. */
.bordkort[data-skriv="av"] .bordskriv,
.bordkort[data-skriv="pa"] .bordlas { display: none; }
/* Vändningen. Kortet lutas undan, läget byts medan det står på kant, och det
kommer tillbaka med andra sidan uppåt. Halva vändningen åt gången — en hel
rotation hade visat baksidan spegelvänd i det ögonblick innehållet byts. */
.bordkort.vander .bordsida { transform: rotateY(-88deg); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.bordsida { transition: none; }
.bordkort.vander .bordsida { transform: none; opacity: 1; }
}
/* Under 1000 px rullar inte panelen i sig själv — då staplas ytorna och hela
sidan rullar, och kortet blir lika högt som dokumentet (nio tusen pixlar för
en författning). Att rotera den slabben är varken vackert eller billigt.
Läget byts direkt i stället; det är samma byte, bara utan rörelsen. */
@media (max-width: 1000px) {
.bordsida { transition: none; }
.bordkort.vander .bordsida { transform: none; opacity: 1; }
}
/* ---- skrivytan -------------------------------------------------------- */
/* Ingen fokusram. Varje stycke är sin egen redigerbara ruta, och en ram runt
det man klickar i ritar en blå låda som följer markören genom dokumentet —
man skriver i en text, inte i ett formulär.
`:focus-visible` räddar inte: den matchar ALLTID för redigerbar text, för
webbläsaren vet att man är på väg att skriva i den. Regeln finns i spec och
går inte att villkora bort.
Markören är indikatorn, som i varje textredigerare. Den syns också för den
som tabbar sig fram — fokus sätter markören i stycket. */
.bordskrivyta:focus { outline: none; }
/* ---- färgvalet i verktygsraden ---------------------------------------
Rutorna är knappar med en klass per färg. Ett style-attribut hade fallit
tyst bort — CSP:n är `style-src 'self'` — och ett fritt färghjul hade krävt
just ett sådant för att ens visa vad man valde. */
.bordfargval { position: relative; display: inline-flex; }
.bordfargval > summary {
display: inline-flex; align-items: center; justify-content: center;
gap: .12rem; flex-direction: column;
min-width: 1.9rem; height: 1.9rem;
border-radius: var(--rundning-liten);
color: var(--fg); font-size: var(--text-s); line-height: 1;
cursor: pointer; list-style: none;
}
.bordfargval > summary::-webkit-details-marker { display: none; }
.bordfargval > summary svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
.bordfargval > summary:hover { background: var(--hover); }
}
/* Strecket under A:et är där färgen sitter i Word. Blått och inte grått: det
är det enda i knappen som säger att den handlar om färg, och i dämpad ton
såg den ut som ett understruket A. Färgen är tjänstens accent och inte den
senast valda — att visa den skulle kräva ett style-attribut, och CSP:n
släcker det. */
.bordfargstreck { display: block; width: .8rem; height: 2px;
background: var(--accent); border-radius: 1px; }
.bordfargpanel {
position: absolute; top: calc(100% + .3rem); inset-inline-start: 0;
z-index: 40;
display: grid; grid-template-columns: repeat(4, 1.5rem); gap: .25rem;
padding: .4rem;
background: var(--yta); border: var(--linje) solid var(--line);
border-radius: var(--rundning); box-shadow: var(--skugga-panel);
}
.bordfargpanel button {
width: 1.5rem; height: 1.5rem; padding: 0;
border: var(--linje) solid var(--line); border-radius: var(--rundning-liten);
background: var(--yta); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.bordfargingen { font-size: var(--text-xs); color: var(--dim); }
.bordfargruta { display: block; width: 100%; height: 100%;
border-radius: calc(var(--rundning-liten) - 1px); }
@media (hover: hover) and (pointer: fine) {
.bordfargpanel button:hover { border-color: var(--fg); }
}
/* Textfärgerna: Words standardrad, kortad. */
[data-ruta="c00000"] .bordfargruta { background: #c00000; }
[data-ruta="ff0000"] .bordfargruta { background: #ff0000; }
[data-ruta="ed7d31"] .bordfargruta { background: #ed7d31; }
[data-ruta="008000"] .bordfargruta { background: #008000; }
[data-ruta="0070c0"] .bordfargruta { background: #0070c0; }
[data-ruta="7030a0"] .bordfargruta { background: #7030a0; }
[data-ruta="808080"] .bordfargruta { background: #808080; }
/* Överstrykningarna: samma värden som .bordmark, i rutform. */
[data-ruta="yellow"] .bordfargruta { background: #ffff00; }
[data-ruta="green"] .bordfargruta { background: #00ff00; }
[data-ruta="cyan"] .bordfargruta { background: #00ffff; }
[data-ruta="magenta"] .bordfargruta { background: #ff00ff; }
[data-ruta="red"] .bordfargruta { background: #ff0000; }
[data-ruta="blue"] .bordfargruta { background: #0000ff; }
[data-ruta="lightGray"] .bordfargruta { background: #c0c0c0; }
/* Ett tomt stycke har ingen höjd och går inte att sätta markören i. Raden ger
det en, utan att lägga till text som skulle sparas. */
.bordskrivyta > *:empty::before {
content: ""; display: inline-block; min-height: 1.2em;
}
/* ---- Words överstrykningsfärger ---------------------------------------
Sexton klasser och inte en färg per dokument: uppräkningen är sluten i
Words eget format, och ett stilblock per dokument hade krävt antingen ett
style-attribut (som CSP:n släcker) eller ett eget stilark per fil.
Färgerna är Words egna värden, inte tjänstens palett. En gul överstrykning
ska se ut som den gör i Word — det är dokumentets märkning, inte vår. Av
samma skäl bär texten en fast mörk färg ovanpå de ljusa: ärvd ljus text på
gult är oläslig i mörkt läge. */
.bordmark { border-radius: 2px; padding: 0 .1em; color: #000; }
.bordmark[data-farg="yellow"] { background: #ffff00; }
.bordmark[data-farg="green"] { background: #00ff00; }
.bordmark[data-farg="cyan"] { background: #00ffff; }
.bordmark[data-farg="magenta"] { background: #ff00ff; }
.bordmark[data-farg="blue"] { background: #0000ff; color: #fff; }
.bordmark[data-farg="red"] { background: #ff0000; color: #fff; }
.bordmark[data-farg="darkBlue"] { background: #000080; color: #fff; }
.bordmark[data-farg="darkCyan"] { background: #008080; color: #fff; }
.bordmark[data-farg="darkGreen"] { background: #008000; color: #fff; }
.bordmark[data-farg="darkMagenta"] { background: #800080; color: #fff; }
.bordmark[data-farg="darkRed"] { background: #800000; color: #fff; }
.bordmark[data-farg="darkYellow"] { background: #808000; color: #fff; }
.bordmark[data-farg="darkGray"] { background: #808080; color: #fff; }
.bordmark[data-farg="lightGray"] { background: #c0c0c0; }
.bordmark[data-farg="black"] { background: #000; color: #fff; }
.bordmark[data-farg="white"] { background: #fff; }
/* Tomma stycken finns på riktigt i Word-filen och ska synas — de är avstånd
författaren satt. Men de bär panelens fulla styckemarginal också, och då
blir ett dokument med sex tomma rader en trappa av luft. Halva höjden och
ingen egen marginal: avståndet står kvar, dokumentet blir läsbart. */
/* Måste vara minst lika specifik som styckereglerna nedan, annars får det
tomma stycket tillbaka sin marginal och räknas två gånger. */
.bordtext .bordord:empty { min-height: .55em; margin-block: 0; }
/* ---- Word-dokumentets egen rytm ---------------------------------------
Rubrikerna i Word-vyn är riktiga h2/h3/h4 och fick därför webbläsarens
standardmarginaler — 32 px över och 8 px under en h2, 17,6 och 4 under en
h3. Det är inga valda mått, det är bara vad som råkade gälla, och det syntes
som ett gap mellan rubriken och stycket den hör ihop med.
Mer luft ÖVER än under: rubriken hör till det som följer, inte till det som
står före. Det är hela skälet avståndet finns.
Styckena är tätare än textutvinningens (som sitter kvar på 1,75 för löpande
pdf-text). En Word-fil bär sina egna tomma stycken, och de är författarens
avstånd — lägger panelen ett luftigt radavstånd ovanpå dem räknas samma luft
två gånger, och dokumentet glesnar till oigenkännlighet. */
.bordtext .bordord-stycke,
.bordtext .bordord-punkt { margin: 0 0 .45rem; line-height: 1.6; }
.bordtext .bordord-rubrik {
margin: 1.5rem 0 .35rem;
font-weight: var(--vikt-rubrik);
letter-spacing: -.01em;
line-height: 1.3;
}
.bordtext h2.bordord-rubrik { font-size: 1.12rem; margin-top: 1.7rem; }
.bordtext h3.bordord-rubrik { font-size: 1rem; }
.bordtext h4.bordord-rubrik { font-size: 1rem; margin-top: 1.2rem; }
/* Första raden i panelen ska ligga mot överkanten, inte en tum ned. */
.bordtext > .bordord-rubrik:first-child { margin-top: 0; }
/* Två rubriker i rad är en över- och en underrubrik. Det fulla avståndet
emellan dem skulle säga att de hör till olika avsnitt. */
.bordtext .bordord-rubrik + .bordord-rubrik { margin-top: .5rem; }
.bordverktyg {
flex: none;
display: flex; align-items: center; gap: .2rem;
padding: .4rem .6rem;
border-bottom: var(--linje) solid var(--line);
background: var(--tonad);
}
.bordverktyg button {
min-width: 1.9rem; height: 1.9rem;
border: none; background: none; color: var(--fg);
border-radius: var(--rundning-liten);
font-size: var(--text-s); line-height: 1; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.bordverktyg button:hover { background: var(--hover); }
}
.bordverktygstreck {
width: 1px; height: 1.1rem; margin-inline: .25rem;
background: var(--line);
}
/* ---- knapparna i panelhuvudet ----------------------------------------- */
.bordskrivval { display: inline-flex; align-items: center; gap: .45rem; }
/* Avbryt är kvar utan yta, och det är en annan sak än att Redigera var det:
Avbryt står bredvid Spara och ska inte konkurrera med den. Samma tysta ton
som .radchip.tyst i listan — man ska hitta utvägen, inte dras till den. */
.bordavbryt {
display: inline-flex; align-items: center; gap: .3rem;
color: var(--dim); text-decoration: none; font-size: var(--text-xs);
border-radius: var(--rundning-pill); padding: .18rem .5rem;
}
@media (hover: hover) and (pointer: fine) {
.bordavbryt:hover { background: var(--hover); color: var(--fg); }
}
.bordskrivval .bordspara { padding: .18rem .7rem; }
/* Beskedet står bredvid knapparna och inte som en ruta över sidan: sparningen
sker i bakgrunden, och ett besked som tar över skärmen för något som gick
bra är fel vikt. */
.bordskrivbesked { font-size: var(--text-xs); color: var(--dim); }
.bordtext p { margin: 0 0 .9rem; font-size: 1rem; line-height: 1.7; }
.bordrubrik {
margin: 1.4rem 0 .9rem;
font-size: 1.05rem;
font-weight: var(--vikt-rubrik);
letter-spacing: -.01em;
}
.bordtext > .bordrubrik:first-child { margin-top: 0; }
/* Sidmarkören är utvinningens egen sidbrytning, inte en gissning. */
.bordsidmark {
margin: 1.6rem 0 .5rem !important;
font-size: var(--text-xs) !important;
font-weight: var(--vikt-rubrik);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--dim);
scroll-margin-top: 1rem;
}
.bordtext > .bordsidmark:first-child { margin-top: 0 !important; }
/* Kommer man hit från en anteckning ska stället lysa upp, med samma gula som
en sökträff i wikin. */
.bordsidmark:target { background: var(--traffbg); color: var(--fg); border-radius: 6px; padding: .15rem .4rem; }
/* Markeringen är bordets viktigaste tillstånd — den bär citatet till
anteckningen. WebKit ritar den med sin egen grå färg i ett PASSIVT fönster,
och det slår igenom så fort man har bordet på två skärmar och klickar över
till den andra. `:window-inactive` är webkitegen och gör ingenting i andra
motorer; där gäller redan raden ovanför. */
.bordtext ::selection { background: var(--traffbg); color: var(--fg); }
.bordtext ::selection:window-inactive { background: var(--traffbg); color: var(--fg); }
.bordfel {
color: var(--dim);
font-size: var(--text-s) !important;
line-height: 1.6;
}
/* Tom andra panel och tomt bord. En yta och inte två tomma rutor: två
rektangler säger "du har misslyckats med att fylla båda", en yta säger
"lägg något här". */
.bordledig, .bordtomt {
align-items: center;
justify-content: center;
position: relative;
color: var(--dim);
font-size: var(--text-s);
}
.bordledig .bordstang { position: absolute; top: .6rem; right: .6rem; }
.bordtomkort {
width: min(32rem, 100%);
margin: 0 auto;
padding: 2.6rem 2.4rem;
border: 1.5px dashed var(--line);
border-radius: 16px;
text-align: center;
}
.bordtomikon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-bottom: 1.1rem;
border-radius: 14px;
background: var(--tonad);
color: var(--dim);
}
.bordtomikon svg { width: 22px; height: 22px; }
.bordtomkort h1 {
margin: 0;
font-size: 1.25rem;
font-weight: var(--vikt-rubrik);
letter-spacing: -.02em;
color: var(--fg);
}
.bordtomintro { margin: .5rem auto 0; max-width: 24rem; font-size: var(--text-m); line-height: 1.6; }
.bordtometikett {
margin: 1.8rem 0 .7rem;
font-size: var(--text-xs);
font-weight: var(--vikt-rubrik);
letter-spacing: .04em;
text-transform: uppercase;
}
.bordtomlista { display: flex; flex-direction: column; gap: .4rem; text-align: start; }
.bordtomlista a {
display: flex;
align-items: center;
gap: .55rem;
padding: .55rem .75rem;
border-radius: var(--rundning-liten);
background: var(--tonad);
color: var(--fg);
font-size: var(--text-s);
text-decoration: none;
}
.bordtomlista a:hover { background: var(--tonad); text-decoration: none; }
.bordtomlista svg { width: 15px; height: 15px; color: var(--dim); flex: none; }
.bordtomtid { font-size: .74rem; color: var(--dim); white-space: nowrap; }
/* --- anteckningarna ------------------------------------------------------ */
.bordanteckningar {
width: 21rem;
flex: none;
transition: width .3s cubic-bezier(.32, .72, 0, 1),
margin-inline-start .3s cubic-bezier(.32, .72, 0, 1),
opacity .22s ease;
}
/* Det inre skiktet håller sina 21 rem medan det yttre krymper till noll. Utan
det hade varje rad brutits om under vikningen, och en panel som skriver om
sig själv på vägen ut läser sig som ett fel och inte som en rörelse. */
.bordanteckningsinre {
flex: 1;
min-height: 0;
width: 21rem;
display: flex;
flex-direction: column;
}
/* Hopfälld. Bordsskivans mellanrum är 10 px och gäller även en yta på noll
bredd; den negativa marginalen äter upp remsan som annars blir kvar. */
body.bordkropp[data-panel="av"] .bordanteckningar {
width: 0;
margin-inline-start: -10px;
border-width: 0;
opacity: 0;
}
/* Flikarna och minimeraknappen på samma rad: fliken säger vad ytan är, knappen
fäller ihop den. */
.bordanteckningshuvud {
flex: none;
display: flex;
align-items: center;
gap: .5rem;
margin: .7rem .9rem .6rem;
}
.bordflikar {
flex: none;
display: inline-flex;
align-items: center;
gap: .15rem;
margin-inline-end: auto;
padding: .15rem;
background: var(--tonad);
border-radius: var(--rundning-pill);
align-self: flex-start;
}
.bordflik {
display: inline-flex;
align-items: center;
gap: .35rem;
border-radius: var(--rundning-pill);
padding: .22rem .75rem;
font-size: .78rem;
color: var(--dim);
text-decoration: none;
}
.bordflik.vald { background: var(--yta); color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.bordnyform {
flex: none;
margin: 0 .9rem .8rem;
padding: .6rem .75rem;
background: var(--tonad);
border: 1px solid var(--line);
border-radius: var(--rundning);
}
.bordnyform textarea {
width: 100%;
border: 0;
background: none;
resize: none;
font: inherit;
font-size: var(--text-s);
line-height: 1.55;
color: var(--fg);
}
.bordnyform textarea:focus { outline: none; }
.bordnyfot { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.bordnyhjalp { flex: 1; font-size: .72rem; color: var(--dim); line-height: 1.4; }
/* Citatet som markeringen lade i formuläret. Ribban till vänster är samma som
anteckningens egen — det är samma sorts sak, före och efter sparning. */
/* ---- att ändra en anteckning -----------------------------------------
Pennan ligger i foten bredvid krysset: att rätta ett stavfel och att kasta
lappen är två handlingar på samma rad, och den ena ska inte vara en knapp
och den andra en länk längre in. */
.bordlappandra {
display: inline-flex; align-items: center; justify-content: center;
width: 1.5rem; height: 1.5rem;
border-radius: var(--rundning-liten);
color: var(--dim);
}
.bordlappandra svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
.bordlappandra:hover { background: var(--hover); color: var(--fg); }
}
.bordlappform { display: flex; flex-direction: column; gap: .4rem; margin: 0 0 .4rem; }
.bordlappform textarea {
width: 100%; resize: vertical; font-size: var(--text-xs); line-height: 1.5;
}
.bordlappknappar { display: flex; align-items: center; gap: .5rem;
justify-content: flex-end; }
.bordlappavbryt { color: var(--dim); font-size: var(--text-xs);
text-decoration: none; padding: .18rem .4rem;
border-radius: var(--rundning-liten); }
@media (hover: hover) and (pointer: fine) {
.bordlappavbryt:hover { background: var(--hover); color: var(--fg); }
}
.bordcitatforhand { position: relative; margin-bottom: .5rem; }
.bordcitatforhand blockquote {
margin: 0;
padding: .45rem .6rem;
border-inline-start: 2px solid var(--citatram);
border-radius: 0 6px 6px 0;
background: var(--tonad);
font-size: .8rem;
line-height: 1.55;
color: var(--dim);
max-height: 5.5rem;
overflow: hidden;
}
.bordcitatforhand button {
position: absolute;
top: .2rem;
inset-inline-end: .2rem;
border: 0;
background: none;
color: var(--dim);
cursor: pointer;
padding: .2rem;
line-height: 0;
}
.bordcitatforhand svg { width: 12px; height: 12px; }
.bordlappar {
flex: 1;
min-height: 0;
overflow-y: auto;
list-style: none;
margin: 0;
padding: 0 .9rem .9rem;
display: flex;
flex-direction: column;
gap: .7rem;
}
.bordlapp {
border: 1px solid var(--line);
border-radius: var(--rundning);
padding: .7rem .8rem;
}
.bordcitat {
margin: 0 0 .55rem;
padding: .45rem .6rem;
border-inline-start: 2px solid var(--citatram);
border-radius: 0 6px 6px 0;
background: var(--tonad);
font-size: .8rem;
line-height: 1.55;
color: var(--dim);
}
.bordlapptext { margin: 0 0 .5rem; font-size: .86rem; line-height: 1.6; }
.bordlappfot { display: flex; align-items: center; gap: .4rem; }
.bordlappkalla {
display: inline-flex;
align-items: center;
gap: .3rem;
min-width: 0;
font-size: .72rem;
color: var(--dim);
text-decoration: none;
}
.bordlappkalla span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bordlappkalla:hover { text-decoration: underline; }
.bordlappkalla svg { width: 11px; height: 11px; flex: none; }
.bordlapptid { margin-inline-start: auto; font-size: .72rem; color: var(--dim); white-space: nowrap; }
.bordlappfot form { display: flex; }
.bordlappfot button {
border: 0;
background: none;
color: var(--dim);
cursor: pointer;
padding: .1rem;
line-height: 0;
}
.bordlappfot svg { width: 12px; height: 12px; }
/* --- markeringsmenyn ----------------------------------------------------- */
/* Ligger i dokumentet från början och flyttas till markeringen av skriptet —
en meny som byggs vid varje markering hinner blinka. Två handlingar, inte
fem: spara citatet, eller fråga AI:n om just den passagen. */
.bordmarkmeny {
position: absolute;
z-index: 40;
display: flex;
align-items: center;
gap: .2rem;
padding: .28rem;
border-radius: 10px;
background: var(--navvald);
box-shadow: 0 10px 30px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .16);
}
.bordmarkmeny button, .bordmarkmeny a {
display: inline-flex;
align-items: center;
gap: .4rem;
border: 0;
border-radius: var(--rundning-liten);
padding: .3rem .7rem;
background: none;
color: var(--navvald-fg);
font: inherit;
font-size: .8rem;
text-decoration: none;
cursor: pointer;
}
.bordmarkmeny a { opacity: .82; }
.bordmarkmeny svg { width: 13px; height: 13px; }
.bordmarkstreck { width: 1px; height: 1rem; background: var(--navvald-fg); opacity: .2; }
@media (prefers-reduced-motion: reduce) {
.bordanteckningar, .bordvik, .bordpanelpille { transition: none; }
}
/* --- smalare skärmar ------------------------------------------------------
Bordet är ritat för en skärm som rymmer två dokument. Under det staplas
ytorna i stället, och sidan får scrolla: hellre ett bord man rullar igenom
än två spalter på 300 px som ingen kan läsa. Den riktiga mobilvyn — ett
dokument i taget med anteckningarna som ett ark underifrån — är artboard 4
och är inte byggd än. */
@media (max-width: 1000px) {
body.bordkropp { height: auto; min-height: 100dvh; overflow: auto; }
.bordskiva { flex-direction: column; }
/* Lådan är ett ark också här: fast mot skärmen, hela bredden minus
marginalerna, under listen. Staplad tog den halva skärmen från
dokumentet och var ändå för smal att läsa i. */
.bordlada {
position: fixed; top: auto; left: 10px; right: 10px; bottom: 10px;
width: auto; max-height: 70dvh; z-index: 40;
}
.bordpanel { min-height: 75vh; }
/* Staplat: panelen fälls i höjd i stället för i bredd, och det inre skiktet
släpper sina 21 rem — här är det skärmen som sätter bredden. */
.bordanteckningar {
width: auto;
transition: height .3s cubic-bezier(.32, .72, 0, 1), opacity .22s ease;
}
.bordanteckningsinre { width: auto; }
body.bordkropp[data-panel="av"] .bordanteckningar {
width: auto;
height: 0;
margin-inline-start: 0;
margin-top: -10px;
}
.bordlappar { overflow: visible; }
.bordslist { position: sticky; top: 0; z-index: 30; flex-wrap: wrap; height: auto; padding: .5rem .85rem; gap: .6rem; }
}
/* Vägen in i arbetsbordet, bland listvyns handlingar. Starkare än grannarna
med flit: hittas bordet inte blir det inte använt, och då är funktionen
bortkastad. */
.listchip.stark { background: var(--navvald); color: var(--navvald-fg); }
.listchip.stark:hover { background: var(--navvald); opacity: .9; }
/* Ikonen ärver --dim från .listchip svg och blir mörkgrå mot den mörka
pillen — alltså osynlig. Här ska den följa texten, och helskärmsikonen är
dessutom fylld och något större: en prick i 14 px läser sig som smuts. */
.listchip.stark svg { color: currentColor; width: 19px; height: 19px; }
/* Fotnoten i dokumentpanelen. Utvinningen mäter fram den ur teckenstorlek och
läge (se app/arbetsyta.py:_pdf_text), och panelen sätter den som originalet
gör: mindre, dämpad, sist på sidan och avskild med ett streck. Strecket
ritas på den FÖRSTA fotnoten efter ett stycke — ingen extra markup behövs. */
.bordfotnot {
margin: 0 0 .35rem !important;
font-size: .8rem !important;
line-height: 1.55 !important;
color: var(--dim);
text-indent: -1.1rem;
padding-inline-start: 1.1rem;
}
.bordtext > :not(.bordfotnot) + .bordfotnot {
margin-top: 1.6rem !important;
padding-top: .9rem;
border-top: 1px solid var(--line);
}
.bordfotnotnr {
font-size: .68rem;
font-weight: var(--vikt-rubrik);
color: var(--fg);
vertical-align: super;
margin-inline-end: .15rem;
}
/* Originalet i panelen: webbläsarens egen pdf-läsare, i hela ytan under
panelhuvudet. Ingen ram — panelen har redan sin. */
.bordram { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--tonad); }
/* Tabellen ur en Office-fil. Hårfina linjer och tabulärsiffror, som resten av
tjänstens tal. Rutan runt om rullar i sidled: en bred tabell får aldrig
knuffa panelen ur sin bredd. */
.bordtabellruta { overflow-x: auto; margin: 0 0 1.1rem; }
.bordtabell { border-collapse: collapse; font-size: .86rem; min-width: 100%; }
.bordtabell th, .bordtabell td {
border: 1px solid var(--line);
padding: .35rem .6rem;
text-align: start;
vertical-align: top;
font-variant-numeric: tabular-nums;
}
.bordtabell th { background: var(--tonad); font-weight: var(--vikt-rubrik); }
.bordpunkter { margin: 0 0 1.1rem; padding-inline-start: 1.2rem; }
.bordpunkter li { font-size: .93rem; line-height: 1.7; margin-bottom: .25rem; }
/* ==========================================================================
OPTISK BALANS I KNAPPAR MED IKON
En knapp med lika padding på båda sidor SER ojämn ut när den bär en ikon
till vänster: ikonens streck ligger indragna från sin ruta, medan textens
sista bokstav går ända ut i sin. Vänsterkanten läses därför som luftigare
än högerkanten, fast måtten är lika.
Rättningen görs på ikonen och inte på knappens padding. Då räcker ETT värde
för hela familjen — komponenterna har olika padding, och en klassvis
omskrivning hade behövt upprepa varje mått och skulle glida isär vid nästa
ändring.
.tillbaka och .bordut står utanför: de bär redan en handsatt asymmetri
(.6rem mot .8rem) och skulle överkorrigeras.
========================================================================== */
.listchip > svg:first-child,
.radchip > svg:first-child,
.huvudknapp > svg:first-child,
.chip > svg:first-child,
.railhandling > svg:first-child,
.bordmetachip > svg:first-child,
.bordtomlista a > svg:first-child {
margin-inline-start: -.15rem;
}
/* ==========================================================================
HIDDEN BETYDER DOLD
`hidden` är ett attribut och ger `display: none` ur webbläsarens egen
stilmall. Varje klass som sätter `display` slår den — en klass väger tyngre
än ett elementstandardvärde — och det hade lagats sex gånger på sex ställen
i den här filen. En lapp per gång någon upptäckt att en knapp stod kvar
bredvid fältet den just fällt fram, eller att tre knappar för två lägen stod
framme samtidigt.
Regeln står SIST i filen och UTAN !important, och båda delarna är avsikten:
- Sist, för att den då slår varje regel med SAMMA tyngd. Flyttas den upp
kommer hålet tillbaka, tyst, i den komponent som råkar stå efter.
- Utan !important, för att `.sokpanel[hidden]` ska få fortsätta animera sin
`display` med allow-discrete. En panel som tonar ut är inte samma sak som
en knapp som ska bort.
VAD DEN INTE KLARAR: en selektor med TVÅ eller flera klasser väger tyngre
(0,2,0 mot 0,1,0) och vinner oavsett ordning. `.radmenypanel .fallutruta` är ett
sådant fall och bär därför fortfarande sin egen `[hidden]`-rad. Priset för
att låta `.sokpanel` animera är att den sortens regel får laga sig själv —
och test_stil.py letar rätt på dem, så att det inte behöver upptäckas av att
något står framme som skulle vara dolt.
========================================================================== */
[hidden] { display: none; }