/* KIND 2.0 admin-portal overrides (W2-14 + W2-15) * * Owner: frontend-web (per docs/contracts/file-ownership.md). * Scope: vårdpersonal + klinik-admin surface. Loaded after kind.css via the * {% block per_domain_css %} hook in base.html. Patient surface is * kind_patient.css; admin and patient never load both. * Why a separate file: admin users are at desk on a laptop, interrupt-driven, * scanning long lists between walk-ins. Denser layout, slightly smaller * body type than patient (back to 16px), tabular surfaces, sortable * column headers. Cooler palette so the admin doesn't feel like the * patient surface; same accent though so the brand reads as one product. * Budget: under 400 lines per the Phase 2 prompt. */ .kind-body--admin { --kind-font-base: 1rem; /* 16px, one tick smaller than patient (18px) */ /* Classic+ (ADR-065 §D1, CP-02): the clinician surface carries the SAME cool clinical bearing surfaces as the rest of the product, so patient and vårdgivare read as one product. The warm blush that used to sit here came from hue-matching the MARKETPLACE (www.kind.app), not the product; see the long note in kind.css §1 Tokens before changing it back. What is NOT changed: the denser 16px body and the wider 80rem container for desk-bound clinician work. */ --kind-color-bg: #F5F7FA; --kind-color-surface: #FFFFFF; --kind-color-surface-muted: #EBEFF4; --kind-color-danger-ghost: #BD3745; /* #371: 4.79:1 on the muted row-hover surface */ --kind-line-height: 1.5; --kind-container-max: 80rem; /* wider container, admin runs on big screens */ } /* #218/#413, selected variant A: one patient-search field with tag suggestions. */ .kind-patient-search-combobox { flex: 1 1 24rem; min-width: min(100%, 18rem); position: relative; } .kind-patient-search-combobox__control { align-items: center; background: var(--kind-color-surface); border: 1px solid var(--kind-color-border); border-radius: var(--kind-radius); display: flex; flex-wrap: wrap; gap: var(--kind-space-1); min-height: 44px; padding: var(--kind-space-1); } .kind-patient-search-combobox__control:focus-within { outline: var(--kind-focus-ring); outline-offset: var(--kind-focus-ring-offset); } .kind-patient-search-combobox__chips { display: contents; } .kind-patient-search-combobox__chip { align-items: center; background: var(--kind-color-accent-soft); border: 1px solid var(--kind-color-accent); border-radius: 999px; display: inline-flex; gap: var(--kind-space-1); max-width: 100%; min-height: 36px; padding-inline-start: var(--kind-space-2); } .kind-patient-search-combobox__chip > span { overflow-wrap: anywhere; } .kind-patient-search-combobox__chip button { align-items: center; align-self: stretch; background: transparent; border: 0; border-radius: 999px; color: inherit; cursor: pointer; display: inline-flex; font: inherit; justify-content: center; min-width: 44px; } .kind-patient-search-combobox__chip button:focus-visible { outline: var(--kind-focus-ring); outline-offset: var(--kind-focus-ring-offset); } .kind-patient-search-combobox__input.kind-field__input { border: 0; box-shadow: none; flex: 1 1 12rem; min-width: 8rem; outline: 0; } .kind-patient-search-combobox__listbox { background: var(--kind-color-surface); border: 1px solid var(--kind-color-border); border-radius: var(--kind-radius); box-shadow: var(--kind-shadow-md); inset-inline: 0; list-style: none; margin: var(--kind-space-1) 0 0; max-height: min(20rem, 50vh); overflow-y: auto; padding: var(--kind-space-1); position: absolute; z-index: 20; } .kind-patient-search-combobox__listbox[hidden], .kind-patient-search-combobox__message[hidden] { display: none; } .kind-patient-search-combobox__listbox [role="option"] { align-items: center; border-radius: var(--kind-radius); cursor: pointer; display: flex; gap: var(--kind-space-2); justify-content: space-between; min-height: 44px; overflow-wrap: anywhere; padding: var(--kind-space-2); } .kind-patient-search-combobox__listbox [role="option"][aria-selected="true"] { background: var(--kind-color-accent-soft); outline: 2px solid var(--kind-color-accent); } .kind-patient-search-combobox__listbox [role="option"] > span { color: var(--kind-color-text-muted); flex: 0 0 auto; font-size: var(--kind-font-small); } .kind-patient-search-combobox__message { margin-block: var(--kind-space-1) 0; } /* web#218 punkt 14 (beställarens tillägg 2026-09-24): gamla KINDs rensa-kryss INUTI fältet, i stället för en separat länk `Rensa` vid sidan av det. Krysset läggs in av `kind_patient_search_combobox.js` och finns alltså bara när live-filtreringen faktiskt är aktiv -- utan JavaScript står länken `Rensa` kvar, och då ska inget kryss finnas (det hade inte kunnat göra något). GRÅTT, som i kundens nuvarande app, men via `--kind-color-text-muted` så kontrasten följer temat i stället för att pinnas till en hex. 44px träffyta (WCAG 2.5.8) och synlig fokusmarkering, samma mönster som chip-krysset ovan. */ .kind-patient-search-combobox__rensa { align-items: center; background: none; border: 0; border-radius: var(--kind-radius); color: var(--kind-color-text-muted); cursor: pointer; display: flex; flex: 0 0 auto; font-size: 1.25rem; justify-content: center; line-height: 1; min-height: 44px; min-width: 44px; padding: 0; } .kind-patient-search-combobox__rensa:hover { color: var(--kind-color-text); } .kind-patient-search-combobox__rensa:focus-visible { outline: var(--kind-focus-ring); outline-offset: var(--kind-focus-ring-offset); } /* `hidden`-GARD, och mekanismen är URSPRUNG och inte specificitet: UA-arkets `[hidden] { display: none }` saknar `!important`, och `display: flex` ovan är en normal FÖRFATTARdeklaration, som vinner i kaskadens sorteringsordning. Utan den här raden är `rensa.hidden = true` i `static/js/kind_patient_search_combobox.js` INERT: krysset står kvar med tomt fält, vilket är precis vad beställaren underkände 2026-09-25 (web#218), och samma defektklass som listhuvudet i #220/#608. Garden ligger per klass och UTAN `!important` (CLAUDE.md regel 27 korollarium 2). */ .kind-patient-search-combobox__rensa[hidden] { display: none; } /* ETT kryss, inte tva (web#218, bestallarens krav 2026-09-26 13:38). Faltet ar `type="search"`, sa Chromium (och andra WebKit/Blink-motorer) ritar SIN EGEN rensknapp inuti faltet, bredvid appens `Rensa sokningen`. Gamla KIND har ett kryss (mod/2493, mod/2494), och tva kryss bredvid varandra ar tva olika affordanser for samma handling -- den ena med tillgangligt namn och 44px traffyta, den andra utan. SKOPAD TILL KOMBOBOXFALTET, med avsikt. No-JS-grunden (`templates/admin/patienter.html`, else-grenen) har INGET eget kryss: dar ar webblasarens rensknapp den enda rensaffordansen inuti faltet, och en oskopad regel hade tagit bort den. Darfor pekar selektorn pa `.kind-patient-search-combobox__input` och inte pa `input[type="search"]`. Utan JavaScript renderas komboboxgrenen ocksa utan appens kryss (det laggs in av `kind_patient_search_combobox.js`), men da star lanken `Rensa` kvar -- skriptet tar bort den forst nar live-filtreringen ar aktiv -- sa ytan har fortfarande exakt en rensaffordans. Firefox ritar ingen rensknapp for `type="search"`, sa regeln ar en no-op dar. `-webkit-appearance: none` ar det som faktiskt tar bort knappen i Blink; `display: none` star kvar som ett andra, oberoende grepp pa samma pseudoelement. Ingen `!important` (CLAUDE.md regel 27 korollarium 2). */ .kind-patient-search-combobox__input::-webkit-search-cancel-button, .kind-patient-search-combobox__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; } @media (max-width: 430px) { .kind-patient-search-combobox { flex-basis: 100%; min-width: 100%; } } /* CP-03 (issue #88, ADR-065 §D6.1): attribute, not media query. The body-level re-declaration is still needed even though kind.css sets the same tokens on : a declaration on the BODY wins for the body subtree by inheritance, so without this the clinician surface would keep its light bearing surfaces inside a dark page. See the long note in kind.css §1a. */ html[data-kind-theme="dark"] .kind-body--admin { /* Classic+ DARK bearing surfaces, identical to kind.css §1a. The values are repeated rather than referenced because a CSS custom property cannot be re-declared by reference to its own -level value from a body-level rule; the drift-guard is the matrix generator's control 8, which parses BOTH files and fails if these three ever diverge from the dark set. */ --kind-color-bg: #12161B; --kind-color-surface: #1A2028; --kind-color-surface-muted: #232B34; --kind-color-danger-ghost: var(--kind-color-error); } /* ============ Layout: sticky top bar + clinic-context badge ============ */ .kind-admin-context { display: inline-flex; align-items: center; gap: var(--kind-space-2); padding: var(--kind-space-1) var(--kind-space-3); background: var(--kind-color-accent-bg); color: var(--kind-color-accent); border-radius: var(--kind-radius-pill); font-size: var(--kind-font-small); font-weight: 600; } .kind-admin-context__icon { font-size: 1rem; line-height: 1; } /* ============ WS-C / ADR-025: workspace switcher (multi-org clinician) ============ * * KIND's D14 wish: a clear workspace selector in the clinician chrome (top-left, * near the klinik banner) that reads as a workspace control, NOT a stray link. * Renders ONLY for a konto with >1 active membership AND FEATURE_MULTIORG_LOGIN on * (gating lives in app/auth/__init__.py + base.html; this is styling only). * * Treatment: a bordered card-pill that shows the active mottagning + a "Byt" * affordance, so the current workspace is obvious at a glance and the switch is * an explicit action. The whole control is one anchor (44px min height, full * keyboard + global focus-ring from kind.css). Colours reuse the warm accent * family so it sits beside the .kind-admin-context badge as one vocabulary. * - icon + "Byt" chip use --kind-color-accent on --kind-color-accent-bg * (5.34:1 / 4.98:1 light, 8.36:1 dark; past AA text + the 3:1 non-text floor) * - the eyebrow label is --kind-color-text-muted (5.87:1 on bg, AA) * - the org name is full-strength --kind-color-text (16.55:1) */ .kind-workspace-switch { display: inline-flex; align-items: center; gap: var(--kind-space-3); min-height: 44px; padding: var(--kind-space-2) var(--kind-space-3); background: var(--kind-color-surface); color: var(--kind-color-text); border: 1px solid var(--kind-color-border); border-radius: var(--kind-radius); text-decoration: none; line-height: 1.2; max-width: 18rem; } .kind-workspace-switch:hover { background: var(--kind-color-accent-bg); border-color: var(--kind-color-accent); color: var(--kind-color-text); } .kind-workspace-switch__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: var(--kind-radius-pill); background: var(--kind-color-accent-bg); color: var(--kind-color-accent); font-size: 1rem; line-height: 1; } .kind-workspace-switch__text { display: flex; flex-direction: column; min-width: 0; /* allow the org name to ellipsise rather than overflow */ } .kind-workspace-switch__label { font-size: 0.8125rem; /* 13px, husets absoluta golv (CP-04); var 11px */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kind-color-text-muted); } .kind-workspace-switch__org { font-weight: 600; font-size: var(--kind-font-small); color: var(--kind-color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kind-workspace-switch__action { flex: none; margin-left: auto; padding: 2px 10px; border-radius: var(--kind-radius-pill); background: var(--kind-color-accent-bg); color: var(--kind-color-accent); font-size: var(--kind-font-small); font-weight: 600; } /* ============ Dashboard counters (UX A-01) ============ */ /* KOLUMNGOLVET SKALAR MED TEXTEN (issue #155). `minmax(180px, 1fr)` var ett FAST pixelgolv under ett innehall som ar rem-satt, och den obalansen ar hela defekten: vid xxlarge vaxer `.kind-stat__label` med 50 procent (rot 16px -> 24px, alltsa `--kind-font-small` 14px -> 21px) medan golvet star kvar pa 180px, sa auto-fit packar fortfarande TVA spar dar texten behover ett. Uppmatt pa 2.3.4-nordiccare-w32 vid 430/xxlarge: tva spar a 182px ger etiketten en innehallsbox pa 132px, och versala "KONVERSATIONER" ar 196px blaeck utan en enda mjuk brytpunkt. Texten ritas 64px utanfor sin box, 39px utanfor sjalva kortet och 15px utanfor viewporten, alltsa horisontell dokumentskroll och WCAG 2.2 AA SC 1.4.10 (Reflow) brutet. VARFOER `max(180px, 10rem)` och inte rena `11.25rem` (som ar samma 180px vid normal skala): ett rent rem-golv hade tvingat ETT spar aven vid `large`, dar tva spar a 190px matbart RYMMER etiketten (blaeck 147px, box 154px). 10rem ar exakt 180px vid `large`, sa `normal` och `large` blir OFORANDRADE pa bada axlarna vid samtliga uppmatta bredder, och bara de tva skalor som faktiskt brister packas om. VARFOER INTE `overflow-wrap: anywhere` pa etiketten: den tar ocksa bort skrollen, men den bryter versala svenska ord mitt itu ("KONVERSATIONE/R"), och den hade slagit till aven vid 412/large dar blaecket ryms i kortets polstring och rendret redan ar korrekt. Alltsa samre lasbarhet pa en matpunkt som inte har nagon defekt. Det ar samma avvagning som avvisade cellbrytning i #153. */ .kind-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(180px, 10rem), 1fr)); gap: var(--kind-space-3); margin-bottom: var(--kind-space-5); } .kind-stat { background: var(--kind-color-surface); border: 1px solid var(--kind-color-border-soft); border-radius: var(--kind-radius); padding: var(--kind-space-4); display: flex; flex-direction: column; gap: var(--kind-space-2); } .kind-stat__label { font-size: var(--kind-font-small); color: var(--kind-color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .kind-stat__value { font-family: var(--kind-font-serif); font-size: 2.25rem; font-weight: 600; color: var(--kind-color-text); line-height: 1.1; } .kind-stat__sub { font-size: var(--kind-font-small); color: var(--kind-color-text-muted); } .kind-actions-row { display: flex; flex-wrap: wrap; gap: var(--kind-space-3); margin-bottom: var(--kind-space-5); } /* ============ Tables (dense, sortable, list surfaces) ============ */ /* Section title (h1 + a primary action, e.g. Triageringsregler + "Skapa ny regel"): the shared .kind-section__title base is a non-wrapping space-between flex row, so at 320px the heading + button do not fit and force horizontal PAGE overflow (row 1.x-b: /admin/triage overflowed 113px at 320px, the boven was this title row, not the already-scroll-contained table). Scoped to .kind-body--admin so only the clinician/admin pages wrap; the h1 gets min-width:0 + overflow-wrap so a long heading breaks instead of forcing width. 1.4.10 reflow. */ .kind-body--admin .kind-section__title { flex-wrap: wrap; } .kind-body--admin .kind-section__title > h1 { min-width: 0; overflow-wrap: anywhere; } /* CP-05 (#90) täthet, brief §4.3. Rubrikens botten-marginal (space-4, 24px vid xxlarge) och arbetsytans topp-polstring (space-5) betalades av VARJE vårdgivarsida innan det första innehållet. Storleken på H1 är orörd, det är luften runt den som krympt. Scopat till vårdgivarportalen; patientytorna har sin egen rytm och sitt eget kontrakt. */ .kind-body--admin .kind-section__title > h1 { margin-bottom: var(--kind-space-2); } .kind-body--admin .kind-main { padding-top: var(--kind-space-3); } /* CP-02-resten (#87): funktionell kant, inte den dekorativa hairlinen. Wrappen är [tabindex="0"] (se fokusregeln nedan), alltså en fokuserbar komponent, och dess kant är det enda som skiljer den vita ytan från sidbakgrundens 1.07:1. Designregeln står i kind.css §6, vakten i tests/test_classic_plus_tokens_css.py. */ .kind-table-wrap { background: var(--kind-color-surface); border: 1px solid var(--kind-color-border); border-radius: var(--kind-radius); overflow-x: auto; /* ISSUE #184: vaddring för en fokuserad kontroll som rullas in i porten. * * 27px = kantledtrådens 22px täckare (den delade regeln i kind.css, fastnitad * vid porten med `scroll` attachment) + fokusringens 5px (3px outline + 2px * offset). Utan den landar knappen tekniskt "inne i porten" men UNDER * ledtråden, alltså en fix som passerar ett rectmått och ändå inte visar * kontrollen. Det är samma feltyp som #166 fann på navet, där inline-axeln * bar 4px mot ringens 5px medan blockaxeln redan hade sin härledda 6:a. * * LITERAL OCH INTE ETT SPACE-TOKEN, av samma skäl som navets `padding: 6px`: * talet är härlett ur två a11y-konstanter (ledtrådens bredd och ringens * geometri) och inte ur typografirytmen, så ett token hade dolt härledningen * och tyst ändrats med rytmen. `kind_skrollport_fokus.js` LÄSER det här * värdet ur computed style, så CSS förblir enda källan. * * Egenskapen är INERT tills en rullning sker, alltså kan den inte ändra * rendret för en muspekaranvändare. */ scroll-padding-inline: 27px; } /* A keyboard user must be able to scroll a horizontally-overflowing table region (WCAG 2.1.1): the [tabindex="0"] on .kind-table-wrap (set in the templates) makes the scroll container focusable; give it a visible focus ring so it is discoverable. The wrap already scroll-contains the table (overflow-x:auto), so the table never forces page overflow, but it needs to be REACHABLE by keyboard, not mouse-only. */ .kind-table-wrap:focus-visible { outline: var(--kind-focus-ring); outline-offset: 2px; } .kind-table { width: 100%; border-collapse: collapse; font-size: var(--kind-font-base); } .kind-table caption { text-align: left; padding: var(--kind-space-3) var(--kind-space-4); font-weight: 600; background: var(--kind-color-surface-muted); border-bottom: 1px solid var(--kind-color-border-soft); } .kind-table th, .kind-table td { text-align: left; padding: var(--kind-space-3) var(--kind-space-4); border-bottom: 1px solid var(--kind-color-border-soft); vertical-align: top; } /* MISC-04 hardening (UAT 2026-07-16): OPT-IN modifier for tables whose cell content can carry unbreakable user tokens (a spaceless mottagningsnamn, a URL-like routing target, a long villkor value). Such a token must be able to break, so it stops inflating the column's max-content width and forcing avoidable horizontal scroll in .kind-table-wrap. Deliberately NOT on the global .kind-table cell rule (blast radius: other admin tables' wrapping was not re-verified in this batch); today applied to the triage table (templates/admin/triage.html). ISSUE #144 (omtest 2026-08-08): VARDET AR `break-word`, INTE `anywhere`, och modifieraren heter darfoer inte langre `--wrap-anywhere`. Bytet ar hela fixen for #144, sa mekanismen ska sta har och inte i en commit ingen laser. `anywhere` och `break-word` ger BADA brytmojligheter inuti ett ord. Den enda skillnaden ar att `anywhere` RAKNAS MED nar min-content beraknas medan `break-word` INTE gor det. Med `anywhere` kollapsar varje cells min-content till ETT TECKEN, alltsa har tabellayouten ingen skyldighet att ge nagon kolumn plats for sitt langsta ord: fordelningen styrs helt av max-content, och den langsta fragetexten svalter grannkolumnerna. Det ar mekanismen bakom BADE KIND-FIND-01 (kroppen krossad) OCH #144 (rubrikraden och badgen krossade), och det ar skalet till att en fix pa bara rubrikcellerna FLYTTAR felet: uppmatt i ablation blir rubriken ren men `Andningsbesvar` i NAMN borjar i stallet brytas, eftersom rubrikernas aterupprattade min-content tar bredd fran kroppens kolumner inom ett fast golv. Med `break-word` ar varje kolumns min-content sitt LANGSTA ORD, sa inget vanligt ord kan krossas, medan brytmojligheten finns kvar som skyddsnat om kolumnen anda pressas under sin min-content. Sart empiriskt i samma motor som grinden kor (en 26-teckens token i en 60px container): `anywhere` ger tabellbredd 60px och ordet i 4 rects, `break-word` ger 194px och 1 rect. PRISET, uppmatt och medvetet taget: tabellen vaxer fran 704px till 827px vid 390/normal, alltsa skrollstracka 348 -> 471px, och vid 320/xxlarge 786 -> 924px. Alternativet, att behalla `anywhere` och i stallet hoja golvet, matte VARRE pa samma axel (54-56rem kravdes for att bli ren, alltsa 508-540px skroll) och hade dessutom gjort konstanten fixturberoende. Harledningen ligger i e2e/triage144-golvharledning.mjs och e2e/triage144-breakword.mjs. Grinden har ett breddtak (60rem) sa lasbarhet inte kan kopas med obegransad skrollstracka. Skrollindikeringen i sig ar issue #145, den delade noden. */ .kind-table--wrap-break-word th, .kind-table--wrap-break-word td { overflow-wrap: break-word; } /* KIND-FIND-01 (testarrapport 2026-07-28): LASBARHETSGOLV, infort som par till `anywhere`-varianten av modifieraren ovan och nodvandigt just PA GRUND AV den. `anywhere` drog en cells min-content ner till ETT TECKEN, sa utan ett golv kollapsade hela tabellen till containerns bredd i stallet for att overflowa: uppmatt pa driftsatt 2.1.13 var .kind-table-wrap scrollWidth 356 == clientWidth 356 vid 390px (alltsa INGEN sidledsscroll), kolumnerna 30-57px och radhojden 313-361px, med vanliga ord som "Andningsbesvar" sonderbrutna till 1-3 tecken per rad. Det var precis den lasbarhet KIND underkande. (Notera: KIND-MOB-05-kommentaren nedan pastod ett ~500px-golv fran knappar och padding. Den rakningen glomde sin egen brytregel och var fel; texten ar rattad darnere.) STATUS EFTER #144 (2026-08-09): golvet ar numera INERT pa de tillstand som finns, och det ar MATT och inte antaget. Med `break-word` ar tabellens egen min-content 827px (seed) respektive 829px (tungt), alltsa over 44rem = 704px, sa golvet binder aldrig. Korningen med golvet nollstallt gav exakt samma siffror pa samtliga 40 matpunkter (e2e/triage144-breakword.mjs, B1 mot B2). Regeln star anda kvar, av ETT skal: en gles tabell (fa kolumner, korta varden) har en min-content under 704px, och da ar golvet fortfarande det som ger scrollporten nagot att scrolla i stallet for att lata kolumnerna komprimeras. Talet 44rem ar darfor inte langre en harledd lasbarhetsgrans utan ett bottenvarde. Lasbarhetsgransen bars nu av `break-word` ovan, som inte kan underskrida ett ords bredd. Genuint langa tokens ("Rokavvanjningsmottagningen", 213px) far fortfarande brytas, men numera forst nar kolumnen pressas under sin min-content, inte rutinmassigt. Priset syns i ROUTAS TILL, som blir 213px bred i stallet for att bryta tokenet direkt. Sidledsscroll ar det avsedda utfallet har, inte en biverkning: .kind-table-wrap ar redan byggd for det (overflow-x:auto + tabindex="0" + role="region" + aria-label "bladdra i sidled"), och WCAG 1.4.10 undantar uttryckligen datatabeller fran kravet pa scroll i bara en riktning. UPPFOLJNING (oforandrad fran 2026-07-16): en table->staplade-kort-behandling for smala skarmar ar ratt slutmal men ar ett eget designbeslut, inte en UAT-fixbatch. */ .kind-table--scroll-floor { min-width: 44rem; } /* KIND-MOB-05 (UAT 2026-07-16, mobil 374/378px): halverar cellernas inline-padding vid <=600px (sparar ~96px tvingad bredd, ~25% av en 374px-viewport i scrollstracka). Typsnittet rors INTE (13px-golvet). RATTELSE 2026-07-28: den har kommentaren pastod tidigare att tabellen "kan inte komprimeras under ~500px ens med overflow-wrap" och att sidledsscroll darfor KVARSTAR pa mobil. Det var FEL, och felet var lobarande: rakningen summerade knappar, badge och padding men glomde att den davarande `anywhere`-regeln (direkt ovanfor) drar varje textcells min-content till ETT TECKEN, vilket uppfor sig helt annorlunda an ett knappgolv. Uppmatt pa driftsatt 2.1.13 fanns INGEN scroll vid 390px eller 375px (scrollWidth == clientWidth) och texten krossades i stallet, vilket KIND underkande (KIND-FIND-01). Lardomen ar att ett pastaende om RENDERAT utfall inte hor hemma enbart i en kommentar: det ska matas i webblasare och vaktas av en grind (e2e/triage-tabell-lasbarhet.mjs). Halveringen har ar oforandrad av #144 och fortfarande lonsam: den ar 16px per cell och 6 kolumner, alltsa ~96px mindre skrollstracka. */ @media (max-width: 600px) { .kind-table--wrap-break-word th, .kind-table--wrap-break-word td { padding-inline: var(--kind-space-2); } } .kind-table thead th { background: var(--kind-color-surface-muted); font-weight: 600; font-size: var(--kind-font-small); text-transform: uppercase; letter-spacing: 0.04em; color: var(--kind-color-text-muted); position: sticky; top: 0; z-index: 1; } .kind-table tbody tr:hover { background: var(--kind-color-surface-muted); } .kind-table tbody tr:last-child td { border-bottom: none; } .kind-table__row-link { display: block; color: var(--kind-color-text); text-decoration: none; font-weight: 600; } .kind-table__row-link:hover { color: var(--kind-color-accent); text-decoration: underline; } /* Sortable column header */ .kind-table th a.kind-table__sort { color: var(--kind-color-text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: var(--kind-space-1); } .kind-table th a.kind-table__sort:hover { color: var(--kind-color-text); } .kind-table th[aria-sort="ascending"] a.kind-table__sort, .kind-table th[aria-sort="descending"] a.kind-table__sort { color: var(--kind-color-text); } .kind-table th[aria-sort="ascending"] a.kind-table__sort::after { content: " \25B2"; } .kind-table th[aria-sort="descending"] a.kind-table__sort::after { content: " \25BC"; } /* Status badges */ .kind-badge { display: inline-block; padding: 2px 10px; border-radius: var(--kind-radius-pill); font-size: var(--kind-font-small); font-weight: 600; background: var(--kind-color-surface-muted); color: var(--kind-color-text); border: 1px solid var(--kind-color-border-soft); } .kind-badge--success { background: var(--kind-color-success-bg); color: var(--kind-color-success); border-color: var(--kind-color-success); } .kind-badge--warning { background: var(--kind-color-warning-bg); color: var(--kind-color-warning); border-color: var(--kind-color-warning); } .kind-badge--error { background: var(--kind-color-error-bg); color: var(--kind-color-error); border-color: var(--kind-color-error); } .kind-badge--info { background: var(--kind-color-info-bg); color: var(--kind-color-info); border-color: var(--kind-color-info); } .kind-badge--draft { background: var(--kind-color-surface-muted); color: var(--kind-color-text-muted); } /* agents#414 (K16), tillståndsbrickan för OHANTERAT i patientradens primärgrupp. * Konsultbeslut 2026-08-19, variant B "byt vikt" * (docs/design-proposals/236/k32-semantik/BESLUT.md): det BOOLESKA hanterat- * tillståndet tar den fyllda brickan, det NUMERISKA olästtalet degraderas till * neutral metatext. Brickan ADDERAS alltså inte, den tar olästpluppens plats, * vilket är avsett som nollsumma mot CP-05:s budget på högst två visuellt * dominerande statuselement per rad. * * FYLLNINGEN ÄR AVSIKTLIGT AKROMATISK. --kind-color-border-strong är husets * FUNKTIONELLA kanttoken och är redan bäraren av #236:s kantmarkör för samma * tillstånd, alltså införs ingen ny kulör i produkten och de två kanalerna * (kant plus bricka) talar med samma röst. En varningsfärg hade lagt ett tredje * KROMATISKT statuselement på tyngsta raden, alltså betalat #414 med #90:s * budget, precis den växel agents#177 och agents#190 båda vägrade (minne * `feedback-cross-domain-cost-on-customer-budget`). * * TEXTFÄRGEN ÄR EN TOKEN OCH INGEN LITERAL (a11y-villkor 3 i beslutsfilens * §8.1). Mocken bar `color: #FFFFFF`, vilket är rätt i LJUST tema och fel i de * tre andra: --kind-color-border-strong skiftar till #9BA6B4 i mörkt, #000000 i * högkontrast ljust och #ffffff i högkontrast mörkt. --kind-color-text-on-accent * är husets token för läsbar etikett PÅ en fylld statusyta och följer med i alla * fyra teman. Beräknad kontrast per tema: 6,18:1 ljust (#FFFFFF på #59626D), * 7,62:1 mörkt (#0D1218 på #9BA6B4), 21:1 i båda högkontrastlägena, alltså över * WCAG 2.2 SC 1.4.3:s golv 4,5:1 i samtliga. Talen är RÄKNADE ur tokenvärdena i * kind.css och ska mätas i webbläsare innan de bärs som ett godkännande. * * WCAG 2.2 SC 1.4.1: bäraren är ORDEN "Ej hanterad", fyllningen är förstärkning * och aldrig ensam bärare. Brickan är inte interaktiv och får inte bli det * (SC 2.5.8 plus risken för oavsiktlig klarmarkering i en klinisk lista). */ .kind-badge--tillstand { background: var(--kind-color-border-strong); color: var(--kind-color-text-on-accent); border-color: var(--kind-color-border-strong); } /* Role badge (loggutdrag actor column) */ .kind-role-badge { font-size: 0.8125rem; /* 13px, husets absoluta golv (CP-04); var 12px */ text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: var(--kind-radius-pill); background: var(--kind-color-info-bg); color: var(--kind-color-info); } .kind-role-badge--vardpersonal { background: var(--kind-color-info-bg); color: var(--kind-color-info); } .kind-role-badge--admin { background: var(--kind-color-warning-bg); color: var(--kind-color-warning); } /* AT-29b clinician inbox: unread-message count badge (Olästa column). * Rendered ONLY when the count is >= 1 (ADR-011: a "0" badge on every row * is a clinical-safety hazard, so zero renders the muted dash below, not a * badge). Uses the error palette so a waiting patient message reads as * attention-worthy at a scan. Contrast: --kind-color-error on * --kind-color-error-bg is well above 4.5:1 in both themes (light * --kind-color-error on --kind-color-error-bg). The badge carries its own * aria-label in the template so screen readers announce "N olästa * meddelanden från ", not a bare number. */ .kind-badge--unread { background: var(--kind-color-error-bg); color: var(--kind-color-error); border-color: var(--kind-color-error); font-variant-numeric: tabular-nums; min-width: 1.5rem; text-align: center; } /* ADR-047 (#11) röd(egna)/grå(andras) oläst-indikator on the arbetskö rail. * COLOUR is the at-a-glance carrier ONLY; WCAG 2.1 SC 1.4.1 (Use of Color, W3C * Recommendation 2023-09-21) is satisfied by THREE non-colour carriers: the * filled-vs-outline SHAPE + bold-vs-regular WEIGHT below (survives greyscale + * deuteranopia), the visually-hidden "mina"/"annan vårdperson" label + row * aria-label (screen reader), and the "Ansvarig: " line on andras rows. * Red(egna)/grey(andras) is chosen over red/green deliberately: grey is * hue-neutral so the distinction survives every common colour-vision * deficiency. */ /* Egna (mine): solid red fill, bold. White on --kind-color-error is * ~6.4:1 (passes SC 1.4.3 >= 4.5:1). The filled shape + 700 weight carry * "mine, act on it" WITHOUT colour. */ /* CP-03 (issue #88): the count was a hardcoded #fff on a TOKEN fill, 5.10:1 on * the light error red and 2.64:1 on the dark one, i.e. an unread count a * clinician in dark mode could not read. --kind-color-text-on-accent is the * token for a readable label on a filled accent/status surface: #FFFFFF in * light (byte-identical rendering) and #0D1218 in dark, measured 8.62:1 there. */ .kind-badge--unread-egna { background: var(--kind-color-error); color: var(--kind-color-text-on-accent); border-color: var(--kind-color-error); font-weight: 700; } /* Andras (a colleague's): hollow outline, regular weight, neutral grey. * --kind-color-text-muted (#6b5d5a, 5.87:1 on bg, passes 1.4.3) on a * transparent fill, --kind-color-border (3.34:1 on white after Classic+, passes * SC 1.4.11 non-text >= 3:1) outline. The outline shape + the muted weight + * the "Ansvarig" line carry "someone else's, be aware" WITHOUT colour. */ .kind-badge--unread-andras { background: transparent; color: var(--kind-color-text-muted); border-color: var(--kind-color-border); font-weight: 400; } /* Muted placeholder for an empty inbox cell (zero unread, or no messages * yet). Visually quiet so the eye skips to rows that actually have a * count; the cell still carries an aria-label so the column is not silent * to a screen reader. */ .kind-unread--none { color: var(--kind-color-text-muted); } /* "Tilldelad dig" pill on a patient row the acting clinician is assigned * to. Kept subtle (info palette, small) so it annotates without competing * with the unread badge. In 2.0 patient_assignment is empty so this is * dark for every row; it lights up when 2.1 assignment writes land. */ .kind-pill { display: inline-block; margin-left: var(--kind-space-2); padding: 1px 8px; border-radius: var(--kind-radius-pill); font-size: var(--kind-font-small); font-weight: 600; vertical-align: middle; } .kind-pill--assigned { background: var(--kind-color-info-bg); color: var(--kind-color-info); } /* G1: "N ohanterade" pill on a patient inbox row. Warning palette (amber), * distinct from the info-blue "Tilldelad dig" pill. --kind-color-warning * --kind-color-warning on --kind-color-warning-bg is WCAG AA for this small-but-bold * pill text; the dark-theme tokens carry the inverse. */ .kind-pill--ohanterad { background: var(--kind-color-warning-bg); color: var(--kind-color-warning); } /* G1: handled-state toggle in the chat header (Hanterad / Markera som * hanterad / Ångra klarmarkering). A row of state + action; the action * buttons are slightly compact so they sit under the heading without * dominating it. */ .kind-chat__handled { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kind-space-2) var(--kind-space-3); margin-top: var(--kind-space-2); } .kind-chat__handled-state { display: inline-flex; align-items: center; gap: var(--kind-space-2); margin: 0; } .kind-chat__handled-meta { color: var(--kind-color-text-muted); font-size: var(--kind-font-small); } .kind-chat__handled-form { margin: 0; } .kind-chat__handled .kind-btn { padding-block: 4px; font-size: var(--kind-font-small); } /* G6 "Exportera chatt" header affordance: a ghost button-link sitting in the chat header. The icon + label sit on one baseline; the whole link is a >=44px target via the kind-btn padding. */ .kind-chat__export { margin: var(--kind-space-2) 0 0; } .kind-chat__export-link { display: inline-flex; align-items: center; gap: var(--kind-space-2); } .kind-chat__export-icon { display: inline-flex; } /* ---- #43 clinician chat header: shared low sticky one-row header ----------- (chatt-yta 2.1 refresh, DEL B #43). The header is now the shared templates/admin/_chat_header.html macro (chatt + arbetsvy render one source, rule 27/32), and it is a LOW single row (~48px target) instead of the old ~172px multi-row stack: patient NAME first + largest on the left, the functions as ICON-actions on the right. Scoped by .kind-chat-header (the macro root); the base .kind-chat__header sticky/opaque is inherited. Presentation only: no control, form, or POST target changed. --kind-admin-chat-focus-reserve drives the 2.4.11 scroll-margin reserve on focusable thread elements so a focused element always clears the sticky header. Defined on .kind-body--admin (the common ancestor of the header AND the thread) so it inherits to both and cannot drift. Now a single low row, so the reserve is small (header height + a buffer, vs the old 12rem). 5rem -> 5.5rem (issue #110, 2026-08-05). Talet ar HARLETT ur en matning och inte hojt for sakerhets skull: sitechromens header gick fran 78 till 81px pa desktop nar navskrollarens fokusring-padding (6px block) blev obetingad, och 80px reserv (5rem) tackte da inte langre de 81. Overlappet ar 1px, alltsa PARTIELLT, sa SC 2.4.11 Focus Not Obscured (Minimum) var fortfarande uppfylld (den faller forst nar elementet ar HELT dolt), men vardet var kalibrerat mot en uppmatt headerhojd och den hojden rorde sig, sa kalibreringen foljer med. 88px tacker 81 med 7px buffert. Riktningen i ovrigt ar starkt POSITIV pa samma kriterium: vid xxlarge var headern 149 till 443px mot samma 80px-reserv INNAN andringen, alltsa grovt otackt, och ar nu 116px mot 120px (5rem vid 24px rot), alltsa tackt for forsta gangen. Smal bredd (<=900px) ar oberord, den har sin egen 10rem-bump i kind.css. */ .kind-body--admin { --kind-admin-chat-focus-reserve: 5.5rem; /* uppmatt header 81px + buffert */ } /* The header row: name/meta column left, icon-actions right, vertically centred. Sticky top:0 with an opaque surface bg + hairline so the thread does not show through as it scrolls under it. Low padding for a ~48px row; wraps only when a narrow width forces it (the actions drop below the name), never a tall stack on desktop. */ /* PIXELBUDGET 2026-07-26 (docs/contracts/chat-pixel-budget.md, tak 64px). Den uppmätta headern var 200px (identitetskolumn 75 + åtgärdsrad 96 + krom) trots att den var TÄNKT som "en låg enradig header": åtgärdsraden WRAPPADE, eftersom varje knapp bar en synlig textetikett (upp till "Tillbaka till patienter", ~211px) och arbetsvyns mittkolumn bara är ~476px vid 1280px viewport. Tre ändringar, alla presentationsnära, inget innehåll och inget länkmål borta: 1. åtgärdsknapparna blir IKONKNAPPAR (etiketten CSS-gömd, aria-label + title bär namnet, 4.1.2) => raden ryms alltid på EN 44px-rad; 2. namn + personnummer ligger på SAMMA rad (identitetslänken blir en flexrad med baslinjejustering) i stället för två staplade rader; 3. padding-block kliver ned ett spacing-steg (8px -> 4px). Hanterad-statusen flyttade till metaraden i identitetskolumnen, se _chat_header.html. Resulterande CSS-matte: max(min-height 48, identitet ~46) + 8 padding + 1 border = 57px. */ .kind-chat-header { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; /* RADGAPET sänkt space-2 -> space-1 2026-07-27 (issue #80, fjärde rundan): headern har numera TVÅ rader i normalfallet (namn + åtgärder, sedan metaraden), så radgapet betalas på varje sidladdning i stället för bara vid radbrytning på smal skärm. 4px räcker för att skilja raderna åt, de hör ihop som ett identitetsblock och ska läsas som ett. Kolumngapet är orört. */ gap: var(--kind-space-1) var(--kind-space-3); min-height: 48px; padding-top: var(--kind-space-2); padding-bottom: var(--kind-space-2); margin-bottom: var(--kind-space-3); background: var(--kind-color-surface); border-bottom: 1px solid var(--kind-color-border-soft); } /* PIXELBUDGET 2026-07-26, andra halvan av samma specificitetsläcka som patientnamnet (se .kind-chat-header .kind-chat-header__namn nedan): boxmåtten ovan ligger på `.kind-chat-header` (0,1,0), medan kind_patient.css deklarerar `.kind-chat__header { padding-bottom: var(--kind-space-3); margin-bottom: var(--kind-space-3) }` med SAMMA specificitet men SENARE källordning på klinikerytorna (de laddar kind_patient.css efter kind_admin.css). Patientens 12px vann alltså över den avsedda kompakteringen, helt osynligt. Makrot emitterar BÅDA klasserna (`class="kind-chat__header kind-chat-header"`), så (0,2,0) nedan vinner oavsett filordning. */ .kind-chat__header.kind-chat-header { padding-top: var(--kind-space-1); padding-bottom: var(--kind-space-1); margin-bottom: var(--kind-space-2); } /* Name + meta column. min-width:0 so a long name ellipsis/wraps instead of pushing the actions off-row (1.4.10 reflow, edge "Långt patientnamn"). */ .kind-chat-header__main { min-width: 0; flex: 1 1 12rem; } /* V1 (#57, chatt-yta 2.1 feedback-plan 2026-07-08): the name + personnummer identity link. `color:inherit` + no underline keep the header's visual look unchanged at rest, an underline on the name only appears on hover as the "this is clickable" cue, and the shared focus ring shows on keyboard focus (2.4.7). min-width:0 keeps the name's own ellipsis working. PIXELBUDGET 2026-07-26: `display:block` staplade namnet (24px) OVANFÖR pnr-raden (22px), dvs 46px bara för identiteten, plus metaraden under. En flexRAD med baslinjejustering lägger pnr-chippet BREDVID namnet, så identitetskolumnen blir namnrad + metarad i stället för tre rader. wrap kvar så ett långt namn + pnr fortfarande får bryta vid smal bredd (1.4.10). */ .kind-chat-header__identity-link { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--kind-space-2); min-width: 0; color: inherit; text-decoration: none; } .kind-chat-header__identity-link:hover .kind-chat-header__namn { text-decoration: underline; } .kind-chat-header__identity-link:focus-visible { outline: var(--kind-focus-ring); outline-offset: 2px; border-radius: 4px; } /* Patient name: largest + most prominent (name-first). A single line that ellipses on desktop so the header stays one row; on a narrow width it may wrap (min-width:0 lets it break). PIXELBUDGET 2026-07-26 (specificitetsfix, verifierad orsak): selektorn var `.kind-chat-header__namn` (0,1,0), medan kind_patient.css deklarerar `.kind-chat__header h1 { font-size: clamp(1.5rem, 4.5vw + 0.4rem, var(--kind-font-h1)) }` (0,1,1). Klinikerytorna laddar kind_patient.css EFTER kind_admin.css (se templates/admin/chatt.html + arbetsvy.html), och (0,1,1) slår (0,1,0), så patientytans hjälte-clamp vann: patientnamnet renderades som 2.5rem = 40px med radhöjd 1.2 = 48px, inte de avsedda 20px/24px. Det är ~24px ren höjd i en 64px-budget, osynligt i CSS-texten och exakt den sortens läckage som CSS-mattetesterna missade. Selektorn nedan är (0,2,0) och vinner därför oavsett filordning. */ .kind-chat-header .kind-chat-header__namn { font-size: 1.25rem; font-weight: 600; /* ADR-065 §D4 (CP-04): display-sized heading role, cap 600 */ margin: 0; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* V1 (#57): the personnummer-only line inside the identity link, same small muted treatment as the meta line below (kept a SEPARATE rule because it lives inside .kind-chat-header__identity-link, not .kind-chat-header__meta, see _chat_header.html for why: an may not nest another and the tel: ambient must stay a real, independently-clickable link outside this one). PIXELBUDGET 2026-07-26: den låg INLINE bredvid namnet som ett chip (identitetslänken är en flexrad), inte på egen rad. FLYTTAD TILL METARADEN 2026-07-27 (issue #80, tredje rundan). Kundens målbild har namnet ensamt på rad 1 och personnumret på rad 2, och mätningen sa samma sak: med chippet kvar på namnraden delade de på cirka 268px och namnet fick 106px av de 168 det behövde, alltså "Anna A..." vid ALLA bredder. Elementet är nu ett i metaradens

(ett

får inte innehålla ett

) och lyder metaradens krympordning i stället för identitetsradens. `flex: 0 0 auto` + `nowrap`: personnumret är en IDENTIFIERARE och krymper aldrig, exakt samma regel som telefonnumret bredvid. `overflow-wrap: anywhere` är BORTTAGET med flit, det tillät en brytning mitt i sifferserien, vilket är precis vad man inte vill ha i ett personnummer. Vid extremt smala bredder (<1200px) är metaraden inte längre nowrap-låst till en rad av 64px-taket, så 1.4.10-reflow hanteras där av att raden får bryta mellan objekten. */ .kind-chat-header__pnr { margin: 0; flex: 0 0 auto; font-size: var(--kind-font-small); color: var(--kind-color-text-muted); white-space: nowrap; } /* Meta line (ämne + tel-ambient + hanterad-status): small + muted, under the name/pnr link. PIXELBUDGET-GRANSKNING 2026-07-26 (B1, uppmätt i riktig webbläsare, INTE en hypotes): raden var `flex-wrap: wrap`, och i det KLARMARKERADE tillståndet bär den tre objekt, "Tel ", "Hanterad"-badgen och "Klarmarkerad av ". I arbetsvyns 476px-kolumn får identitetskolumnen ~320px, och objekten kräver ~510px, så raden bröt: metaraden gick 21px -> 48px och headern 57px -> 84px, alltså 20px över kontraktets 64px-tak. Varför ellipsen inte räckte som fix, och det här är hela poängen: flexboxens RADBRYTNING avgörs på barnens hypotetiska huvudstorlek (flex-basis clampad av min/max-width), inte på hur mycket de kan krympa. `min-width: 0` gör alltså krympningen och ellipsen MÖJLIG men hindrar inte brytningen; ett objekt som inte får plats flyttar till rad två och får där hela bredden, så ellipsen löser aldrig ut och raden kostar full höjd. Enda strukturella garantin för EN rad är därför `nowrap` plus uttalad krympordning nedan. Innehåll går inte förlorat: ämnet och aktör/tid ellipseras med `title` som bär hela strängen, badgen krymper aldrig (den är tillståndsmarkören, persona-vårdpersonal 2026-07-26), och telefonnumret är en egen oböjlig länk. */ /* HELBRED RAD 2 sedan 2026-07-27 (issue #80, fjärde rundan). `flex: 1 0 100%` gör metaraden till en egen rad över hela headerns bredd, alltså kundens målbild: namn + åtgärder på rad 1, personnummer + klarmarkering på rad 2. Skälet är aritmetiskt och står utskrivet i _chat_header.html: som barn till identitetskolumnen fick raden 256px (modellen, pessimistiskt) medan dess OBLIGATORISKA innehåll, de tre objekt som per krav aldrig får krympa, kräver 382px. Underskottet klämde hanterad-statusen till NOLL bredd. Ett underskott på 126px går inte att krympordna bort, raden måste bli bredare. */ .kind-chat-header__meta { margin: 0; flex: 1 0 100%; display: flex; flex-wrap: nowrap; align-items: center; gap: 0 var(--kind-space-3); font-size: var(--kind-font-small); color: var(--kind-color-text-muted); min-width: 0; overflow-wrap: anywhere; } /* ===================== UX-BESLUT 7 (2026-08-07): BESLUT7:START ============= Chattheader-komprimeringspaketet S1-S5, ALLT skopat till max-width 719.98px OCH xlarge/xxlarge (samma brytpunkt som metaradens wrap nedan; desktop och normal skala ska vara 0 diffar, mätt i e2e/beslut7-matning.mjs). Målet är mått 5-underskottet -30px vid 320/390 xxlarge efter 1.4.10-fixen. */ /* S1: "Tel "-prefixet döljs visuellt i skopet, sr-only-mönstret inline så noden STÅR KVAR i DOM och skärmläsare hör oförändrat "Tel ". */ @media (max-width: 719.98px) { html[data-kind-font-scale="xlarge"] .kind-chat__identitet-tel-prefix, html[data-kind-font-scale="xxlarge"] .kind-chat__identitet-tel-prefix { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } } /* S2: aktor/datum-golvet sanks 7rem -> 5rem ENBART i wrap-laget (skopet nedan ar delmangden av wrap-laget dar paketet giller). Golvet infordes mot NOLL-kollapsen i nowrap-laget (#80 fjarde rundan) och star OFORANDRAT kvar dar: i wrap-lage kan flex inte klamma en post till noll (en egen rad ger full bredd), sa har skyddar golvet inte mot sin ursprungsdefekt, det kostar bara en extra radbrytning nar badge plus aktor ligger pa gransen. Rodbevis: mutationen s2-golv-ater i e2e/beslut7-matning.mjs aterinfor 7rem-golvet i skopet och den extra metaraden ska komma tillbaka. */ @media (max-width: 719.98px) { html[data-kind-font-scale="xlarge"] .kind-chat-header__handled-state, html[data-kind-font-scale="xxlarge"] .kind-chat-header__handled-state { min-width: 5rem; } } /* S3: vertikal krom vid stor skala. Tre delar per ux-beslut 7: (a) metaradens line-height 1.5 -> 1.35. WCAG 1.4.12-noten: 1.4.12 kraver att INNEHALL inte gar forlorat nar ANVANDAREN hojer line-height till 1.5; en lagre forfattarsatt line-height ar tillaten, och metaradens flex-wrap gor att en user-stylesheet-hojning bara ger HOJD, aldrig klippning (overflow ar synligt, inga fasta hojder pa raderna). Kontrollerad i beslut7-matningen med 1.5-override utan innehallsbrott. (b) headerns padding-block 4+4 -> 0 i skopet (-8px), kanten bars redan av border-bottom och radgapet. (c) Ux-aritmetikens tredje del, "luften rad 1 till metarad space-2 -> space-1", har INGEN levande motsvarighet: radgapet ar space-1 (4px) sedan #80 fjarde rundan (se .kind-chat-header-kommentaren ovan). Avvikelsen fran beslutsunderlaget ar redovisad i batchrapporten i stallet for att en annan luft uppfinns och tas i dess namn. */ @media (max-width: 719.98px) { html[data-kind-font-scale="xlarge"] .kind-chat-header__meta, html[data-kind-font-scale="xxlarge"] .kind-chat-header__meta { line-height: 1.35; } html[data-kind-font-scale="xlarge"] .kind-chat__header.kind-chat-header, html[data-kind-font-scale="xxlarge"] .kind-chat__header.kind-chat-header { padding-top: 0; padding-bottom: 0; } } /* S4: ikonknapparnas overbredd 56 -> 48px i skopet, INTE till 44 exakt (avvisat i 7.2: tatare grannmal okar feltryck for en aldre malgrupp; luften mellan mal ar del av traffsakerheten). 0px hojd, breddreserv pa namn/atgardsraden. min-height 44 orord (2.5.8). */ @media (max-width: 719.98px) { html[data-kind-font-scale="xlarge"] .kind-chat-header__action, html[data-kind-font-scale="xxlarge"] .kind-chat-header__action { min-width: 48px; padding-inline: var(--kind-space-2); } } /* S5: amnet far ALDRIG en egen metarad i skopet. I wrap-lage bryter ett flexobjekt med basis auto till egen rad i stallet for att krympa (radbrytningen sker pa hypotetisk storlek, krympningen forst inom raden), sa amnets ellips loste aldrig ut har. flex-basis 0 later det dela rad och ellipseras dar (krympordningens ellips + title orord; tillstandsberoende, bokford 0 i aritmetiken eftersom seedens tunga konversation saknar amne; stubben i cp111214 bar amne och packas av samma regel). */ @media (max-width: 719.98px) { html[data-kind-font-scale="xlarge"] .kind-chat-header__amne, html[data-kind-font-scale="xxlarge"] .kind-chat-header__amne { flex: 1 1 0%; } } /* ===================== BESLUT7:SLUT ======================================= */ /* FE-2b (2026-08-07), WCAG 1.4.10 + persona-villkor D-7: vid smal bredd FÅR metaraden radbryta. Diagnosen (e2e/diag-hskroll-arbetsvy.mjs, stub i tyngsta tillståndet): raden bär två obligatorier som per design aldrig krymper, tel-länken (~176px normal, ~264 xxlarge) och hanterad-statusens 7rem/10.5rem-golv, och med nowrap var den valda felmoden vid överlast SYNLIG ÖVERSPILLNING (kommentaren ovan, #80 fjärde rundan). Det gav dokumentöverskott på 7 av 14 mätpunkter, 59-237px, och varje uppmätt överskott var EXAKT hanterad-statusens högerkant (R379 normal/R557 xxlarge). Överspillning som larm är rätt princip mot TYST bortfall, men horisontell skroll vid 320 är ett eget WCAG-brott (1.4.10 reflow), så vid <=719.98px (samma brytpunkt som gömmer hanterad-metan) byts felmoden till RADBRYTNING: allt innehåll förblir synligt, inget krymps förbi sina golv, och priset tas i höjd i stället för i sidledsskroll. Desktopens krympordning (ellipsis via nowrap) är orörd över brytpunkten. Höjdpriset vid tyngsta tillståndet redovisas i mått 5-ommätningen. */ @media (max-width: 719.98px) { .kind-chat-header__meta { flex-wrap: wrap; } } /* Krympordning på metaraden, uttalad i stället för underförstådd. 1. ÄMNET krymper först och ellipseras: det är fri text, ofta långt, och hela strängen ligger kvar i `title`. */ .kind-chat-header__amne { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 2. TELEFONNUMRET krymper inte: det är kort, det är en klickbar `tel:`-länk (vårdpersonalens genväg till att ringa upp) och ett halvt telefonnummer är värdelöst. `nowrap` hindrar också att numret bryts mitt itu. */ .kind-chat-header__meta .kind-chat__identitet-tel { flex: 0 0 auto; white-space: nowrap; /* `inline-flex` PA OMSLAGET, och det ar en MATT besparing och inte stadning. Länken innanför är `inline-flex` med `min-height: 44px` (44px-golvet, se nedan). Ligger den i ett INLINE formateringssammanhang lägger radboxens strut till halvledning ovanför och under den 44px höga boxen, och metaraden mättes då till 68px i stället för 44 (uppmätt 2026-08-26 vid 1280 och 1440, `e2e/visuell-referens.mjs --mutera=tel-golvet-pa-matytan`). Med omslaget som flexcontainer finns ingen radbox att lägga ledning till, och de 24px försvinner utan att någon funktion gör det. Detta är hela svaret på #415:s villkor C2 "hämta 44px någon annanstans i kromet": 24 av dem var bortkastad ledning. */ display: inline-flex; align-items: center; } /* ---- 44px-GOLVET PÅ `tel:`-LÄNKEN (issue #415, bindande villkor 2) -------- * * VARFÖR DET MÅSTE LIGGA HÄR OCH INTE NÅGON ANNANSTANS. Fram till 2026-08-26 * bar arbetsvyns sammanfattningszon numret EN GÅNG TILL, via * `.kind-arbetsvy__sammanfattning-lank`, och DEN länken bar golvet. Zonens egen * kodkommentar var uttrycklig: "Numret finns alltså på två ställen, men bara * ETT av dem går att träffa med tummen", och sidhuvudets länk är UPPMÄTT 17px * (2026-08-08, vid 320 till 1440). K18 tar bort zonen. Utan den här regeln * hade borttagningen alltså bytt en utrymmesvinst mot en WCAG-regression, och * persona-vårdpersonals villkor V-4 kräver att numret är nåbart under pågående * videosamtal, alltså i exakt det läge där precisionen är som sämst. * * REGELN LIGGER PÅ DEN DELADE HEADERN och inte på arbetsvyn (regel 27 * korollarium 2: åtgärda på den gemensamma noden, inte på den rapporterade * instansen). Den fristående chattytan renderar samma 17px-länk och hade annars * behållit defekten. * * 44px OCH INTE 24px. WCAG 2.2 SC 2.5.8 kräver 24 CSS-pixlar på AA-nivå; 44 är * SC 2.5.5 (AAA) och husets eget golv, och det är golvet zonen bar. Vi sänker * inte ett uppfyllt krav när bäraren byter plats. * * HÖJDPRISET ÄR MÄTT OCH INTE GISSAT: se `e2e/visuell-referens.mjs` och * `docs/contracts/chat-pixel-budget.md`. En pseudoelement-expansion av * träffytan (hit-area utan layouthöjd) prövades i resonemanget och VALDES BORT: * radgapet upp till åtgärdsraden är 4px, åtgärdsraden bär egna 44px-mål, och en * expansion uppåt hade överlappat dem, vilket är precis vad 2.5.8:s * avståndsundantag finns för att förhindra. En ärlig layouthöjd är dyrare men * går att mäta. */ .kind-chat-header__meta .kind-chat__identitet-tel a { display: inline-flex; align-items: center; min-height: 44px; } /* En badge direkt PÅ metaraden är en TILLSTÅNDSMARKÖR (kollegie-chattens "Arkiverad", issue #82) och lyder samma regel som hanterad-badgen: den krymper aldrig, och line-height 1.2 håller raden inom identitetskolumnens höjdbudget. Direktbarn-kombinatorn är avsiktlig, hanterad-badgen ligger nästlad i .kind-chat-header__handled-state och har sin egen regel längre ned. */ .kind-chat-header__meta > .kind-badge { flex-shrink: 0; line-height: 1.2; } /* Icon-actions, right side. A tight row of >=44px icon-actions; wraps if very narrow but stays compact. */ .kind-chat-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kind-space-2); margin: 0; } /* Each action = icon + a short text label. min 44px target (2.5.8). The icon always shows; the text label shows on desktop (>=720px) and is hidden on mobile (icon-only, but the button keeps its aria-label, 4.1.2). */ .kind-chat-header__action { display: inline-flex; align-items: center; gap: var(--kind-space-2); min-height: 44px; padding-inline: var(--kind-space-3); border-radius: var(--kind-radius); color: var(--kind-color-text); text-decoration: none; font-size: var(--kind-font-small); font-weight: 600; background: transparent; border: 1px solid transparent; cursor: pointer; } .kind-chat-header__action:hover { background: var(--kind-color-surface-muted); } .kind-chat-header__action:focus-visible { outline: var(--kind-focus-ring); outline-offset: 2px; } .kind-chat-header__direct-status { flex: 1 0 100%; color: var(--kind-color-text-muted); font-size: var(--kind-font-small); } .kind-chat-header__direct-status--error { color: var(--kind-color-accent); } .kind-chat-header__action-icon { display: inline-flex; flex: 0 0 auto; } /* PIXELBUDGET 2026-07-26 (ÄNDRAD PREMISS): tidigare visades den korta textetiketten vid VIEWPORT-bredd >= 720px. Den premissen var fel för den här ytan: arbetsvyn är en 3-panelslayout, så chattkolumnen är ~476px vid 1280px viewport, alltså långt under 720px, medan media-frågan ändå slog till. Resultatet var fem textbärande knappar (upp till ~211px för "Tillbaka till patienter") på en rad som bara rymmer ~284px, dvs två-tre 44px-rader, vilket är merparten av de uppmätta 200px. Etiketten är därför CSS-gömd på ALLA bredder. Namnet bärs av aria-label + title (4.1.2 Name Role Value), spanen ligger kvar i DOM:en som bärare, och tappytan är oförändrat >= 44px. Detta är samma beslut som composerns ikonrad redan tagit (B1, 2026-07-12). VIKTIGT: detta gäller HANDLINGAR. Hanterad-STATUSEN är information och ligger kvar som synlig text på metaraden (persona-vårdpersonal 2026-07-26: routnings- och tillståndsinformation får aldrig gömmas bakom ett klick). */ .kind-chat-header__action-text { display: none; } /* ISSUE #80 2026-07-27 (kundens målbild, konsultbeslut): TRE åtgärder får * tillbaka sin synliga etikett, Triage, Patientsida och Exportera. De bär * `--labelled`; ingen annan åtgärd gör det, så "Tillbaka till patienter", * klarmarkeringsväxeln och kollegie-chattens "Tillbaka till Kollegor" är * oförändrat ikonknappar. * * VARFÖR DET INTE ÅTERINFÖR 200px-FELET, räknat och inte antaget. Den gamla * regeln visade etiketter vid VIEWPORT >= 720px medan arbetsvyns chattkolumn * var 476px, alltså mätte den fel storhet. Två saker har ändrats sedan dess: * högerpanelen är borta (kolumnen är 972px) och headern kapas till samma 44rem * läskolumn som tråden (704px, kind_patient.css). Vid >= 1200px viewport är * headern därför 704px på BÅDA vårdgivarytorna, och åtgärdsraden kräver, mätt * av CSS-mattemodellen (tests/test_chat_pixel_budget.py, samma kaskad och * boxmodell som taken): * * arbetsvyn identitet 192 + gap 12 + åtgärder 414 = 618px (86px kvar) * fristående identitet 192 + gap 12 + åtgärder 364 = 568px (136px kvar) * * Den fristående chatten har en åtgärd MER ("Tillbaka till patienter") men * saknar Triage, som bara renderas på arbetsvyn, just för att dess marginal med * Triage inräknad var 32px och det är ingen marginal alls. Se _chat_header.html. * * Modellen underskattar textbredd (0,50em mot verklighetens cirka 0,55em), så * de 86px ska läsas som en övre gräns; med 26 tecken etikett är den verkliga * marginalen snarare cirka 68px. Under 1200px är etiketterna gömda igen, exakt * dagens beteende, eftersom headern då är smalare än 704px. * * Radbrytningen avgörs på barnens HYPOTETISKA huvudstorlek, inte på hur mycket * de kan krympa, så marginalen ovan är det som håller raden på EN rad; siffrorna * vaktas av tests/test_chat_pixel_budget.py (headern <= 64px med etiketter, och * åtgärdsradens bredd mot den kapade headern på båda ytorna). * * VIEWPORT-frågan igen, ärligt: det här ÄR en viewportfråga och inte en * containerfråga, vilket är samma sorts koppling som var fel 2026-07-26. * Skillnaden är att headerbredden numera är KONSTANT 704px över den brytpunkt * regeln gäller (kapad av max-width), så viewporten avgör bara OM taket biter, * inte hur brett innehållet får bli. En container query hade varit den rena * lösningen men kräver `container-type: inline-size` på den zonade artikeln, * vilket rör en flexkedja med P0-historik (#73/#74/#75), och det är inte värt * risken i ett acceptansfönster. */ /* ---- CP-06 (issue #91): GRINDEN HÄNGER PÅ CONTAINERN, INTE PÅ VIEWPORTEN ---- * * Vad som var fel, och det är UPPMÄTT och inte resonerat (riktig Chromium mot * lokal instans, 2026-08-04, seedad konversation, båda vårdgivarytorna): * * viewport headerns bredd etiketter enligt den gamla 1200px-regeln * 360 328 / 338 dolda (rätt, headern är genuint smal) * 600 568 / 568 dolda * 720 688 / 688 dolda * 800 704 / 704 dolda <-- headern är HÄR redan vid sitt tak * 1024 704 / 668 dolda <-- persona-vårdpersonals arbetsställning * 1200 704 / 704 SYNLIGA * 1440 704 / 704 SYNLIGA * * Headern kapas av `max-width: 44rem` och NÅR det taket redan vid 800px * viewport. Mellan 800 och 1199 var alltså containern EXAKT lika bred som i det * läge där etiketterna bevisligen får plats, och de doldes ändå. Det är ren * förlust, och den träffade precis den bredd persona-vårdpersonal faktiskt * jobbar i: KIND i halva skärmen, journalsystemet i den andra. * * Det här är TREDJE gången samma storhetsfel byter skepnad i den här filen. * 2026-07-26 grindades etiketten på viewport >=720 medan kolumnen var 476px, och * kommentaren nedan medger själv att 1200-regeln "ÄR en viewportfråga och inte * en containerfråga". Den försvarades med att headerbredden är konstant över * brytpunkten, vilket stämmer, men slutsatsen drogs bara åt ena hållet: den * visade aldrig att det UNDER brytpunkten fanns något att skydda. Det gjorde det * inte. * * MEKANIKEN NU, två lager, och båda behövs: * * 1. `@container` mot headerns EGNA inline-bredd är den BINDANDE regeln. * Det är den storhet som faktiskt avgör om etiketten ryms, alltså slutar * grinden vara en proxy. `container-type: inline-size` sätts på headern * SJÄLV och inte på den zonade artikeln: den flexkedjan har P0-historik * (#73/#74/#75) och ska inte röras, medan headern är ett blockelement vars * inline-bredd kommer uppifrån och därför är det trygga stället att * containa. Verifierat genom mätning före och efter, se commit-meddelandet. * * 2. Ett YTTRE `@media`-golv. Det finns av två skäl. Praktiskt: under cirka * 800px är headern genuint smal och etiketterna hör inte hemma där ändå. * Verifieringsmässigt: `tests/test_chat_pixel_budget.py` är en CSS-modell * UTAN layoutmotor, den kan inte se en containerbredd, och den hoppar över * `@container`-block. Modellen ser alltså etiketterna som PÅ inom * mediagolvet och räknar därmed den BREDARE åtgärdsraden. Det är den enda * tillåtna riktningen för en approximerande kontroll enligt kontraktets * egen regel (`docs/contracts/chat-pixel-budget.md`): konservativt biased * mot LARM. Vore lagren omvända, alltså `@container` som enda visare, hade * modellen sett etiketterna som dolda, räknat en för smal rad och blivit * falskt grön. Det är exakt den trasiga rökdetektorn kontraktet förbjuder. * * BROWSERSTÖD: container queries är Baseline "widely available" sedan * 2023-02-14 (MDN, CSS containment module level 3, hämtad 2026-08-04). En * webbläsare utan stöd ignorerar `@container`-blocket och får mediagolvets * beteende, alltså etiketter från 800px, vilket är dagens beteende fast bättre. * Degraderingen är alltså mot MER text, aldrig mot mindre. */ .kind-chat-header { container-type: inline-size; container-name: kind-chat-header; } /* PRIORITET 1, faller SIST: klarmarkeringsväxeln ("Klar" / "Ångra"). * * Persona-vårdpersonals villkor V-3, ordagrant: "När raden blir för trång ska * den SISTA etiketten som får falla bort vara den mest konsekvensbärande." * Ordningen, från sist att tappa till först: klarmarkering, Exportera, Triage, * Patientsida. Fram till nu var ordningen den EXAKT omvända, eftersom bortfallet * sorterade på stränglängd: "Markera som hanterad" var bredast och föll först * och permanent, trots att det är den enda av de fyra som ändrar ärendets * tillstånd för hela teamet. * * Det är därför den här etiketten har ett LÄGRE breddkrav än kundens tre. * * TALET 550px ÄR HÄRLETT, inte valt, OMHÄRLETT 2026-08-16 (P-lanen, * triageverben): växelns etiketter är nu produktionens ordagranna * `Klarmarkera` / `Ångra klarmarkering` (korpus vg-02-01/vg-02-02, * beslutsrunda 2026-08-16 beslut 5), alltså växte det bredare läget. Samma * metod och samma 2026-08-04-ankare som ursprungstalet 440: tre ikonknappar * 3x44 plus växeln, som var uppmätt 79 med "Ångra" (5 tecken) och med * teckentakten ur de UPPMÄTTA syskonen (Klar 70,95 vid 4 tecken, Exportera * 110,11 vid 9, alltså ~7,8px/tecken, avrundat uppåt till 8) blir * 79 + 14x8 = 191 med "Ångra klarmarkering" (19 tecken). 132 + 191 + 3x8 = * 347px, plus kolumngap 8 och identitetskolumnens `flex-basis: 12rem` = 192px * ger 547. Avrundat uppåt till 550. Härledningen är ARITMETIK på uppmätta * ankare; webbläsar-ommätning vid nästa deployverifiering är kontraktets * bindande kontroll (chat-pixel-budget.md, delmått får justeras HÄRLETT). */ .kind-chat-header__action--labelled-prio .kind-chat-header__action-text { display: inline; } @media (min-width: 800px) { /* PRIORITET 2, faller FÖRST: kundens tre affordanser (Triage, Patientsida, * Exportera). * * TALET 735px ÄR HÄRLETT på samma sätt, OMHÄRLETT 2026-08-16 (P-lanen, * triageverben, se prio-1-blocket ovan): åtgärdsraden med alla fyra * etiketter mätte 419px på arbetsvyn (uppmätt 384px vid 1200px, minus * växelns ikonbredd 44, plus dess etiketterade 79); växelns bredare läge * växer 79 -> 191 (`Ångra klarmarkering`, +14 tecken x 8px/tecken), alltså * 419 + 112 = 531px, plus kolumngap 8, plus identitetskolumnens 192px * flex-basis, summa 731px. Avrundat till 735. Webbläsar-ommätning vid nästa * deployverifiering är kontraktets bindande kontroll. * * Bortfallsregeln själv ligger EFTER hela det här mediablocket, se * "CONTAINER-BINDANDE BORTFALL" nedan. Ordningen är load-bearing och inte * kosmetisk: alla tre selektorerna väger (0,2,0), så vid lika specificitet * avgör dokumentordning. Låg bortfallsreglerna här hade den här * `display: inline`-regeln stått SENARE än prio-bortfallet och tänt * klarmarkeringens etikett igen i en container smalare än 440px, alltså * precis det fall bortfallet finns för. */ .kind-chat-header__action--labelled .kind-chat-header__action-text { display: inline; } /* ISSUE #80, ANDRA RUNDAN (konsultens webbläsarmätning 2026-07-27): headern * mätte 83px mot taket 64. Rotorsaken var INTE åtgärdsraden utan * IDENTITETSRADEN. När headern kapades till 44rem-läskolumnen (delsteg 3) gick * identitetskolumnen från cirka 546px till 278px, och namnet (cirka 140px) * plus personnummer-chippet (cirka 154px) plus gapet krävde 302px, så * `flex-wrap: wrap` bröt dem till två rader. Med metaraden under blev det TRE * textrader i stället för två: 26 + 24 + 24 + 9 krom = 83. * * Tre åtgärder, i fallande effekt, alla verksamma bara där taket gäller: * 1. `nowrap` på identitetsraden. Det är den STRUKTURELLA garantin, samma * som metaraden fick 2026-07-26: flexboxens radbrytning avgörs på * barnens hypotetiska huvudstorlek, inte på hur mycket de kan krympa, så * bara nowrap kan lova EN rad oavsett hur långt namnet är. * 2. Uttalad krympordning. NAMNET krymper och ellipseras (det bär redan * min-width:0 + ellipsis, och hela namnet finns i länkens aria-label + * h1:ns title). PERSONNUMRET krymper ALDRIG: ett halvt personnummer är * värdelöst och farligt, exakt samma regel som telefonnumret på * metaraden. * 3. Etiketterade knappar får 8px sidopadding i stället för 12. Det ger 32px * tillbaka till identitetsraden. Gäller BARA `--labelled`, som är breda * av sin text; ikonknapparna behåller 12px eftersom deras bredd är 24 + * 18 = 42px och en sänkning där hade krympt träffytan. * * TREDJE RUNDAN 2026-07-27: de tre åtgärderna är KVAR som strukturell garanti, * men de bär inte längre hela lasten. Personnummer-chippet har flyttat till * metaraden (kundens målbild), så identitetsraden innehåller bara namnet och * får hela identitetskolumnens bredd. Åtgärderna ovan är därmed belt-and- * braces: går något åt fel håll igen blir följden ett ellipserat namn, inte en * spräckt höjd. `nowrap` är kvar för att den garantin ska gälla även den dag * någon lägger tillbaka ett andra objekt på raden. */ .kind-chat-header__identity-link { flex-wrap: nowrap; } /* ---- G-8 (#99): BREDDEN SOM BETALAR `Patientsida`s ETIKETT -------------- * * CP-06 tog bort etiketten på arbetsvyn för att frigöra bredd åt * patientnamnet. G-8 ger tillbaka etiketten (briefen §4.4 plus kundens bild, * PDF sid 7), alltså måste bredden komma någon annanstans ifrån. Den kommer * INTE från namnet och INTE från någon av kundens tre etiketter. * * UNDERSKOTTET ÄR MÄTT, inte uppskattat. `test_a_realistic_long_swedish_name_still_fits` * gick rött direkt efter att etiketten återinförts: ett 20-teckens svenskt * namn ("Margareta Söderström") behövde 250px och fick 212,75px i modellens * pessimistiska textläge, alltså ett underskott på **37,25px**. * * DE 44px SOM BETALAR DET, itemiserade: * 32px `--labelled`-knapparnas sidovaddering space-2 -> space-1, alltså * 8 -> 4px, gånger två sidor gånger fyra etiketterade knappar * (Triage, Patientsida, Exportera, klarmarkeringsväxeln) * 12px åtgärdsradens KOLUMNgap space-2 -> space-1, gånger tre mellanrum * ---- * 44px mot underskottets 37,25, alltså 6,75px marginal, vilket är ungefär * exakt det spelrum tripwiren ursprungligen pinnades vid 2026-07-27 * ("20 tecken får plats med 6px till godo") * * TRÄFFYTAN ÄR ORÖRD: `.kind-chat-header__action` deklarerar `min-height: * 44px` och `min-width: 44px` längre ned, och de golven är oberoende av * vadderingen (SC 2.5.8). En etiketterad knapp är dessutom alltid bredare än * 44px av sin text. IKONKNAPPARNA rörs inte: regeln gäller bara `--labelled`, * och en ikonknapps bredd ÄR dess vaddering plus glyf. * * RADgapet är kvar på space-2, bara KOLUMNgapet krymper: radgapet gäller när * raden bryter till två rader, och det är ett läge där luft hjälper snarare * än kostar. * * SKOPAT TILL >=800px med flit. CP-14:s mobilbudget (uppmätt 4 x 56 plus * 3 x 12 = 260px av headerns 272px vid 320 xxlarge) räknar med dagens * mobilvärden, och en ändring där hade tyst flyttat den räkningen. Under * 800px är dessutom `--labelled`-etiketterna gömda, så regeln har inget att * betala för. */ .kind-chat-header__action--labelled { padding-inline: var(--kind-space-1); } .kind-chat-header__actions { column-gap: var(--kind-space-1); } } /* ---- CONTAINER-BINDANDE BORTFALL (CP-06) -------------------------------- * * Ligger SIST av de tre display-reglerna med flit. Alla tre väger (0,2,0), så * dokumentordning avgör, och bortfallet måste kunna vinna över båda * `display: inline`-reglerna ovan. Det här är också det enda stället där * bortfallsORDNINGEN uttrycks: kundens tre släcks vid 735px, klarmarkeringen * först vid 550px, alltså faller den mest konsekvensbärande etiketten SIST * (persona-vårdpersonal V-3). Tidigare föll den bredaste först, vilket råkade * vara just klarmarkeringen. Trösklarna omhärledda 2026-08-16 för * produktionsverben, se härledningarna vid respektive display-regel ovan. */ @container kind-chat-header (max-width: 734px) { .kind-chat-header__action--labelled:not(.kind-chat-header__action--labelled-prio) .kind-chat-header__action-text { display: none; } } @container kind-chat-header (max-width: 549px) { .kind-chat-header__action--labelled .kind-chat-header__action-text { display: none; } } /* WCAG 2.2 SC 2.5.8 + husets 44px-golv. Knappen hade bara `min-height`, så dess * BREDD var summan av padding och glyf. Med etiketten dold och den 8px-padding * `--labelled` får ovan blir det 8+18+8+2 = 36px, alltså under golvet. Ett golv * i en dimension flyttar felet till den andra (kontraktets egen lärdom), så * bredden får ett uttalat golv i stället för att vara en biprodukt av padding. * En etiketterad knapp är alltid bredare än 44px och påverkas inte. */ .kind-chat-header__action { min-width: 44px; } /* The handled group in the header actions: badge + (compressed) actor/tid + the toggle button all on one tight row. The forms carry no extra margin. */ .kind-chat-header__handled { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--kind-space-2); margin: 0; } .kind-chat-header__handled .kind-chat__handled-form { margin: 0; } /* 3. HANTERAD-STATUSEN krymper sist, och bara i sin textdel. `min-width: 0` är LOAD-BEARING och saknades (granskningens P2-3): utan den är ett flexobjekts min-width `auto`, alltså min-content, och min-content för det här objektet inkluderar hela det nowrap-satta metafältet inuti. Ellipsregeln på `.kind-chat-header__handled-meta` kunde därför bevisligen aldrig lösa ut, hur trång raden än blev. */ /* MIN-WIDTH-GOLV 2026-07-27 (issue #80, fjärde rundan). `min-width: 0` gjorde krympningen möjlig, men den saknade BOTTEN: när radens obligatoriska innehåll var överbelastat krympte hela statusen till noll, och badgen följde med ut ur bild trots sin egen `flex-shrink: 0` (den skyddar badgen mot att krympa, inte mot att FÖRÄLDERN kollapsar under den). Golvet är badgens egen bredd. Persona-vårdpersonal 2026-07-26 satte tillståndsmarkörens synlighet som ett HÅRT krav, alltså är det inte förhandlingsbart att den kan försvinna som bieffekt av trängsel. Med golvet kan flex aldrig krympa förbi badgen; blir raden ändå för trång är resultatet en synlig överspillning som går att UPPTÄCKA, i stället för ett element som tyst blir osynligt. Ett larm slår alltid ett tyst bortfall när det gäller patientsäkerhetsinformation. */ .kind-chat-header__handled-state { display: inline-flex; align-items: center; gap: var(--kind-space-2); flex: 0 1 auto; min-width: 7rem; } /* Tillståndsmarkören själv krymper ALDRIG (flex-shrink 0). Persona-vårdpersonal 2026-07-26 (utlåtande triage-kolumn): routnings- och tillståndsinformation får inte gömmas. Det är texten bredvid som får ge vika, aldrig badgen. `line-height: 1.2` (mot ärvda 1.55) är den enda höjdändringen: badgen går från ~28px till ~23px, vilket räcker för att identitetskolumnen (namnrad 24 + metarad) ska hållas under headerns 48px min-height, alltså kostar det klarmarkerade tillståndet NOLL extra header-höjd i stället för 27px. Teckenstorlek och kontrast är orörda, det är bara radens interna luft. */ .kind-chat-header__handled-state > .kind-badge { flex-shrink: 0; line-height: 1.2; } /* Actor + tid: full on desktop, hidden on mobile so the header stays low (the badge + toggle carry the state on a narrow screen; the actor/tid is clinical traceability that reappears at >=720px, never dropped from the DOM). PIXELBUDGET 2026-07-26: hela hanterad-statusen (badge + aktör + tid) sitter nu på identitetskolumnens METARAD, inte i 44px-ikonraden, så den kostar ingen extra header-höjd. Ellipsen håller en lång aktörssträng på en rad i stället för att bryta metaraden i två; hela strängen ligger kvar i `title` och i tillgänglighetsträdet, så inget innehåll försvinner, det komprimeras. `max-width: min(22rem, 100%)` gör 22rem-taket responsivt: i en smal kolumn ska fältet inte kräva 352px innan det ens börjar krympa. */ .kind-chat-header__handled-meta { display: none; color: var(--kind-color-text-muted); font-size: var(--kind-font-small); flex: 0 1 auto; /* GOLV 2026-07-27 (issue #80, fjärde rundan): `min-width: 0` gav ellipsen ett obegränsat krymputrymme, och när raden var överbelastad blev resultatet inte en avkortad sträng utan en NOLLBRED, alltså osynlig. Ett ellipserat "Eva Lund…" bär fortfarande information; noll bär ingen. 4rem = 64px räcker för några tecken plus ellipstecknet, och hela strängen finns i `title` och i den visuellt dolda syskonnoden. */ min-width: 4rem; max-width: min(22rem, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 720px) { .kind-chat-header__handled-meta { display: inline-block; vertical-align: bottom; } } /* WCAG 2.4.11 Focus Not Obscured (Minimum, NEW in 2.2): with the header sticky at top:0, a focused message / control in the scrolling thread must not sit hidden behind it. Reserve scroll-margin equal to the (now low) sticky-header height plus a buffer so the browser scrolls a focused element clear. Applied unconditionally (scroll-margin is inert until a focus-scroll happens). BOTH container classes are named: since the axe/K5 unification (2026-07-12) every chat surface renders the wrapper split (

around
    ), so the focusables are descendants of both; keeping both classes in the :where() list is deliberate robustness against either shape reappearing (the O1 regression class, tests/test_admin_chat_sticky_header_css.py). */ .kind-body--admin :where(.kind-chat__log, .kind-chat__log-list) :where(a, button, [tabindex]) { scroll-margin-top: var(--kind-admin-chat-focus-reserve, 5rem); } /* V1 (#55, chatt-yta 2.1 feedback-plan 2026-07-08): under the zoned 3-column layout .kind-chat-header is no longer position:sticky (it is an ordinary flex child above the internally-scrolling .kind-chat__log, see .kind-chat--zoned in kind_patient.css), so it can never overlay a focused message any more; the reserve above is provably unneeded there. Zero it so a focused row does not carry a phantom scroll offset inside its OWN internal scrollport. Placed after the base rule (equal specificity via the extra .kind-chat--zoned class + source order) so it wins only where the zoned class is present. (Sedan 2026-07-26, issue #82, är team_chat_visa.html OCKSÅ zonad och har samma kompakta macro-header, så den omfattas nu av samma regel i stället för att vara undantagen.) #73 (2026-07-12): BOTH zero-outs below are now scoped to WIDE viewports (min-width 900.02px, the complement of the max-width:900px narrow block further down). At <=900px the zoned column goes STATIC (it follows the .kind-arbetsvy__ko "static when stacked" convention) and the page scrolls normally under the compact sticky sitechrome, so the premise behind the zero-out ("nothing can overlay a focused element in the internal scrollport") no longer holds there: a focused log element must clear the sticky sitechrome in the PAGE scroller again. Un-scoped zeroing at narrow width would recreate exactly the K1a occlusion this fixes. At narrow the BASE reserve rule above stays live, and BOTH tokens (--kind-admin-chat-focus-reserve + --kind-header-height) are bumped to the compact-header footprint in kind.css's #73 block via a `body.kind-body--admin` (0,1,1) declaration. The element prefix is LOAD-BEARING (reviewer P2, 2026-07-12): the un-scoped 5rem base further up in THIS file sits on plain `.kind-body--admin` (0,1,0) and this file loads AFTER kind.css (base.html: kind.css before the per_domain_css block), so an equal-specificity bump in kind.css loses on source order and would leave the base rule's [tabindex] branch at 80px under a 125px header (a latent silent 2.4.11 regression for a future roving-tabindex pattern, even though the Tab path is saved by --kind-header-height + the patient file's focus-visible rule). With the prefix both tokens carry 10rem at narrow width regardless of file order; the effective winner is pinned in tests/test_admin_compact_nav_css.py. Breakpoint note (documented tradeoff): the max-width:900px / min-width:900.02px pair leaves a 0.02px band (fractional viewport widths on scaled displays) where NEITHER scope applies; the un-scoped base reserve still applies there, only the zero-out/unbind split is momentarily undefined. Same convention as the existing 719.98/720 pair in kind.css. */ @media (min-width: 900.02px) { .kind-body--admin .kind-chat--zoned :where(.kind-chat__log, .kind-chat__log-list) :where(a, button, [tabindex]) { scroll-margin-top: 0; } /* P2-1 (reviewer 2026-07-12): the axe fix put .kind-chat__log-list on the zoned ADMIN surfaces too, and the patient reserve rule `.kind-chat__log-list a:focus-visible, ... button:focus-visible` (kind_patient.css) has specificity (0,2,1), which BEATS the :where()-based zero-out above at (0,2,0), so keyboard focus in the zoned admin log would pick up var(--kind-header-height) as phantom top offset again. This reinforcement re-zeroes scroll-margin-top for exactly the duel's focus states at (0,3,0) (three real class-level selectors: .kind-body--admin + .kind-chat--zoned + :focus-visible; the :where() lists stay zero-specificity), which wins regardless of file order. The BOTTOM half of the patient rule needs no twin: its VALUE is var(--kind-composer-reserve), pinned to 0px on the zoned admin column below, so winning the cascade for it changes nothing. */ .kind-body--admin .kind-chat--zoned :where(.kind-chat__log, .kind-chat__log-list) :where(a, button):focus-visible { scroll-margin-top: 0; } } /* V1 (#55, chatt-yta 2.1 feedback-plan 2026-07-08): admin sizing for the shared .kind-chat--zoned structural rules (kind_patient.css). Mirrors the EXISTING arbetsvy kö-rail convention exactly (.kind-arbetsvy__ko below): position:sticky + a viewport-relative max-height + align-self:start, so BÅDA admin chat-surface columns (queue rail, chat) share one "chrome budget" and line up. (Var TRE kolumner till 2026-07-27; högerpanelen är borttagen, se .kind-arbetsvy.) Safe here (unlike the patient surface) because nothing of variable height sits ABOVE the chat pane in either admin template (chatt.html's article is the grid cell's only child; arbetsvy's center pane starts directly with the header), so a fixed calc() offset needs no flex chain to stay correct. #73 (2026-07-12): applies on WIDE viewports only in practice, at <=900px the media block further down makes the column static + caps the log internally (the narrow "static when stacked" mode). */ /* ============================================================================ #217 / VARIANT D: CHATTYTORNA HAR INGET KROM OVANFÖR KONVERSATIONEN. Sidhuvudet renderas inte på `.kind-body--vardchatt` (templates/base.html), så de tre termer `--kind-krom-budget` summerar (sidhuvud 81, mainens vaddering 12, slack 35) är alla noll där. Variabeln sätts om på KROPPEN, alltså ärver varje sticky höjdbudget i filen det nya värdet utan att någon av dem behöver veta att den här ytan finns. Det är hela poängen med regel 51-refaktoreringen: EN rad flyttar sju budgetar. Före den bar varje budget sin egen literal, och en kortare header hade gett konversationen exakt noll pixlar tillbaka. Uppmätt utfall vid 1440x900, tyngsta tillståndet: `.kind-chat__log` 571,22 till 707,22px, mot pixelbudgetens bindande golv 644 (docs/contracts/chat-pixel-budget.md, docs/design-proposals/217/BESLUT.md). ========================================================================== */ .kind-body--vardchatt { --kind-krom-topp: 0px; --kind-krom-budget: 0px; } .kind-body--vardchatt .kind-main { padding-block: 0; } .kind-body--vardchatt .kind-footer { display: none; } /* Luckan ovanför schemalagda-raden. Raden SJÄLV är orörd (44px träffyta plus 1px kant), det är bara mellanrummet som går 12 till 4. */ .kind-body--vardchatt .kind-schemalagda { margin-top: var(--kind-space-1); } .kind-body--admin .kind-chat--zoned { align-self: start; position: sticky; top: var(--kind-krom-topp); max-height: calc(100dvh - var(--kind-krom-budget)); /* #74 (2026-07-12): the 2.4.11 bottom reserve in kind_patient.css is now var(--kind-composer-reserve, calc(96px + safe-area)). In the zoned admin column the composer is STATIC (never overlays the log's internal scrollport), so any bottom reserve is pure phantom offset; pin the variable to 0px here. Working via the custom property sidesteps the specificity duel entirely (the patient rule KEEPS winning the cascade, but the value it applies is this 0px); the TOP margin has no such value-level seam and needs the explicit (0,3,0) reinforcement zero-out above instead (P2-1). kind_composer_mode.js deliberately skips publishing a measured value when the composer is not sticky, so this pin is never overridden by an inline value. Sedan 2026-07-26 (issue #82) är team_chat_visa också zonad och omfattas alltså av samma pin; base- fallbacken tjänar därmed ingen levererad yta längre. */ --kind-composer-reserve: 0px; } /* ---- KOLLEGIE-CHATTENS HÖJDKEDJA (issue #82, delsteg 8, 2026-07-27) -------- * * `.kind-chat--zoned` GER inte kolumnen höjd, den FÖRDELAR höjd den redan har: * artikeln är `display:flex; flex-direction:column` och loggen `flex:1`, vilket * bara betyder något om någon förälder gör artikeln högre än sitt innehåll. Det * gör arbetsvyn (grid-cell i `.kind-arbetsvy`) och chatt.html (grid-cell i * `.kind-chatt-layout`), båda med tillräckligt lång tråd för att slå i * `max-height`-taket. Kollegie-chattens artikel är DIREKT barn till * `main.kind-main`, som är `display:block`, så flexkedjan bryts och artikeln * sizear till sitt innehåll. * * Uppmätt i riktig webbläsare 2026-07-27 vid 1440x900, EFTER delsteg 7: * BODY h=900 display:flex min-height:900px (body.kind-body, kind.css) * MAIN h=628 display:BLOCK flex:1 1 0% <- kedjan bryts här * ARTICLE h=222 display:flex flex:0 1 auto <- 54 header + 53 composer * + 107 logg = innehåll * Andelen såg ut att gå 19 -> 48 procent, men det var en synvilla: loggen växte * inte, KOLUMNEN krympte (561 -> 222). `max-height` är ett TAK, inte en höjd, * så den kan aldrig få något att växa. Min 87-procentsuppskattning i delsteg 7 * förutsatte en kedja som inte finns på den här sidan. * * Fixen sluter kedjan på SIDAN, inte på elementet: `.kind-main` är delad över * hela vårdgivarytan (patientlistan, bokningar, formulär, allt), så ett * oscopat `display:flex` där hade träffat varenda admin-sida. Sidan bär därför * en egen skalklass, `kind-body--team-chat`, satt i team_chat_visa.html. * * Varför INTE `.kind-body--chat`: den är patientytans skal ("patient/chatt.html * ALONE", kind_patient.css) och drar med sig flikradsreserven, döljandet av * `.kind-snabbknapp` och egen sidfotshantering, alltså fel krom på en * vårdgivaryta. Och nej, vårdgivarytan hade ingen egen motsvarighet att följa: * varenda admin-mall bär bara `kind-body--admin`, så det här är den FÖRSTA * admin-instansen av ett etablerat mönster, inte ett tredje sätt att göra * samma sak. * * `align-self: stretch` är LOAD-BEARING, inte städning. Basregeln ovan sätter * `align-self: start`, vilket i en GRID-cell styr blockaxeln (det är dess syfte * på arbetsvyn). I en flexKOLUMN är align-self INLINE-axeln, så `start` hade * krympt artikeln till sin innehållsbredd i stället för att fylla kolumnen: en * höjdfix som tyst hade gjort chatten smal. * * `min-height` lämnas medvetet orörd (ärver 0 från `.kind-chat--zoned`). Mainen * behåller alltså sitt innehållsgolv, så på en mycket kort viewport växer main * och SIDAN skrollar i stället för att loggen krossas. Ett eget min-height-golv * på loggen är uttryckligen avrått i #73-noten längre ned (det trycker bara * composern under vecket), och grannytorna har inget sådant golv heller. * * Elementprefixet `body.` ger (0,2,1) och vinner därför över basregelns (0,2,0) * oavsett källordning, samma disciplin som redan räddat den här filen två * gånger (patientnamnets clamp och headerns padding). */ body.kind-body--team-chat .kind-main { display: flex; flex-direction: column; } body.kind-body--team-chat .kind-chat--zoned { align-self: stretch; flex: 1 1 auto; } /* ---- KOLLEGOR BÄR BANDET (web#2312, Alex beslut 2026-10-16) --------------- * * Kollegiechatten renderar vårdgivarbandet (templates/base.html), till skillnad * från de två patientchattytorna. Bandet är `position: fixed` längst ned, så * utan en reserv hade det lagt sig över skrivmodulen. Två termer, samma tal: * * * mainens `padding-bottom` lyfter kolumnens nederkant över bandet, på * ALLA bredder (vid <=900px är kroppen bunden till 100dvh och mainen en * krympbar flexkolumn, så kolumnen krymper och loggen tar smällen); * * `--kind-krom-budget` sänker kolumnens tak (`max-height: calc(100dvh - * budget)` ovan) lika mycket, så att det sticky taket inte kan göra mainen * högre än viewporten och skjuta skrivmodulen in under bandet. * * Talet är bandets egen token plus mainens vanliga andrum, så reserven följer * bandet om det växer (safe-area-insetet, #277). Fallbacken 80px är bandets * höjd, för den händelse `html:has(.kind-vardnav)` inte matchar. * * `body.` ger (0,2,1) mot `.kind-body--vardchatt .kind-main` (0,2,0), i båda * media-lägena, oavsett källordning. Loggen förblir sidans skrollare (#156), * alltså går tråden att skrolla medan bandet ligger kvar. */ body.kind-body--team-chat { --kind-krom-budget: calc(var(--kind-vardnav-reserve, 80px) + var(--kind-space-2)); } body.kind-body--team-chat .kind-main { padding-bottom: calc(var(--kind-vardnav-reserve, 80px) + var(--kind-space-2)); } /* Fokusreserven (SC 2.4.11, samma form som hubbytornas regel längre ned): vid extrem textskala på smal skärm spiller skrivmodulen ut och sidan skrollar (se "INGET overflow:hidden" nedan). Då ska en inrullad kontroll i skrivmodulen parkeras ovanför bandet, inte under det. Bara skrivmodulen: loggens innehåll rullas i loggens egen skrollport, där bandet inte ligger. */ body.kind-body--team-chat .kind-chat__compose :where(button, textarea) { scroll-margin-bottom: max(6rem, calc(var(--kind-vardnav-reserve, 0px) + 5px)); } /* #75 (qa browserverifiering 2026-07-12, K3): the zoned column is sticky, so its overflow FOLLOWS the page scroll; page scrolling can NEVER reveal popover content below the fold (measured: the schemalagg pane's submit + Avbryt sat 142-192px under viewportbotten at max scroll on BOTH admin surfaces at 1280x800; an unforced Playwright click timed out). Root cause: the V1 rule in kind_patient.css gives the popover wrapper + the schemalagda panel `flex: 0 0 auto` (flex-shrink 0), so when their content alone exceeds the column's viewport bound (max-height above) they poke out of the sticky box instead of yielding. Fix = let flex layout do the viewport binding: the two variable-height panels become SHRINKABLE, and what no longer fits scrolls INTERNALLY. (An earlier claim here, "the log, flex-basis 0, already yields all its space first", was DISPROVEN by qa:s 2118 deploy measurement: `flex: 1` is basis 0%, and a percentage basis in this indefinite-height column resolves as CONTENT, so the log shrinks PROPORTIONALLY with the panels instead of first; see the shrink-priority rule below.) Each box is its OWN scrollport (overflow-y on the flex item itself), because overflow clipping works off the item's USED box size, which flex shrinking always produces; a percentage max-height on a CHILD was rejected here (reviewer P1-1, 2026-07-12): the wrapper's post-flex height only counts as DEFINITE for percentage resolution when the flex CONTAINER's main size is definite (css-flexbox-1 §9.8 + CSS2 §10.7), and .kind-chat--zoned carries only max-height, never a definite height, so max-height:100% on the panel risks resolving to none and leaving the mechanism inert. This is the qa-recommended internal scroll, sized by the flex algorithm instead of a hand-tuned calc() that cannot know the surrounding chrome. The panel's box-shadow is clipped at the wrapper edge while scrolling (cosmetic, accepted). The emoji popover (position:absolute, anchored in the compose form, NOT inside these boxes) is untouched, and the column itself keeps its deliberate visible overflow (kind_patient.css design note). Residual (honest): below ~430px viewport height the NON-shrinkable header + compose alone exceed the column bound and can still overflow, and none of this is browser-proven by render tests; qa:s geometric deploy verification (1280x800 + 1280x500, oforcerade klick) is the closing evidence for issue #75. */ .kind-body--admin .kind-chat--zoned .kind-compose-popover, .kind-body--admin .kind-chat--zoned .kind-schemalagda { flex-shrink: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* #75 P3-följdnit (qa deploy-sweep 2026-07-12 21:18): with the pane open at 1280x800 the flex distribution left the popover scrollport a 28px SLIT (4px at 1280x500) while the LOG kept 342px (measured: zon 672 = header 72 + logg 342 + compose 191 + popover 28 + schemalagda 3): flex shrink is PROPORTIONAL to factor x base, and the log's base (thread content, thousands of px) makes it shrink alongside the panels rather than before them. Reachable-but-miserable: a 529px form through a 28px window. Fix = shrink PRIORITY, not floors: flex-shrink 999 makes the log's shrink weight dominate totally, so the log yields toward its min-height:0 floor FIRST (qa:s förslagsriktning "låt loggen krympa mot sitt min före popovern"); only the deficit remaining after the log is empty reaches the shrink-1 panels. Worked math on qa:s numbers (base sums: header 72 + compose 191 + popover ~530 + schemalagda ~60): * 1280x800 (bound 672): remaining deficit 181 -> popover ~367px window (was 28), schemalagda ~42px; * 1280x500 (bound 372): remaining deficit 481 -> popover ~98px (was 4), schemalagda ~11px. Trade-off (accepted, P3): the THREAD collapses toward 0 while the pane is open on tight viewports; closing the pane restores it (the wrapper's content returns to ~0 and the freed space goes back to the log). The alternative, a min-height floor on the popover when open, was rejected: a min violation transfers the overflow back OUT of the sticky column, which is exactly the #75 defect class. Default state (pane closed): the wrapper's base is ~0, so there is no meaningful deficit to distribute and the log keeps essentially all its space; the flex-999 weight only changes the SHARE of any shrink, which is negligible when nothing needs to shrink (P3-3, reviewer 2026-07-12: NOT "exactly as before", the pre-999 rule also shrank the log proportionally, just never with a deficit worth noticing in the closed state). Numbers are model-based (rule 41 honesty: percentage-basis-resolves-as-content is inferred from qa:s measurement, not from spec certainty); qa:s deploy verification on 2.1.9 is the closing evidence. */ .kind-body--admin .kind-chat--zoned .kind-chat__log { flex-shrink: 999; } /* HÄR LÅG `.kind-schemalagda:focus-visible` (axe P3-2, qa deploy-sweep 2026-07-12): en explicit fokusring för sektionen, motiverad av att den bar `tabindex="0"` som fokuserbar scrollport. Regeln är BORTTAGEN 2026-07-26: pixelbudgeten byggde om panelen till native
    /, och samma ändring tog bort sektionens tabindex (tomtillståndet har numera en , som är fokuserbar av sig själv, så ett tabindex hade bara lagt till ett dött tabbstopp). Utan tabindex kan sektionen inte längre få fokus, alltså kunde regeln aldrig lösa ut. Fokusindikatorn är inte borta, den flyttade: `.kind-schemalagda__summary: focus-visible` (samma accent-token och offset) sitter på det element som FAKTISKT tar fokus. En kvarlämnad död fokusregel är sämre än ingen, den antyder att ytan är fokuserbar och kan få nästa granskning att kryssa av en a11y-punkt som inte längre gäller. */ /* #73 (qa deploy-verify d9a037f punkt 3 + a11y-svep K1a, 2026-07-12): vid smal bredd slapper den zonade kolumnen sitt sticky+max-height-bundna lage och foljer sidflodet, exakt den konvention grannspalterna redan anvander (.kind-arbetsvy__ko: "static when stacked", max-width:900px ovan; samma brytpunkt som .kind-chatt-layout/.kind-arbetsvy stackar pa). Varfor: uppmatt vid 320x568 far loggen 24px clientHeight av den fasta 440px-budgeten (chat-header ~124px + composer ~266px ater resten, V4:s verktygsrad okade composern), och eftersom kolumnen ar sticky kan SIDSCROLL aldrig avsloja det som hamnar under max-height-vecket (samma rotgeometri som K3/#75). En min-height-golv pa loggen INUTI den bundna kolumnen hade bara tryckt composern under vecket, dvs. aterinfort Skicka-P0:n i ny form. Statisk kolumn + internt loggtak ar P0-omarbetningens bevisade patientmonster (.kind-body--chat-blocket i kind_patient.css). Mekanik vid <=900px: * kolumnen statisk, sidan skrollar normalt; composern nas alltid via sidscroll (den ar redan position:static har, regeln ovan ar inte media-scopad); * loggen behaller sin interna skrollport via ett eget viewport-relativt tak: 34rem approximerar kringkromet vid 320px (kompakt sitechrome ~7.8rem + chat-header ~7.75rem + composer ~16.6rem + marginaler ~1.5rem) och 16rem-golvet (= 256px, mot 24px uppmatt fore, 10.7x) haller tradfonstret anvandbart nar viewporten ar kortare an sa; monstret och sifferresonemanget speglar patienttakets max(16rem, 100dvh - 22rem); * overscroll-behavior: contain pa loggen (delade zonregeln i kind_patient.css) galler oforandrat, sa hjulscroll vid tradgransen kedjar inte till sidan; * --kind-composer-reserve: 0px-pinnen i basregeln ovan galler AVEN har, medvetet: composern ar statisk i flodet under loggen i bada lagena och kan aldrig overlagra ett fokuserat element underifran (#74 reverseras alltsa INTE av detta block); toppreserven vid smal bredd hanteras av tokenbumparna i kind.css #73-blocket (10rem, foljer kompakta headern). Rendertesterna (tests/test_admin_compact_nav_css.py) pinnar reglerna i CSS-texten; geometrin bevisas av qa pa deploy per #72-disciplinen. */ @media (max-width: 900px) { .kind-body--admin .kind-chat--zoned { position: static; max-height: none; } .kind-body--admin .kind-chat--zoned .kind-chat__log { max-height: max(min(16rem, 40dvh), calc(100dvh - 34rem)); } } /* web#487 (uppmatt av frontend-web-agenten under web#470, roll vardpersonal, /admin/chatt/ + /admin/arbetsvy/, cirka 450 tecken i svarsfaltet): vid 320x568 med text i svarsfaltet var skrivpopoverns SYNLIGA hojd 0 px med PDF- eller fotorutan oppnad och fil vald, och ingen rullning kunde visa rutan. Vid 375x812 var 202 px synligt av rutans cirka 240 px fran falt till Dela, sa Dela hamnade utanfor. Menyposten gick inte heller att na med ett oforcerat musklick vid 320 (`klickBlockerat: true`). MEKANISMEN ar #75-regeln hogre upp i filen, inte den residual-not om "under cirka 430 px hojd" som arendet pekade pa (bada de uppmatta hojderna, 568 och 812, ligger OVER 430). #75 gor popover-omslaget till ett KRYMPBART eget skrollfonster (`flex-shrink: 1; min-height: 0; overflow-y: auto`) for att binda det inuti den STICKY, max-height-bundna kolumnen. Vid <=900px finns den kolumnen inte langre: blocket precis ovanfor gor den `position: static; max-height: none`, och #156-blocket nedanfor binder i stallet HELA SIDAN till 100dvh. #75-reglerna ar dock inte media-scopade, sa omslaget fortsatter att vara krympbart aven har - och nar loggen (shrink 999) ar nerkrossad till sitt min-height: 0-golv traffar hela det aterstaende underskottet omslaget, som har shrink 1 och inget golv. Resultatet ar exakt det uppmatta: ett skrollfonster med 0 px anvand hojd, som dessutom KLIPPER sitt innehall (`overflow-y: auto`) sa att varken sid- eller kolumnskroll kan avsloja det. Innehallet ligger kvar i layouten vid omslagets origo, vilket ocksa ar varfor skrivformularet mats som det som tar musklicket pa menyposten. FIXEN ar att slappa krympningen just dar den inte langre behovs: vid <=900px ar omslaget ett vanligt flodesblock igen (`flex: 0 0 auto`, synligt overflow). Det som inte ryms spiller da UT och dokumentet skrollar. VARFOR DET AR SAKERT HAR, men inte i den sticky kolumnen: #75 avvisade medvetet ett golv pa popovern ("a min violation transfers the overflow back OUT of the sticky column", noten vid flex-shrink: 999 ovan). Det argumentet galler en sticky box, vars overflow FOLJER sidskrollen och darfor aldrig kan rullas fram. Vid <=900px ar kolumnen statisk, och #156-blocket nedanfor slar uttryckligen fast motsatsen for just den har ytan: vardgivarskalet har medvetet INGET `overflow: hidden` (till skillnad fran patientskalet, som har fasta tabbar), eftersom "en utspilld modul ar inte ockluderad utan bara nedanfor vecket, och DA ar sidskroll raddningen och inte defekten". Samma resonemang, samma yta, nu tillampat pa popovern. PRISET, uttalat: med rutan oppen pa en kort viewport kan sidan behova skrollas for att fa hela rutan i bild, och traden ar da nerkrossad (det var den redan, #75:s dokumenterade avvagning). Det ar en bytesaffar mot 0 px synligt och ett oatkomligt Dela, dvs. den sista bekraftelsen fore en journalford utlamning. >900px ar ORORT: reglerna har ar media-scopade och #75:s mekanism i den sticky kolumnen star kvar oforandrad (pinnat som negativ kontroll i tests/test_487_smal_skrivpopover_css.py). SPECIFICITET: `body.kind-body--admin ...` ger (0,3,1) och slar darfor #75-regelns (0,3,0) utan att luta sig mot kallordning, samma disciplin som #156-blocket nedanfor anvander mot samma kedja. ARLIGHET (regel 41): reglerna ar mekanismbevisade, inte browsermatta har. Render-testet pinnar reglerna; geometrin (fyra matpunkter, oforcerat klick, xxlarge) mats av den incheckade riggen e2e/487-smal-skrivpopover-matning.mjs, som kraver en lokal Playwright och alltsa inte kan koras i CI-lanen (.github/workflows/ci.yml: DB-fri, ingen Playwright). */ @media (max-width: 900px) { body.kind-body--admin .kind-chat--zoned .kind-compose-popover { flex: 0 0 auto; overflow: visible; } } /* KIND-MOB-02 (UAT 2026-07-16, simulerade tangentbords-viewports 390x544 / 412x595): pa en KORT smal viewport later 16rem-golvet ovan loggen ata sa mycket av hojdbudgeten att composern (och darmed Skicka-raden) borjar under vecket; uppmatt sat Skicka-botten ~40px under 595px-viewporten. Nar hojden ar tangentbords-kort ar composern arbetsytan och traden sekundar, sa golvet sanks till 10rem (160px tradfonster, fortfarande lasbart) vilket frigor 96px och later composern fa plats utan scroll. Kolumnen forblir STATISK (position/sticky rors INTE har: #73/#74/#75- blocken ovan beskriver P0-klassen en sticky composer aterinfor). Samma specificitet som basregeln ovan, sa KALLORDNINGEN (detta block EFTER) ar det som vinner vid <=700px hojd; testet pinnar bada. OBS dvh-honesty: base.html satter numera interactive-widget=resizes-content (UAT-01- mergen), sa Chrome/Android krymper layout-viewporten (och dvh) nar tangentbordet oppnas och detta block biter aven dar; iOS/Safari saknar stod och krymper bara visual viewport, dar fangas fallet av input-assisten i kind_composer_popover.js. */ @media (max-width: 900px) and (max-height: 700px) { .kind-body--admin .kind-chat--zoned .kind-chat__log { max-height: max(min(10rem, 30dvh), calc(100dvh - 34rem)); } } /* ---- CP-14 (#99): golvet far inte overstiga vad viewporten kan avvara ----- * * `min(, )` i bada reglerna ovan. Skalet ar * MATT och inte estetiskt. * * `rem` foljer anvandarens textskala. Vid xxlarge (rot 24px) blev 10rem 240px * och 16rem 384px, samtidigt som `calc(100dvh - 34rem)` gick NEGATIV (34rem = * 816px mot en 664px hog viewport), sa golvet vann alltid och loggen KRAVDE * 240px oavsett vad som fanns kvar. Uppmatt pa deployen 2026-08-04 vid 320x664 * xxlarge: skrivfaltets underkant lag pa 742px (vard-chatt) och 746px * (vard-kollegiechatt) mot en 664px hog viewport, alltsa var skrivfaltet inte * synligt samtidigt som senaste meddelandet. Det ar matt 5 i * docs/contracts/classic-plus-utfall.md, och det gick sonder for att ett golv * som skalar med texten kan bli storre an rummet det star i. * * ANDELARNA ar harledda, inte valda: varje tak ligger precis OVANFOR sin egen * regels rem-golv vid NORMAL textskala pa den kortaste viewport regeln styr, * sa taket kan bara bita nar textskalan blast upp golvet. * 10rem-regeln styr hojder <= 700px. Kortaste rimliga 568: 160/568 = 28.2%, * alltsa binder 30dvh (170px) aldrig vid normal skala. * 16rem-regeln styr hojder > 700px. Kortaste 701: 256/701 = 36.5%, alltsa * binder 40dvh (280px) aldrig vid normal skala. * * VAD DET KOSTAR, arligt: vid xxlarge krymper tradfonstret fran 240 till 199px * pa en 664px viewport, alltsa fran cirka 6.6 till 5.5 textrader. Bytet ar ett * skrivfalt som gar att se och trycka pa. Ett osynligt skrivfalt ar inte en * mindre lasbar chatt, det ar en chatt man inte kan svara i. * * Vid NORMAL textskala andras ingenting pa nagon matt viewport, vilket ar * avsikten: detta ar en atgard mot textskalans inflation, inte en generell * nedskarning av tradfonstret. Pinnat i tests/test_admin_compact_nav_css.py, * matt av e2e/matt5-chattgrind.mjs. */ /* ========================================================================== * #156: VARDGIVARENS CHATTYTOR BINDS TILL VIEWPORTEN VID MOBILSTACKNING * * Utfallskontrakt: eng-nordic-care-agents docs/contracts/vardgivarchatt-viewportbindning.md * Matinstrument: e2e/dokskroll-matning/grind.mjs (stub-render, Pattern 9) * * ---- MEKANISMEN, HARLEDD OCH INTE OVERTAGEN ------------------------------ * * Rapporten (docs/acceptance/dod9-jamforelsematris-2026-08-09.md 1.1) pekade ut * arbetsvyns 280px-panel som orsak. Panelen ar den STORSTA bidragsgivaren men * INTE mekanismen. Uppmatt i webblasare mot stub-rendret, 390x664 normal, * arbetsvyn: * * sidans flodeshojd 1564,78px mot viewport 664 * .kind-header (sitekrom) 186,19 * .kind-main padding 36,00 * .kind-chat-header + marginal 136,80 * .kind-chat__log (takad) 160,00 * .kind-chat__compose 53,00 * .kind-schemalagda + marginal 56,00 * aside + marginal + grid-gap 684,80 * .kind-footer 236,00 * * Ablation, samma matpunkt: med ENBART asiden borttagen kvarstar 200px * dokumentskroll och chattheadern lamnar anda viewporten (matt topp -1,81). * Och kollegie-chatten, som saknar aside HELT, bar samma defekt (65px skroll * vid normal, 507px vid 320 xxlarge, skrivfaltet OTRAFFBART vid xxlarge pa * fyra av fem bredder). Att atgarda panelen hade alltsa lamnat tva ytor * trasiga med identisk mekanism (regel 27 korollarium 2). * * MEKANISMEN ar att INGENTING binder sidans flodeshojd till viewporten vid * <=900px. Kolumnen slapper sitt sticky+max-height-lage (blocket ovan) och * loggens interna tak, `max(min(10rem, 30dvh), calc(100dvh - 34rem))`, ar en * HANDRAKNAD uppskattning av kringkromet plus ett golv som avsiktligt slar * uppskattningen. Bada delarna ar blinda for vad som faktiskt star i flodet: * 34rem = 544px reserverades for ett krom som uppmatt ar 704px UTAN asiden och * 1389px MED den. En sidas hojd som ar summan av oberoende block kan darfor * inte annat an spranga viewporten, och da bar dokumentskrollen ut den * STATISKA kolumnen med chattheader och skrivmodul. * * ---- FIXEN: FLEXALGORITMEN MATER DET UPPSKATTNINGEN GISSADE -------------- * * Skalet far en DEFINIT hojd (100dvh), mainen blir en flexkolumn, chattzonen * `flex: 1 1 auto; min-height: 0` och loggen ar zonens enda flexibla barn * (delade `.kind-chat--zoned`-reglerna i kind_patient.css: `flex: 1; * min-height: 0; overflow-y: auto`). Loggen absorberar darmed exakt det som * blir over, uppmatt i stallet for gissat, och taket ovan overrids har * (`max-height: none`) eftersom en approximation som SYSTEMATISKT * UNDERSKATTAR kringkromet ar en trasig rokdetektor och inte en sakerhet * (regel 49c). Taket star kvar i filen som fallback for varje zonad yta som * INTE bar skalklassen. * * ---- INGET overflow:hidden, OCH DET AR LOAD-BEARING ---------------------- * * Patientytans skal (`.kind-body--chat`, kind_patient.css) LASER sidskrollen * med `overflow: hidden`, eftersom dess fasta tabbar annars ockluderar en * utspilld skrivmodul (UAT-01B P0). Vardgivarytorna har INGEN fast bottenrad, * alltsa ar en utspilld modul inte ockluderad utan bara nedanfor vecket, och * DA ar sidskroll raddningen och inte defekten. * * Det ar inte en detalj. Uppmatt vid 320x664 xxlarge ar de ICKE KRYMPBARA * skenorna 675,60px (sitekrom 242,22 + mainpadding 66 + chattheader 196,50 + * skrivmodul 69 + schemalagda 101,90) mot en 664px hog viewport, alltsa mer an * viewporten AVEN med loggen pa noll. Med `overflow: hidden` hade skrivmodulen * KLIPPTS bort och blivit oatkomlig; nu spiller den ut och sidan skrollar, * exakt dagens beteende och exakt det tillstand mattet 5-punktkravet 675,66 * i docs/contracts/classic-plus-utfall.md ar bokfort i. Fixen far inte gora * den punkten samre, och en klippande bindning hade gjort det. * * Det ar ocksa varfor loggen INTE far ett golv har. Den retirerade V1-kedjan * pa patientytan slutade tyst binda just for att ett 16rem-golv vagrade * krympa (se kind_patient.css). `min-height: 0` utan golv ar hela skillnaden. * ========================================================================== */ @media (max-width: 900px) { /* BADE height OCH min-height, med SAMMA uttryck. Anvand hojd loses som max(height, min-height), sa basregelns `min-height: 100vh` (kind.css, 0-1-1) hade tyst annullerat bindningen. `body.kind-body.kind-body--vardchatt` ar 0-3-1 och vinner darfor oavsett kallordning, samma disciplin som patientytans `body.kind-body.kind-body--chat`. */ body.kind-body.kind-body--vardchatt { height: 100dvh; min-height: 100dvh; } .kind-body--vardchatt .kind-main { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; /* REN ANDRUM, aldrig en traffyta och aldrig en textstorlek: mainens block-vaddering ar 18px i var ande och ger 36px som i det bundna skalet tas RAKT ur konversationsfonstret. Samma kompaktion och samma motivering som patientytans `.kind-body--chat .kind-main` (padding-top space-3) och RETEST-03-blocket i kind_patient.css. Sidopaddingen ar orord, den bar radlangden. */ padding-block: var(--kind-space-2); } /* Sidfoten bar ingen lank och ingen atgard, bara varumarke, en juridisk mening, versionsstrangen och copyright, och den kostar 236px vid normal och 479,50px vid xxlarge, alltsa mer an hela konversationsfonstret. Patientytans chattskal doljer den redan pa samma grund (`.kind-body--chat .kind-footer`, sedan V1). Den juridiska meningen finns oforandrad pa varje annan yta i portalen, och doljandet galler ENBART mobilstackningen: >900px ar sidfoten orord. */ .kind-body--vardchatt .kind-footer { display: none; } /* Layoutbehallaren maste ocksa bli en flexkolumn, annars stannar flexkedjan vid mainen och chattzonen sizear till sitt innehall igen (exakt det som brot kollegie-chatten fore issue #82, se "KOLLEGIE-CHATTENS HOJDKEDJA" ovan). Kollegie-chattens artikel ar direkt barn till mainen och behover ingen behallare har. */ .kind-body--vardchatt .kind-arbetsvy, .kind-body--vardchatt .kind-chatt-layout { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: var(--kind-space-2); } /* 0-3-1: maste sla `.kind-body--admin .kind-chat--zoned` (0-3-0) i BADA media-blocken ovan utan att luta sig mot kallordning. `position: static` och `max-height: none` darifran ar oforandrade och onskade. */ body.kind-body--vardchatt .kind-chat--zoned { flex: 1 1 auto; min-height: 0; /* `align-self: stretch` ar LOAD-BEARING och inte stadning, och huset har redan betalat for den har lardomen en gang (se "KOLLEGIE-CHATTENS HOJDKEDJA" ovan). Basreglerna satter `align-self: start`, vilket i en GRID-cell styr BLOCKaxeln, dar det ar deras syfte. I en flexKOLUMN styr align-self INLINE-axeln, sa `start` later i stallet boxen sizea till sin INNEHALLSBREDD. Uppmatt utan den har raden vid 320x664 xxlarge: asiden blev 342,80px bred i en 296px behallare och gav dokumentet 35px HORISONTELL skroll, alltsa ett 1.4.10-brott infort av en hojdfix. */ align-self: stretch; } body.kind-body--vardchatt .kind-chat--zoned .kind-chat__log { max-height: none; } /* SIDOPANELEN kostar en summary-rad i stallet for hela sitt innehall. `flex: 0 0 auto` sa den aldrig ater av konversationens fonster, och nar vardpersonalen FALLER UT den far den en egen skrollport i stallet for att trycka ut skrivmodulen igen. `50dvh` ar viewport-relativt och alltsa alltid definit; ett procenttak pa ett flexbarn hade kunnat losas till `none` i en behallare utan definit huvudstorlek (css-flexbox-1 §9.8), exakt den fallan #75 dokumenterar hogre upp i filen. `overscroll-behavior-y: contain` sa ett hjul inne i panelen inte kedjar vidare till sidan, samma konvention som chattloggen. */ .kind-body--vardchatt .kind-chatt-aside { flex: 0 0 auto; /* Se noten om align-self vid chattzonen ovan. Det var HAR defekten mattes: 342,80px i en 296px behallare. */ align-self: stretch; max-height: 50dvh; overflow-y: auto; overscroll-behavior-y: contain; margin: 0; /* Vaddering och marginal runt en ENDA hopfalld summary-rad kostade uppmatt 34px vid normal och 44px vid xxlarge, alltsa mer an en tredjedel av konversationsfonstret vid stor textskala. Vadderingen flyttas till detaljens OPPNA lage nedan, sa den betalas bara nar det finns innehall att vadda. Ram, radie och bakgrund (`.kind-nu`) star kvar och avgransar panelen aven hopfalld. */ padding: 0; } .kind-body--vardchatt .kind-sidopanel-fold[open] { padding: 0 var(--kind-space-3) var(--kind-space-3); } /* Zonrubriken ar summaryns tvilling vid mobilstackning, och tva rader som sager samma sak kostar 32px av konversationen. Rubriken tas INTE ur DOM:en: `aria-labelledby` pekar pa den, och accname anvander refererad text aven nar elementet ar visuellt dolt, sa landmarket behaller sitt namn. Samma teknik som .kind-visually-hidden i kind.css och samma val som CP14-KOZON-MOBIL gjorde for ko-zonens

    . */ .kind-body--vardchatt .kind-chatt-aside > .kind-profile-section__title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* ============ Search + filter row ============ */ .kind-filter-row { display: flex; flex-wrap: wrap; gap: var(--kind-space-3); align-items: flex-end; margin-bottom: var(--kind-space-4); } .kind-filter-row .kind-field { flex: 1; min-width: 220px; } /* --------------------------------------------------------------------------- * P2-4 (#99, briefen §4.3 "En primär handling per område"): FILTERCHIP. * * VAD SOM VAR FEL, uppmätt och inte tyckt (1440x900, lokal mätserver * 2026-08-08, `e2e/gapb-matning/fore.json`): verktygsraden bar TRE knappar med * `--kind-color-accent`-fyllning, `Sök` 78,73x50, `Aktiva` 97,53x45,19 och * `Sök på tagg` 139,97x50, plus `Filtrera` när flera verksamheter finns. Fyra * likvärdiga primärknappar i ett område betyder att inget är primärt. Samtidigt * bär sidans VERKLIGA primärhandling, att öppna en patientkonversation, ingen * primärstil alls: den är ett radklick. Ögat drogs alltså systematiskt till * kontrollerna och bort från kön, vilket är precis §7.1:s acceptanskriterium * "brådskande och oläst kan identifieras på mindre än fem sekunder utan filter". * * VARFÖR CHIP OCH INTE BARA "SEKUNDÄR": `Aktiva` / `Visa alla` är inte en * handling utan ett TILLSTÅNDSVAL över vilken delmängd som visas. Att ge dem * knappvikt (primär ELLER sekundär) läser dem som något man UTFÖR. En chip läses * som något man ÄR i. `Sök på tagg` och `Filtrera` är däremot riktiga * submit-handlingar och blir sekundärknappar, inte chips. * * FORMEN ÄR INTE EN KAPSEL. Briefen §4.3 säger uttryckligen "undvik stora * kapslar som standardform", så chippet ärver husets `--kind-radius` (10px) via * `.kind-btn` och deklarerar ingen egen radie. Ordet "chip" beskriver vikten, * inte en pillerform. * * A11Y-GOLVEN ÄR ORÖRDA, och det är avsiktligt uttryckt i vad regeln INTE gör: * * ingen `min-height` / `min-width` deklareras, så `.kind-btn`-golvet 44px * (SC 2.5.8) står kvar oförändrat; * * typskalan är `--kind-font-small` = 14px, alltså över husets 13px-golv * (`tests/test_ingen_skarmtext_under_13px`); * * `--kind-color-border` #788FA6 är 3,34:1 mot vitt, alltså över SC 1.4.11:s * 3:1 för en komponentkant, och `--kind-color-accent` #1769D2 är 4,76:1 mot * `--kind-color-accent-bg` #EFF4FC, alltså över SC 1.4.3:s 4,5:1 för text. * * WCAG 1.4.1: det valda chippet bär en synlig BOCK utöver fyllningen, så * tillståndet aldrig hänger på färg ensam. `aria-current="true"` bär samma * tillstånd för hjälpmedel, och bocken är `aria-hidden` så AT inte läser * valet två gånger. * * `[aria-current="true"]` i stället för en egen `--vald`-modifierare: tillståndet * finns REDAN i DOM:en som `aria-current`, och en parallell klass hade kunnat * drifta isär från den. Ett tillstånd, en bärare. * * SIDOEFFEKT PÅ MÅTT 3, uppmätt och attribuerad inom EN miljö (1280x800 normal, * samma mätserver, samma data, tre körningar): första patientradens y-position * 416,17 FÖRE, 385,98 med enbart den här ändringen, alltså **-30,19px**. * Chippen är 44px höga mot primärknappens 45,19, och den kortare `Sök tagg` * ändrar dessutom var verktygsradens flexrad bryter. Det var inte målet med * ändringen, men det pekar åt rätt håll och är därför bokfört i stället för * upptäckt senare som en oförklarad avvikelse. */ .kind-filterchip { padding: var(--kind-space-2) var(--kind-space-4); font-size: var(--kind-font-small); font-weight: 600; background: transparent; color: var(--kind-color-text); border-color: var(--kind-color-border); } .kind-filterchip:hover { background: var(--kind-color-surface-muted); } .kind-filterchip[aria-current="true"] { background: var(--kind-color-accent-bg); color: var(--kind-color-accent); border-color: var(--kind-color-accent); } .kind-filterchip__bock { font-weight: 700; } /* --------------------------------------------------------------------------- * CP-05 (#90) INMATNINGSGRUPP: fältet och dess knapp på SAMMA rad, inuti * `.kind-field`. * * DEFEKTEN. `.kind-filter-row` har `align-items: flex-end`, alltså justeras * knappen mot FÄLTGRUPPENS underkant. Fältgruppen är etikett plus inmatning * plus HJÄLPTEXT, så knappen linjerades mot hjälptextens underkant och inte * mot inmatningens. Uppmätt på /admin/patienter: inmatningens mittlinje * y=370, knappens y=401.5, alltså 31px glapp. Samma mönster på "Filtrera" och * "Sök på tagg". * * FIXEN ÄR STRUKTURELL, inte en justering av justeringen. Knappen ligger nu i * samma grupp som inmatningen, så de delar rad by construction och kan inte * glida isär igen när en hjälptext läggs till eller tas bort. Att i stället * absolutpositionera hjälptexten hade tagit den ur flödet och lagt den ovanpå * nästa kontroll vid smala bredder. * * `flex-wrap: wrap` gör att knappen lindar ned under inmatningen när bredden * inte räcker (320px xxlarge) i stället för att klämma inmatningen. * --------------------------------------------------------------------------- */ .kind-search { display: flex; flex-wrap: wrap; /* `stretch` och inte `flex-end`: inmatningen är 50px hög (polstring plus kant) och knappen 45px, så en underkantsjustering lämnar 2.5px kvar mellan mittlinjerna. Stretch ger dem samma höjd och därmed exakt samma mittlinje, vilket också är den vanliga inmatningsgruppens utseende. */ align-items: stretch; gap: var(--kind-space-2); } .kind-search .kind-field__input { flex: 1 1 8rem; min-width: 0; } .kind-search .kind-btn { flex: 0 0 auto; } /* ============ Patient profile (UX A-03) ============ */ .kind-profile-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--kind-space-5); } @media (max-width: 900px) { /* CP-15 (#100): `minmax(0, 1fr)` och inte `1fr`, samma rättelse som CP-14 * gjorde på `.kind-chatt-layout` av samma orsak. * * En bar `1fr` är `minmax(auto, 1fr)`, och `auto` som MINIMUM är spårets * min-content. Vid xxlarge växte innehållet i vänsterkolumnen förbi * viewporten och drog med sig SPÅRET: uppmätt 2026-08-05 renderades båda * kolumnerna 372px breda i en 320px viewport, alltså 76px horisontell skroll * på hela dokumentet (6px vid 390). Överskottet fanns på deployen före den * här ändringen också, det är inte en ny defekt, men det står på samma yta * och `minmax(0, 1fr)` löser det med ett värde. * * `minmax(0, 1fr)` låter spåret krympa under min-content, så överskottet * hamnar i det enskilda elementets egen hantering i stället för att skjuta ut * sidan. */ .kind-profile-grid { grid-template-columns: minmax(0, 1fr); } } .kind-profile-section { margin-bottom: var(--kind-space-5); } .kind-profile-section__title { font-family: var(--kind-font-serif); font-size: var(--kind-font-h3); margin-bottom: var(--kind-space-3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--kind-space-3); } .kind-kv { display: grid; /* minmax(0, 1fr) (not a bare 1fr) so a long value token (an email, a personnr) * cannot force the columns past the pane at 320px / high zoom (WCAG 1.4.10). */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--kind-space-3); font-size: var(--kind-font-base); } .kind-kv__label { color: var(--kind-color-text-muted); font-size: var(--kind-font-small); } .kind-kv__value { font-weight: 600; /* wrap a long unbreakable value (anna.andersson@example.test) inside its cell * rather than overflowing; min-width: 0 lets the grid cell shrink to allow it. */ min-width: 0; overflow-wrap: anywhere; } /* web#220 / ADR-072 D11: transparensraden under ett värde (GDPR art. 13.1 e). Normalvikt och dämpad ton, så den läses som förklaring och inte som ett andra värde. */ .kind-kv__hint { display: block; margin-top: var(--kind-space-1); font-weight: 400; font-size: var(--kind-font-small); color: var(--kind-color-text-muted); } /* -------------------------------------------------------------------------- * G2: clinician "Mitt konto" settings page + GDPR self-delete modal + success. * * The clinician twin of the patient profile (kind_patient.css W6-01/PMV-11). * Ported here so /admin/profil (which loads kind_admin.css, NOT the patient * stylesheet) gets the same page wrapper, danger-zone subsection, and native * confirm modal. Reuses the existing .kind-profile-section (margin) * and .kind-kv (2-col) above, so only the NEW classes are added here: * - .kind-profile page wrapper for /admin/profil + success. * - .kind-profile__lede muted intro paragraph. * - .kind-profile-section__body section body text. * - .kind-profile-section--danger red-accented "danger zone" subsection. * - .kind-dialog native styling for the confirm modal. * - .kind-profile--success success-page wrapper. * * Tokens are shared (kind.css). .kind-btn--danger already lives in this file. * a11y: the modal uses native .showModal(); focus-trap + Escape are * browser-built-in. Shared progressive-enhancement script kind_radera_konto.js. * -------------------------------------------------------------------------- */ .kind-profile { max-width: var(--kind-container-narrow); margin: 0 auto; padding: var(--kind-space-4) 0; } .kind-profile__lede { color: var(--kind-color-text-muted); font-size: 1.0625rem; margin: var(--kind-space-2) 0 var(--kind-space-5) 0; } .kind-profile-section--danger { background: var(--kind-color-surface); border: 1px solid var(--kind-color-accent); border-radius: var(--kind-radius); padding: var(--kind-space-4); } .kind-profile-section__body { margin: 0 0 var(--kind-space-3) 0; line-height: 1.5; } /* Native confirm modal. Browser owns the backdrop + focus-trap via * showModal(); we style only the panel + actions row. */ .kind-dialog { border: none; padding: 0; border-radius: var(--kind-radius); background: transparent; max-width: 32rem; width: calc(100% - 2rem); } .kind-dialog::backdrop { background: rgba(0, 0, 0, 0.45); } .kind-dialog__panel { background: var(--kind-color-surface); border-radius: var(--kind-radius); padding: var(--kind-space-5); display: flex; flex-direction: column; gap: var(--kind-space-3); } .kind-dialog__title { margin: 0; font-family: var(--kind-font-serif); font-size: var(--kind-font-h2); } .kind-dialog__body { margin: 0; line-height: 1.5; } .kind-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--kind-space-3); justify-content: flex-end; margin-top: var(--kind-space-2); } /* -------------------------------------------------------------------------- Step-1 2FA (TOTP, flag removed in web#910): enrollment page, login verify step, and the "Mitt konto" 2FA-settings section. All flag-gated; the markup is absent when the flag is OFF. Reuses the design tokens so colours keep their documented WCAG 2.2 AA contrast (see kind.css token comments). -------------------------------------------------------------------------- */ /* Generic visibility helper: hide an element while keeping it in the DOM so the progressive-enhancement scripts can reveal it. Pairs with the `hidden` attribute (the attribute is the source of truth; this class is belt-and- braces for older UAs / CSS specificity). */ .kind-is-hidden { display: none !important; } .kind-2fa-setup { max-width: var(--kind-container-narrow); margin: 0 auto; } .kind-2fa-setup__lede { color: var(--kind-color-text-muted); margin-bottom: var(--kind-space-5); } .kind-2fa-instructions { margin: var(--kind-space-4) 0; padding-left: var(--kind-space-5); line-height: 1.55; } .kind-2fa-instructions li { margin-bottom: var(--kind-space-2); } .kind-2fa-step__subhead { margin-top: var(--kind-space-6); font-size: var(--kind-font-h3, 1.125rem); } .kind-2fa-uri-details { margin: var(--kind-space-3) 0 var(--kind-space-5); } .kind-2fa-uri-details > summary { cursor: pointer; color: var(--kind-color-accent-ink, var(--kind-color-text)); font-weight: 600; padding: var(--kind-space-2) 0; } /* The 6-digit code input: monospace, wide letter-spacing so each digit reads clearly (helps low-vision + dyslexic users). Not so wide it breaks the field. */ .kind-2fa-code-input { font-family: var(--kind-font-mono); font-size: 1.25rem; letter-spacing: 0.35em; text-align: center; } /* Recovery-codes "save these now" warning. Warning-token palette; the body text stays page-ink for max contrast, the left rule carries the warning colour. */ .kind-callout { border-radius: var(--kind-radius); padding: var(--kind-space-4); margin: var(--kind-space-4) 0; background: var(--kind-color-surface-muted); border-left: 4px solid var(--kind-color-border-strong); } .kind-callout--warning { background: var(--kind-color-warning-bg); border-left-color: var(--kind-color-warning); } .kind-callout__title { margin: 0 0 var(--kind-space-2); } /* web#756: arbetsytans fail-closed-tomtillstand pa oversikten. Informativ, inte varnande -- talet 0 ar korrekt, det ar BETYDELSEN som behover forklaras. */ .kind-callout--info { background: var(--kind-color-accent-bg); border-left-color: var(--kind-color-accent); } /* The recovery codes themselves: a real list of chips, monospace and large so they are easy to transcribe; screen-reader readable (not an image). */ .kind-2fa-recovery__codes { list-style: none; margin: var(--kind-space-4) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--kind-space-2); } .kind-2fa-recovery__code { display: block; font-family: var(--kind-font-mono); font-size: 1.0625rem; letter-spacing: 0.08em; padding: var(--kind-space-2) var(--kind-space-3); background: var(--kind-color-surface-muted); border: 1px solid var(--kind-color-border-soft); border-radius: var(--kind-radius-sm, 8px); color: var(--kind-color-text); } .kind-2fa-recovery__actions { display: flex; flex-wrap: wrap; gap: var(--kind-space-3); margin-top: var(--kind-space-4); } /* 2FA-settings status row on Mitt konto. */ .kind-2fa-status { display: flex; align-items: center; gap: var(--kind-space-2); margin: var(--kind-space-3) 0 var(--kind-space-4); } .kind-2fa-status__label { font-weight: 600; } /* Success page wrapper (Konto markerat för radering). */ .kind-profile--success { max-width: var(--kind-container-narrow); margin: 0 auto; padding: var(--kind-space-4) 0; } /* PDL loggutdrag link (klinik-admin Q-14 / AT-46) */ .kind-pdl-cta { background: var(--kind-color-info-bg); border: 1px solid var(--kind-color-info); border-radius: var(--kind-radius); padding: var(--kind-space-4); margin-bottom: var(--kind-space-5); display: flex; flex-wrap: wrap; gap: var(--kind-space-3); align-items: center; justify-content: space-between; } .kind-pdl-cta p { margin: 0; } /* ============ CP-15 (#100): Aktuellt, patientsidans sammanfattning ============ * * Sektionen svarar på "vad gäller för den här patienten just nu" utan skroll. * Den finns för att mått 4 i docs/contracts/classic-plus-utfall.md visade att * `vard-patientsida` var 73.3 procent aktuell information i första viewporten * vid 1280px men 34.4 procent vid 320px och NOLL vid xxlarge: en mobildefekt, * inte en felordnad sidstruktur. Se mallens kommentar för härledningen. * * Layouten är MOBILFÖRST med etikett över värde, och blir tvåkolumnig först när * det finns bredd för det. Skälet är mått 6: en fast etikettkolumn (`8rem 1fr`) * kan inte krympa under sin min-content vid xxlarge, och trycker då ut sidan i * horisontell skroll vid 320px. `minmax(0, ...)` överallt av samma skäl. */ /* ---- Raderingsbegäran (2026-08-15): patienten har bett om att kontot raderas. * * Ärver hela sin färgsättning från `.kind-flash--warning` i kind.css, alltså * husets redan granskade kontrastpar (`--kind-color-text` på * `--kind-color-warning-bg`). Det enda som sätts här är typografin, eftersom en * `

    ` i en flash-ruta annars ärver sidrubrikens storlek och skriker. * * INFORMATIONEN BÄRS AV ORDEN, aldrig av färgen (WCAG 1.4.1): rubriken säger * "Patienten har begärt radering av sitt konto" i klartext. Sätt därför aldrig * en färgkodning här som texten inte redan säger. * * Rubriken följer `--kind-font-h3` (samma token som `.kind-nu__title`, och det * finns inget h4-token i kind.css) och inte ett px-värde, så den skalar med * användarens textstorlek (13px-golvet, CP-04). `overflow-wrap: anywhere` av * samma skäl som `.kind-nu__value`: rutan får inte bredda sidan vid 320px och * xxlarge (mått 6). */ .kind-radering { margin-bottom: var(--kind-space-4); } .kind-radering__rubrik { font-family: var(--kind-font-serif); font-size: var(--kind-font-h3); margin: 0 0 var(--kind-space-2); overflow-wrap: anywhere; } .kind-radering__text { margin: 0; overflow-wrap: anywhere; } .kind-nu { background: var(--kind-color-surface); border: 1px solid var(--kind-color-border); border-left: 4px solid var(--kind-color-accent); border-radius: var(--kind-radius); padding: var(--kind-space-4); margin-bottom: var(--kind-space-5); } .kind-nu__title { font-family: var(--kind-font-serif); font-size: var(--kind-font-h3); margin: 0 0 var(--kind-space-3); } .kind-nu__list { margin: 0; display: grid; gap: var(--kind-space-3); } .kind-nu__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kind-space-1); min-width: 0; } .kind-nu__row--akut { border-left: 3px solid var(--kind-color-error); padding-left: var(--kind-space-3); } .kind-nu__label { /* Golv 13px: --kind-font-small är 0.875rem, alltså 14px vid rotens 16px och * mer vid varje uppskalning. Sätt aldrig ett px-värde här. */ font-size: var(--kind-font-small); color: var(--kind-color-text-muted); } .kind-nu__value { margin: 0; min-width: 0; /* En lång vårdresetitel eller ett långt vårdgivarnamn ska brytas inne i sin * cell, inte bredda sidan (mått 6). */ overflow-wrap: anywhere; } .kind-nu__tom { color: var(--kind-color-text-muted); } .kind-nu__actions { display: flex; flex-wrap: wrap; gap: var(--kind-space-3); margin-top: var(--kind-space-4); } /* Knapparna får krympa men aldrig under en träffbar bredd. `flex: 1 1 auto` med * `min-width: 0` skulle låta dem klämmas ihop till oanvändbara remsor vid 320px * och xxlarge; en egen rad var är ärligare än två oläsbara. */ .kind-nu__actions .kind-btn { flex: 1 1 12rem; text-align: center; } @media (min-width: 30rem) { .kind-nu__row { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--kind-space-3); align-items: baseline; } } /* ---- #142 / CP-15: avsnittsnavigation, desktoprad + kompakt mobilmeny ---- */ .kind-sektionsnav { margin-bottom: var(--kind-space-5); } .kind-sektionsnav__meny { margin: 0; } /* Desktop behåller den tidigare sticky-listan utan en extra kontroll. Details * är serverrenderad `open`; på smal skärm visar mediefrågan summaryn och JS * stänger den initialt. Utan JS är listan i stället synlig och nativt * hopfällbar, alltså fortfarande begriplig och användbar. */ .kind-sektionsnav__summary { display: none; } .kind-sektionsnav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: var(--kind-space-2); max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: 6px; /* Fokus är 3px plus 2px offset. Sex pixlar runt innehållet håller hela * ringen inne i skrollporten också vid första och sista länken. */ padding: 6px; --kind-cue-yta: var(--kind-color-bg); --kind-cue-linje: var(--kind-color-border); background: linear-gradient(var(--kind-cue-yta), var(--kind-cue-yta)) left center / 22px 100% no-repeat local, linear-gradient(var(--kind-cue-yta), var(--kind-cue-yta)) right center / 22px 100% no-repeat local, linear-gradient(to right, var(--kind-cue-linje) 0 2px, color-mix(in srgb, var(--kind-cue-linje) 32%, transparent) 2px, transparent 100%) left center / 20px 100% no-repeat scroll, linear-gradient(to left, var(--kind-cue-linje) 0 2px, color-mix(in srgb, var(--kind-cue-linje) 32%, transparent) 2px, transparent 100%) right center / 20px 100% no-repeat scroll, var(--kind-cue-yta); } .kind-sektionsnav__list > li { flex: 0 0 auto; } .kind-sektionsnav__link { display: flex; align-items: center; /* Golv 44px träffyta (WCAG 2.2 AA 2.5.8 är 24px, men patientytan skevar äldre * och husregeln är 44px). `min-height` och inte `height`, så länken växer med * texten vid xxlarge i stället för att klippa den. */ min-height: 44px; padding: var(--kind-space-2) var(--kind-space-3); border: 1px solid var(--kind-color-border); border-radius: var(--kind-radius); background: var(--kind-color-surface); color: var(--kind-color-accent); text-decoration: none; font-size: var(--kind-font-small); } .kind-sektionsnav__link:hover { background: var(--kind-color-accent-bg); } @media (max-width: 47.99rem) { .kind-sektionsnav__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--kind-space-2); min-height: 44px; padding: var(--kind-space-2) var(--kind-space-3); border: 1px solid var(--kind-color-border); border-radius: var(--kind-radius); background: var(--kind-color-surface); color: var(--kind-color-text); cursor: pointer; font-weight: 600; list-style: none; } .kind-sektionsnav__summary::-webkit-details-marker { display: none; } .kind-sektionsnav__summary::after { content: "\25B8"; color: var(--kind-color-text-muted); } .kind-sektionsnav__meny[open] > .kind-sektionsnav__summary { border-radius: var(--kind-radius) var(--kind-radius) 0 0; } .kind-sektionsnav__meny[open] > .kind-sektionsnav__summary::after { content: "\25BE"; } .kind-sektionsnav__summary:hover { background: var(--kind-color-surface-muted); } .kind-sektionsnav__summary:focus-visible { outline: var(--kind-focus-ring); outline-offset: 2px; } .kind-sektionsnav__list { flex-direction: column; gap: var(--kind-space-1); max-height: min(42vh, 18rem); overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: auto; overscroll-behavior-y: contain; padding: 6px; border: 1px solid var(--kind-color-border); border-top: 0; border-radius: 0 0 var(--kind-radius) var(--kind-radius); background: var(--kind-color-surface); } .kind-sektionsnav__list > li { width: 100%; } .kind-sektionsnav__link { width: 100%; } } @media print { .kind-sektionsnav__summary { display: none; } .kind-sektionsnav__list { display: flex !important; max-height: none; overflow: visible; background: none; } } /* Ankarmål får inte hamna under den fasta sidhuvudsraden när man hoppat dit. */ .kind-profile-section__title, .kind-nu, .kind-pdl-cta { scroll-margin-top: var(--kind-space-5); } /* ============ CP-15 (#100): sektion 1, Sammanfattning ============ * * Patientens EGNA uppgifter låg som näst sista block på sidan. Uppmätt i * tyngsta rimliga datatillstånd (`e2e/cp15-patientsida-utfall.mjs`, baslinje * 2026-08-06): y = 14 471px vid 320 normal och 27 464px vid 320 xxlarge, alltså * 21,8 respektive 41,4 skärmars skrollning, 91 procent in i dokumentet, och * NOLL träffbara pixlar i första viewporten på samtliga 20 mätpunkter. * * Kortet bär de tre uppgifter en mottagning slår upp för att identifiera den * som ringer, resten en utfällning bort. Det är AVSIKTLIGT visuellt lugnare än * `.kind-nu`: Aktuellt behåller accentkanten och därmed blickens första anhalt, * så identiteten kan ligga före utan att ta över sidan. * * Layouten är MOBILFÖRST och flödande. En fast etikettkolumn kan inte krympa * under sin min-content vid xxlarge och trycker då ut sidan i horisontell * skroll vid 320px (kontraktets mått 6), så etikett och värde ligger på samma * rad med `flex-wrap` och bryter var för sig när de inte får plats. */ .kind-tillbaka { margin-bottom: var(--kind-space-3); } .kind-tillbaka a { /* Träffytegolvet gäller även en ensam textlänk. `min-height` och inte * `height`, så raden växer med texten vid xxlarge i stället för att klippa. */ display: inline-flex; align-items: center; min-height: 44px; } .kind-sammanfattning { /* MEDVETET UTAN kortram, bakgrund och innerpadding. Kortkromet kostade 48px * av en 483px stor innehållsbudget vid 320px och xxlarge textskala, alltså * tio procent av budgeten för en ram. Sektionen behöver ingen visuell * inramning för att läsas som en enhet: den sitter direkt under patientens * namn och ovanför `Aktuellt`, som HAR accentkant. En underkant räcker för * att markera var sammanfattningen slutar. */ border-bottom: 1px solid var(--kind-color-border); /* Ingen padding-bottom, marginalen under kanten räcker. Uppmätt: varje px * innerpadding i den här sektionen ligger i mått 4:s NÄMNARE (punkten träffar * sektionen och klassas som identitet), medan marginalen utanför träffar * `main` och räknas som tom yta. 12px padding kostade alltså 12px av * innehållsbudgeten utan att visa något. */ /* Marginalen är space-3 och inte space-4: marginalen mellan sektionen och * `Aktuellt` träffar `main` och räknas som TOM yta, alltså yta som varken * bär identitet eller aktuell information. Fyra px mindre luft flyttar upp * `Aktuellt` fyra px in i första viewporten. */ margin-bottom: var(--kind-space-3); } .kind-sammanfattning__namn { margin-bottom: var(--kind-space-1); } /* web#220 / ADR-072: "Ej tilldelad" vid patientens namn (kundens egen placering). Egen rad under namnet, dämpad ton och liten grad, så den läses som ett tillstånd och aldrig konkurrerar med namnet. Bäraren är ORDEN, ingen ny färg och ingen bricka (WCAG 2.2 1.4.1), och den renderas bara när mängden ansvariga är tom -- ett tilldelat läge har ingen markör här alls. */ .kind-sammanfattning__ej-tilldelad { display: block; font-size: var(--kind-font-small); color: var(--kind-color-text-muted); } .kind-sammanfattning__list { margin: 0; display: flex; flex-wrap: wrap; /* Radavstånd först, kolumnavstånd sedan: raderna ska andas även när båda * uppgifterna får plats bredvid varandra. Radavståndet är space-1 eftersom * varje px mellan de två raderna ligger i mått 4:s nämnare. */ gap: var(--kind-space-1) var(--kind-space-5); } .kind-sammanfattning__rad { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--kind-space-2); min-width: 0; } .kind-sammanfattning__etikett { /* Golv 13px: --kind-font-small är 0.875rem, alltså 14px vid rotens 16px och * mer vid varje uppskalning. Sätt aldrig ett px-värde här. */ font-size: var(--kind-font-small); color: var(--kind-color-text-muted); } .kind-sammanfattning__varde { margin: 0; min-width: 0; font-weight: 600; /* Ett personnummer eller ett långt mobilnummer ska brytas inne i sin cell, * inte bredda sidan (mått 6). */ overflow-wrap: anywhere; } .kind-sammanfattning__mer { margin-top: var(--kind-space-2); } .kind-sammanfattning__mer-summary { /* Träffytan är hela raden, inte bara triangeln. `min-height` och inte * `height`, så raden växer med texten vid xxlarge i stället för att klippa. * * FE-2b (2026-08-07), samma defektklass som välkomstrutan på biblioteket * (persona-villkor 3): `display: flex` på en summary SLÄCKER webbläsarens * nativa disclosure-trekant (markören renderas bara för list-item-lådor), * så raden lästes som en textrad utan expanderingsaffordans. Nu samma * mönster som .kind-org-welcome__summary: `display: list-item` med * inside-markör, `align-content: center` för vertikalcentrering * (Chromium 123+, Safari 17.4+, Firefox 125+). Markören ärver textfärgen * (accent här), rätt i mörkt läge och forced-colors. Vaktas av * tests/test_admin_patient_mer_summary_css.py (rödbevisad mot flex). */ min-height: 44px; display: list-item; list-style-position: inside; align-content: center; cursor: pointer; color: var(--kind-color-accent); font-size: var(--kind-font-small); } /* Explicit fokusring i husets stil: summary ingår inte i kind.css globala * :focus-visible-lista (a, button, input, textarea, select), så utan egen * regel bar raden bara UA-defaultringen. Samma mönster som * .kind-org-welcome__summary:focus-visible. */ .kind-sammanfattning__mer-summary:focus-visible { outline: var(--kind-focus-ring); outline-offset: 2px; border-radius: var(--kind-radius); } .kind-sammanfattning__mer-innehall { margin-top: var(--kind-space-4); } /* Underavsnitten inne i utfällningen ska inte bära kortets marginal en gång * till; sista sektionen får ingen bottenmarginal alls. */ .kind-sammanfattning__mer-innehall > .kind-profile-section:last-child { margin-bottom: 0; } /* #117 (mått 4-regressionen vid mobil xxlarge): samma mall som patient-Mer, * det som inte bär information viker vid stor textskala. Här finns ingen * avatar att gömma, så det som viker är TOMRUM: marginaler och radluft, som * alla ligger i mått 4:s nämnare (punkten träffar sektionen och klassas som * identitet). Ingen uppgift göms, ingen text krymps, inget flyttas bakom * interaktion; vid normal textskala är blocket orört. * * UPPMÄTT 2026-08-07 (e2e/cp15-patientsida-utfall.mjs, före batchen): * identiteten tog 58,4 procent av första viewporten vid 320 xxlarge och * mått 4 låg på 0/15,6/26,8/38,1 mot krav 50 på de fyra mobilbredderna. * Blockets text ENSAM (namn 3 rader, personnummer- och mobilrad, utfällnings- * summaryn) mäter ~360px vid 320 xxlarge mot de ~194 som krävs för 50 procent, * så tomrumskompakteringen kan inte ENSAM stänga målet; se #117 för * beslutsläget. Varje regel nedan tar bara luft. */ html[data-kind-font-scale="xlarge"] .kind-sammanfattning__namn, html[data-kind-font-scale="xxlarge"] .kind-sammanfattning__namn { margin-bottom: 0; } html[data-kind-font-scale="xlarge"] .kind-body--admin .kind-sammanfattning__namn > h1, html[data-kind-font-scale="xxlarge"] .kind-body--admin .kind-sammanfattning__namn > h1 { margin-bottom: 0; /* G-6 (persona tillägg 2, 2026-08-07): namnets RUBRIKPÅSLAG kappas till * brödtextstorleken vid stor textskala. 1rem följer roten, så användarens * valda skala styr fortfarande (24px vid xxlarge, 20px vid xlarge, båda * större än normallägets 16px brödtext och lika med skallägets brödtext, * G-6-testets golv "namnets fontstorlek >= brödtextens"). Det som tas bort * är enbart h1-multiplikatorn (1.625rem = 39px vid xxlarge, tre rader för * ett långt dubbelnamn vid 320). Samma klass av åtgärd som den * persona-godkända h1-kappningen på patientchatten (kind_patient.css, * PROBLEM 2/RETEST-03). Namnet renderas ALLTID helt: ingen ellipsis, ingen * klämning (F-1-principen), vaktat i tests/test_cp15_patientsida.py. * Presentation, inte innehåll, alltså förenligt med G-2. */ font-size: 1rem; } html[data-kind-font-scale="xlarge"] .kind-sammanfattning__list, html[data-kind-font-scale="xxlarge"] .kind-sammanfattning__list { gap: 0 var(--kind-space-5); } html[data-kind-font-scale="xlarge"] .kind-sammanfattning__rad, html[data-kind-font-scale="xxlarge"] .kind-sammanfattning__rad { /* dt- och dd-raden bryter till var sin rad vid smala bredder; space-2 * radavstånd mellan dem är ren luft i nämnaren. Kolumnavståndet behålls. */ gap: 2px var(--kind-space-2); } html[data-kind-font-scale="xlarge"] .kind-sammanfattning__mer, html[data-kind-font-scale="xxlarge"] .kind-sammanfattning__mer { margin-top: 0; } html[data-kind-font-scale="xlarge"] .kind-sammanfattning, html[data-kind-font-scale="xxlarge"] .kind-sammanfattning { /* Marginalen ligger UTANFÖR sektionen (tom yta, inte identitet), men varje * px flyttar Aktuellt uppåt in i första viewporten. */ margin-bottom: var(--kind-space-1); } html[data-kind-font-scale="xlarge"] .kind-tillbaka, html[data-kind-font-scale="xxlarge"] .kind-tillbaka { /* Navigationsraden är krom; dess marginal är dock viewportpixlar som kan * bära innehåll i stället. 44px-träffytan på länken är orörd. */ margin-bottom: 0; } /* ============ CP-15 (#100): de sju avsnitten ============ * * `.kind-patientsektion` är YTTERnivån för #100:s avsnitt 3 till 7. Avsnitt 4 * och 5 har ett enda underavsnitt var och är därför sig själva ytternivån: en * extra rubriknivå med ett enda barn är en tom mellannivå för skärmläsaren. */ .kind-patientsektion { margin-bottom: var(--kind-space-6); } .kind-patientsektion__title { font-family: var(--kind-font-serif); font-size: var(--kind-font-h2); margin: 0 0 var(--kind-space-3); /* Ankarmål får inte hamna under sidhuvudsraden när man hoppat dit. */ scroll-margin-top: var(--kind-space-5); } /* Underavsnitten sitter indragna under sin avsnittsrubrik på bredare ytor, så * hierarkin syns visuellt och inte bara i rubriknivån. Inget indrag på mobil: * varje pixel i sidled är mått 6. */ @media (min-width: 48rem) { .kind-patientsektion > .kind-profile-section { padding-left: var(--kind-space-3); } } /* ---- CP-15 (#100): hopfällbara formulärsvar ---- */ .kind-formularsvar { margin-bottom: var(--kind-space-3); } .kind-formularsvar__summary { /* Träffytan är hela sammanfattningsraden, inte bara triangeln. */ min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--kind-space-2); cursor: pointer; padding: var(--kind-space-2) 0; } .kind-formularsvar__titel { font-weight: 600; overflow-wrap: anywhere; } /* ============ Chat clinician view (UX A-04, sidebar layout) ============ */ /* ISSUE #154: BASDEKLARATIONEN BAR EN HALV CP-14-FIX fram till 2026-08-16. * * Mediefrågan nedan har haft `minmax(0, 1fr)` sedan CP-14 (#99), medan den här * basdeklarationen stod kvar på en bar `1fr`. Fixen gällde alltså i det ena * läget och inte i det andra, vilket är svårare att upptäcka än en helt utebliven * fix: ytan ser åtgärdad ut i den bredd man råkar testa, och den bredd man råkar * testa är mobilbredden, eftersom det var där defekten rapporterades. * * TVÅKOLUMNSLÄGET ÄR INTE DET OFARLIGA LÄGET. Systerytan `.kind-tillg__columns` * mättes i #153 till 421px överskott vid 901px och 42px vid 1280px, alltså * VÄRRE än det rapporterade mobilfallet, på exakt den axel man antar är säker * för att det finns gott om plats. Att spåret är brett skyddar inte, eftersom * golvet sätts av min-content och inte av viewporten. * * ÄRLIGT OM VAD MÄTNINGEN VISAR. På `/admin/chatt` i tyngsta uppmätta tillstånd * (901 / 1024 / 1280 px, normal och xxlarge, 6 mätpunkter) är dokumentets * sidledsöverskott 0px BÅDE före och efter den här ändringen, och inget item i * layouten når bärarstatus i `e2e/a11y816-minsvep.mjs`. Golvet är alltså LATENT * på dagens innehåll, inte aktivt. Ändringen görs ändå, av två skäl som issuen * själv anger: en bar `1fr` är sökmönstret nästa svep letar efter, så den * halva fixen gör ytan osynlig i just det svepet; och `minmax(0, 1fr)` sänker * bara ett golv, den kan därför inte ändra rendret så länge golvet inte är * aktivt, vilket de 6 oförändrade mätpunkterna bekräftar. * * `300px`-spåret rörs inte. Det är ett fast spår, inte ett `1fr`, och har * ingen automatisk minimistorlek att nolla. */ .kind-chatt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--kind-space-5); } @media (max-width: 900px) { /* CP-14 (#99): `minmax(0, 1fr)` och inte `1fr`. * * En `1fr`-kolumn har `auto` som MINIMUM, alltså sitt innehålls min-content. * Vid xxlarge växte innehållet förbi viewporten och drog med sig SPÅRET, så * `.kind-chat--zoned` och `.kind-chatt-aside` renderades 487px breda i en * 320px viewport: 191px horisontell skroll (uppmätt, /admin/chatt vid 320x664 * xxlarge, 121px vid 390). Det bröt inte bara mått 6 utan även MÅTT 5: hela * skrivfältet ska rymmas i viewporten, och ett fält vars högerkant ligger * utanför gör det inte, hur rätt det än ser ut vertikalt. Ett endimensionellt * höjdtak kan vara grönt medan bredden är trasig. * * `minmax(0, 1fr)` låter spåret krympa under min-content, vilket är exakt vad * grannlayouten `.kind-arbetsvy` redan gör vid samma brytpunkt. Överskottet * hamnar då i det inre elementets EGEN skrollport i stället för att skjuta ut * sidan. */ .kind-chatt-layout { grid-template-columns: minmax(0, 1fr); } } .kind-chatt-aside { background: var(--kind-color-surface); border: 1px solid var(--kind-color-border-soft); border-radius: var(--kind-radius); padding: var(--kind-space-4); align-self: start; position: sticky; top: var(--kind-krom-topp); } /* ============ Editor with live preview (UX A-07, artikel_form) ============ */ .kind-editor { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kind-space-5); } @media (max-width: 900px) { .kind-editor { grid-template-columns: 1fr; } } .kind-editor__pane { background: var(--kind-color-surface); border: 1px solid var(--kind-color-border-soft); border-radius: var(--kind-radius); padding: var(--kind-space-4); } .kind-editor__preview-body { min-height: 12rem; padding-top: var(--kind-space-3); } .kind-editor__preview-body h1, .kind-editor__preview-body h2, .kind-editor__preview-body h3 { font-family: var(--kind-font-serif); margin-top: var(--kind-space-4); } .kind-editor__preview-body p { margin-bottom: var(--kind-space-3); } .kind-editor__preview-body ul, .kind-editor__preview-body ol { padding-left: var(--kind-space-5); list-style: revert; margin-bottom: var(--kind-space-3); } .kind-editor__textarea { min-height: 24rem; font-family: var(--kind-font-mono); font-size: 0.95rem; } /* ============ Step editor (vardresa_form) ============ */ .kind-step-editor { display: flex; flex-direction: column; gap: var(--kind-space-3); } /* agents#235 (konsultbeslut 2026-08-18): kolumn tre bar knapparna Upp / Ned / Ta bort, som aldrig fungerade (noll registrerade rutter i url_map) och nu är borttagna. Griden gick därför från `2.5rem 1fr auto` till `2.5rem 1fr`. En kvarlämnad tredje kolumn hade inte varit osynlig: `column-gap` gäller mellan ALLA definierade spår, även ett tomt, så raden hade burit en död `--kind-space-3` i högerkant. */ .kind-step-editor__row { background: var(--kind-color-surface); border: 1px solid var(--kind-color-border-soft); border-radius: var(--kind-radius); padding: var(--kind-space-4); display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--kind-space-3); align-items: start; } .kind-step-editor__ord { font-family: var(--kind-font-serif); font-size: 1.25rem; font-weight: 700; color: var(--kind-color-accent); padding-top: var(--kind-space-2); } /* agents#235: `.kind-step-editor__controls` och dess smalvyregler är BORTTAGNA i samma ändring som markeringen. De ställde in tre knappformulär som inte längre ritas, och den gamla media-frågan under 600px kollapsade radens grid till `2.5rem 1fr`, vilket nu är basvärdet. Kvarlämnad död CSS är en fälla: nästa person läser den som ett stöd som finns. */ /* ---- Våg 3 steg 4: stegets ordningsknappar (konsultbeslut B3) ---- Tre fristående `
    ` sida vid sida. `.kind-actions-row` är en flexrad, men dess barn är här FORMULÄR och inte knappar, så knappmåtten måste gå igenom formuläret; utan `display: contents` blir varje knapp inramad av ett block som bryter radens gap. Formulären bär inget eget innehåll utöver knappen och ett dolt csrf-fält, alltså är `display: contents` säkert här (elementet har ingen egen semantik som går förlorad: ett `` utan tillgängligt namn exponeras inte som landmärke). */ .kind-stegordning { flex-wrap: wrap; gap: var(--kind-space-2); margin-top: var(--kind-space-3); container: stegordning / inline-size; } .kind-stegordning > form { display: contents; } .kind-stegordning .kind-btn { min-width: 0; overflow-wrap: anywhere; } /* ---- #279 (konsultbeslut 2026-08-20, variant C): två tillstånd, två uttryck ---- Produkten namnger den skillnad huset redan gjorde på fyra ytor utan att ha döpt den. Reglerna nedan är de två uttrycken. VÄNTAR, `[data-skal]`: något på ytan kan göra kontrollen levande, alltså står kontrollen kvar och skälet säger vad man väntar på. Skälet ärver `.kind-field__help` plus en särskiljande kantlinje, så att ett SKÄL inte längre ser ut exakt som de tre generella hjälptexterna i samma fieldset. `flex: 1 1 100%` lägger det på egen rad under sin knapp i stället för bredvid, så knappraden inte spränger smala vyer. */ .kind-actions-row > [data-skal] { flex: 1 1 100%; margin-bottom: 0; } .kind-skal { border-inline-start: 3px solid var(--kind-color-border); padding-inline-start: var(--kind-space-2); } /* GÅR INTE HÄR, `.kind-kantmarkor`: ingenting på ytan gör kontrollen levande, alltså finns ingen död kontroll och PLATSEN bär skälet i stället. DEN ÄR AVSIKTLIGT INTE EN `.kind-btn`, och det är regelns hela poäng. Ett `` ser ut som en knapp och är exakt den lögnaktiga affordans mallens egen kommentar varnar för, vilket är precis vad loggutdragets sidnavigering råkat ut för. Streckad kant plus dämpad text plus ingen hovring och ingen pekarmarkör läser som en PLATS. `min-height` håller radens rytm så att de kvarvarande knapparna inte hoppar i sidled mellan rader. Mätt till 46,4 px i beslutets mock; siffran är MOCKMÄTT och ska ommätas på deployen (regel 22/26), den är inte verifierad här. */ .kind-kantmarkor { display: inline-flex; align-items: center; min-height: 44px; padding: var(--kind-space-2) var(--kind-space-3); border: 1px dashed var(--kind-color-border); border-radius: var(--kind-radius); background: transparent; color: var(--kind-color-text-muted); font-size: var(--kind-font-small); line-height: 1.25; } .kind-stegordning .kind-kantmarkor { min-width: 0; overflow-wrap: anywhere; } /* #278 variant C: "Klar, tillbaka till vårdresemallar", kontrollen som lämnar sidan. Den står ensam längst ned och behöver luft mot lägg-till-formuläret ovanför, annars läser den som en del av det formuläret. */ .kind-vardresa-klar { margin-top: var(--kind-space-6); } /* #278 variant C: ångraknappen under kvittot. Den ligger i en egen stack strax under flash-stacken, INTE inuti den: flash-stacken är en `aria-live`-region, och en fokuserbar kontroll inne i en live-region riskerar att annonseras om vid varje senare uppdatering. Marginalen drar ihop de två så de läser som ett och samma kvitto. */ .kind-angra { margin-top: calc(var(--kind-space-2) * -1); } /* #313: använd radens tillgängliga bredd, inte viewportens. 25rem rymmer hela kontrollraden vid normal text och följer den större textskalan. Den lätta markören saknar knappens inramning men behåller en kantlinje, som husets `.kind-skal`, så den inte blir ännu en metadatarad. `align-self` hindrar flexradens sträckning från att förstora markören till samma höjd som de levande knapparna. */ @container stegordning (max-width: 25rem) { .kind-kantmarkor { align-self: center; min-height: 0; padding: 0; padding-inline-start: var(--kind-space-2); border: 0; border-inline-start: 3px solid var(--kind-color-border); border-radius: 0; } } /* ---- Våg 3 steg 4: innehållsmenyn (konsultbeslut B1, variant B) ---- Ingen befintlig klass gör en generell utfällbar meny. Navets `.kind-vardnav__mer` gör det men är navspecifik, och att låna den hade bundit stegredigeraren till navets framtida ändringar. */ .kind-innehallsmeny { border: 1px dashed var(--kind-color-border); border-radius: var(--kind-radius); } .kind-innehallsmeny__knapp { display: flex; align-items: center; gap: var(--kind-space-2); min-height: 44px; padding: var(--kind-space-3) var(--kind-space-4); font-weight: 600; cursor: pointer; list-style: none; } .kind-innehallsmeny__knapp::-webkit-details-marker { display: none; } .kind-innehallsmeny__knapp::before { content: "+"; font-size: 1.25rem; line-height: 1; } .kind-innehallsmeny[open] .kind-innehallsmeny__knapp::before { content: "\2212"; } .kind-innehallsmeny__knapp:hover { background: var(--kind-color-surface-muted); } .kind-innehallsmeny__ark { display: flex; flex-direction: column; align-items: flex-start; gap: var(--kind-space-3); padding: 0 var(--kind-space-4) var(--kind-space-4); border-top: 1px solid var(--kind-color-border-soft); } /* Menyknapparna bär långa svenska etiketter och `.kind-btn` har min-width 44px plus generös padding, så de spränger 320px vid xxlarge utan de här raderna. */ .kind-innehallsmeny__ark .kind-btn { max-width: 100%; } .kind-innehallsmeny__knapp, .kind-innehallsmeny__ark .kind-btn { min-width: 0; overflow-wrap: anywhere; } .kind-innehallsblock { margin-bottom: var(--kind-space-3); } /* `hidden`-GARD, och skriv ALDRIG "specificitet" om mekanismen: företrädet avgörs av URSPRUNG. UA-arkets `[hidden] { display: none }` saknar `!important`, och en normal FÖRFATTARdeklaration slår en normal UA-deklaration i kaskadens sorteringsordning oavsett specificitet. Sätter någon senare `display` på de här klasserna slutar `hidden` att verka, och den defekten är tyst: fältet syns, JS tror det är dolt, och ett borttaget block postar ändå. Garden är per klass och UTAN `!important`; den generella `[hidden] { display: none !important }` som Bootstrap Reboot skickar bryter `hidden="until-found"` och är en öppen defekt där (twbs/bootstrap#40688). CLAUDE.md regel 27 korollarium 2. */ .kind-innehallsblock[hidden], .kind-innehallsmeny[hidden] { display: none; } /* ---- Våg 3 steg 4: offsetgruppen (konsultbeslut B4, 2026-08-19) ---- Magnituden och riktningsväljaren står bredvid varandra, eftersom de är EN storhet uttryckt i två kontroller och en radbrytning mellan dem läser som två oberoende fält. `minmax(0, ...)` och inte `auto`: ett grid-item har `min-width: auto` som default och kan därför inte krympa under sitt min-content, vilket är precis den mekanism som gav 140px överflöd vid 320px i K19-mockens mätning. Under 32rem staplas de, för då är sidan-vid-sidan dyrare än radbrytningen. */ /* web#1068: TRE kolumner, antal + enhet + riktning. Var tva innan enhetsvaljaren fanns; med tva kolumner och tre falt hade riktningen hamnat pa en egen rad under antalet, alltsa visuellt lost fran den storhet den kvalificerar. Smalspalten kollapsar till en kolumn som forut. */ .kind-offsetgrupp { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 9rem) minmax(0, 1fr); gap: var(--kind-space-3); align-items: start; } @media (max-width: 32rem) { .kind-offsetgrupp { grid-template-columns: minmax(0, 1fr); } } /* ============ Print stylesheet (loggutdrag handout) ============ */ @media print { .kind-header, .kind-footer, .kind-nav, .kind-skip-link, .kind-actions-row, .kind-filter-row, .kind-pdl-cta, .kind-loggutdrag__no-print { display: none !important; } body.kind-body--admin { background: #fff; color: #000; font-size: 10pt; } .kind-table { font-size: 9pt; } .kind-table thead th { background: #f0f0f0 !important; color: #000 !important; position: static; } .kind-table tbody tr:hover { background: transparent; } .kind-table-wrap { border: none; overflow: visible; } a { color: #000; text-decoration: underline; } } /* Q-13:s stubbhjalpare (`.kind-stub-row` plus `.kind-stub-row__help`) ar * BORTTAGEN 2026-08-21 tillsammans med sin enda konsument, den avstangda * kryssrutan "Aterkommande tider" i `templates/admin/bokning_form.html` * (konsultbeslut i issue #283). Reglerna togs bort i samma andring per regel 27 * korollarium 2: en kvarlamnad klass utan barare ar en inbjudan att bygga en ny * stubb. Vakt: `tests/test_283_bokning_stubrad_borttagen.py`. */ /* ============ Wave 3: login surface (W2-13 carry-over + AT-58) ============ * Mirrors the patient login-box but lands in the admin sheet because the * admin templates (login.html + auth/invite_set_password.html) load only * kind_admin.css. Removing the duplication is a future cleanup once we * extract a shared kind_chrome_overlay.css (out of scope for Wave 3). */ .kind-login-page { min-height: calc(100vh - 12rem); display: flex; justify-content: center; align-items: center; padding: var(--kind-space-5) var(--kind-space-4); } .kind-login-box { width: 100%; max-width: 26rem; background: var(--kind-color-surface); border: 1px solid var(--kind-color-border); border-radius: var(--kind-radius); padding: var(--kind-space-6); box-shadow: var(--kind-shadow-md); } .kind-login-box__title { text-align: center; font-family: var(--kind-font-serif); } .kind-login-box__sub { text-align: center; color: var(--kind-color-text-muted); margin-bottom: var(--kind-space-5); } /* WS-C / ADR-025 auth surfaces (org-picker + workspace switch + already-have-account). * These reuse the .kind-login-page / .kind-login-box card so the whole multi-org * auth flow matches the rest of the vardgivarportal auth pages. The org-picker * card is WIDER than the password card so the full clinic-name rows breathe. */ .kind-login-box--wide { max-width: 34rem; } .kind-workspace-card .kind-form { gap: var(--kind-space-5); } /* The lede sits left-aligned inside the wide card: it is instructional body copy, not a centered tagline, so left-align reads better at this width. */ .kind-workspace-card__sub { text-align: left; max-width: 48ch; margin-left: auto; margin-right: auto; } .kind-workspace-card__body { color: var(--kind-color-text-muted); margin: 0 0 var(--kind-space-5); } .kind-workspace-card__actions { margin-top: var(--kind-space-2); } /* The "already have an account" page is short + reassuring, so it stays centered. */ .kind-workspace-card--centered { text-align: center; } .kind-workspace-card--centered .kind-workspace-card__sub { text-align: center; } .kind-workspace-card--centered .kind-workspace-card__body { max-width: 52ch; margin-left: auto; margin-right: auto; } .kind-workspace-card--centered .kind-form__actions { justify-content: center; } /* #12 (2.2): branding settings form, accent-colour input + live swatch. The swatch is decorative (aria-hidden); the hex value + the contrast read-out carry the meaning (not colour-alone). */ .kind-branding-color-row { display: flex; align-items: center; gap: var(--kind-space-3); } .kind-branding-color-input { max-width: 12ch; font-family: var(--kind-font-mono, monospace); } .kind-branding-color-swatch { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--kind-radius); border: 1px solid var(--kind-color-border-soft); } /* #12 (2.2): logo FILE upload + current-logo preview. The upload form is a distinct fieldset from the URL-input path so the "fil ELLER URL" choice is clear. The preview is a real with alt text; when no logo is set we show an honest "no logo" note (never a fake placeholder image). */ .kind-branding-logo-preview { display: flex; align-items: center; gap: var(--kind-space-4); margin-bottom: var(--kind-space-3); } .kind-branding-logo-preview__img { max-width: 220px; max-height: 80px; width: auto; height: auto; object-fit: contain; border: 1px solid var(--kind-color-border-soft); border-radius: var(--kind-radius); background: var(--kind-color-surface); padding: var(--kind-space-2); } .kind-branding-logo-preview__none { color: var(--kind-color-text-muted); /* 5.87:1, past AA */ font-style: italic; } .kind-branding-upload { margin: 0 0 var(--kind-space-5); padding: var(--kind-space-4); border: 1px solid var(--kind-color-border-soft); border-radius: var(--kind-radius); background: var(--kind-color-surface); } .kind-branding-upload__or { margin: var(--kind-space-4) 0 var(--kind-space-2); font-weight: 600; color: var(--kind-color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--kind-font-small); } /* The native file input keeps a 44px target via padding on the row. */ .kind-branding-file-input { min-height: 44px; padding: var(--kind-space-2) 0; } /* The in-session switch page is NOT a centered modal-card (the actor has the full portal chrome): it is a contained panel under the page heading. */ .kind-workspace-switch-page__lede { max-width: 60ch; color: var(--kind-color-text-muted); margin-bottom: var(--kind-space-5); } .kind-workspace-card--panel { background: var(--kind-color-surface); border: 1px solid var(--kind-color-border-soft); border-radius: var(--kind-radius); padding: var(--kind-space-5); box-shadow: var(--kind-shadow-sm); } /* ============ Wave 3: invite flow (AT-58) ============ */ /* Radio group for the invite role picker. Each radio sits on its own row so the longer help text stays readable. Visual treatment is a soft card so the chosen state is obvious without resorting to colour alone (WCAG 1.4.1). */ .kind-radio-group { display: flex; flex-direction: column; gap: var(--kind-space-2); } /* CP-02-resten (#87): en KONTROLL-kant, aldrig hairlinen. Hela etiketten är träffytan för sin radioknapp, så raden ÄR kontrollen och kind.css §1 WATCH-ITEM 1 gäller den rakt av: fältkanter använder --kind-color-border. */ .kind-radio { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--kind-space-3); align-items: start; padding: var(--kind-space-3) var(--kind-space-4); background: var(--kind-color-surface); border: 1px solid var(--kind-color-border); border-radius: var(--kind-radius); cursor: pointer; min-height: 44px; } .kind-radio:hover { background: var(--kind-color-surface-muted); } .kind-radio input[type="radio"] { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--kind-color-accent); } .kind-radio:has(input:checked) { border-color: var(--kind-color-accent); background: var(--kind-color-accent-bg); } .kind-radio__label { display: flex; flex-direction: column; gap: var(--kind-space-1); font-weight: 600; color: var(--kind-color-text); } /* WS-C / ADR-025: the membership-row meta line (role, and an "Aktiv nu" badge on the switch page). A muted, lighter line under the clinic name so the clinic name stays the dominant element of each tappable choice. */ .kind-radio__meta { display: flex; align-items: center; gap: var(--kind-space-2); flex-wrap: wrap; font-weight: 400; font-size: var(--kind-font-small); color: var(--kind-color-text-muted); } /* WS-C / ADR-025: legend for the membership fieldset on the org-picker + switch pages. The fieldset itself is chromeless (.kind-fieldset above); the legend needs to read as a small section label, not inherit the giant default. */ .kind-fieldset__legend { padding: 0; margin-bottom: var(--kind-space-3); font-weight: 700; font-size: var(--kind-font-base); color: var(--kind-color-text); } /* WS-C / ADR-025: membership choice rows on the org-picker + switch pages. These are larger, fully-tappable choices than the compact invite role picker, so the clinic name reads bigger and the row has more breathing room. Stacks the radio above the (multi-line) label on the narrowest screens. The selected + currently active states are conveyed by BOTH the accent border/wash (from .kind-radio's :has(input:checked)) AND the "Aktiv nu" badge, never colour alone (WCAG 1.4.1). */ .kind-radio--workspace { grid-template-columns: 1.5rem 1fr; padding: var(--kind-space-4); min-height: 56px; } .kind-radio--workspace .kind-radio__label { gap: var(--kind-space-2); font-size: var(--kind-font-base); } /* The currently-active mottagning on the switch page: a calm accent wash + a thicker left edge so it stands out from the other choices before any selection. The "Aktiv nu" success badge carries the meaning for non-colour users. */ .kind-radio--active { border-color: var(--kind-color-accent); border-left-width: 4px; background: var(--kind-color-accent-bg); } /* Copy-to-clipboard box (invite success surface). The input stretches, the button hugs its label so it remains a 44x44 target. */ .kind-copybox { display: flex; flex-direction: column; gap: var(--kind-space-2); padding: var(--kind-space-4); background: var(--kind-color-surface-muted); border: 1px solid var(--kind-color-border-soft); border-radius: var(--kind-radius); margin: var(--kind-space-4) 0; } .kind-copybox__row { display: flex; gap: var(--kind-space-2); flex-wrap: wrap; } .kind-copybox__input { flex: 1; min-width: 18rem; font-family: var(--kind-font-mono); font-size: 0.9375rem; } /* The copy button sits inside the muted .kind-copybox panel. A transparent kind-btn--secondary would inherit that muted background and drop the accent text to 4.46:1 (below WCAG 2.2 AA 1.4.3). Force a solid white (surface) background so the accent text keeps its 5.34:1 ratio on every copybox (this 2FA page + the invite-success copybox that reuses the component). */ .kind-copybox__btn { white-space: nowrap; background: var(--kind-color-surface); } .kind-copybox__btn:hover { background: var(--kind-color-accent-bg); } .kind-copybox__btn[aria-pressed="true"] { background: var(--kind-color-success); color: var(--kind-color-text-on-accent); border-color: var(--kind-color-success); } /* ============ Anteckningar (internal case-notes, G3 ND-5) ============ */ /* Colleague-only working notes. Rendered both as a full section on the patient detail page and inside the chat-view aside, so the styles lean on the shared .kind-profile-section spacing and only add the privacy banner + the note-list treatment. The note body is Art. 9 health data, NEVER patient-visible. */ .kind-anteckningar__privacy { display: flex; align-items: center; gap: var(--kind-space-2); margin: 0 0 var(--kind-space-4); padding: var(--kind-space-3) var(--kind-space-4); background: var(--kind-color-info-bg); border: 1px solid var(--kind-color-info); border-radius: var(--kind-radius); color: var(--kind-color-info); font-weight: 600; font-size: 0.9375rem; } .kind-anteckningar__privacy-icon { flex: 0 0 auto; line-height: 0; } /* Calm "ej journalhandling" clarification (ADR-057 Option B). Honest status, not alarmist: muted body text with a soft left rule (structural emphasis, not colour-only) so a clinician never mistakes the working note for the patient journal. The meaning is carried by the text, the border is decoration. */ .kind-anteckningar__journal-note { margin: 0 0 var(--kind-space-4); padding: 0 0 0 var(--kind-space-3); border-left: 3px solid var(--kind-color-border-soft); color: var(--kind-color-text-muted); font-size: 0.875rem; line-height: 1.5; } .kind-anteckningar__list { list-style: none; margin: 0 0 var(--kind-space-4); padding: 0; display: flex; flex-direction: column; gap: var(--kind-space-3); } .kind-anteckning { background: var(--kind-color-surface-muted); border: 1px solid var(--kind-color-border-soft); border-radius: var(--kind-radius); padding: var(--kind-space-3) var(--kind-space-4); } .kind-anteckning__body { margin: 0 0 var(--kind-space-2); /* Preserve the author's line breaks in a plain free-text note (Jinja auto-escapes the body, so this is display-only, never raw HTML). */ white-space: pre-wrap; overflow-wrap: anywhere; } .kind-anteckning__meta { margin: 0; font-size: 0.875rem; color: var(--kind-color-text-muted); } /* ---- web#811: sidan Anteckningar + detaljvyn --------------------------- * * De tva nya ytorna (`/admin/patient//anteckningar` och * `.../anteckning/`) ateranvander klasserna ovan for sjalva posterna, sa * en anteckning ser likadan ut pa alla fyra ytor. Det som behover egna regler * ar bara sidhuvudets ikon, patientraden under rubriken, "Ny * anteckning"-utfallningen och borttagningsblocket. * * `` med `.kind-btn` foljer husets BEFINTLIGA utfallningsmonster * `.kind-profile-section__more > summary` RAD FOR RAD, och det ar avsiktligt: * `list-style: none` + `display: inline-flex` behovs for knappformen, och FE-2b * (2026-08-07) slog fast att en summary som tappar sin nativa markor maste * ersatta den -- darav `::after`-triangeln som vander vid `[open]` -- och att * kontrollen ska bara systemets fokusring och inte webblasarens. Tappytan ar * kvar: `.kind-btn`s egna hojdgolv galler. */ .kind-anteckningar__rubrikikon { display: inline-flex; vertical-align: text-bottom; line-height: 0; margin-inline-end: var(--kind-space-2); } .kind-anteckningar__patient { margin: 0 0 var(--kind-space-4); font-size: 1rem; font-weight: 600; } .kind-anteckningar__ny { margin: 0 0 var(--kind-space-4); } .kind-anteckningar__ny > summary { display: inline-flex; align-items: center; list-style: none; cursor: pointer; } .kind-anteckningar__ny > summary::-webkit-details-marker { display: none; } .kind-anteckningar__ny > summary::after { content: " \25BC"; font-size: 0.75em; margin-left: var(--kind-space-2); } .kind-anteckningar__ny[open] > summary::after { content: " \25B2"; } .kind-anteckningar__ny > summary:focus-visible { outline: var(--kind-focus-ring); outline-offset: 2px; } .kind-anteckning__lank { margin: var(--kind-space-2) 0 0; font-size: 0.875rem; } .kind-anteckning--detalj { margin: 0 0 var(--kind-space-4); } /* Borttagningsblocket ar INTE en varningsruta: borttagningen ar reversibel i * den meningen att raden bevaras (3 kap. 14 § PDL), och texten ska beskriva det * sakligt i stallet for att larma. Darfor samma dampade ton som * "ej journalhandling"-klargorandet, och knappen -- inte rutan -- bar * konsekvensfargen. */ .kind-anteckning__borttagning-text { margin: 0 0 var(--kind-space-3); color: var(--kind-color-text-muted); font-size: 0.875rem; line-height: 1.5; } /* ---- web#885: anteckningsmallen med de sju rubrikerna (vaxeln) --------- * * "Byt till text" / "Byt till mall" UTAN javascript och UTAN en request. * Mekaniken ar tva visuellt gomda radioknappar och `:checked ~`, exakt samma * teknik som `.kind-pexels__radio` (#223) langre ned i den har filen. * * VARFOR INTE EN LANK SOM LADDAR OM SIDAN: `domain-compliance` villkor N2 pa * web#811 lagger en `read.anteckning.view`-rad per visning av en anteckningsyta. * En vaxel som gick via servern hade alltsa skrivit en extra rad i patientens * loggutdrag varje gang klinikaren bytte format -- en pastadd utlamning som inte * skedde. Vaxeln ar darfor helt klientsidig och helt stillastaende. * * GRADVIS FORSAMRING: utan CSS visas BADA grenarna (mallgrenen forst) och bada * ar fullt anvandbara formular. Radioknapparna ar visuellt gomda men KVAR i * tabbordningen och exponerade for hjalpmedel (`aria-label` pa varje knapp, * `` i `.kind-visually-hidden`), samma monster som `.kind-pexels__radio`. * * Etiketten for det format man REDAN star i doljs, sa att knappen alltid sager * vad trycket gor -- "Byt till text" nar mallen visas, "Byt till mall" nar * fritexten visas. Det ar gamla KIND:s beteende (mod/2983.js). */ .kind-anteckningsmall { border: 0; margin: 0; padding: 0; min-inline-size: 0; } .kind-anteckningsmall__radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .kind-anteckningsmall__knappar { margin: 0 0 var(--kind-space-3); } .kind-anteckningsmall__knapp { display: none; cursor: pointer; font-size: 0.875rem; text-decoration: underline; color: var(--kind-color-accent); } .kind-anteckningsmall__gren { display: none; } .kind-anteckningsmall__radio--mall:checked ~ .kind-anteckningsmall__knappar .kind-anteckningsmall__knapp--till-text, .kind-anteckningsmall__radio--text:checked ~ .kind-anteckningsmall__knappar .kind-anteckningsmall__knapp--till-mall { display: inline-block; } .kind-anteckningsmall__radio--mall:checked ~ .kind-anteckningsmall__gren--mall, .kind-anteckningsmall__radio--text:checked ~ .kind-anteckningsmall__gren--text { display: block; } /* Fokusringen maste synas pa ETIKETTEN, eftersom radioknappen sjalv ar visuellt * gomd: utan den har regeln ar vaxeln osynlig for tangentbordet (WCAG 2.4.7). */ .kind-anteckningsmall__radio:focus-visible ~ .kind-anteckningsmall__knappar .kind-anteckningsmall__knapp { outline: var(--kind-focus-ring); outline-offset: 2px; } /* ============ Meddelandemallar (message templates, G5) ============ */ .kind-mall-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kind-space-4); } .kind-mall { background: var(--kind-color-surface); border: 1px solid var(--kind-color-border-soft); border-radius: var(--kind-radius); padding: var(--kind-space-4); } .kind-mall__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kind-space-3); } .kind-mall__titel { margin: 0; } /* web#1676: malltypen i listan, och typvalet på skapa-formuläret. Väljer admin Textmall döljs fältredigeraren (servern avvisar ändå en textmall med fält; utan :has-stöd syns redigeraren som förut). */ .kind-mall__typ { color: var(--kind-color-text-muted); } .kind-mall__typ-val { display: flex; gap: var(--kind-space-2); align-items: center; } /* Efter ett avvisat sparande (textmall med fält) visas fälten ändå, så att admin kan ta bort dem: formuläret bär då data-kind-visa-falt. */ .kind-form:not([data-kind-visa-falt]):has([data-kind-malltyp="text"]:checked) .kind-mall__falt-redigerare { display: none; } .kind-mall__body { margin: var(--kind-space-2) 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--kind-color-text-muted); } .kind-mall__meta { margin: 0 0 var(--kind-space-3); font-size: 0.875rem; color: var(--kind-color-text-muted); } .kind-mall__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--kind-space-3); } .kind-mall__edit { flex: 1 1 auto; min-width: 0; } .kind-mall__edit-summary { display: inline-flex; } .kind-mall__edit-form { margin-top: var(--kind-space-3); } .kind-mall__archive-form { margin: 0; flex: 0 0 auto; } /* web#1326: kallelsemallens fält. Översikten i listan och fältredigeraren (native
    , fungerar utan JavaScript). */ .kind-mall__falt { margin: var(--kind-space-2) 0 var(--kind-space-3); } .kind-mall__falt-lista { margin: var(--kind-space-2) 0; padding-left: var(--kind-space-4); } .kind-mall__falt-redigerare { margin: var(--kind-space-3) 0; } .kind-mall__falt-summary { display: inline-flex; } .kind-mall__falt-rad { margin: var(--kind-space-3) 0 0; padding: var(--kind-space-3); border: 1px solid var(--kind-color-border-soft); border-radius: var(--kind-radius); min-width: 0; } .kind-mall__falt-val { display: flex; align-items: center; gap: var(--kind-space-2); cursor: pointer; } .kind-mall__falt-val input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; } /* G4 "Schemalägg meddelande". A native
    disclosure so the schedule fields are collapsible WITHOUT JavaScript (a clinician replying normally is not crowded; the section opens on click). The summary is a 44px-tall click target with a visible focus ring; the marker is the native triangle. */ .kind-schemalagg { margin: var(--kind-space-4) 0 0; border-top: 1px solid var(--kind-color-border); padding-top: var(--kind-space-4); } .kind-schemalagg__summary { display: flex; align-items: center; gap: var(--kind-space-2); min-height: 44px; padding: var(--kind-space-2) var(--kind-space-2); cursor: pointer; font-weight: 600; color: var(--kind-color-text); border-radius: var(--kind-radius); } .kind-schemalagg__summary:hover { background: var(--kind-color-surface-muted); } .kind-schemalagg__summary:focus-visible { outline: var(--kind-focus-ring); outline-offset: 2px; } .kind-schemalagg__summary-icon { color: var(--kind-color-accent); display: inline-flex; } .kind-schemalagg__form { margin-top: var(--kind-space-3); } /* The read-receipt checkbox: the box + its label sit on one baseline so the whole label is a click target; the help sits below. */ .kind-schemalagg__receipt-label { display: flex; align-items: center; gap: var(--kind-space-2); cursor: pointer; } .kind-schemalagg__receipt-label input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; } /* G4 "Kommande schemalagda meddelanden" panel: the conversation's pending queued replies, each a muted inset card with the body, the send time, an optional "Läskvittens begärd" badge, and an Avbryt button. */ /* PIXELBUDGET 2026-07-26 (docs/contracts/chat-pixel-budget.md, tak 45px tom eller hopfälld). Panelen mätte 125px av en 772px hög chattkolumn, 16 procent, för något som i normalfallet är tomt. Kunden vill ha kvar panelen, så den blir en hopfälld sammanfattningsrad byggd på native
    /. Höjdbudget hopfälld: summary min-height 44px, sektionen har ingen egen padding, panelen är display:none tills [open]. Marginalen mot skrivmodulen kliver ned från 24px till 12px, den räknas inte i taket men äter kolumnen. */ .kind-schemalagda { margin-top: var(--kind-space-3); } .kind-schemalagda__disclosure { margin: 0; } /* Sammanfattningsraden. list-style:none + ::marker-nollningen tar bort UA:ns triangel; chevronen ritas i stället av ::after så den kan rotera vid [open]. TRÄFFYTAN ÄR 44px, INTE 40 (granskningsfix 2026-07-26). Raden låg en runda på `min-height: 40px` med motiveringen att kontraktet satte 40px för elementet. Det var fel avvägning och kontraktet sa redan varför: "Tillgänglighet vinner vid konflikt: 44px träffyta och WCAG 2.2 AA-kontrast är golv, inte förhandlingsbart. Ryms inte budgeten med bibehållen a11y, eskalera i stället för att offra a11y." Priset för att följa den klausulen är 5px av en 772px kolumn, alltså 0,6 procent, och kontraktets tak för elementet är höjt till 45px (44 + 1px kant) i samma runda. Träffytan är HELA radens bredd x 44px. */ .kind-schemalagda__summary { display: flex; align-items: center; gap: var(--kind-space-2); min-height: 44px; padding-inline: var(--kind-space-2); /* CP-02-resten (#87): summary är utfällningskontrollen, alltså en komponent, inte en gruppering. Måttet tas mot bäraren BAKOM raden (3.34:1 mot vit, 3.11:1 mot arbetsytan); mot radens EGEN inskjutna fyllning mäter samma token 2.89:1, vilket är kanten inåt och inte den som identifierar raden. */ border: 1px solid var(--kind-color-border); border-radius: var(--kind-radius); background: var(--kind-color-surface-muted); cursor: pointer; list-style: none; } .kind-schemalagda__summary::-webkit-details-marker { display: none; } .kind-schemalagda__summary::marker { content: ""; } .kind-schemalagda__summary:focus-visible { outline: var(--kind-focus-ring); outline-offset: 2px; } /* Rubriken behåller sitt id (aria-labelledby) och sin h2-nivå, men får radens kompakta typografi i stället för h2-basens 1.75rem + marginal. */ .kind-schemalagda__title { margin: 0; font-family: inherit; font-size: var(--kind-font-small); font-weight: 600; line-height: 1.3; letter-spacing: normal; color: var(--kind-color-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* CP-14: vid smal bredd ryms inte "Kommande schemalagda meddelanden" på en rad, och ellipsen dolde 50px av rubriken vid 320 normal och 215px vid 320 xxlarge (uppmätt mot deployen 2026-08-04, mått 6:s AVKORTNINGS-dimension). Kontraktet mäter mått 6 i TVÅ dimensioner just för att ett grönt bredd-tak kan samexistera med avkortad text. Radbrytning kostar en rad, ellipsen kostade betydelsen, alltså är detta rätt byte. Taket är oförändrat: raden växer nedåt inuti en panel som redan är hopfällbar. */ @media (max-width: 430px) { .kind-schemalagda__title { overflow: visible; text-overflow: clip; white-space: normal; } } /* Antalet syns i hopfällt läge, så en väntande utskickskö aldrig är osynlig. */ .kind-schemalagda__count { margin-inline-start: auto; flex: 0 0 auto; min-width: 1.5rem; padding-inline: var(--kind-space-2); border-radius: var(--kind-radius-pill); background: var(--kind-color-surface); border: 1px solid var(--kind-color-border-soft); font-size: var(--kind-font-small); font-weight: 700; text-align: center; color: var(--kind-color-text); } .kind-schemalagda__summary::after { content: ""; flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--kind-color-text-muted); border-bottom: 2px solid var(--kind-color-text-muted); transform: rotate(45deg); margin-inline-start: var(--kind-space-1); } .kind-schemalagda__disclosure[open] .kind-schemalagda__summary::after { transform: rotate(-135deg); } /* Innehållet deklareras display:none och slås på vid [open]. Webbläsaren gör redan det via UA-stilen, men den explicita författarregeln gör tillståndet läsbart för render- och CSS-mattetester (som inte kan känna till UA-stilar), och den är no-op i webbläsaren. */ .kind-schemalagda__panel { display: none; } .kind-schemalagda__disclosure[open] .kind-schemalagda__panel { display: block; padding-top: var(--kind-space-3); } .kind-schemalagda__list { list-style: none; margin: var(--kind-space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--kind-space-3); } .kind-schemalagda__item { background: var(--kind-color-surface-muted); border: 1px solid var(--kind-color-border-soft); border-radius: var(--kind-radius); padding: var(--kind-space-3) var(--kind-space-4); } .kind-schemalagda__body { margin: 0 0 var(--kind-space-2); color: var(--kind-color-text); white-space: pre-wrap; overflow-wrap: anywhere; } .kind-schemalagda__meta { margin: 0 0 var(--kind-space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--kind-space-2); font-size: 0.875rem; color: var(--kind-color-text-muted); } .kind-schemalagda__when time { font-weight: 600; color: var(--kind-color-text); } .kind-schemalagda__cancel-form { margin: 0; } /* ---- Wave 3a composer "+" disclosure popover (docs/acceptance/ wave3-build-spec.md sections 1-2, WCAG 2.2 AA). The "+" trigger sits on the compose action row next to "Skicka" (was "Skicka svar" until #427 point 27c, 2026-08-31); the popover panel groups the share items + their revealed panes. The disclosure script collapses the panel + panes on load (they render OPEN as the no-JS fallback). ---- */ /* The compose action row: the "+" share trigger + the primary Skicka button. */ .kind-compose__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kind-space-3); margin-top: var(--kind-space-2); /* Positioning context for the floating emoji panel (2.0 #4). */ position: relative; } /* The "+" trigger. Icon-only (V1 B1, was icon + label) + aria-label + title; min 44x44 target (A6, 2.5.8 minimum is 24, we aim 44 for the older/lower- vision clinician), now explicit via min-width since the label no longer pads the button out. */ .kind-compose__share-trigger { display: inline-flex; align-items: center; justify-content: center; gap: var(--kind-space-2); min-height: 44px; min-width: 44px; } /* GARD, ursprungsprecedens och INTE specificitet (regel 27 korollarium 2). UA-arkets `[hidden]:not([hidden=until-found i]):not(embed) { display: none }` saknar `!important`, och en NORMAL forfattardeklaration slar en NORMAL user-agent-deklaration i kaskadens sorteringsordning oavsett specificitet. `display: inline-flex` ovan gor darfor `hidden` INERT pa den har klassen. Elementen bar idag ocksa `.kind-btn`, vars egen gard (kind.css) ar 0-2-0 och raddar dem, alltsa var defekten LATENT och inte synlig: kaskadsonden mater `display:none` pa alla tre barare i dag, men samma knapp UTAN `.kind-btn` mattes till 48x48 malad. Att lana en syskonklass gard ar precis den smala tillampning regel 27 korollarium 2 varnar for, sa klassen bar nu sin egen. PER KLASS och UTAN `!important`, medvetet: den generella `[hidden] { display: none !important }` (Bootstrap Reboot) bryter `hidden="until-found"` och ar en oppen defekt dar (twbs/bootstrap#40688). Den har formen vinner pa specificitet 0-2-0 mot regeln ovans 0-1-0. Samma gard som `.kind-compose__emoji-trigger` och `.kind-compose__format-trigger` redan bar. Vakt: tests/test_hidden_display_gard.py. */ .kind-compose__share-trigger[hidden] { display: none; } .kind-compose__share-trigger-icon { display: inline-flex; flex: 0 0 auto; } /* Emoji smiley trigger (2.0 #4). Same footprint as the "+" trigger. */ .kind-compose__emoji-trigger { display: inline-flex; align-items: center; justify-content: center; gap: var(--kind-space-2); min-height: 44px; min-width: 44px; } .kind-compose__emoji-trigger[hidden] { display: none; } .kind-compose__emoji-trigger-icon { display: inline-flex; flex: 0 0 auto; } /* Primary send (#42, shared composer contract §1); >=44px target inherited from .kind-btn, now also an explicit min-width (icon-only under V1 B1). It is the last child of the action row and never enters the popover, so it stays put. */ .kind-compose__send { display: inline-flex; align-items: center; justify-content: center; gap: var(--kind-space-2); min-height: 44px; min-width: 44px; /* On a narrow action row the send button sits at the end and does not get pushed off; the row wraps (flex-wrap) before send would clip. */ margin-inline-start: auto; } .kind-compose__send-icon { display: inline-flex; flex: 0 0 auto; } /* ---------------------------------------------------------------------------- * V1 B1 (#56, chatt-yta 2.1 feedback-plan 2026-07-08): ren ikonrad. * * Consultant-approved 2026-07-12 (plan beslutslogg): the share-trigger, emoji * trigger, and Skicka button drop their visible text label for a pure icon * row (kundkrav-parity with Kind's own product). This SUPERSEDES the * "icon + text, NEVER icon-only" contract note written into * _chat_composer.html on 2026-07-01 (amended there, pointer back here). Each * button keeps (added where missing) a Swedish aria-label + a matching * `title` tooltip + the explicit min-width/min-height floor above; the * "-text" spans stay IN THE DOM (template-owned no-JS-independent fallback * carrier) and are hidden purely via CSS below, never deleted, since the * aria-label already supplies the accessible name (HTML-AAM: aria-label wins * over subtree content). The POPOVER MENU items ("Dela mall", "Dela * formulär", ...) keep their visible labels (out of scope, a disclosure list * is a different pattern); only the outer action row's 3 buttons go icon-only. */ .kind-compose__share-trigger-text, .kind-compose__emoji-trigger-text, .kind-compose__format-trigger-text { display: none; } /* ---- CP-06 (issue #91, briefens §4.4): SKICKA ÅTERFÅR SIN SYNLIGA ETIKETT --- * Speglar samma utbrytning i kind_patient.css, där hela härledningen ligger. * Kort: båda personorna klassar Skicka KRITISK, produkten bar redan text på * kollegie-chattens Skicka och ikon-only på patientchattens, alltså tappade * ytan med STÖRST konsekvens sitt ord, och etiketten kostar pixelbudgeten noll * eftersom knappen är `display:none` i `--collapsed`, som är det enda läge * taket mäter. * * BÅDA sheeten måste ändras. Vårdgivarytorna laddar kind_admin.css OCH * kind_patient.css, i den ordningen (se admin/chatt.html + admin/arbetsvy.html), * så en ändring bara här hade tystats av den senare filens `display:none`. */ .kind-compose__send-text { display: inline; } /* G2 (V6, chatt-fönster-restfix 2026-07-14, spec docs/design/patient-chatt-3zon- * 2026-07-14.md): the V4 (#63) Fetstil + Infoga länk format triggers join the * SAME ren-ikonrad as +/emoji/skicka (decision B1 extended). Their "-text" span * is CSS-hidden above (icon-only); the accessible name is the template * aria-label + matching title (WCAG 4.1.2). Same square 44px clinician tap floor * (2.5.8) as the +/emoji triggers. The [hidden] guard restores the UA * [hidden]{display:none} that display:inline-flex would beat (author-origin * precedence), so the no-JS `hidden` posture (JS-only insertion helper, dead * without kind_composer_format.js, same as emoji) still holds. */ .kind-compose__format-trigger { display: inline-flex; align-items: center; justify-content: center; gap: var(--kind-space-2); min-height: 44px; min-width: 44px; /* persona-vardpersonal V2 (2026-07-14): the "B" (Fetstil) glyph must read as a FLAT format-tool button, NOT a circle/chip, because a circled "B" reads as a patient-avatar INITIAL in a clinical UI (patient initials are circular avatars everywhere) = a real confusion risk. Use the modest rounded-square --kind-radius (10px after CP-05, < 22px = half of 44, so never a circle) so bold + link read as distinct, flat format tools. CP-05 (#90) note: .kind-btn is no longer a pill, so this override now PINS the flat shape rather than correcting a circle. Keep it. */ border-radius: var(--kind-radius); } .kind-compose__format-trigger[hidden] { display: none; } .kind-compose__format-trigger-icon { display: inline-flex; flex: 0 0 auto; } .kind-compose__format-trigger-text { white-space: nowrap; } /* ---------------------------------------------------------------------------- * V1 (#56, chatt-yta 2.1 feedback-plan 2026-07-08): composer modes. * * JS-progressive-enhancement ONLY (kind_composer_mode.js); the two classes * below are NEVER added without JS, so a no-JS clinician always sees the * plain, fully-open composer (unchanged default markup). INACTIVE * (kind-compose--collapsed, textarea empty + unfocused): a low input row + * the "+" trigger only, emoji + Send hidden. ACTIVE (kind-compose--active, * textarea focused OR has content): the full icon row shows. The read-receipt * checkbox (below, [data-composer-receipt]) is a THIRD, independent reveal: * it appears only once the textarea has actual content (regardless of focus), * so opting in to a receipt is only offered once there is a message to attach * it to. */ .kind-chat__compose.kind-compose--collapsed .kind-compose__emoji-trigger, .kind-chat__compose.kind-compose--collapsed .kind-compose__format-trigger, .kind-chat__compose.kind-compose--collapsed .kind-compose__send { display: none; } /* ---- PIXELBUDGET 2026-07-26: det inaktiva läget är EN rad (tak 60px) -------- * docs/contracts/chat-pixel-budget.md. Taket är 60px, inte 56: kontraktets * ändringslogg 2026-07-26 härleder det ur 44px a11y-golv för träffytan plus upp * till 16px krom (padding, kantlinje, sr-only-rubrikens 1px). 56 var en påhittad * rund siffra. * * Vad som gick fel förra gången, ordagrant ur kontraktet: #56 sa "göm * textfunktioner och skicka-knapp när modulen är inaktiv". Det byggdes exakt så * (reglerna ovan), och tests/test_composer_mode_css.py verifierar ärligt att de * fyra knapparna ligger på display:none. Modulen var ändå 203px, eftersom ingen * gömde etiketten (21px), hjälptexten (21px + 12px marginal), knappen "Dela * eller bifoga"-raden eller modulens egna paddingar. Vi byggde kontraktets * bokstav och mätte kontraktets bokstav; ingen mätte utfallet. * * Höjdbudgeten i det inaktiva läget, deklaration för deklaration: * border-top 1px * padding-top (space-1) 4px * raden: max(fält 44, "+" 44) 44px * ------------------------------------ * summa 49px (tak 60px) * * Den summan är CSS-matte. Python-modellen i tests/test_chat_pixel_budget.py * mäter 53px och den riktiga webbläsaren mätte 58px 2026-07-26, alltså ligger * utfallet 2px under taket, inte 11. Skriv inte om marginalen till mer än den * är. * * Etiketten och hjälptexten flyttar till sr-only-mönstret, ALDRIG display:none: * textareans aria-describedby måste fortsätta lösa ut och rubriken måste finnas * kvar för skärmläsare (WCAG 3.3.2 / 1.3.1). Så fort modulen aktiveras (fokus * eller innehåll) återgår allt till fullt läge, inklusive läskvittensvalet. * Selektorerna är (0,2,0)+ så de vinner över kind_patient.css basregler, som * laddas EFTER den här filen på klinikerytorna. */ .kind-chat__compose.kind-compose--collapsed { padding-top: var(--kind-space-1); gap: 0; } .kind-chat__compose.kind-compose--collapsed .kind-field__label, .kind-chat__compose.kind-compose--collapsed .kind-field__help { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Enradigt fält i viloläge. Höjden pinnas i CSS (inte bara av autoexpand-JS:et) * så budgeten håller även innan skripten hunnit köra och utan JavaScript- * beroende. 44px = klinikerns tappgolv (WCAG 2.5.8, husgolv). * * #146: 44 är fortfarande GOLVET men inte längre TAKET, exakt samma rättelse * som patientytans G3-regel i kind_patient.css. En absolut pixelhöjd på ett * fält vars innehåll skalar klipper raden så fort textskalan höjs: vid xxlarge * är radhöjden 36px och vadderingen 36px, alltså 72px innehåll i en 44px låda. * Ytan var INTE rapporterad i #146 (granskaren tittade på patientchatten), den * hittades genom att svepa varje bärare av mekanismen. Kollegie-chatten var * dessutom värst av tre ytor i pixelbudgetarbetet av samma skäl: kunden * rapporterar det den ser, inte det som finns. * * Tokens deklareras på .kind-compose__textarea i kind_patient.css, som alla * tre klinikerytorna laddar (arbetsvy, chatt, team_chat_visa laddar den EFTER * den här filen). Fallback-värdena gör regeln ofarlig om den ordningen någon * gång bryts: utan token får vi tillbaka exakt dagens 44px. */ .kind-chat__compose.kind-compose--collapsed .kind-compose__textarea { padding-block: var(--kind-komposer-vilo-vaddering, var(--kind-space-3)); min-height: max(44px, var(--kind-komposer-enrad-vilo, 44px)); height: max(44px, var(--kind-komposer-enrad-vilo, 44px)); } /* Fältet och "+"-knappen delar rad; läskvittensraden bryter alltid till en egen * rad i AKTIVT läge (flex-basis 100%), så DOM-ordningen fält -> läskvittens -> * ikonrad bevaras och fokusordningen är oförändrad (WCAG 2.4.3). */ .kind-chat__compose .kind-chat__compose-row > .kind-compose__receipt { flex: 1 0 100%; } /* Ikonradens margin-top var till för den STAPLADE layouten. Inne i rad-wrappern * äger radens egen gap avståndet, så marginalen blir ren dubbelräkning: den lade * 8px ovanpå en 48px-knapp i en 60px-budget. */ .kind-chat__compose .kind-chat__compose-row > .kind-compose__actions { margin-top: 0; } /* #178: DELNINGSKNAPPEN ÄR RADENS FÖRSTA BARN, I BÅDA LÄGENA. * * Annica (KIND) 2026-08-11: "+ på vänster sida istället för höger sida." * Knappen flyttade ut ur `.kind-compose__actions` och in i rad-wrappern, se * den långa noten i templates/admin/_chat_composer.html för varför en `order` * på åtgärdsraden inte dög. `flex: 0 0 auto` så knappen varken växer eller * krymper när fältet gör det; radens `align-items: flex-start` (kind_patient.css) * håller den på radens överkant. Följden är att knappens position i radens * koordinatsystem är IDENTISK i viloläge och aktivt läge, vilket är en starkare * gard mot CP-20:s tvåklicksdefekt än lägesneutraliteten ensam (den står kvar). * Uppmätt i e2e/cp181920-komposer-utfall.mjs mått P. * * Deklarerad i BÅDA sheeten, som `.kind-compose__send-text` ovan: vårdgivarytorna * laddar kind_admin.css OCH kind_patient.css, och en regel som bara finns i det * ena är beroende av en laddningsordning ingen assertion vaktar. */ .kind-chat__compose-row > .kind-compose__share-trigger { flex: 0 0 auto; /* Reservationens bredd, se `--kind-komposer-plus` på `.kind-chat__compose-row` * i kind_patient.css. Fallbacken 48px gör regeln ofarlig om laddningsordningen * någon gång bryts, samma mönster som `.kind-compose__textarea`-tokens ovan. * 48px ligger över vårdgivarytans 44px träffytegolv, alltså en skärpning. */ min-width: var(--kind-komposer-plus, 48px); } /* LOAD-BEARING, hittad av pixelbudget-modellen efter att procent-basis stöddes: * `.kind-compose__actions { flex: 1 1 100% }` (kind_patient.css, som * klinikerytorna också laddar) ger ikonraden HELA radbredden som flex-basis, så * den bryter till en EGEN rad. Med den kvar mätte den inaktiva modulen 109px, * inte 49px: fält 44 + radgap 12 + ikonrad 48 + krom. * * #178 ÄNDRADE PREMISSEN, läs inte raden ovan som nuläge: sedan "+" flyttade ut * ur åtgärdsraden är den TOM i viloläge (emoji, format och Skicka är * `display:none` där, och emoji-panelens skal är `hidden`). En tom flexruta är * 0px bred men äter ändå ett radgap, alltså 12px av fältets bredd i en kolumn * där `240 + 12 + 44 = 296` redan är trångt. Därför tas den UR FLÖDET i * viloläge i stället för att krympas till sitt innehåll. Inget syns mindre: * varje barn var redan dolt. */ .kind-chat__compose.kind-compose--collapsed .kind-compose__actions { display: none; } /* Fältets 240px min-width (kind_patient.css .kind-chat__compose-row .kind-field) * är rätt för det AKTIVA läget men bryter enradigheten i en smal kolumn: 240 + * 12 gap + 44 för "+" är 296, mer än vad arbetsvyns kolumn har kvar när * kö-railen och patientpanelen tagit sitt vid mindre bredder. I viloläge är * fältet en tom en-rads yta som får krympa; aktivt läge återfår golvet. */ .kind-chat__compose.kind-compose--collapsed .kind-chat__compose-row .kind-field { min-width: 0; } /* ---- #42 (chatt-yta 2.1) compact composer restyle ------------------------- KIND asked the clinician reply module to (a) auto-expand from a compact height, (b) consolidate the controls into a tight icon-forward row, and (c) weigh less so more of the thread shows. Presentation only: no field, hook, or POST target changed; the läskvittens opt-in, all 8 share items, and the schemalagda panel stay exactly where they were. OMBASLINJERAD #427 punkt 27a (2026-08-31): "the journalförs help" stod i uppräkningen ovan och stämmer inte längre, hjälptexten är BORTTAGEN ur templates/admin/_chat_composer.html på kundens begäran. Raden är rättad och inte struken, meningen bär fortfarande sitt #42-påstående om vad som INTE ändrades. */ /* Auto-expand reply textarea. Starts short (a comfortable few rows) and grows via kind_composer_popover.js's initAutoExpand (which sets height inline). The min-height keeps the empty field a 44px admin tap target (WCAG 2.5.8) instead of the tall 8rem the base .kind-field__textarea uses (that fixed 128px was the "not compact" finding, row 1.1c/1.1d). resize:none because the JS owns the height (a manual drag would fight the auto-grow). With NO JS the server rows="3" gives a usable default, so nothing is lost. Mirrors the patient composer's .kind-compose__textarea (kind_patient.css). */ .kind-compose__textarea { min-height: 44px; resize: none; } /* KIND-MOB-02 (UAT 2026-07-16): pa en kort smal viewport far svarsfaltet ett viewport-relativt tak UNDER JS-autoexpandens 6-radstak (~170px), sa att falt + laskvittens + Skicka-raden ryms tillsammans i en tangentbords-hog viewport. 24rem approximerar kringkromet (label + hjalptext + kvittensrad + ikonrad + marginaler + chatthuvudets synliga del); 2.75rem-golvet = 44px = min-height-golvet ovan, sa taket kan aldrig understiga tapp-ytan. SAMSPEL med JS (kind_composer_popover.js initAutoExpand): JS satter inline height + overflowY, och laser efter KIND-MOB-02-fixen tillbaka den FAKTISKA (CSS-klampade) hojden innan scrollbarsbeslutet, sa ett CSS-klampat falt scrollar internt i stallet for att klippa carets rad. Admin-scopad (.kind-body--admin): patientkomposern far sitt eget dvh-relativa tak i kind_patient.css av parallellt arbete. */ @media (max-width: 900px) { .kind-body--admin .kind-compose__textarea { /* #146: golvet 2.75rem skalar visserligen med textskalan (66px vid xxlarge), men det är ett TRÄFFYTETAL och inte en radhöjd, så det råkar bara ligga över radbehovet ibland: vid xxlarge kräver en rad 36 + 36 + 2 = 74px mot golvets 66. Med öppet tangentbord krymper 100dvh så mellantermen går negativ och golvet blir det som gäller, alltså precis det läge fältet mest behöver sin rad. Ett tredje led som ÄR radhöjden gör taket korrekt i just det läget utan att röra de två andra. */ max-height: max( 2.75rem, var(--kind-komposer-enrad, 2.75rem), calc(100dvh - 24rem) ); } } /* The läskvittens opt-in row sits tighter under the field so the module is lower. It stays a visible, labelled control (never moved into the popover), its LABEL TEXT is untouched by V1 B1 (only the outer icon row went icon-only). V1 (#56): with JS (kind_composer_mode.js) this row starts `hidden` and is revealed only once the reply textarea has content (see [data-composer-receipt] in _chat_composer.html); with no JS it stays permanently visible (the plain markup default), so nothing is lost. */ .kind-compose__receipt { margin-top: var(--kind-space-2); } .kind-compose__receipt .kind-field__help { margin-top: var(--kind-space-1); } /* P1-1 (reviewer 2026-07-12): the receipt wrapper carries .kind-field, whose author-origin `display: flex` (kind.css) BEATS the UA stylesheet's [hidden] { display: none } on origin precedence, so kind_composer_mode.js setting `receiptField.hidden = true` had NO visual effect and the checkbox stayed visible with JS on (the reveal-on-content never engaged). The same class of bug bit .kind-assign__form (borttagen i web#220) and the telefon-OTP step forms (kind_patient.css .kind-form[data-kind-telotp-*] [hidden]); this is the SAME established guard: an author-origin attribute selector that restores [hidden] winning. The no-JS path is untouched (the server never renders the attribute, so this rule never matches without JS). Guard-pinned by tests/test_composer_mode_css.py. */ .kind-compose__receipt[hidden] { display: none; } /* Compact icon-forward action row (clinician only, scoped by --compact so the patient composer keeps its own row). The three controls read as a tight icon row: since V1 B1 the label text is CSS-hidden (display:none, above) and the accessible name comes from aria-label + a matching title tooltip. The buttons shrink to their content and the row gap tightens. Skicka is pushed to the end (margin-inline-start:auto on .kind-compose__send) and stays the primary button. */ .kind-compose__actions--compact { gap: var(--kind-space-2); margin-top: var(--kind-space-2); } /* Share + emoji triggers: compact padding + weight so the row is icon-forward and light, while keeping the >=44px tap target (padding-block + line-height clear 44px; verified at desktop + 320px). #178: "+" sitter inte längre i `.kind-compose__actions--compact` utan först i rad-wrappern, så den nya selektorn måste stå MED här. Utan den tappade knappen sin kompakta vaddering och sitt teckensnitt och blev bredare än de övriga ikonknapparna. Samma specificitet (0,2,0) som de andra i listan, så kaskadordningen mellan de två sheeten är oförändrad. */ .kind-chat__compose-row > .kind-compose__share-trigger, .kind-compose__actions--compact .kind-compose__share-trigger, .kind-compose__actions--compact .kind-compose__emoji-trigger, .kind-compose__actions--compact .kind-compose__format-trigger { padding-inline: var(--kind-space-3); gap: var(--kind-space-1); font-size: var(--kind-font-small); font-weight: 600; } /* The emoji popover panel, created by kind_emoji_picker.js and inserted right after the trigger. Floats above the composer actions. */ .kind-emoji-popover__panel { position: absolute; z-index: 30; bottom: calc(100% + var(--kind-space-2)); left: 0; border: 1px solid var(--kind-color-border); border-radius: var(--kind-radius); background: var(--kind-color-surface); box-shadow: var(--kind-shadow-md); } .kind-emoji-popover__panel[hidden] { display: none; } .kind-emoji-popover__panel emoji-picker { --background: var(--kind-color-surface); --border-color: var(--kind-color-border); --num-columns: 8; --emoji-size: 1.4rem; width: 22rem; max-width: min(22rem, 92vw); height: 24rem; max-height: 60vh; } /* The popover wrapper sits directly under the reply form so the panel reads as "attached" to the composer. The panel is a bordered card; the disclosure script toggles its [hidden]. */ .kind-compose-popover { position: relative; margin: var(--kind-space-2) 0 0; } .kind-compose-popover__panel { border: 1px solid var(--kind-color-border); border-radius: var(--kind-radius); background: var(--kind-color-surface); box-shadow: var(--kind-shadow-md); padding: var(--kind-space-4); /* A5 (2.4.11 Focus Not Obscured): the panel flows in-document below the composer (not a fixed overlay), so a focused item is never hidden behind the sticky compose bar; it scrolls with the page. */ } .kind-compose-popover__panel[hidden] { display: none; } /* F-22: the top-level Avbryt
  1. renders [hidden] until the popover script reveals it. No author rule targets the menu's
  2. today, so the UA [hidden] rule suffices; this guard pins that against a future li display rule (the regel 27-korollarium-2 hidden-vs-author-display mechanism). */ .kind-compose-popover__menu li[hidden] { display: none; } .kind-compose-popover__title { margin: 0 0 var(--kind-space-2); font-weight: 600; color: var(--kind-color-text); } .kind-compose-popover__menu { list-style: none; margin: 0 0 var(--kind-space-3); padding: 0; display: flex; flex-direction: column; gap: var(--kind-space-1); } /* Each share item is a full-width button, icon + label, min 44px tall (A6). Text label is mandatory (A2: an icon-only item is a 4.1.2 fail). */ /* Menyn blandar elementtyper: syskonen är