on the 404 and cookie pages but not on the homepage, and part of why the same component looked different from page to page. */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: clip; } /* body is display:flex on this site, which makes

a flex item — and a flex item defaults to min-width:auto, meaning it can never shrink below its content's minimum width. A single wide table inside cookie-settings.html measured 399px min-content and dragged the whole page to 431px inside a 300px viewport. min-width:0 lets the item shrink so the scroll container around the table can do its job. */ body { min-width: 0; } /* Direct children of the flex body are constrained so a wide table cannot drag the page open. Fixed-position chrome is exempt: it is taken out of flow and sized against the viewport, and max-width:100% would cap it at the content box — which left the cart drawer a scrollbar's width short of the screen edge on mobile (375px in a 390px window). */ /* .page is exempt: it sets its own max-width from --sj-container and is width:100% + border-box, so it can never exceed the viewport. Without the exemption this rule won on specificity — four of those :not() arguments are IDs, which makes it (4,5,1) — and every page fell back to 100%. `main` is exempt for the same reason. The course pages use a bare

as their content root and size it themselves in course-bridge.css; a content root is not the stray wide child this rule exists to catch, and no selector short of !important can outrank (4,5,1). Anything that overflows as a result is caught by scripts/check-overflow.mjs. .sj-course-crumbs is exempt on exactly the same grounds. It is the container ProtectedController wraps the injected course breadcrumb in, and like .page it is width:100% + border-box with its own --sj-container cap. Capped at 100% instead it spanned the full viewport, so the breadcrumb started at the left edge of a course page while every other page indented it to 90px. */ body > *:not(.page):not(main):not(.sj-course-crumbs):not(.sj-cart-drawer):not(.sj-cart-overlay):not(#sidepanel):not(.sidepanel-backdrop):not(#sj-prefs-bar):not(#sj-prefs-dialog):not(#sj-prefs-veil):not(.mobile-bottom-nav) { min-width: 0; max-width: 100%; } /* width:100% as well as min-width:0. In a column flex container a stretched item still cannot go below its content's minimum width; an explicit width makes the constraint definite so the scroll container around a wide table actually scrolls instead of dragging the page open. */ body > main, body > .site-footer-chrome, body > header, body > section { width: 100%; } /* Reserve the height a page's content will occupy, so the footer does not start halfway up an empty page and then get pushed down when the content arrives. Measured on /forum at 390px: .site-footer-chrome began at y=156 and jumped to y=575 at 1.9s, when the thread list rendered - a single shift worth 0.404 of the page's 0.439 CLS. Static pages never showed it because their content is in the HTML; only pages that fill in from an API did, and only on the narrow viewport where the gap is proportionally largest. A minimum height rather than a flex sticky-footer layout: body is not currently a flex container and making it one would reach into every page's stacking and overflow behaviour to fix one measurement. */ body > main.page { min-height: 60vh; } /* Any horizontal scroller must be allowed to be narrower than its content — that is the whole point of it. */ .sj-table-wrap, .scroll-x, [data-scroll-x] { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, th, figcaption, blockquote { overflow-wrap: break-word; } img, video, canvas { max-width: 100%; } @media (prefers-reduced-motion: reduce) { .card, .sj-card, .btn, .sj-btn, .btn-icon, .sj-btn-icon { transition: none; } a.card:hover, a.sj-card:hover, .card--interactive:hover, .sj-card--interactive:hover { transform: none; } } /* --------------------------------------------------------------------------- 1. Radio & checkbox – 24 px yttre, 16 px inre, ≥44 px träffyta Gäller ALLA native radio/checkbox på sajten. Undantag via .sj-native (t.ex. cookie-reglaget som är en switch). ------------------------------------------------------------------------ */ input[type="radio"]:not(.sj-native):not(.sj-prefs-switch), input[type="checkbox"]:not(.sj-native):not(.sj-prefs-switch) { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: var(--sj-control-outer); height: var(--sj-control-outer); min-width: var(--sj-control-outer); margin: 0; padding: 0; flex: 0 0 auto; display: inline-grid; place-content: center; border: var(--sj-control-border) solid var(--sj-border-strong); background: var(--sj-surface); color: var(--sj-brand); cursor: pointer; vertical-align: middle; transition: border-color var(--sj-duration-fast) var(--sj-ease), background-color var(--sj-duration-fast) var(--sj-ease), box-shadow var(--sj-duration-fast) var(--sj-ease); } input[type="radio"]:not(.sj-native):not(.sj-prefs-switch) { border-radius: 50%; } input[type="checkbox"]:not(.sj-native):not(.sj-prefs-switch) { border-radius: var(--sj-radius-xs); } /* Inre element: 16 px prick / bock */ input[type="radio"]:not(.sj-native):not(.sj-prefs-switch)::before, input[type="checkbox"]:not(.sj-native):not(.sj-prefs-switch)::before { content: ""; width: var(--sj-control-inner); height: var(--sj-control-inner); transform: scale(0); transition: transform var(--sj-duration-fast) var(--sj-ease-out); } input[type="radio"]:not(.sj-native):not(.sj-prefs-switch)::before { border-radius: 50%; background: currentColor; } input[type="checkbox"]:not(.sj-native):not(.sj-prefs-switch)::before { border-radius: 2px; background: currentColor; /* Bock ritad som mask så att den alltid följer textfärgen */ -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } input[type="radio"]:not(.sj-native):not(.sj-prefs-switch):checked, input[type="checkbox"]:not(.sj-native):not(.sj-prefs-switch):checked { border-color: var(--sj-brand); } input[type="checkbox"]:not(.sj-native):not(.sj-prefs-switch):checked { background: var(--sj-brand); color: var(--sj-brand-contrast); } input[type="radio"]:not(.sj-native):not(.sj-prefs-switch):checked::before, input[type="checkbox"]:not(.sj-native):not(.sj-prefs-switch):checked::before { transform: scale(1); } input[type="checkbox"]:not(.sj-native):not(.sj-prefs-switch):indeterminate { border-color: var(--sj-brand); background: var(--sj-brand); } input[type="checkbox"]:not(.sj-native):not(.sj-prefs-switch):indeterminate::before { transform: scale(1); -webkit-mask: none; mask: none; height: 3px; border-radius: 2px; background: var(--sj-brand-contrast); } input[type="radio"]:not(.sj-native):not(.sj-prefs-switch):hover:not(:disabled), input[type="checkbox"]:not(.sj-native):not(.sj-prefs-switch):hover:not(:disabled) { border-color: var(--sj-brand); } input[type="radio"]:not(.sj-native):not(.sj-prefs-switch):focus-visible, input[type="checkbox"]:not(.sj-native):not(.sj-prefs-switch):focus-visible { outline: none; box-shadow: var(--sj-ring); } input[type="radio"]:not(.sj-native):not(.sj-prefs-switch):disabled, input[type="checkbox"]:not(.sj-native):not(.sj-prefs-switch):disabled { opacity: 0.5; cursor: not-allowed; } input[type="radio"][aria-invalid="true"]:not(.sj-native), input[type="checkbox"][aria-invalid="true"]:not(.sj-native) { border-color: var(--sj-danger); } /* Etikett runt kontrollen – ger 44 px träffyta utan att kontrollen växer */ .sj-choice { display: flex; align-items: flex-start; gap: var(--sj-space-3); min-height: var(--sj-touch-target); padding: calc((var(--sj-touch-target) - var(--sj-control-outer)) / 2) 0; cursor: pointer; color: var(--sj-text); font-size: var(--sj-text-base); line-height: var(--sj-leading-normal); } .sj-choice > input[type="radio"], .sj-choice > input[type="checkbox"] { margin-top: calc((1em * var(--sj-leading-normal) - var(--sj-control-outer)) / 2); } .sj-choice__text { flex: 1 1 auto; min-width: 0; } .sj-choice__hint { display: block; color: var(--sj-text-secondary); font-size: var(--sj-text-sm); margin-top: 0.15rem; } /* Grupp: ≤5 val visas alltid som en synlig lista, aldrig en dropdown */ .sj-choice-group { display: flex; flex-direction: column; gap: 0; border: 0; margin: 0; padding: 0; min-width: 0; } .sj-choice-group > legend, .sj-choice-group__legend { font-weight: 700; color: var(--sj-text); margin-bottom: var(--sj-space-2); padding: 0; } .sj-choice-group--inline { flex-direction: row; flex-wrap: wrap; gap: 0 var(--sj-space-6); } /* Valkort: när alternativen bär beskrivning/pris (plan, produktvariant) */ .sj-choice-card { display: flex; align-items: flex-start; gap: var(--sj-space-3); padding: var(--sj-space-4); border: 1px solid var(--sj-border); border-radius: var(--sj-radius); background: var(--sj-surface); cursor: pointer; transition: border-color var(--sj-duration-fast) var(--sj-ease), box-shadow var(--sj-duration-fast) var(--sj-ease), background-color var(--sj-duration-fast) var(--sj-ease); } .sj-choice-card + .sj-choice-card { margin-top: var(--sj-space-3); } .sj-choice-card:hover { border-color: var(--sj-brand-light); } .sj-choice-card:has(input:checked) { border-color: var(--sj-brand); background: var(--sj-bg-accent); box-shadow: 0 0 0 1px var(--sj-brand); } .sj-choice-card:has(input:focus-visible) { box-shadow: var(--sj-ring); } .sj-choice-card__body { flex: 1 1 auto; min-width: 0; } .sj-choice-card__title { font-weight: 700; color: var(--sj-text); display: flex; justify-content: space-between; gap: var(--sj-space-3); flex-wrap: wrap; } .sj-choice-card__price { font-variant-numeric: tabular-nums; color: var(--sj-text-heading); white-space: nowrap; } .sj-choice-card__desc { color: var(--sj-text-secondary); font-size: var(--sj-text-sm); margin-top: 0.2rem; } /* --------------------------------------------------------------------------- 2. Formulärlayout – vertikalt, etikett över fält, fel som text ------------------------------------------------------------------------ */ .sj-form { display: flex; flex-direction: column; gap: var(--sj-space-5); min-width: 0; } .sj-form--tight { gap: var(--sj-space-4); } .sj-field { display: flex; flex-direction: column; gap: var(--sj-space-2); min-width: 0; } .sj-field__label, .sj-label { font-weight: 600; font-size: var(--sj-text-sm); color: var(--sj-text); line-height: 1.3; } .sj-field__label .sj-optional, .sj-optional { font-weight: 400; color: var(--sj-text-muted); margin-left: 0.35em; } .sj-field__hint, .sj-hint { font-size: var(--sj-text-sm); color: var(--sj-text-secondary); margin: 0; } /* Felmeddelande per fält – alltid text, aldrig bara färg */ .sj-field-error, .sj-field__error { display: none; font-size: var(--sj-text-sm); color: var(--sj-danger); margin: 0; line-height: 1.4; align-items: flex-start; gap: 0.35rem; } .sj-field-error:not(:empty), .sj-field__error:not(:empty), .sj-field-error.is-visible, .sj-field__error.is-visible { display: flex; } .sj-field-error::before, .sj-field__error::before { content: ""; flex: 0 0 auto; width: 1em; height: 1em; margin-top: 0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .sj-field.has-error .sj-input, .sj-field.has-error .sj-select, .sj-field.has-error .sj-textarea, .sj-field.has-error input:not([type="radio"]):not([type="checkbox"]), .sj-field.has-error select, .sj-field.has-error textarea, .sj-input[aria-invalid="true"], input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]), select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--sj-danger) !important; } .sj-field.has-error .sj-input:focus, input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]):focus { box-shadow: var(--sj-ring-danger) !important; } /* Bredd matchar datat: korta fält ska vara korta */ .sj-field--xs { max-width: 8rem; } .sj-field--sm { max-width: 12rem; } .sj-field--md { max-width: 20rem; } .sj-field--lg { max-width: 32rem; } .sj-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--sj-space-4); } /* Åtgärder: primär/destruktiv till höger, sekundär till vänster */ .sj-form-actions, .sj-actions { display: flex; flex-wrap: wrap; gap: var(--sj-space-3); justify-content: flex-end; align-items: center; margin-top: var(--sj-space-2); } .sj-form-actions > .sj-actions__start, .sj-actions > .sj-actions__start { margin-right: auto; } @media (max-width: 480px) { .sj-form-actions, .sj-actions { flex-direction: column-reverse; align-items: stretch; } .sj-form-actions > .sj-actions__start, .sj-actions > .sj-actions__start { margin-right: 0; } } /* Sökfält med ikon + tydlig platshållare */ .sj-search { position: relative; display: flex; align-items: center; min-width: 0; } .sj-search > .sj-input, .sj-search > input { padding-left: 2.6rem; width: 100%; } .sj-search__icon { position: absolute; left: 0.9rem; width: 1.1rem; height: 1.1rem; color: var(--sj-text-muted); pointer-events: none; } /* Kodfält (2FA, presentkod) – jämn teckenbredd, centrerat */ .sj-input--code { font-family: var(--sj-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.2em; /* Enda tillåtna avståndet: gör siffergrupper läsbara */ text-align: center; font-size: var(--sj-text-xl); max-width: 14rem; } /* Lösenordsstyrka – text-checklista, aldrig bara en färgad stapel */ .sj-strength { display: flex; flex-direction: column; gap: var(--sj-space-2); font-size: var(--sj-text-sm); } .sj-strength__bar { height: 6px; border-radius: var(--sj-radius-pill); background: var(--sj-surface-sunken); overflow: hidden; } .sj-strength__fill { height: 100%; width: 0; border-radius: inherit; background: var(--sj-danger); transition: width var(--sj-duration) var(--sj-ease), background-color var(--sj-duration) var(--sj-ease); } .sj-strength__fill[data-level="2"] { background: var(--sj-warning); } .sj-strength__fill[data-level="3"] { background: var(--sj-brand); } .sj-strength__fill[data-level="4"] { background: var(--sj-success); } .sj-strength__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0.25rem var(--sj-space-4); color: var(--sj-text-secondary); } .sj-strength__list li { display: flex; align-items: center; gap: 0.4rem; } .sj-strength__list li::before { content: ""; width: 1em; height: 1em; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.6; } .sj-strength__list li.is-met { color: var(--sj-success); } .sj-strength__list li.is-met::before { opacity: 1; border: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } /* --------------------------------------------------------------------------- 3. Combobox – sök + scrolla i långa listor ------------------------------------------------------------------------ */ .sj-combobox { position: relative; min-width: 0; } .sj-combobox__input { width: 100%; padding-right: 2.5rem; } .sj-combobox__toggle { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; display: grid; place-content: center; border: 0; border-radius: var(--sj-radius-sm); background: transparent; color: var(--sj-text-muted); cursor: pointer; } .sj-combobox__toggle:hover { background: var(--sj-bg-muted); color: var(--sj-text); } .sj-combobox__list { position: absolute; z-index: var(--sj-z-overlay); left: 0; right: 0; top: calc(100% + 4px); max-height: 16rem; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: var(--sj-space-1); list-style: none; background: var(--sj-surface-elevated); border: 1px solid var(--sj-border); border-radius: var(--sj-radius); box-shadow: var(--sj-shadow-lg); } .sj-combobox__list[hidden] { display: none; } .sj-combobox__option { padding: 0.6rem 0.75rem; border-radius: var(--sj-radius-sm); cursor: pointer; color: var(--sj-text); display: flex; justify-content: space-between; gap: var(--sj-space-3); min-height: 40px; align-items: center; } .sj-combobox__option[aria-selected="true"], .sj-combobox__option.is-active { background: var(--sj-bg-accent); color: var(--sj-text-heading); } .sj-combobox__option:hover { background: var(--sj-bg-muted); } .sj-combobox__option mark { background: transparent; color: var(--sj-brand); font-weight: 700; } .sj-combobox__empty { padding: 0.75rem; color: var(--sj-text-muted); font-size: var(--sj-text-sm); } /* --------------------------------------------------------------------------- 4. Reglage (range) – för sifferfilter ------------------------------------------------------------------------ */ .sj-range { display: flex; flex-direction: column; gap: var(--sj-space-2); } .sj-range__values { display: flex; justify-content: space-between; font-size: var(--sj-text-sm); color: var(--sj-text-secondary); font-variant-numeric: tabular-nums; } .sj-range__values output { color: var(--sj-text); font-weight: 600; } .sj-range input[type="range"], input[type="range"].sj-range__input { -webkit-appearance: none; appearance: none; width: 100%; height: var(--sj-touch-target); margin: 0; background: transparent; cursor: pointer; } .sj-range input[type="range"]::-webkit-slider-runnable-track, input[type="range"].sj-range__input::-webkit-slider-runnable-track { height: 6px; border-radius: var(--sj-radius-pill); background: linear-gradient(to right, var(--sj-brand) 0%, var(--sj-brand) var(--sj-range-fill, 0%), var(--sj-border-strong) var(--sj-range-fill, 0%), var(--sj-border-strong) 100%); } .sj-range input[type="range"]::-moz-range-track, input[type="range"].sj-range__input::-moz-range-track { height: 6px; border-radius: var(--sj-radius-pill); background: var(--sj-border-strong); } .sj-range input[type="range"]::-moz-range-progress, input[type="range"].sj-range__input::-moz-range-progress { height: 6px; border-radius: var(--sj-radius-pill); background: var(--sj-brand); } .sj-range input[type="range"]::-webkit-slider-thumb, input[type="range"].sj-range__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--sj-control-outer); height: var(--sj-control-outer); margin-top: calc((6px - var(--sj-control-outer)) / 2); border-radius: 50%; border: var(--sj-control-border) solid var(--sj-brand); background: var(--sj-surface); box-shadow: var(--sj-shadow-sm); transition: transform var(--sj-duration-fast) var(--sj-ease); } .sj-range input[type="range"]::-moz-range-thumb, input[type="range"].sj-range__input::-moz-range-thumb { width: var(--sj-control-outer); height: var(--sj-control-outer); border-radius: 50%; border: var(--sj-control-border) solid var(--sj-brand); background: var(--sj-surface); box-shadow: var(--sj-shadow-sm); } .sj-range input[type="range"]:focus-visible, input[type="range"].sj-range__input:focus-visible { outline: none; } .sj-range input[type="range"]:focus-visible::-webkit-slider-thumb, input[type="range"].sj-range__input:focus-visible::-webkit-slider-thumb { box-shadow: var(--sj-ring); } .sj-range input[type="range"]:focus-visible::-moz-range-thumb, input[type="range"].sj-range__input:focus-visible::-moz-range-thumb { box-shadow: var(--sj-ring); } /* Dubbelreglage (min–max) = två inputs ovanpå varandra */ .sj-range--dual { position: relative; } .sj-range--dual .sj-range__track { position: relative; height: var(--sj-touch-target); } .sj-range--dual input[type="range"] { position: absolute; inset: 0; pointer-events: none; } .sj-range--dual input[type="range"]::-webkit-slider-thumb { pointer-events: auto; } .sj-range--dual input[type="range"]::-moz-range-thumb { pointer-events: auto; } .sj-range--dual input[type="range"]::-webkit-slider-runnable-track { background: transparent; } .sj-range--dual input[type="range"]::-moz-range-track { background: transparent; } .sj-range--dual input[type="range"]::-moz-range-progress { background: transparent; } .sj-range--dual .sj-range__rail { position: absolute; left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%); border-radius: var(--sj-radius-pill); background: var(--sj-border-strong); } .sj-range--dual .sj-range__fill { position: absolute; top: 0; bottom: 0; border-radius: inherit; background: var(--sj-brand); } /* --------------------------------------------------------------------------- 5. Kort – en hover för hela sajten (lyft + mjuk skugga, ingen glöd) ------------------------------------------------------------------------ */ .sj-card { background: var(--sj-surface); border: 1px solid var(--sj-border); border-radius: var(--sj-radius-lg); box-shadow: var(--sj-shadow-xs); padding: var(--sj-space-6); color: var(--sj-text); min-width: 0; transition: transform var(--sj-duration) var(--sj-ease), box-shadow var(--sj-duration) var(--sj-ease), border-color var(--sj-duration) var(--sj-ease); } .sj-card--compact { padding: var(--sj-space-4); } .sj-card--flush { padding: 0; overflow: hidden; } .sj-card--interactive, a.sj-card, .sj-card[href] { display: block; text-decoration: none; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .sj-card--interactive:hover, a.sj-card:hover, .sj-card[href]:hover { transform: translateY(-2px); box-shadow: var(--sj-shadow-lg); border-color: var(--sj-border-strong); } } .sj-card--interactive:focus-visible, a.sj-card:focus-visible { outline: none; box-shadow: var(--sj-ring), var(--sj-shadow-lg); } .sj-card__media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sj-bg-muted); } .sj-card__body { padding: var(--sj-space-5); } .sj-card__title { font-size: var(--sj-text-lg); font-weight: 700; color: var(--sj-text-heading); margin: 0 0 var(--sj-space-2); line-height: var(--sj-leading-snug); } .sj-card__text { color: var(--sj-text-secondary); margin: 0; } .sj-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sj-space-3); flex-wrap: wrap; margin-top: var(--sj-space-4); } .sj-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--sj-gap-lg); } /* --------------------------------------------------------------------------- 6. Framsteg – linjär stapel + milstolpar ------------------------------------------------------------------------ */ .sj-progress { display: flex; flex-direction: column; gap: var(--sj-space-2); min-width: 0; } .sj-progress__header { display: flex; justify-content: space-between; gap: var(--sj-space-3); font-size: var(--sj-text-sm); color: var(--sj-text-secondary); } .sj-progress__value { color: var(--sj-text); font-weight: 600; font-variant-numeric: tabular-nums; } .sj-progress__track { position: relative; height: 10px; border-radius: var(--sj-radius-pill); background: var(--sj-surface-sunken); overflow: hidden; } .sj-progress--sm .sj-progress__track { height: 6px; } .sj-progress--lg .sj-progress__track { height: 14px; } .sj-progress__fill { height: 100%; width: var(--sj-progress, 0%); border-radius: inherit; background: var(--sj-brand); transition: width var(--sj-duration-slow) var(--sj-ease-out); } .sj-progress--success .sj-progress__fill { background: var(--sj-success); } /* Milstolpar */ .sj-milestones { display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0; counter-reset: sj-milestone; } .sj-milestones__item { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sj-space-2); font-size: var(--sj-text-sm); color: var(--sj-text-secondary); counter-increment: sj-milestone; } .sj-milestones__item::before { content: counter(sj-milestone); display: grid; place-content: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--sj-border-strong); background: var(--sj-surface); color: var(--sj-text-secondary); font-weight: 700; z-index: 1; } .sj-milestones__item:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: var(--sj-border); } .sj-milestones__item.is-done { color: var(--sj-text); } .sj-milestones__item.is-done::before { content: ""; border-color: var(--sj-success); background: var(--sj-success); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .sj-milestones__item.is-done:not(:last-child)::after { background: var(--sj-success); } .sj-milestones__item.is-current { color: var(--sj-text-heading); font-weight: 600; } .sj-milestones__item.is-current::before { border-color: var(--sj-brand); color: var(--sj-brand); box-shadow: 0 0 0 4px var(--sj-bg-accent); } /* --------------------------------------------------------------------------- 7. Stegindikator för flerstegsformulär (registrering m.fl.) ------------------------------------------------------------------------ */ .sj-stepper { display: flex; flex-direction: column; gap: var(--sj-space-4); } .sj-stepper__steps { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--sj-space-2); /* The step labels have a floor below which they cannot shrink, so on a very narrow screen the row spilled out of the card it sits in. Scrolling the step list is better than breaking the card: the steps stay legible and side by side, which is the point of a stepper. No visual change at any width where the row already fits. */ min-width: 0; overflow-x: auto; scrollbar-width: none; } .sj-stepper__steps::-webkit-scrollbar { display: none; } .sj-stepper__step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sj-space-2); font-size: var(--sj-text-sm); color: var(--sj-text-muted); } .sj-stepper__step::before { content: ""; display: block; height: 6px; border-radius: var(--sj-radius-pill); background: var(--sj-surface-sunken); transition: background-color var(--sj-duration) var(--sj-ease); } .sj-stepper__step.is-done::before { background: var(--sj-success); } .sj-stepper__step.is-current { color: var(--sj-text-heading); font-weight: 600; } .sj-stepper__step.is-current::before { background: var(--sj-brand); } .sj-stepper__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sj-stepper__status { font-size: var(--sj-text-sm); color: var(--sj-text-secondary); } .sj-stepper__panel[hidden] { display: none; } .sj-stepper__panel:not([hidden]) { display: flex; flex-direction: column; gap: var(--sj-space-5); } @media (max-width: 480px) { .sj-stepper__label { font-size: var(--sj-text-xs); } } /* --------------------------------------------------------------------------- 8. Läs mer / expanderbar text ------------------------------------------------------------------------ */ .sj-readmore { position: relative; } .sj-readmore__content { position: relative; overflow: hidden; max-height: var(--sj-readmore-height, 9.5rem); transition: max-height var(--sj-duration-slow) var(--sj-ease); } .sj-readmore:not(.is-open) .sj-readmore__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3rem; background: linear-gradient(to bottom, transparent, var(--sj-readmore-fade, var(--sj-surface))); pointer-events: none; } .sj-readmore.is-open .sj-readmore__content { max-height: none; } .sj-readmore.is-short .sj-readmore__content { max-height: none; } .sj-readmore.is-short .sj-readmore__content::after, .sj-readmore.is-short .sj-readmore__toggle { display: none; } .sj-readmore__toggle { margin-top: var(--sj-space-2); background: none; border: 0; padding: 0; min-height: var(--sj-touch-target); display: inline-flex; align-items: center; gap: 0.35rem; color: var(--sj-brand); font: inherit; font-weight: 600; cursor: pointer; } .sj-readmore__toggle:hover { text-decoration: underline; } .sj-readmore__toggle::after { content: ""; width: 0.9em; height: 0.9em; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; transition: transform var(--sj-duration-fast) var(--sj-ease); } .sj-readmore.is-open .sj-readmore__toggle::after { transform: rotate(180deg); } /* --------------------------------------------------------------------------- 9. Tomt läge – alltid ett nästa steg ------------------------------------------------------------------------ */ .sj-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sj-space-3); padding: var(--sj-space-10) var(--sj-space-6); border: 1px dashed var(--sj-border-strong); border-radius: var(--sj-radius-lg); background: var(--sj-bg-subtle); color: var(--sj-text-secondary); } .sj-empty__icon { width: 48px; height: 48px; color: var(--sj-text-muted); } .sj-empty__title { margin: 0; font-size: var(--sj-text-lg); font-weight: 700; color: var(--sj-text); } .sj-empty__text { margin: 0; max-width: 34rem; } .sj-empty .sj-btn { margin-top: var(--sj-space-2); } /* --------------------------------------------------------------------------- 10. Ikoner – en inline-SVG-uppsättning (sprite i partials/icons.svg) ------------------------------------------------------------------------ */ .sj-icon { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.3em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } .sj-icon--sm { width: 1em; height: 1em; vertical-align: -0.15em; } .sj-icon--lg { width: 1.6em; height: 1.6em; } /* --------------------------------------------------------------------------- 11. Tabeller – aldrig horisontell sidscroll, alltid egen scrollbehållare ------------------------------------------------------------------------ */ .sj-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--sj-border); border-radius: var(--sj-radius); background: var(--sj-surface); } .sj-table { width: 100%; border-collapse: collapse; font-size: var(--sj-text-sm); color: var(--sj-text); } .sj-table th, .sj-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--sj-border); vertical-align: middle; } .sj-table th { font-weight: 700; color: var(--sj-text-secondary); background: var(--sj-bg-muted); white-space: nowrap; } .sj-table tbody tr:last-child td { border-bottom: 0; } .sj-table tbody tr:hover { background: var(--sj-bg-subtle); } .sj-table .is-numeric, .sj-table td[data-numeric] { text-align: right; font-variant-numeric: tabular-nums; } .sj-table .sj-table__actions { text-align: right; white-space: nowrap; } /* --------------------------------------------------------------------------- 12. Etiketter/badges – t.ex. "Exempel" på demoinnehåll ------------------------------------------------------------------------ */ .sj-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: var(--sj-radius-pill); font-size: var(--sj-text-xs); font-weight: 700; line-height: 1.4; background: var(--sj-bg-muted); color: var(--sj-text-secondary); border: 1px solid var(--sj-border); text-transform: uppercase; letter-spacing: var(--sj-tracking-wide); /* mikroetikett i versaler – enda tillåtna fallet */ } .sj-badge--brand { background: var(--sj-bg-accent); color: var(--sj-brand-700); border-color: var(--sj-border-soft); } .sj-badge--success { background: var(--sj-success-bg); color: var(--sj-success); border-color: var(--sj-success-border); } .sj-badge--warning { background: var(--sj-warning-bg); color: var(--sj-warning); border-color: var(--sj-warning-border); } .sj-badge--danger { background: var(--sj-danger-bg); color: var(--sj-danger); border-color: var(--sj-danger-border); } /* --------------------------------------------------------------------------- 13. Tillgänglighet – visuellt dold text (alltid tillgänglig på alla sidor) ------------------------------------------------------------------------ */ /* .visually-hidden is an alias, not a second implementation. home.css used to carry its own weaker copy where only `position` was !important, so the `width: 1px` lost to the form layer's select sizing: on the signed-in home page #review-rating ended up position:absolute, left:724px and 1280px WIDE, dragging the document 723px open at every viewport size. That was the "everything is going outside the width" in responsive mode. */ .sr-only, .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* --------------------------------------------------------------------------- 14. Rörelse: respektera användarens inställning ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .sj-card, .sj-readmore__content, .sj-progress__fill, .sj-strength__fill, input[type="radio"]::before, input[type="checkbox"]::before { transition: none !important; } .sj-card--interactive:hover, a.sj-card:hover { transform: none; } } /* ========================================================================== Cookie consent — banner, settings dialog and the declaration table. These rules used to live in a single