sedan det öppnar meddelandedialogen. Knappens egna förval —
typsnitt, centrering, textfärg — skulle rita om passet, så de nollställs här: utseendet ska
vara exakt det chippet hade när det var ett . Bakgrund och ramar rörs inte, de kommer
från .mys-chip och .mys-chip-absence som förut. */
.mys-chip-shift {
appearance: none;
-webkit-appearance: none;
width: 100%;
text-align: left;
color: inherit;
font-family: inherit;
font-size: .68rem;
line-height: 1.5;
cursor: pointer;
}
/* Frågan är redan ställd. En prick i hörnet, aldrig ett tecken i texten: rutan är ett chip bred
och varje tecken konkurrerar med passets namn — samma skäl som håller kollegornas signaturer
i tooltip:en. Pricken ligger absolut och kostar därför ingen bredd alls. */
.mys-chip-asked { position: relative; }
.mys-chip-asked::after {
content: "";
position: absolute;
top: 2px;
right: 2px;
width: .3rem;
height: .3rem;
border-radius: 50%;
background: var(--bs-warning);
}
/* Händelserna står överst i rutan och tar bara sin egen höjd — ingen utfyllnad upp till veckans
högsta dag. Luften under dem är lite större än mellan chippen, så gränsen mellan avdelningens
händelser och de egna passen syns utan att en linje behöver ritas. */
.mys-events {
display: flex;
flex-direction: column;
gap: 2px;
flex: 0 0 auto;
margin-bottom: 3px;
}
/* Händelser bär ett neutralt band och aldrig en av de åtta positionsfärgerna: de hänger inte på
någon position, och en nionde färg hade antytt att de gjorde det. Chippet håller sin egen,
textnära höjd medan passen växer — skillnaden i höjd säger samma sak som färgen redan säger:
händelsen är avdelningens, passet är ditt. */
.mys-chip-event {
border: none;
border-left: 2px solid var(--bs-secondary-color);
border-radius: 0;
line-height: 1.5;
background: var(--bs-secondary-bg);
color: var(--bs-secondary-color);
}
/* Inställt står kvar och stryks över. Att dölja det hade fått schemat att tyst säga emot vad
personen fick höra när passet ställdes in. */
.mys-cancelled {
text-decoration: line-through;
opacity: .55;
}
/* ---------------------------------------------------------------- utskrift
Ett personligt schema är, till skillnad från telefonlistans *i dag*-kolumn, värt att sätta
upp: det är ett fast spann av datum vars fakta ändras sällan när de väl publicerats. Datum-
och namnraden är vad som gör ett gammalt blad självangivande i stället för bara felaktigt. */
@media print {
.mys { display: block; }
.mys-cell {
background: none !important;
min-height: 4rem;
}
.mys-holiday,
.mys-weekend,
.mys-other { background: none !important; }
.mys-holiday .mys-daynum,
.mys-daynum-red { font-weight: 700; }
.mys-chip {
background: none !important;
border: 1px solid #999;
border-left: none;
border-right: none;
color: #000;
}
.mys-chip-absence,
.mys-chip-event {
border: 1px dotted #999;
border-left: none;
border-right: none;
}
/* Att man ställt en fråga om ett pass är något man gör vid skärmen; på papperet är pricken bara
en fläck utan förklaring. */
.mys-chip-asked::after { display: none; }
.mys-month { break-inside: avoid; }
/* En ny period börjar på nytt papper. Ett blad som blandar två perioders slut och början
läses som en enda följd, och det är just gränsen där radernas betydelse byts. */
.mys-period + .mys-period { break-before: page; }
.mys-period-name { break-after: avoid; }
}
/* ================================================================ jourschemat
Klinikens jourlinjer, alla avdelningar på en gång. Datumen löper nedåt och kolumnerna är
jourraderna — se sidmodellens remarks för varför åt det hållet.
Ingen fast färg någonstans utom i @media print: papperet har inget tema, och ett mörkt tema
hade skrivit ut en helsvart sida. */
/* Varje jourrad är en kolumn med fast bredd, lika bred som sitt chip. Rutan rymmer åtta och
rullar i sidled när det finns fler, med datumkolumnen kvar till vänster — en sträckt tabell
gav sex kolumner som var och en var fem gånger bredare än signaturen i den, och en klinik med
tolv jourrader fick kolumner som klipptes i stället för att gå att rulla fram. */
.jour {
--jour-date-w: 8.5rem;
--jour-col-w: 6.5rem;
}
/* Rullningen stannar alltid på en hel kolumn, precis till höger om datumkolumnen, så att ingen
kant står med ett halvt chip. Rutan är just åtta kolumner bred och visar då åtta hela. */
.jour-scroll {
max-width: calc(var(--jour-date-w) + 8 * var(--jour-col-w));
scroll-snap-type: x mandatory;
scroll-padding-left: var(--jour-date-w);
}
.jour-lane { scroll-snap-align: start; }
.jour-table {
/* Fasta kolumner, som telefonlistan. En tabell som räknar bredden ur sitt innehåll ger
kolumner som byter bredd så fort ett långt namn dyker upp i en enda ruta, och ögat tappar
spåret nedför kolumnen. Bredden är summan av kolumnerna — --jour-cols sätts i markupen —
och inte Bootstraps 100 %, som hade dragit ut dem igen. */
table-layout: fixed;
width: calc(var(--jour-date-w) + var(--jour-cols, 1) * var(--jour-col-w));
font-size: .85rem;
/* Bootstrap lägger rubriken under tabellen, och den osynliga rubriken sticker då ut en pixel
nedanför och ger tabellens rullruta en lodrät rullningslist. */
caption-side: top;
}
/* Står kvar när kolumnerna rullas i sidled. Cellens egen botten är ogenomskinlig — kroppens,
eller helgradens --bs-tertiary-bg — så det som rullar in under den syns inte igenom. */
.jour-datecol {
width: var(--jour-date-w);
white-space: nowrap;
position: sticky;
left: 0;
z-index: 1;
}
/* En kant mot kolumnerna, så att det som rullar in under datumen läses som rullat och inte som
avklippt. Ett pseudoelement och inte en border-right: i en tabell med border-collapse följer
kanten inte med en sticky cell, och box-shadow är redan i dagsmarkeringens och Bootstraps bruk. */
.jour-datecol::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
background: var(--bs-border-color);
}
/* Avdelningens namn står kvar inom rutan så länge någon av dess kolumner syns, i stället för att
rulla in under datumkolumnen eller ut över högerkanten och klippas mitt i ordet. Inline-block:
sticky gör ingenting på ett inline-element. */
.jour-dept-name {
display: inline-block;
position: sticky;
left: calc(var(--jour-date-w) + .5rem);
right: .5rem;
}
.jour-dept {
text-align: center;
white-space: nowrap;
overflow: hidden;
border-bottom: 1px solid var(--bs-border-color);
font-size: .8rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
/* Radhuvudet bär sin egen färg som ett band, som positionsraderna i Bemanning: en kolumn ska gå
att följa nedför sidan utan att gå tillbaka till rubriken. Tonen blandas ur --lane, som
markupen sätter per kolumn, aldrig ur ett fast värde.
Färgen sätts som --bs-table-bg och inte som en background-color: Bootstrap målar varje cell ur
`.table > :not(caption) > * > *`, som väger tyngre än en ensam klass, så en egen background-color
hade förlorat tyst. Skrafferingen nedan slipper undan bara därför att den är en background-image
och inte en färg. */
.jour-lane {
--lane: var(--stf-1);
--bs-table-bg: color-mix(in oklab, var(--lane) 13%, transparent);
border-top: 2px solid var(--lane);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jour-week {
display: inline-block;
width: 2.1rem;
color: var(--bs-secondary-color);
font-size: .75rem;
font-weight: 400;
}
.jour-day {
display: inline-block;
width: 2.2rem;
text-transform: capitalize;
font-weight: 400;
}
.jour-date { font-weight: 600; }
/* Namnet på dagen, inte en typkod — färgen säger redan vilken sort det är. Klipps till en rad;
hela texten står i tooltip:en. */
.jour-mark {
display: block;
margin-left: 2.1rem;
font-size: .72rem;
font-weight: 400;
color: var(--bs-secondary-color);
overflow: hidden;
text-overflow: ellipsis;
}
.jour-red > * { --bs-table-bg: var(--bs-tertiary-bg); }
.jour-weekstart > * { border-top: 1px solid var(--bs-border-color); }
/* I dag: en accentstapel i kanten, som den gällande perioden har på Perioder. Färgen är aldrig
ensam information — markupen lägger en visually-hidden "I dag:" i datumrutan. */
.jour-today > th:first-child { box-shadow: inset .2rem 0 0 0 var(--bs-primary); }
.jour-cell {
vertical-align: middle;
overflow: hidden;
}
/* De tomma lägena är två och får inte se likadana ut. Skrafferad = raden går inte den dagen,
samma mönster som Bemanning ritar. */
.jour-closed {
background: repeating-linear-gradient(
135deg,
var(--bs-tertiary-bg) 0 3px,
transparent 3px 6px);
}
/* Ingen står på raden en dag den går. Sidans hela existensberättigande, och det enda som får
bära varningsfärgen: på telefonlistan betyder en tom ruta "inte placerad i dag", här betyder
den "ingen täcker i natt". */
.jour-cell.jour-unfilled {
--bs-table-bg: var(--bs-warning-bg-subtle);
box-shadow: inset 0 0 0 1px var(--bs-warning-border-subtle);
}
.jour-empty {
color: var(--bs-warning-text-emphasis);
font-weight: 600;
}
.jour-nowindow {
color: var(--bs-secondary-color);
font-style: italic;
}
/* Personerna i en ruta är chip, Bemannings och Hela schemats (stf-chip), staplade på höjden.
Formen, tonen, överstrykningen och den streckade *Inställt*-ramen kommer ur de reglerna; det
som står här är bara det jourschemat gör annorlunda. */
.jour-chips {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Chippet fyller kolumnen, och kolumnen har fast bredd — så varje chip på sidan är lika brett.
Inuti står allt som på Bemanning: signaturen i högerkanten, FM/EM och kommentarsmärket i
vänsterkanten. Större text än i rutnätet: chippet är rutans hela innehåll och inte en av sju
i rad. */
.jour-chip {
height: auto;
min-height: var(--stf-chip-h);
padding: .05rem .35rem;
font-size: .78rem;
gap: .3rem;
}
.jour-chip .stf-sig { font-size: .82rem; font-weight: 600; }
/* Inställt är ett ord och inte en signatur: vänsterställt och i brödtextens typsnitt, som
händelsechippets titel. */
.jour-chip.stf-chip-calledoff .stf-sig {
font-family: inherit;
font-weight: 400;
text-align: left;
}
/* Läsarens eget pass markeras i tyngd och aldrig i färg — färgen på chippet är redan
personens. */
.jour-me .stf-sig { font-weight: 700; }
.jour-legend {
padding: 0 .25rem;
background: var(--bs-warning-bg-subtle);
}
@media print {
/* Papperet har inget tema. Utan den här nollställningen ärver tabellen det mörka temats
tokens och skriver ut svarta rutor med ljus text — så variablerna sätts om en gång på
tabellen i stället för att varje regel nedan ska bära ett !important. */
.jour-table {
--bs-table-bg: transparent;
--bs-table-color: #000;
--bs-border-color: #999;
--bs-secondary-color: #444;
--bs-warning-text-emphasis: #000;
font-size: .75rem;
color: #000;
}
/* Var och en av dem sätter --bs-table-bg på sin egen cell och vinner därför över
nollställningen på tabellen ovan. De måste därför nämnas var för sig. */
.jour-red > *,
.jour-lane,
.jour-cell.jour-unfilled { --bs-table-bg: transparent; }
.jour-lane { border-top: 2px solid #000; }
.jour-today > th:first-child { box-shadow: inset .2rem 0 0 0 #000; }
/* Luckraden måste med på papperet: ett blad som tiger om en oplanerad avdelning påstår en
täckning ingen ordnat. Den bär temats varningsfärger och behöver därför sin egen nollställning. */
.jour .alert {
background: none;
border-color: #000;
color: #000;
}
/* Skrafferingen och varningsmarkeringen bär hela skillnaden mellan "går inte" och "ingen
täcker", så de måste överleva papperet — men i tryckbara toner, inte i temats. */
.jour-closed {
background: repeating-linear-gradient(135deg, #ddd 0 3px, transparent 3px 6px);
}
.jour-cell.jour-unfilled { box-shadow: inset 0 0 0 1.5px #000; }
.jour-empty { color: #000; }
/* Chippen i svart och vitt, som på Hela schemat: tonen är en skärmens igenkänning och bladet
skrivs ofta ut i gråskala, där tolv toner blir tolv nästan lika grå. Det inställda behåller
sin överstrykning och den streckade ramen, som båda överlever papperet. */
.jour-chip {
background: none !important;
border-color: #999 !important;
color: #000;
}
/* Ingen markeras på papperet. Ett blad på anslagstavlan läses av alla som går förbi, och ett
namn som är fetare för en läsare är brus eller en felläsning för resten. */
.jour-me .stf-sig { font-weight: 600; }
/* Papperet rullar inte: alla kolumner på bladets bredd, hur många de än är. */
.jour-scroll { max-width: none; overflow: visible; }
.jour-table { width: 100%; }
.jour-datecol { position: static; }
.jour-datecol::after { content: none; }
.jour-dept-name { position: static; }
.jour-table thead { display: table-header-group; }
.jour-table tr { break-inside: avoid; }
}
/* ===== hela schemat
------------------------------------------------------------------------------------------
Klinikens publicerade schema, alla valda avdelningar samtidigt, i två vyer över samma rader:
*Veckor staplade* (månad → vecka → sju dagkolumner) och *Veckor i sidled* (en kolumn per dag,
hela sträckan i en remsa).
Utseendet är Bemannings. Rutnätet, radbandet, dagbandet och vilodagens mörkare band, chippen i
signaturfärg, grupprubrikerna och passansvarets brickor ritas med samma stf-*-klasser som där,
ur samma regler ovan — så att schemat ser likadant ut för den som lägger det och för den som
läser det, och så att en ändring i Bemannings form inte behöver göras två gånger. Det som står
här är bara det Bemanning inte har: sidled, periodgränsen, hopfällbara avdelningar,
konferensradens kortkod, i dag, egna pass och utskriften.
Sträckan är en enda, från den första visade periodens början till den sistas slut. Ett avsnitt
per period var det första försöket och gick inte att läsa i sidled: remsan startade om vid
vänsterkanten och såg ut som ett radbrott mitt i schemat. Periodgränsen är i stället en linje.
Sidled ligger i *en* rullruta för hela rutnätet i stället för att låta sidan rulla i sidled:
den låsta navigeringen är position: sticky över hela dokumentets bredd, och ett dokument som
är 7,5 m brett hade lämnat menyn kvar långt ute till vänster. position: fixed hade löst det
och är avsiktligt bortvalt i övrigt (se "låst navigering" ovan), så rullningen flyttar in i
rutan i stället. Med båda axlarna inne i rutan fäster både etikettspalten och dagrubriken. */
.hel-own {
font-size: .6rem;
text-transform: uppercase;
letter-spacing: .08em;
opacity: .75;
margin-left: .25rem;
}
.hel-month-head { margin-top: 1rem; }
.hel-month:first-child .hel-month-head { margin-top: 0; }
.hel-year { font-size: .7rem; }
/* Periodgränsen är en linje i rutnätet och inte ett nytt avsnitt. Den väger tyngre än veckans
och ersätter den, så att två linjer aldrig hamnar på samma springa. I sidled ritas den på
rutan, i staplad vy på dagrubriken — i sidled bär dagrubriken inuti rutan också klassen, och
utan uppdelningen hade den fått linjen två gånger. */
.hel-h .hel-c.hel-periodstart {
box-shadow: inset .12rem 0 0 0 var(--bs-secondary-color);
margin-left: .9rem;
}
.hel-row .stf-daynum.hel-periodstart { box-shadow: inset .12rem 0 0 0 var(--bs-secondary-color); }
/* Perioderna räknas upp under rutnätet, med länken till Bemanning där den hör hemma: den pekar
på ett (period, avdelning)-par, vilket en rad som spänner över flera perioder inte gör. */
.hel-periods { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; }
.hel-periodref { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
.hel-pager { display: flex; gap: .5rem; }
/* Etiketten har Bemannings mått men ingen knappform: här öppnar den ingenting. */
.hel-label {
display: flex;
align-items: center;
align-self: start;
gap: .35rem;
min-width: 0;
min-height: var(--stf-cell-h);
font-size: .78rem;
padding: 0 .35rem;
}
.hel-label-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hel-collapse {
border: 0;
background: none;
padding: 0;
font-size: .6rem;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--bs-secondary-color);
white-space: nowrap;
}
.hel-collapse:hover { color: var(--bs-body-color); }
.hel-collapse[aria-expanded="false"]::after { content: " \25B8"; }
.hel-collapse[aria-expanded="true"]::after { content: " \25BE"; }
.hel-ghead { margin-top: .35rem; }
/* Grupprubrikens linje löper över de sju dagarna. */
.hel-row .hel-group-rule { grid-column: span 7; }
/* Ett chip utan signaturfärg ärver radens färg i ramen, som på Bemanning. Konferensraden har
ingen egen färg, så där skriver chippet sin konferens färg inline; händelsechippet behåller
sin neutrala ram. */
.hel .stf-chip:not(.stf-chip-event) { border-color: var(--lane); }
/* Konferensraden håller flera positioner och har ingen egen färg att bära — samma neutrala ton
som händelseraden. Se docs/adr/0007-a-konferens-is-a-duty-lane-drawn-grouped.md. */
.hel-lane-conference { background: var(--bs-tertiary-bg); }
/* Kortkoden före signaturen. Dämpad och en aning mindre: signaturen är det läsaren söker, och
två lika tunga ord i samma chip blir en sträng där ögat inte hittar någotdera. */
.hel-code {
flex: none;
font-size: .58rem;
letter-spacing: .02em;
color: var(--bs-secondary-color);
max-width: 4.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Ej tillsatt: Bemannings streckade ram, plus ett streck — på Bemanning är luckan en ruta att
klicka i, här är den bara något att se, och strecket säger det också där ramen är svag. */
.hel-empty {
color: var(--bs-warning-text-emphasis);
font-weight: 600;
font-size: .68rem;
line-height: var(--stf-chip-h);
text-align: center;
}
/* Egna pass i vikt och aldrig i färg: färgen på chippet är redan personens. */
.hel-me .stf-sig { font-weight: 700; }
.hel-today { box-shadow: inset .15rem 0 0 0 var(--bs-primary); }
/* Veckodagen står bara i sidled. Den staplade vyn har den som kolumnrubrik. */
.hel-dow { display: none; }
/* ---- Veckor staplade: Bemannings rutnät, med kolumnerna i formatmallen i stället för inline. */
.hel-row { grid-template-columns: 2rem minmax(6rem, 11rem) repeat(7, minmax(0, 1fr)); }
/* ---- Veckor i sidled: en rullruta, båda axlarna fästa inuti den. */
/* position: relative är inte kosmetik. Skärmläsartexterna i rutorna — "Ej tillsatt", "I dag",
"Du" — är Bootstraps .visually-hidden, alltså position: absolute. Utan en positionerad förfader
inuti rutan har de sidan som innehållande block, rymmer ur rullrutans klippning och gjorde hela
sidan lika bred som remsan: tomt, men rullbart femton meter åt höger. */
.hel-scroll {
position: relative;
overflow: auto;
max-height: calc(100vh - var(--skuld-header-h) - 12rem);
/* Ingen utfyllnad upptill: den fästa rubriken fäster under den, och i den remsan syntes raderna
rulla förbi. Luften ligger i stället inuti rubriken. */
padding: 0 0 .5rem;
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
}
/* Sidled som ett kalkylark. Sidan rullar inte alls — navigeringen, sidrubriken och verktygsraden
står still överst, perioderna under — och rullrutan tar all höjd som blir över och hela
fönstrets bredd. Två lodräta rullningar i varandra, sidans och rutans, var det som gjorde vyn
svår att använda: hjulet rullade det ena eller det andra beroende på var pekaren råkade stå.
Hela kedjan body → .container → main → .hel måste vara en flexkolumn med min-height: 0, annars
växer en av dem till remsans höjd och rutan får aldrig sin egen rullning. Bara på skärm och från
768px: under det finns ingen sidled, och på papperet ska allt flöda. */
@media screen and (min-width: 768px) {
body.hel-fill {
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
/* Bara höjdled låses. Navigeringen är bredare än fönstret strax under 1000px, och med
overflow: hidden hade temaväxeln och kontomenyn då inte gått att nå alls. */
overflow: auto hidden;
}
body.hel-fill > header { flex: none; }
/* Navigeringen följer med ut till full bredd, så att märket står i lod med sidrubriken. */
body.hel-fill > header .container { max-width: none; }
body.hel-fill > .container {
flex: 1 1 auto;
min-height: 0;
max-width: none;
display: flex;
flex-direction: column;
}
body.hel-fill main,
body.hel-fill .hel {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
body.hel-fill .hel > * { flex: none; }
body.hel-fill .hel > .hel-scroll {
flex: 1 1 auto;
min-height: 8rem;
max-height: none;
}
/* Perioderna och bakåtlänken står i en rad under rutan och tar inte mer höjd än så. */
body.hel-fill .hel-periods { margin-top: .5rem !important; }
body.hel-fill .hel > nav { margin-top: .5rem !important; }
}
.hel-h { display: flex; flex-direction: column; min-width: max-content; }
.hel-hrow { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 4px; }
.hel-h .hel-label {
position: sticky;
left: 0;
z-index: 2;
flex: 0 0 11rem;
background: var(--bs-body-bg);
/* Hela radens höjd och inte bara första rutans: en rad växer till sin tätaste dag, och under en
kortare etikett syntes rutorna rulla förbi. Texten står kvar i första rutans höjd. */
align-self: stretch;
align-items: flex-start;
}
.hel-h .hel-label > .hel-label-text,
.hel-h .hel-label > .stf-kind { line-height: var(--stf-cell-h); }
/* Springan mellan den fästa spalten och första dagen. Radens gap är 4px, och genom den syntes
dagarna glida förbi under etiketten. Remsan ärver etikettens bakgrund, så att radens band löper
obrutet som förut när rutan står still. */
.hel-h .hel-label::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 4px;
background: inherit;
}
/* Den fästa etiketten måste vara ogenomskinlig, annars rullar dagarna in under den — så radens
band läggs ovanpå sidans färg i stället för att släppa igenom. */
.hel-h .stf-lane > .hel-label {
background:
linear-gradient(color-mix(in oklab, var(--lane) 13%, transparent),
color-mix(in oklab, var(--lane) 13%, transparent)),
var(--bs-body-bg);
}
.hel-h .stf-lane-events > .hel-label,
.hel-h .hel-lane-conference > .hel-label { background: var(--bs-tertiary-bg); }
.hel-h .hel-group-rule { flex: 1 0 auto; }
/* Grupprubriken i sidled är också den fästa etiketten, och får då sin storlek från rubriken och
inte från radetiketten. */
.hel-h .hel-label.stf-group-label { font-size: .6rem; min-height: 0; padding-top: .35rem; }
.hel-h-head {
position: sticky;
top: 0;
z-index: 3;
background: var(--bs-body-bg);
padding-top: .5rem;
padding-bottom: 2px;
border-bottom: 1px solid var(--bs-border-color);
}
/* Hörnet ligger över båda: det korsar den fästa spalten och den fästa rubriken. */
.hel-h-head .hel-label { z-index: 4; }
.hel-h .hel-c { flex: 0 0 5.25rem; min-width: 0; }
.hel-h .hel-dayc { display: flex; flex-direction: column; }
.hel-h .hel-dayc > .stf-daynum { flex: 1; }
.hel-h .hel-dow {
display: block;
flex: 0 0 100%;
padding-left: 10px;
font-size: .55rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--bs-secondary-color);
}
.hel-h .stf-daynum-n { font-size: .95rem; }
.hel-hcell {
font-size: .6rem;
color: var(--bs-secondary-color);
text-transform: uppercase;
letter-spacing: .06em;
padding-left: .15rem;
white-space: nowrap;
}
.hel-h .hel-weekstart { margin-left: .4rem; }
.hel-h .hel-ghead { padding-top: .4rem; font-size: .6rem; }
/* ---- Personer i sidled. Raden är en person och bär ingen positionsfärg — chippen gör det — så
bandet är neutralt och personens signaturfärg står som en prick i etiketten. */
.hel-person { --lane: var(--bs-secondary-color); }
.hel-person > .hel-label { cursor: pointer; }
.hel-h .hel-person > .hel-label > .stf-person-dot {
margin-top: calc((var(--stf-cell-h) - .55rem) / 2);
}
.hel-psig { font-family: var(--bs-font-monospace); font-size: .74rem; margin-right: .25rem; }
.hel-me .hel-psig { font-weight: 700; }
/* Chippets text är en kortkod eller ett radnamn och inte en signatur, och läses från vänster. */
.hel-person .stf-sig { font-family: inherit; text-align: left; }
/* Markeringen ringar in raden — inuti etiketten och bandet, så att den inte klipps av grannarna. */
.hel-person.hel-marked { box-shadow: inset 0 0 0 2px var(--bs-primary); }
.hel-h .hel-person.hel-marked > .hel-label { box-shadow: inset 2px 2px 0 0 var(--bs-primary), inset 0 -2px 0 0 var(--bs-primary); }
/* Under 768 px finns ingen växel — sidled är obrukbart på en telefon, så knappen skulle vara ett
val som bara kan göra sidan sämre. Rutnätet krymper: veckonumret och dagsiffran har Bemannings
skärmstorlek och tar annars halva bredden. */
@media (max-width: 767.98px) {
.hel-viewtoggle { display: none; }
.hel-row { grid-template-columns: 1.2rem minmax(3.5rem, 5rem) repeat(7, minmax(0, 1fr)); gap: 2px; }
.hel .stf-weekno { font-size: .9rem; }
.hel .stf-daynum-n { font-size: .8rem; padding-left: 2px; }
.hel .stf-daynum-name { display: none; }
.hel .hel-label { font-size: .68rem; padding: 0 .15rem; }
.hel .stf-kind { display: none; }
}
/* Papperet är svartvitt. Varje skillnad som bärs av en färg på skärmen — radbandet, dagbandet,
signaturfärgen, helgtonen — tas bort här och sägs om i streck och vikt, eller inte alls.
Signaturfärgen sätts inline på chippet, och banden av Bemannings regler med högre vikt än en
ensam klass, så reglerna här behöver !important. Utskriften renderar alltid den staplade vyn
(se sidmodellen), så rullrutan nollställs bara för säkerhets skull. */
@media print {
.hel-scroll { overflow: visible; max-height: none; border: 0; padding: 0; }
.hel .stf-lane,
.hel .stf-lane-events,
.hel .hel-lane-conference,
.hel .stf-cell,
.hel .stf-daynum { background: none !important; }
.hel .stf-cell { border-color: #999; }
.hel .stf-out { border-color: transparent; }
.hel .stf-off { background-image: repeating-linear-gradient(135deg, #ddd 0 3px, transparent 3px 6px) !important; }
.hel .stf-unfilled { border-style: solid; box-shadow: inset 0 0 0 1.5px #000; }
.hel-empty { color: #000; }
.hel .stf-chip {
background: none !important;
border: 1px solid #999 !important;
color: #000;
}
.hel .stf-chip-event { border-style: dotted !important; }
.hel .stf-holder,
.hel .stf-holder-inline,
.hel .hel-code,
.hel .stf-kind,
.hel .stf-group-label { color: #000; }
.hel .stf-holder { background: none; border: 1px dashed #000; }
.hel .stf-group-rule { border-top-color: #000; }
/* Temats dämpade text är ljusgrå i mörkt läge och skulle försvinna på papperet. */
.hel .text-body-secondary,
.hel .stf-weekno { color: #555 !important; }
/* Helgen och helgdagen bärs av vikt i stället för av ton. */
.hel .stf-holiday .stf-daynum-n,
.hel .stf-weekend .stf-daynum-n { font-weight: 700; color: #000; }
.hel .stf-daynum-name { color: #000; }
/* Ingen markeras på papperet. Ett blad på anslagstavlan läses av alla som går förbi, och en
markering som är gjord för en läsare är brus eller en felläsning för resten. */
.hel-today { box-shadow: none; }
.hel .stf-hit { box-shadow: none; }
.hel-me .stf-sig { font-weight: 400; }
/* Periodgränsen måste med: den säger var raderna byter period, och utan den blir en remsa
över två perioder ett odelat påstående om en period som inte finns. */
.hel-h .hel-c.hel-periodstart,
.hel-row .stf-daynum.hel-periodstart { box-shadow: inset .12rem 0 0 0 #000; }
/* Luckraden måste med på papperet: ett blad som tiger om en oplanerad avdelning påstår ett
schema ingen har lagt. Den bär temats varningsfärger och behöver därför sin egen
nollställning — samma sak Jourschemat gör med sin. */
.hel .alert {
background: none;
border-color: #000;
color: #000;
}
.hel-month { break-inside: avoid; }
.hel-month-head { break-after: avoid; }
}
/* ====================================================================== inloggningssidan
Sidorna som _AuthLayout bär: inloggning och kontoaktivering. Ingen navigering, ingen sidfot,
ett ordmärke och ett formulär mitt på skärmen. Reglerna står här och inte i en scoped
.cshtml.css, eftersom de gäller markup i *både* layouten och sidan — och scoped CSS räknar
layout och sida som två skilda omfång. */
:root {
/* Punkten i "skuld." är sidans enda avvikande färg. Inget fast värde: accenten följer
data-bs-theme och står kvar rätt när temat byts. */
--skuld-mark-dot: var(--skuld-accent);
}
/* Sidan är precis en skärm hög och rullar inte. min-height och inte height, så att en
valideringsruta eller ett kort fönster får växa i stället för att klippas — den som inte
kan läsa felmeddelandet kan inte rätta felet.
Panelen centreras med margin: auto och inte med align-items: center. De ger samma bild
ända tills innehållet blir högre än skärmen, och då skjuter den centrerade varianten
överkanten *ovanför* rullningens början: formulärets första fält blir omöjligt att nå.
Automarginalen stannar i stället vid kanten och låter sidan rulla som vanligt. */
.skuld-auth {
min-height: 100vh;
min-height: 100dvh;
display: flex;
justify-content: center;
padding: 2rem 1.25rem;
}
.skuld-auth-theme {
position: absolute;
top: 1rem;
right: 1rem;
}
.skuld-auth-panel {
width: 100%;
max-width: 22rem;
margin: auto;
}
/* Märket bär bara sin egen form här; storleken sätts där det används. Bokstäverna är sju
bildpunkter höga, alltså ger 32×7-rutnätet en höjd runt en femtedel av bredden. */
.skuld-wordmark {
display: block;
}
/* På inloggningssidan fyller märket panelen och får luften under sig därefter. */
.skuld-auth-panel > .skuld-wordmark {
width: 100%;
height: auto;
margin-bottom: 2.5rem;
}
/* Dataskyddsinformationen är löptext: en läsbar radlängd i stället för formulärets smala
spalt, och märket i en storlek som hör till en rubrik och inte till en affisch. */
.skuld-auth-panel-wide {
max-width: 42rem;
}
.skuld-auth-panel-wide > .skuld-wordmark {
max-width: 11rem;
margin-bottom: 2rem;
}
/* I navigeringen sätts höjden i stället, och i hela bildpunkter: rutnätet är sju rader högt,
så måttet måste vara delbart med sju för att varje rad ska få lika många skärmbildpunkter.
Ett rem-mått hade landat mitt i en rad och gjort trappstegen ojämna, eftersom crispEdges
inte får jämna ut dem.
21px, alltså tre bildpunkter per rad. Märket började på 14px — två per rad, ungefär
versalhöjden i navbar-brand, alltså precis så tungt som ordet "Skuld" vägde — och det var
för försynt: ordmärket är det enda i listen som säger vilken app man står i. Nästa steg
uppåt som rutnätet tillåter är just en halv gång till. */
.navbar-brand > .skuld-wordmark {
width: auto;
height: 21px;
}
/* Användare: avdelningslistan är 15 % bredare än rutnätets col-lg-2 (16,67 % → 19,16 %), och
detaljpanelen lämnar ifrån sig mellanskillnaden (33,33 % → 30,83 %). Namn och kortnamn fick
annars sällan plats, och raden trängde ut redigeringsknappen. Tabellen behåller sin col-lg-6.
Summan hålls strax under 100 %: col-lg-4 är 33,333…%, och en hundradel för mycket räckte för
att skicka detaljpanelen till en egen rad. */
@media (min-width: 992px) {
.users-depts { flex: 0 0 auto; width: 19.16%; }
.users-detail { flex: 0 0 auto; width: 30.83%; }
}
/* ---- Önskemålsöversikt ----------------------------------------------------------------- */
/* Rutnätet: ett block per månad, personer gånger dagar. Blocket rullar i sidled i sin egen ruta
och aldrig sidan, och namnkolumnen står kvar medan dagarna rullar förbi. */
.po-scroll {
overflow-x: auto;
}
.po-table {
border-collapse: separate;
border-spacing: 2px;
font-size: .75rem;
}
.po-table .po-name {
position: sticky;
left: 0;
z-index: 1;
background-color: var(--bs-body-bg);
min-width: 11rem;
max-width: 14rem;
padding-right: .5rem;
font-weight: normal;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.po-day-head {
min-width: 1.6rem;
text-align: center;
font-family: var(--bs-font-monospace);
font-size: .62rem;
font-weight: normal;
line-height: 1.15;
color: var(--bs-secondary-color);
border-radius: var(--bs-border-radius-sm);
}
.po-cell {
width: 1.6rem;
height: 1.6rem;
padding: 0;
border-radius: var(--bs-border-radius-sm);
}
/* Vilodagens band går genom hela kolumnen, som på Bemanning, så att en helg syns nedför listan
utan att man läser rubriken. */
.po-rest { background-color: color-mix(in oklab, var(--bs-emphasis-color) 7%, transparent); }
.po-holiday { color: var(--bs-danger-text-emphasis); }
.po-other { color: var(--bs-warning-text-emphasis); }
.po-status {
font-size: .6rem;
margin-right: .3rem;
vertical-align: .1em;
}
/* Markeringen: samma kod och samma ton som önskemålsrutan i Bemannings personallista, och lika
tät av samma skäl — 18 % är avvägt för en dagruta i en månadskalender och blir en grå fläck på
en ruta av den här storleken. */
.po-mark {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 1.5rem;
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius-sm);
font-size: .68rem;
font-weight: 600;
line-height: 1;
color: var(--bs-body-color);
}
.po-mark:is(.pref-off, .pref-nocall, .pref-prefcall, .pref-parental, .pref-research, .pref-course, .pref-unavailable) {
background-color: color-mix(in srgb, var(--pref-tint) 38%, var(--bs-body-bg));
}
.po-legend-mark {
width: 1.4rem;
height: 1.3rem;
}
/* Ett utkast är inget besked än. Blekt och inte dolt: den som målat har ändå sagt något, och den
som läser ska se skillnaden utan att tro att ingenting finns. */
.po-draft { opacity: .45; }
/* Dagen har en kommentar. Pricken säger bara att den finns; texten står i verktygstipset. */
.pref-day.po-has-comment { position: relative; }
.po-has-comment::after {
content: '';
position: absolute;
top: 1px;
right: 1px;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--bs-emphasis-color);
}
/* Kalendrarna: en persons månader bredvid varandra, som bryts till nästa rad i ett smalt fönster
i stället för att rulla i sidled. */
.po-months {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: 1rem;
}
/* ==== Bemanning: den hopfällbara spalten, och Veckor i sidled ====
Står sist i filen och inte bland Bemannings övriga regler, med flit: sidled lånar Hela schemats
uppställning klass för klass (hel-h, hel-hrow, hel-label, hel-c, hel-scroll), och det lilla som
är Bemannings eget måste stå *efter* de reglerna för att vinna över dem med samma specificitet.
Se docs/screens/staffing.md, "Veckor i sidled". */
/* Det som bara finns i ett av lägena är dolt tills läget säger annat. */
.stf-rail-strip,
.stf-rail-tools,
.stf-period-summary,
.stf-panetoggle { display: none; }
.stf-rail-btn {
width: 1.6rem;
height: 1.6rem;
padding: 0;
border: 1px solid transparent;
border-radius: var(--bs-border-radius-sm);
background: none;
color: var(--bs-secondary-color);
font-size: .95rem;
line-height: 1;
}
.stf-rail-btn:hover {
border-color: var(--bs-border-color);
color: var(--bs-body-color);
}
/* ---- Spalten fälls ihop, i båda vyerna. Bara från 992px: under det står spalten ovanför
rutnätet och har ingen bredd att lämna ifrån sig, så knappen finns inte och klassen gör
ingenting. */
@media (min-width: 992px) {
.stf-rail-tools {
display: flex;
justify-content: flex-end;
margin-bottom: .25rem;
}
body.stf-rail-folded .stf-body > .stf-main {
flex: 1 1 0;
width: auto;
max-width: none;
min-width: 0;
}
body.stf-rail-folded .stf-body > .stf-side {
flex: 0 0 auto;
width: auto;
overflow: visible;
}
body.stf-rail-folded .stf-rail { display: none; }
body.stf-rail-folded .stf-rail-strip {
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
width: 1.6rem;
position: sticky;
top: var(--skuld-header-h);
}
}
/* ---- Veckor i sidled: sidan rullar inte, rutnätet fyller fönstret.
Samma kedja som Hela schemats hel-fill — body → .container → main — och av samma skäl: två
lodräta rullningar i varandra, sidans och rutans, är det som gör en sådan vy svår att använda.
Här finns en länk till i kedjan, raden med rutnätet och spalten: de två rullar var för sig,
bredvid varandra, och ingenting annat på sidan rullar alls.
Från 992px och inte 768: under det ligger spalten ovanför rutnätet. staffing.js sätter klassen
bara över samma tröskel, så regeln och skriptet säger samma sak två gånger med flit — en
fönsterhög body på en telefon vore värre än en regel för mycket. */
@media screen and (min-width: 992px) {
body.stf-fill {
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
/* Bara höjdled låses, som på Hela schemat: navigeringen är bredare än fönstret strax under
1000px, och då måste temaväxeln och kontomenyn gå att rulla fram. */
overflow: auto hidden;
}
body.stf-fill > header { flex: none; }
body.stf-fill > header .container { max-width: none; }
body.stf-fill > .container {
flex: 1 1 auto;
min-height: 0;
max-width: none;
display: flex;
flex-direction: column;
}
body.stf-fill main {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
padding-bottom: .5rem !important;
}
body.stf-fill main > * { flex: none; }
body.stf-fill main > .stf-body {
flex: 1 1 auto;
min-height: 0;
flex-wrap: nowrap;
--bs-gutter-y: 0;
}
body.stf-fill .stf-main {
flex: 1 1 0;
width: auto;
max-width: none;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
body.stf-fill .stf-main > * { flex: none; }
body.stf-fill .stf-main > #grid {
flex: 1 1 auto;
min-height: 8rem;
max-height: none;
}
/* Spalten har en fast bredd här och inte en fjärdedel av fönstret: sidan är fönsterbred i
sidled, och en fjärdedel av 1920px är bredd som personallistan inte har någon nytta av men
som rutnätet räknar i dagar. Den rullar som *en* spalt — listorna i den släpper sina egna
höjdtak, annars låg det tre rullningar i varandra där. */
body.stf-fill .stf-side {
flex: 0 0 21rem;
width: 21rem;
min-height: 0;
overflow-y: auto;
}
body.stf-fill.stf-rail-folded .stf-side { flex-basis: auto; width: auto; }
body.stf-fill .stf-rail,
body.stf-fill .stf-rail-strip { position: static; }
body.stf-fill #roster,
body.stf-fill #errand-list {
max-height: none !important;
overflow: visible !important;
}
/* Fördelning byter plats med rutnätet i stället för att stå under det: sidan rullar inte, så
under rutnätet finns ingenstans att stå. I den staplade vyn skymmer fjorton veckor rutnät
ändå tabellen, så ingenting som syntes samtidigt har slutat göra det. */
body.stf-fill .stf-panetoggle { display: inline-flex; }
body.stf-fill .stf-dist { display: none; }
body.stf-fill.stf-show-dist .stf-main > #grid { display: none; }
body.stf-fill.stf-show-dist .stf-dist {
display: block;
flex: 1 1 auto;
min-height: 0;
overflow: auto;
margin-top: 0 !important;
}
/* Rubriken krymper: inledningen bort, väljarna bredvid varandra, och periodrutan ihopfälld
till sina två märken. Räknarna står kvar — de läses hela tiden. */
body.stf-fill .stf-intro { display: none; }
body.stf-fill .stf-selectors { flex-direction: row !important; }
body.stf-fill .stf-toolbar { margin-bottom: .5rem !important; }
body.stf-fill main > .mb-3 { margin-bottom: .5rem !important; }
body.stf-fill .stf-period-pane {
position: relative;
align-self: flex-end;
max-width: none !important;
padding: .3rem .6rem !important;
}
body.stf-fill .stf-period-summary {
display: flex;
align-items: center;
gap: .5rem;
}
body.stf-fill .stf-period-body { display: none; }
/* Öppnad lägger den sig ovanpå rutnätet i stället för att trycka ned det. */
body.stf-fill .stf-pane-open .stf-period-body {
display: block;
position: absolute;
top: calc(100% + 4px);
right: 0;
width: 24rem;
max-width: 90vw;
z-index: 1020;
padding: 1rem;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
box-shadow: var(--bs-box-shadow);
}
}
/* ---- Det som skiljer Bemannings remsa från Hela schemats. */
/* Den fästa spalten bär pilarna också, och är därför två rem bredare. Etiketten är en knapp och
har sin egen utfyllnad, så spaltens egen tas bort. */
.stf-sid .hel-label {
flex-basis: 13rem;
padding: 0;
gap: 0;
}
.stf-sid .hel-label > .stf-move { flex: 0 0 2rem; }
.stf-sid .hel-label > .stf-label {
flex: 1 1 0;
width: auto;
min-width: 0;
}
/* Grupprubriken står i lod med radernas namn, alltså innanför pilarnas plats. */
.stf-sid .hel-label.stf-group-label { padding-left: 2.35rem; }
/* Täckningen i en 5,25 rem bred dagrubrik: en aning mindre och tätare mot kanten än i den
staplade vyn, där en dag är en sjundedel av sidan. */
.stf-sid .stf-daycount { font-size: .55rem; padding-right: 6px; }
/* ---------------------------------------------------------------- Jourtorget
Utlagda pass, bud och passbyten. Samma magra kortform som Mina ärenden på Mitt schema: en ram,
en rubrikrad med passet, och det som går att göra under. Passets färg är radens, som en prick
i chippet — aldrig en fyllning, eftersom en fyllning i radens färg läses som ett chip i
rutnätet och inte som en post. */
.jt-heading {
display: flex;
align-items: baseline;
gap: .5rem;
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--bs-secondary-color);
margin: 1.25rem 0 .5rem;
}
.jt-heading:first-child { margin-top: 0; }
summary.jt-heading { margin: 0; cursor: pointer; }
.jt-heading-count { letter-spacing: 0; font-variant-numeric: tabular-nums; }
.jt-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .4rem .75rem;
margin-bottom: .75rem;
font-size: .82rem;
}
.jt-filter-label {
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.jt-lane {
display: inline-flex;
align-items: center;
gap: .3rem;
white-space: nowrap;
}
.jt-lane .form-check-input { margin-top: 0; }
.jt-offers {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
gap: .6rem;
}
.jt-offer,
.jt-card {
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius-sm);
padding: .55rem .65rem;
font-size: .82rem;
background: var(--bs-body-bg);
}
.jt-card { margin-bottom: .5rem; }
/* Det egna utlagda passet står i listan som alla andras, men med accentkanten — det man inte kan
bjuda på ska synas innan man letar efter knappen. */
.jt-offer-mine { border-left: 3px solid var(--bs-primary); }
.jt-pass {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .4rem;
}
.jt-pass-chip {
display: inline-flex;
align-items: baseline;
gap: .35rem;
max-width: 100%;
padding: 0 .35rem;
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius-sm);
background: var(--bs-tertiary-bg);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jt-pass-chip::before {
content: "";
flex: none;
align-self: center;
width: .45rem;
height: .45rem;
border-radius: 50%;
background: var(--lane, var(--bs-secondary-color));
}
.jt-pass-dept {
font-weight: 400;
color: var(--bs-secondary-color);
}
.jt-pass-day { font-variant-numeric: tabular-nums; }
.jt-daypart {
font-size: .62rem;
font-weight: 600;
opacity: .8;
}
.jt-offer-who {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .4rem;
margin-top: .3rem;
}
.jt-accepts {
font-size: .6rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--bs-secondary-color);
}
.jt-offer-sub {
margin: .3rem 0 0;
font-size: .75rem;
color: var(--bs-secondary-color);
}
/* Anteckningen är kollegans egen rad och står som ett citat, så att den inte läses som Skulds. */
.jt-note {
margin: .4rem 0 0;
padding: .3rem .5rem;
border-left: 2px solid var(--bs-border-color);
background: var(--bs-tertiary-bg);
overflow-wrap: anywhere;
}
.jt-bid { margin-top: .5rem; }
.jt-bid > summary {
font-size: .78rem;
color: var(--bs-link-color);
cursor: pointer;
}
.jt-bid-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .4rem;
margin-top: .45rem;
}
.jt-bid-row .form-select { flex: 1 1 12rem; min-width: 0; }
.jt-passes {
display: flex;
flex-direction: column;
gap: .25rem;
max-height: 16rem;
overflow-y: auto;
font-size: .82rem;
}
.jt-pass-option {
display: flex;
align-items: baseline;
gap: .4rem;
}
.jt-bids {
list-style: none;
margin: .5rem 0;
padding: 0;
}
.jt-bids > li {
padding: .4rem 0;
border-top: 1px solid var(--bs-border-color);
}
.jt-new {
font-size: .6rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--bs-primary-text-emphasis);
}
/* Pricken i navigeringen: nya bud på ens egna utlagda pass. Absolut, så att den inte flyttar
etiketten när den tänds. */
.nav-dot { position: relative; }
.nav-dot::after {
content: "";
position: absolute;
top: .45rem;
right: .1rem;
width: .4rem;
height: .4rem;
border-radius: 50%;
background: var(--bs-warning);
}
/* Bemannings märke på ett pass som bytt person på Jourtorget. Text och inte färg, som FM/EM. */
.stf-traded {
margin-left: .15rem;
font-size: .6rem;
opacity: .75;
}
/* Passbytena i Bemannings räls och på Översikt: ett kort per byte, ett pass per rad. */
.trade-pass {
font-size: .78rem;
overflow-wrap: anywhere;
}