/* Hanken Grotesk ur verktyg/designsystem/fonter/, självhostad som variabel
woff2 (100–900). Ett typsnitt för allt: målbild v3 (VIK-P2-105) bär sin
karaktär i luft och storlek, inte i en andra display-font. */
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-var-latin.c501f578bf3f.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-var-latin-ext.20672d217485.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* ---------------------------------------------------------------------------
Identitet: målbild v3 (VIK-P2-105, godkänd av Sami 2026-10-03). Varm neutral
duk, vita ytor, stora radier, mjuka skuggor. Rollnamnen är oförändrade —
komponenterna följer med utan att skrivas om.
Klubbens färg är INTE en del av identiteten. base.html skriver --klubb,
--pa-klubb, --klubb-mjuk(-mork) och --klubb-text(-mork) ur klubbens
inställningar; --profil m.fl. läser dem med Vårkullas värden som reserv.
Det är hela whitelabel-ytan.
------------------------------------------------------------------------- */
:root {
color-scheme: light;
--yta: #ffffff;
--yta-2: #f6f5f2;
--yta-ton: #e9e7e2;
--yta-ton-svag: #efeee9;
--yta-djup: #1b1a17;
--text: #1b1a17;
--text-svag: #67635c;
--text-dekor: #6b675f;
--ikon-chevron: url("data:image/svg+xml;utf8,");
--ikon-kalender: url("data:image/svg+xml;utf8,");
--ikon-klocka: url("data:image/svg+xml;utf8,");
--pa-ton: #1b1a17;
--pa-djup: #f2f0eb;
--accent: #1b1a17;
--pa-accent: #ffffff;
--accent-hover: #000000;
--kryssfyllning: #1b1a17;
--profil: var(--klubb, #F0D000);
--pa-profil: var(--pa-klubb, #1b1a17);
--profil-svag: var(--klubb-mjuk, #fbf2c4);
--profil-text: var(--klubb-text, #1b1a17);
--pa-djup-stark: #ffffff;
--hairline: rgb(27 26 23 / 12%);
--dampad: rgb(27 26 23 / 5%);
--dampad-hover: rgb(27 26 23 / 9%);
--god: #1d8751;
--varning: #a36800;
--kritisk: #d53e34;
--god-text: #1a693d;
--varning-text: #845600;
--kritisk-text: #ad342c;
--lank: #1b1a17;
--lank-hover: #000000;
--god-kant: rgb(29 135 81 / 30%);
--varning-kant: rgb(163 104 0 / 32%);
--kritisk-kant: rgb(213 62 52 / 32%);
--tint-god: rgb(29 135 81 / 7%);
--tint-varning: rgb(163 104 0 / 8%);
--tint-kritisk: rgb(213 62 52 / 7%);
--fokusring: #1b1a17;
--line-starkare: rgb(27 26 23 / 40%);
--skuggfarg: rgb(27 26 23 / 6%);
--skugga-liten: 0 1px 2px var(--skuggfarg);
--skugga-kort: 0 1px 2px rgb(27 26 23 / 4%), 0 14px 34px -18px rgb(27 26 23 / 16%);
--skugga-stor: 0 2px 4px rgb(27 26 23 / 5%), 0 18px 40px -12px rgb(27 26 23 / 22%);
--skugga-flyt: 0 2px 6px rgb(27 26 23 / 6%), 0 18px 40px -16px rgb(27 26 23 / 26%);
--duk-dimma: rgb(246 245 242 / 92%);
--overlaggsdimma: rgb(27 26 23 / 38%);
--marke-opacitet: .07;
--canvas: var(--yta-2);
--surface: var(--yta);
--surface-muted: var(--yta-ton-svag);
--ink: var(--text);
--muted: var(--text-svag);
--line: rgb(27 26 23 / 8%);
--line-strong: rgb(27 26 23 / 18%);
--blue: var(--accent);
--blue-hover: var(--accent-hover);
--blue-soft: rgb(27 26 23 / 6%);
--green: var(--god);
--green-soft: rgb(29 135 81 / 11%);
--amber: var(--varning);
--amber-soft: rgb(163 104 0 / 12%);
--red: var(--kritisk);
--red-soft: rgb(213 62 52 / 10%);
--radie-liten: 8px;
--radie-kort: 16px;
--radie-stor: 24px;
--radius: var(--radie-kort);
--falt-hojd: 48px;
--falt-grad: 16px;
--falt-radie: 14px;
--falt-pad: 14px;
--falt-fokus: 2px;
--tid-kvick: .12s;
--tid-snabb: .05s;
--kurva-standard: cubic-bezier(.4, 0, .2, 1);
--tid-normal: .2s;
--tid-lugn: .4s;
--kurva-panel: cubic-bezier(.55, 0, .35, 1);
--shadow-dialog: 0 24px 70px rgb(27 26 23 / 24%);
--font-brod: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-etikett: var(--font-brod);
font-family: var(--font-brod);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* Rörelse ur designsystemets tokens.css (silver.se, uppmätt: snabbt in, tydlig
inbromsning) och byte.css-markörens färger. Eget block: det är inga färgroller
och ska inte speglas i utskriftsblocket (VIK-P2-133). */
:root { --kurva-expo: cubic-bezier(.19, 1, .22, 1); --byte-platta: var(--surface); --byte-markor: var(--ink); }
/* Mörkt läge. Samma roller, andra värden. Två block med samma innehåll —
test_tema.py faller om de glider isär. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--yta: #1c1c1a;
--yta-2: #111110;
--yta-ton: #2a2a27;
--yta-ton-svag: #252522;
--yta-djup: #0a0a09;
--text: #f2f0eb;
--text-svag: #a8a49c;
--text-dekor: #9a968e;
--ikon-chevron: url("data:image/svg+xml;utf8,");
--ikon-kalender: url("data:image/svg+xml;utf8,");
--ikon-klocka: url("data:image/svg+xml;utf8,");
--pa-ton: #f2f0eb;
--pa-djup: #c9c6bf;
--accent: #f2f0eb;
--pa-accent: #111110;
--accent-hover: #ffffff;
--kryssfyllning: #f2f0eb;
--profil-svag: var(--klubb-mjuk-mork, rgb(240 208 0 / 15%));
--profil-text: var(--klubb-text-mork, #F0D000);
--pa-djup-stark: #ffffff;
--hairline: rgb(255 255 255 / 13%);
--dampad: rgb(255 255 255 / 6%);
--dampad-hover: rgb(255 255 255 / 10%);
--god: #1d8751;
--varning: #a36800;
--kritisk: #d53e34;
--god-text: #74d19f;
--varning-text: #e6b456;
--kritisk-text: #f28b82;
--lank: #f2f0eb;
--lank-hover: #ffffff;
--god-kant: rgb(116 209 159 / 34%);
--varning-kant: rgb(230 180 86 / 36%);
--kritisk-kant: rgb(242 139 130 / 36%);
--tint-god: rgb(116 209 159 / 8%);
--tint-varning: rgb(230 180 86 / 8%);
--tint-kritisk: rgb(242 139 130 / 8%);
--fokusring: #f2f0eb;
--line-starkare: rgb(255 255 255 / 45%);
--skuggfarg: rgb(0 0 0 / 40%);
--skugga-liten: 0 1px 2px var(--skuggfarg);
--skugga-kort: 0 1px 2px rgb(0 0 0 / 30%);
--skugga-stor: 0 18px 40px -12px rgb(0 0 0 / 60%);
--skugga-flyt: 0 18px 40px -16px rgb(0 0 0 / 65%);
--duk-dimma: rgb(17 17 16 / 92%);
--overlaggsdimma: rgb(0 0 0 / 62%);
--marke-opacitet: .035;
--line: rgb(255 255 255 / 8%);
--line-strong: rgb(255 255 255 / 20%);
--blue-soft: rgb(255 255 255 / 8%);
--green-soft: rgb(116 209 159 / 13%);
--amber-soft: rgb(230 180 86 / 13%);
--red-soft: rgb(242 139 130 / 13%);
--shadow-dialog: 0 24px 70px rgb(0 0 0 / 70%);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--yta: #1c1c1a;
--yta-2: #111110;
--yta-ton: #2a2a27;
--yta-ton-svag: #252522;
--yta-djup: #0a0a09;
--text: #f2f0eb;
--text-svag: #a8a49c;
--text-dekor: #9a968e;
--ikon-chevron: url("data:image/svg+xml;utf8,");
--ikon-kalender: url("data:image/svg+xml;utf8,");
--ikon-klocka: url("data:image/svg+xml;utf8,");
--pa-ton: #f2f0eb;
--pa-djup: #c9c6bf;
--accent: #f2f0eb;
--pa-accent: #111110;
--accent-hover: #ffffff;
--kryssfyllning: #f2f0eb;
--profil-svag: var(--klubb-mjuk-mork, rgb(240 208 0 / 15%));
--profil-text: var(--klubb-text-mork, #F0D000);
--pa-djup-stark: #ffffff;
--hairline: rgb(255 255 255 / 13%);
--dampad: rgb(255 255 255 / 6%);
--dampad-hover: rgb(255 255 255 / 10%);
--god: #1d8751;
--varning: #a36800;
--kritisk: #d53e34;
--god-text: #74d19f;
--varning-text: #e6b456;
--kritisk-text: #f28b82;
--lank: #f2f0eb;
--lank-hover: #ffffff;
--god-kant: rgb(116 209 159 / 34%);
--varning-kant: rgb(230 180 86 / 36%);
--kritisk-kant: rgb(242 139 130 / 36%);
--tint-god: rgb(116 209 159 / 8%);
--tint-varning: rgb(230 180 86 / 8%);
--tint-kritisk: rgb(242 139 130 / 8%);
--fokusring: #f2f0eb;
--line-starkare: rgb(255 255 255 / 45%);
--skuggfarg: rgb(0 0 0 / 40%);
--skugga-liten: 0 1px 2px var(--skuggfarg);
--skugga-kort: 0 1px 2px rgb(0 0 0 / 30%);
--skugga-stor: 0 18px 40px -12px rgb(0 0 0 / 60%);
--skugga-flyt: 0 18px 40px -16px rgb(0 0 0 / 65%);
--duk-dimma: rgb(17 17 16 / 92%);
--overlaggsdimma: rgb(0 0 0 / 62%);
--marke-opacitet: .035;
--line: rgb(255 255 255 / 8%);
--line-strong: rgb(255 255 255 / 20%);
--blue-soft: rgb(255 255 255 / 8%);
--green-soft: rgb(116 209 159 / 13%);
--amber-soft: rgb(230 180 86 / 13%);
--red-soft: rgb(242 139 130 / 13%);
--shadow-dialog: 0 24px 70px rgb(0 0 0 / 70%);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 20rem; overflow-x: hidden; background: var(--canvas); }
body { min-height: 100vh; margin: 0; overflow-x: clip; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); color: var(--ink); background: var(--canvas); }
/* Visningsbandet är ett extra grid-item före sidhuvudet. Utan en extra auto-rad
hamnar 1fr på headern och fyller hela ytan med svart när man ser som någon. */
body:has(> .view-as-bar) { grid-template-rows: auto auto 1fr auto; }
button, input, select, textarea { font: inherit; }
a { color: var(--lank); text-underline-offset: 2px; }
/* Hovern mörknar länken i ljust läge och ljusnar den i mörkt. Förut var den
--accent-hover, som i mörkt läge mätte 3,55:1 mot kortytan och dessutom
gjorde rött till varje länks hoverfärg (Astra P2-44). */
a:hover { color: var(--lank-hover); }
/* Träffytegolvet gäller på ALLA bredder, inte bara på telefon. En radrubrik,
en brödsmula eller en sidfotslänk är vägen vidare i en lista — inte en länk
i löpande text, som WCAG 2.5.8 undantar. Mätt på 1440 låg de på 18–22,5 px
(Astra P2-43). 24 px är golvet Sami satte: "44 är för stort får inte plats
med något. 24 är väl rimligare då". */
.breadcrumbs a, strong > a, h2 > a, .remsastyr > a, .charge-who > strong > a, .reminder-delivery-main > strong > a { min-height: 24px; display: inline-flex; align-items: center; }
/* summary behåller sin egen display (list-item) så pilen finns kvar; golvet
räcker för träffytan. */
details > summary { min-height: 24px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .35rem; font-size: clamp(2.1rem, 4.4vw, 3.25rem); font-weight: 650; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
h2 { margin-bottom: .55rem; font-size: 1.3rem; font-weight: 650; line-height: 1.15; letter-spacing: -.015em; }
h3 { margin-bottom: .3rem; font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; }
/* Etiketten: liten och dämpad, i vanlig skrift — inga versaler med spärr
(målbild v3). */
.etikett, .form-field label, th { font-size: .84rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.container { width: calc(100% - 3rem); max-width: 75rem; margin-inline: auto; }
.page-content { padding-block: 2.5rem 3.5rem; }
/* Klubbmärket jättestort och dovt i bakgrunden, fast i rutan, så sidan inte
står tom. Det ligger under allt: sidhuvud, innehåll och sidfot får z-index 1
och korten täcker det där de ligger. */
/* Märket bakom sidan. I mörkt läge lyser samma 7 % som en skylt — logotypen
är ritad för mörk botten och har ljusa partier — så opaciteten är en roll,
inte ett fast tal. */
.site-header, .page-content, .site-footer { position: relative; z-index: 1; }
/* Sidhuvudet över innehållet, annars hamnar kontomenyn under sidan. */
.site-header { z-index: 5; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
/* Inverterad ruta: texten är ytans färg, inte vit. Vit på --ink blev vitt
på ljust i mörkt läge, 1,14:1 (Astra P2-44). Syns bara vid tabbning. */
.skip-link, .skip-link:hover, .skip-link:focus { position: fixed; z-index: 100; top: .5rem; left: .5rem; min-height: 44px; padding: .5rem .75rem; display: inline-flex; align-items: center; color: var(--surface); background: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.muted, .form-help { color: var(--muted); }
.monospace { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }
/* Skal (målbild v3, VIK-P2-105) ------------------------------------------
Ljust sidhuvud som följer läget: klubbens märke och namn till vänster,
sidorna som en mjuk flikgrupp i mitten, utseende och konto till höger. På
telefon tar flikraden längst ned över vägarna, och Mer öppnar menyn som ett
ark nerifrån. Ingen sida bär längre en svart topp. */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--duk-dimma); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.site-header__content { min-height: 4.5rem; display: flex; align-items: center; gap: .25rem; }
.appmarke { margin-right: 1.25rem; min-height: 44px; display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.appmarke:hover { color: var(--ink); }
.appmarke img { width: auto; height: 38px; }
.appmarke-initialer { width: 38px; height: 38px; display: grid; place-items: center; color: var(--pa-profil); font-size: .8rem; font-weight: 700; background: var(--profil); border-radius: 50%; }
.site-header .site-nav { display: contents; }
.site-nav__links { order: 1; min-width: 0; margin-inline: auto; padding: 4px; display: flex; align-items: center; gap: 2px; background: var(--yta-ton-svag); border-radius: 999px; }
.site-nav__links > a { min-height: 38px; padding: 0 1rem; display: inline-flex; align-items: center; gap: .65rem; color: var(--muted); font-size: .94rem; font-weight: 500; text-decoration: none; white-space: nowrap; border-radius: 999px; transition: background var(--tid-normal) var(--kurva-standard), color var(--tid-normal) var(--kurva-standard); }
.site-nav__links > a:hover { color: var(--ink); }
.site-nav__links > a.is-active { color: var(--ink); font-weight: 600; background: var(--surface); box-shadow: var(--skugga-liten); }
.meny-ikon { display: none; }
.tema-snabb { order: 2; }
.account-menu { order: 3; }
.mobil-konto, .flikrad { display: none; }
/* Notisklockan: länk till notiscentret, med antalet nya. */
.notisklocka { order: 2; position: relative; width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; color: var(--muted); border-radius: 50%; }
.notisklocka:hover, .notisklocka[aria-current="page"] { color: var(--ink); background: var(--dampad); }
.notisantal { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; color: var(--pa-profil); font-size: .75rem; font-weight: 700; line-height: 1; background: var(--profil); border-radius: 999px; box-shadow: 0 0 0 2px var(--canvas); }
.site-header :focus-visible { outline-color: var(--fokusring); }
.view-as-bar :focus-visible, .view-as-bar .button:focus-visible { outline-color: var(--surface); }
.account-dropdown :focus-visible, .account-dropdown .button:focus-visible { outline-color: var(--fokusring); }
/* INÅTVÄNDA RINGAR. Ringen ritas UTANFÖR elementet, och varje förälder med
overflow: hidden klipper bort den — rundade hörn och ellipsklippt text är
fulla av sådana. Mätt av granskaren: 18 av 18 länkar i klippta rutor saknade
ring HELT (noll ändrade pixlar) eller ner till en strimma på 3 × 24 px som
läser som en textmarkör, inte en fokusring (Astra P2-44 varv 11). Samma fel
som .cancelled-history hade, på fyra andra klasser.
En ring innanför kanten överlever klippningen. Den sitter på behållarna vars
innehåll ÄR klippt, inte globalt: en inåtvänd ring på en liten kontroll
lägger sig över innehållet. */
.account-booking-row:focus-visible, .korttext a:focus-visible, .korttext strong a:focus-visible, .nyhetsrad a:focus-visible, .dagpassrad a:focus-visible, .reminder-delivery-main > strong > a:focus-visible, .team-tab:focus-visible, .snittmer:focus-visible, .spelare-bort:focus-visible, .charge-who > strong > a:focus-visible { outline-offset: -3px; }
/* Kontomeny */
.account-menu { position: relative; flex: 0 0 auto; }
.account-trigger { min-height: 44px; padding: .25rem .45rem .25rem .25rem; display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-weight: 650; background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer; }
.account-trigger:hover { color: var(--ink); background: var(--dampad); }
.account-trigger[aria-expanded="true"] { color: var(--ink); background: var(--dampad-hover); border-color: transparent; }
.account-avatar { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; color: var(--pa-profil); font-size: .8rem; font-weight: 700; background: var(--profil); border-radius: 999px; }
.account-avatar--large { width: 2.3rem; height: 2.3rem; font-size: .8rem; }
.account-trigger__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Toppen är alltid mörk och har egna på-färger. Chevronen tog kortytans
dämpade ton, som vänder med läget medan toppen inte gör det: 3,16:1 i
vila och 2,39:1 i hover i ljust läge (Astra P2-44 varv 5). Allt annat i
toppen bär redan --pa-djup. */
.account-chevron { flex: 0 0 auto; color: var(--muted); transition: transform .18s ease; }
.account-menu.is-open .account-chevron { transform: rotate(180deg); }
.account-dropdown { position: absolute; z-index: 30; top: calc(100% + .4rem); right: 0; min-width: 16.5rem; padding: .35rem; display: grid; gap: .1rem; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); opacity: 0; transform: translateY(-.35rem) scale(.98); transform-origin: top right; transition: opacity .16s ease, transform .16s ease; box-shadow: var(--skugga-stor); }
.account-menu.is-open .account-dropdown { opacity: 1; transform: none; }
.account-identity { margin-bottom: .2rem; padding: .5rem .55rem; display: flex; align-items: center; gap: .55rem; border-bottom: 1px solid var(--line); }
.account-identity > span { min-width: 0; display: grid; }
/* Egen färg, inte ärvd: dropdownen ligger på --surface men står inuti den
svarta toppen, och utan raden ärvdes vit text ner på vit botten — namnet
var osynligt i ljust läge (Astra P2-44). Mobilmenyns identitet står kvar
på den mörka panelen och får sin färg nedan. */
.account-identity strong { overflow: hidden; color: var(--ink); font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.account-identity small { color: var(--muted); font-size: .8rem; }
.account-item { width: 100%; min-height: 2.3rem; padding: .45rem .55rem; display: flex; align-items: center; justify-content: flex-start; gap: .55rem; color: var(--text-svag); font-size: .85rem; font-weight: 600; text-align: left; text-decoration: none; background: transparent; border: 0; border-radius: var(--radie-kort); cursor: pointer; box-shadow: none; }
.account-item:hover, .account-item:focus-visible { color: var(--ink); background: var(--surface-muted); }
.account-item[aria-current="page"] { color: var(--lank); background: var(--blue-soft); }
.account-item svg { flex: 0 0 auto; color: var(--muted); }
.account-item:hover svg, .account-item[aria-current="page"] svg { color: currentcolor; }
.account-item--danger, .account-item--danger svg { color: var(--kritisk-text); }
/* Utseendevalet i kontomenyn: tre lägen på en rad, ett formulär utan skript.
Samma val ligger i mobilmenyn, som alltid står på den svarta toppen och
därför får sin egen uppsättning färger. */
.temaval { margin-top: .25rem; padding: .5rem .55rem .15rem; display: grid; gap: .3rem; border-top: 1px solid var(--line); }
.temaval-etikett { color: var(--muted); font-size: .8rem; font-weight: 700; }
.temaval-knappar { display: flex; gap: .2rem; padding: .15rem; background: var(--surface-muted); border-radius: 999px; }
.temaknapp { flex: 1 1 0; min-height: 34px; padding: 0 .45rem; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; color: var(--muted); font-size: .82rem; font-weight: 650; background: transparent; border: 0; border-radius: 999px; cursor: pointer; }
.temaknapp:hover { color: var(--ink); background: var(--dampad); background-image: none; }
.temaknapp.ar-vald { color: var(--ink); background: var(--surface); box-shadow: var(--skugga-liten); }
.tema-snabb { position: relative; flex: 0 0 44px; }
.tema-snabb-knapp { width: 44px; height: 44px; display: grid; place-items: center; list-style: none; cursor: pointer; color: var(--muted); border-radius: 50%; }
.tema-snabb-knapp::-webkit-details-marker { display: none; }
.tema-snabb-knapp:hover, .tema-snabb[open] > summary { color: var(--ink); background: var(--dampad); }
.tema-snabb-panel { position: absolute; z-index: 10; top: calc(100% + .5rem); right: 0; width: 240px; padding: .65rem; color: var(--ink); background: var(--surface); border: 0; border-radius: var(--radie-kort); box-shadow: var(--skugga-kort); box-shadow: var(--skugga-stor); }
.tema-snabb-panel .temaval { margin: 0; padding: 0; border: 0; }
.tema-snabb-panel .temaknapp { min-height: 44px; }
@media (pointer: coarse) { .temaknapp { min-height: 40px; } }
.account-item--danger:hover { color: var(--kritisk-text); background: var(--red-soft); }
.account-form { margin: .2rem 0 0; padding-top: .25rem; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) {
.account-dropdown, .account-chevron, .hint-bubble { transition: none; }
}
.danger-zone { margin-top: 1.5rem; padding: 1rem; display: grid; gap: .7rem; background: var(--surface); border: 1px solid var(--kritisk-kant); border-radius: var(--radius); }
.danger-zone-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.danger-zone-head h2 { margin: 0; font-size: 1rem; }
.danger-zone p { margin: 0; font-size: .82rem; }
.danger-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.swish-qr { padding: .6rem 0 .2rem; display: grid; gap: .5rem; justify-items: start; }
.swish-qr svg { width: 10.5rem; height: auto; background: var(--yta); }
.swish-qr p { margin: 0; max-width: 24rem; font-size: .8rem; }
.club-qr { display: grid; gap: .6rem; justify-items: start; }
.club-qr svg { width: 12rem; height: auto; background: var(--yta); }
.club-qr .monospace { font-size: .8rem; word-break: break-all; }
.klubbmarke-bild { width: 96px; height: 96px; object-fit: contain; }
/* Page framing */
.page-header, .compact-header { margin-bottom: 2rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.page-header > div, .compact-header > div { min-width: 0; }
.compact-header h1, .page-header h1 { margin-bottom: .2rem; }
.page-lead { margin-bottom: 0; max-width: 52ch; color: var(--muted); font-size: 1.12rem; text-wrap: pretty; }
/* Rubriker balanseras och löptext bryts utan ett ensamt ord sist (VIK-P2-133). */
h2, h3, h4, .section-heading h2 { text-wrap: balance; }
p, li, figcaption, dd, .muted, small { text-wrap: pretty; }
/* REGLER §1: ingen kicker ovanför rubriken. Det som ändå är en uppgift —
ett datum, ett lagnamn — står under rubriken som stödrad. */
/* Sektionsetiketten är en rubrik, inte en kicker — den namnger listan under sig. */
.arkivrubrik { margin-bottom: .5rem; color: var(--muted); font-size: .9rem; }
.sidmeta { margin-bottom: .3rem; color: var(--muted); font-size: .88rem; font-weight: 500; }
.header-actions, .form-actions, .payment-upload-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.breadcrumbs { margin-bottom: 1.15rem; display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .82rem; }
.breadcrumbs a { color: inherit; }
/* Sektionsrubrik: NIB:s .sekrub — tung linje under, versal rubrik, och plats
för ett Oswald-nummer före. */
/* Texten dras in lika mycket som kortens innehåll (.7 rem), så rubriken inte
hänger utanför raderna under. Linjen går fortfarande kant till kant. */
.section-heading { margin: 2.5rem 0 1rem; padding: 0 .25rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.section-heading h2 { margin: 0; font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; }
/* Smalaste telefonerna: rubriken står på en rad. Pilarna går bort (man sveper
ändå, och nästa kort syns i kanten), och rubriken blir ett snäpp mindre. */
@media (max-width: 22.5rem) {
.section-heading { gap: .6rem; }
.section-heading h2 { font-size: 1.12rem; white-space: nowrap; }
.remsastyr .manadspil { display: none; }
}
.section-heading > a, .section-heading .remsastyr a { white-space: nowrap; }
.section-heading .nr { margin-right: .5rem; color: var(--muted); font-size: .9rem; font-weight: 500; }
/* Controls
---------------------------------------------------------------------------
Knappen är NIB:s .knapp (kunder/nordens-invest-bygg/hemsida/bygge/design.py):
piller, bläckfyllning, vikt 700, och en hover som är ett state-layer som
SNÄPPER — 10 % ljus ovanpå, ingen fade. Liten = 40 px / 18 px / 15 px,
ghost = 1,5 px hårlinje. Paletten är grafit; formen är NIB:s. */
.button, button { min-height: 44px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; color: var(--ink); font-weight: 600; line-height: 1.1; text-decoration: none; background: var(--yta-ton-svag); border: 0; border-radius: 999px; cursor: pointer; transition: background var(--tid-kvick) var(--kurva-standard), filter var(--tid-kvick) var(--kurva-standard); }
.button { height: 44px; font-size: 15px; }
.button:hover, button:hover { color: var(--ink); background-color: var(--yta-ton); background-image: none; transform: none; }
/* Länkar räknades inte upp och fick webbläsarens egen ring — 19:1 på
skrivbords-Chromium men 2,40:1 i dess mobilläge, alltså beroende av
webbläsarens systemfärg i stället för av huset (Astra P2-44 varv 9). */
a:focus-visible, .button:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--fokusring); outline-offset: 1px; }
.button-primary { color: var(--pa-profil); background: var(--profil); }
.button-primary:hover { color: var(--pa-profil); background-color: var(--profil); filter: brightness(.95); }
/* Ett tryck svarar direkt med en mörkare ton, utan lyft eller krympning. */
.button:active:not(:disabled), button:active:not(:disabled) { filter: brightness(.9); transition-duration: var(--tid-snabb); }
.button-secondary { background: var(--yta-ton-svag); }
.button-danger { color: var(--kritisk-text); background: var(--red-soft); }
.button-danger:hover { color: var(--surface); background-color: var(--kritisk-text); }
/* Den lilla knappen behåller husets uppmätta togglehöjd 34 px. En 48 px knapp
i en tabellrad är rätt mått på fel plats. Höjden är vad ögat ser; hitboxen
är vad fingret träffar, och den lyfts till 44 px (REGLER §11). */
.button-small { position: relative; height: 36px; min-height: 36px; padding: 0 16px; font-size: .88rem; }
/* Tyst knapp: text utan ram, för handlingar som inte ska konkurrera med
statusen bredvid (Avboka i Din bokning). Träffytan är kvar via ::after. */
.button-tyst { background: transparent; }
.button-tyst:hover { text-decoration: underline; background: transparent; border-color: transparent; }
.button-danger.button-tyst:hover { color: var(--kritisk-text); }
.button-small::after { content: ""; position: absolute; inset: -5px 0; }
button:disabled, .button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.icon-button { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; font-size: 1.25rem; border-radius: 50%; }
/* Fält: NIB:s .sform — ingen ruta, en underlinje. Fokus gör linjen till
2 px bläck. 16 px text är golvet: under det zoomar iOS in sidan. */
input, select, textarea { width: 100%; min-height: var(--falt-hojd); padding: 0 var(--falt-pad); color: var(--ink); font-size: 16px; background-color: var(--yta-ton-svag); border: 1.5px solid transparent; border-radius: var(--falt-radie); box-shadow: none; transition: border-color .15s ease, background-color .15s ease; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--ink); background-color: var(--surface); }
/* Kryssrutan och radioknappen har ingen underlinje att förtjocka — ersättaren
ovanför ritas aldrig på dem. Raden ovanför tog alltså bort ringen utan att
ge något i stället: 190 kryssrutor ändrade NOLL pixlar när tangentbordet
landade på dem, i båda lägena och båda bredderna (Astra P2-44 varv 9).
Åtta granskare före den här letade efter fel FÄRG; det här är det första
stället där felet är frånvaro. */
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 3px solid var(--fokusring); outline-offset: 2px; }
select { padding-right: 2.4rem; background-image: var(--ikon-chevron); background-repeat: no-repeat; background-position: right 14px center; appearance: none; }
textarea { min-height: 7rem; padding-block: 12px; line-height: 1.5; resize: vertical; }
input[type="search"] { padding-left: var(--falt-pad); }
/* Klubbfärgen väljs med webbläsarens färgväljare: rutan är provet, inte en textrad. */
input[type="color"] { width: 5rem; padding: 5px; cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 10px; }
/* Webbläsarens egna snurror och pilar hör inte till identiteten. Talfältet
är ett fält man skriver i; datum och tid behåller sin väljare men i bläck. */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
/* Med datumval.js laddat är fälten textfält (data-datumtyp) med en kalender-
eller klockikon i bläck; klick öppnar vår väljare. */
input[data-datumtyp] { padding-right: 2.6rem; background-repeat: no-repeat; background-position: right 14px center; font-variant-numeric: tabular-nums; cursor: pointer; }
input[data-datumtyp="date"], input[data-datumtyp="datetime-local"] { background-image: var(--ikon-kalender); }
input[data-datumtyp="time"] { background-image: var(--ikon-klocka); }
.datumval { position: fixed; z-index: 60; width: 20.5rem; max-width: calc(100vw - 1rem); padding: .7rem; color: var(--ink); font-size: .9rem; background: var(--surface); border: 0; border-radius: var(--radie-kort); box-shadow: var(--skugga-kort); box-shadow: var(--skugga-stor); }
.datumval-huvud { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.datumval-huvud strong { font-weight: 700; }
.datumval-pil, .datumval-dag { min-height: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.datumval-pil { width: 34px; height: 34px; }
.datumval-veckodagar, .datumval-dagar { display: grid; grid-template-columns: repeat(7, 1fr); gap: .1rem; }
.datumval-veckodagar span { padding-bottom: .2rem; font-family: var(--font-etikett); font-size: .8rem; letter-spacing: .1em; text-align: center; text-transform: uppercase; color: var(--muted); }
.datumval-dag { height: 2.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.datumval-dag.ar-annan { color: var(--text-dekor); }
.datumval-dag.ar-idag { box-shadow: inset 0 0 0 1.5px var(--hairline); }
.datumval-dag.ar-vald, .datumval-dag.ar-vald:hover { color: var(--pa-accent); background: var(--accent); }
.datumval-tid { display: flex; align-items: center; gap: .35rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.datumval-tid .etikett { margin-right: .2rem; }
/* Timme och minut: bara siffran, mitt i rutan åt båda håll. Fältens pil
låg ovanpå siffran och såg ut som en bock (Sami 2026-10-13). */
.datumval-tid select { width: 3.25rem; height: 40px; min-height: 40px; padding: 0; font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 40px; text-align: center; text-align-last: center; background-image: none; cursor: pointer; }
.datumval-fot { display: flex; justify-content: space-between; gap: .5rem; margin-top: .6rem; }
@media (pointer: coarse) { .datumval-dag { height: 2.75rem; } }
/* textarea saknades och föll tillbaka på webbläsarens egen grå, som mätte
3,88:1 mot kortytan i mörkt läge — en komponent utan egen färg som bara
fungerar i ett av lägena (Astra P2-44 varv 7). */
input::placeholder, textarea::placeholder { color: var(--text-dekor); }
/* Bocken är svart, inte klubbröd: en röd bock i en grön bricka läses som fel. */
input[type="checkbox"], input[type="radio"] { width: 1rem; height: 1rem; min-height: 1rem; padding: 0; accent-color: var(--ink); background: none; border: 0; border-radius: 0; }
label { font-weight: 600; }
.form-help { font-size: .86rem; font-weight: 400; }
.form-card, .notice-card, .payment-import-card { max-width: 54rem; padding: 1.5rem; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
/* Efter .form-card, inte före: samma specificitet, så det är ordningen som
avgör. Utskicket har två spalter och behöver hela sidans bredd — 54 rem
lämnade en tom högerhalva på skrivbordet (Sami 2026-09-16). */
.form-card--bred { max-width: none; }
.form-card form, .compact-form { display: grid; gap: .8rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.form-field { display: grid; gap: .3rem; }
.form-field label { color: var(--ink); font-size: .92rem; font-weight: 600; }
.form-actions { margin-top: .35rem; }
.form-errors, .field-errors, .errorlist { margin: 0; padding: .65rem .8rem; color: var(--kritisk-text); background: var(--red-soft); border-radius: var(--radie-kort); list-style-position: inside; }
.has-error input, .has-error select { border-color: var(--red); }
.checkbox-field, .compact-checkbox { display: flex; align-items: flex-start; gap: .55rem; }
/* Kryssrutan är träffytan, inte etiketten bredvid: golvet 24 px gäller
även på skrivbordet (Astra P2-43, mätt på 1440). */
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; min-height: 0; flex: none; }
.compact-checkbox { padding: .8rem .9rem; background: var(--surface-muted); border-radius: var(--radie-kort); }
.compact-checkbox span { display: grid; gap: .1rem; }
.advanced-fields { padding: .8rem .9rem; background: var(--surface-muted); border-radius: var(--radie-kort); }
.advanced-fields summary { color: var(--ink); font-weight: 600; cursor: pointer; }
.advanced-fields[open] summary { margin-bottom: .65rem; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
/* Messages and status */
/* Toasts: uppe till höger på skrivbord, under sidhuvudet på mobil. Bläck på
vitt med en färgad kant per sort, i från höger med panelkurvan. */
.toasts { position: fixed; z-index: 70; top: 5.25rem; right: 1rem; display: grid; gap: .5rem; width: min(24rem, calc(100vw - 2rem)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: .6rem; padding: .85rem .6rem .85rem 1rem; color: var(--ink); font-size: .95rem; font-weight: 600; line-height: 1.35; background: var(--surface); border: 0; border-radius: var(--radie-kort); box-shadow: var(--skugga-stor); pointer-events: auto; transition: opacity var(--tid-normal) var(--kurva-panel), transform var(--tid-normal) var(--kurva-panel); }
.toast::before { content: ""; order: 0; flex: none; width: 8px; height: 8px; margin-top: .45rem; background: var(--muted); border-radius: 50%; }
/* Intåget (dold tills skriptet lägger på is-in) bara när skript finns —
utan JavaScript ska serverns besked synas direkt. */
.js .toast { opacity: 0; transform: translateX(1.5rem); }
/* Serverns besked är ett details: summary är stängkrysset och fungerar utan
skript. Stängt details = borta. Texten först, krysset sist. */
.toast > .toast-stang { order: 2; margin-left: auto; list-style: none; }
.toast > summary::-webkit-details-marker { display: none; }
.toast > .toast-text { order: 1; }
/* details lägger allt utom summary i en anonym ruta; med display: contents når
flexen texten så den fyller raden precis som i klientens besked. */
details.toast::details-content { display: contents; }
details.toast:not([open]) { display: none; }
/* Utan skript försvinner beskedet självt efter samma 6 s som skriptet
använder; fel stannar tills man stänger, som med skript. */
html:not(.js) .toast:not(.toast--error) { animation: toast-bort 0s 6s forwards; }
@keyframes toast-bort { to { visibility: hidden; pointer-events: none; } }
.js .toast.is-in { opacity: 1; transform: none; }
.js .toast.is-ut { opacity: 0; transform: translateY(-.4rem); }
.toast--success::before { background: var(--god); }
.toast--error::before { background: var(--kritisk); }
.toast--warning::before { background: var(--varning); }
.toast-text { flex: 1 1 auto; min-width: 0; }
.toast-stang { flex: none; width: 44px; height: 44px; min-height: 44px; margin: -.7rem -.45rem -.7rem 0; padding: 0; display: inline-grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 999px; }
.toast-stang:hover { color: var(--ink); background: var(--dampad); background-image: none; }
@media (max-width: 48rem) { .toasts { top: 5.2rem; right: .6rem; left: .6rem; width: auto; } }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; transform: none; } }
/* Chip: NIB:s .chip — piller, vikt 700, spärrad. Status bär färg i texten;
plattan är hårlinje eller tonad yta, aldrig en färgad ruta. */
.status-badge { min-height: 28px; padding: 0 .75rem; display: inline-flex; align-items: center; width: max-content; color: var(--muted); font-size: .82rem; font-weight: 600; letter-spacing: 0; line-height: 1; text-transform: none; background: var(--dampad); border: 0; border-radius: 999px; white-space: nowrap; }
/* Grön text på den tonade brickan: #166a40 ger 4,9:1 på tinten, --god gav 4,05. */
.status-confirmed { color: var(--god-text); background: var(--green-soft); }
.status-waiting { color: var(--varning-text); background: var(--amber-soft); }
.status-cancelled { color: var(--kritisk-text); background: var(--red-soft); }
.empty-state { padding: 2rem 1.5rem; color: var(--muted); text-align: center; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.empty-state p:last-child { margin-bottom: 0; }
/* Calendar */
/* Månadsraden. Tecknen ‹ och › är citattecken, inte pilar, och ritas olika i
varje typsnitt — chevronen är samma streckvikt som kontomenyns. */
.manadsrad { margin-bottom: .7rem; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; }
.manadsrad h2 { margin: 0; }
.manadsnamn { min-width: 9.5rem; font-size: 1.15rem; font-weight: 700; text-align: center; text-transform: capitalize; }
/* Pekytan är verklig, ingen uppblåst ::after som går in över grannen: 40 px
med mus (samma som .icon-button), 44 px på pekskärm. */
.manadspil { width: 40px; height: 40px; display: inline-grid; place-items: center; color: var(--muted); border-radius: var(--radie-kort); }
@media (pointer: coarse) { .manadspil { width: 44px; height: 44px; } }
.manadspil:hover { color: var(--ink); background: var(--dampad); }
.manadspil:focus-visible { outline: 3px solid var(--fokusring); outline-offset: 1px; }
.manadspil { position: relative; }
/* Månadsväljaren låg i den första layouten ÖVER månadsnamnet (samma gridcell,
opacity 0), så ett klick på månaden öppnade den. När raden blev flex blev
fältet i stället 0 px brett bakom overflow: hidden — ingen kan klicka på det,
men det ligger kvar i tabbordningen. Mätt med riktig tabbning, båda lägena:
bredd 0,00 px och NOLL ändrade pixlar när fokus står i fältet. 2.4.7 har
inget undantag för en kontroll som bara är dold för synen, och ett
fokusstopp ögat inte kan hitta är värre än inget fokusstopp
(Astra P2-44 varv 11-17, nedskrivet varje varv utan att rättas).
Lösningen är .skip-link:s: dold tills den får fokus, då veckas den ut med
husets egen fältmarkering (2 px --ink under fältet). Raden får wrap så att
det utfällda fältet lägger sig på egen rad vid 390 px i stället för att
klämma ihop månadsnamnet. */
.month-picker { width: 0; min-width: 0; overflow: hidden; opacity: 0; }
.month-picker:focus-within { width: auto; overflow: visible; opacity: 1; }
.month-picker:focus-within input { width: 10.5rem; }
.month-picker input { cursor: pointer; }
/* Summorna klubben matar in (VIK-P1-108): två kort i bredd, ett per stöd. */
.aktivitet-regler { margin: .8rem 0; display: grid; gap: .35rem; }
.aktivitet-kompletteringar { padding: .4rem; display: grid; background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.rad-lank { min-height: 52px; padding: .6rem .9rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem 1rem; color: var(--ink); text-decoration: none; border-radius: var(--radie-kort); }
.rad-lank + .rad-lank { box-shadow: inset 0 1px 0 var(--line); }
.rad-lank:hover { color: var(--ink); background: var(--dampad); }
.aktivitet-regler p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .92rem; color: var(--muted); }
@media (max-width: 40rem) { }
@media (max-width: 40rem) { }
/* opacity komponerar HELA underträdet, så metaraden (redan --muted) hamnade
på 2,63:1 i ljust läge. En färg dämpar det som är starkt utan att dra ned
det som redan är svagt — samma lösning som för det upptagna spelarkortet
(Astra P2-44 varv 7). Överstruket och brickan säger att passet är inställt. */
.calendar-session.is-cancelled { color: var(--muted); text-decoration: line-through; }
/* Registry */
.registry-toolbar { position: sticky; z-index: 2; top: 0; margin-bottom: .45rem; padding: .45rem; display: flex; align-items: center; gap: .65rem; background: var(--duk-dimma); backdrop-filter: blur(10px); }
.registry-toolbar input { min-height: 2.3rem; }
.compact-count { flex: 0 0 auto; font-size: .8rem; }
.member-list { background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); overflow: hidden; }
/* Varje rad är ett eget rutnät, så innehållsbreda kolumner blir olika breda
per rad: en rad utan "Visa som" flyttade knapparna 79 px i sidled och listan
såg trasig ut. De två sista kolumnerna har därför fast bredd, och då landar
ikoner och knappar i samma lodräta linje oavsett vad raden innehåller. */
.member-row { min-height: 2.8rem; padding: .4rem .55rem; display: grid; grid-template-columns: minmax(0, 1fr) auto var(--medlem-kontakt-bredd) var(--medlem-knapp-bredd); align-items: center; gap: .55rem; border-bottom: 1px solid var(--line); }
.member-list { --medlem-kontakt-bredd: 3.5rem; --medlem-knapp-bredd: 2.75rem; }
.member-row > .contact-status, .member-row > .member-actions { justify-content: flex-end; }
.member-row:last-child { border-bottom: 0; }
.member-identity { min-width: 0; display: flex; align-items: baseline; gap: .5rem; }
.member-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-meta { overflow: hidden; color: var(--muted); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.member-flags, .contact-status, .member-actions { display: flex; align-items: center; gap: .25rem; }
.status-admin { color: var(--lank); background: var(--blue-soft); }
.status-responsible { color: var(--varning-text); background: var(--amber-soft); }
.ikonsprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.member-saknar { color: var(--varning-text); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.member-via { color: var(--muted); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.member-identity > .member-meta:empty { display: none; }
.contact-icon { position: relative; width: 1.55rem; height: 1.55rem; display: grid; place-items: center; color: var(--text-dekor); font-size: .8rem; background: var(--dampad); border-radius: var(--radie-kort); }
.contact-icon { color: var(--muted); background: var(--dampad); }
.contact-icon:hover { color: var(--ink); background: var(--dampad-hover); }
.account-row { min-height: 2.8rem; padding: .4rem .55rem; display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) auto minmax(7rem, auto); align-items: center; gap: .55rem; border-bottom: 1px solid var(--line); }
.account-row:last-child { border-bottom: 0; }
/* Vem som är förälder står på egen rad under namnet, inte inklämt bredvid det. */
.account-row > .account-relation { grid-column: 1 / -1; min-width: 0; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.account-email { min-width: 0; overflow: hidden; color: var(--muted); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.account-row .member-actions { justify-content: flex-end; }
.account-row form { margin: 0; }
.account-action-label { padding-right: .45rem; font-size: .8rem; }
/* Imports and account activation */
.import-upload-card { margin-bottom: 1rem; }
/* .form-card form gör varje formulär till ett rutnät (rad 314). Uppladdnings-
raden ska ligga på EN rad, och då krävs samma specificitet — annars la sig
filväljaren och knappen under varandra med knappen i full bredd. */
.form-card .compact-upload-form { display: flex; align-items: center; gap: .65rem; }
.compact-upload-form input { min-width: 0; }
.compact-upload-form .button { flex: 0 0 auto; }
/* Filväljaren ritas av webbläsaren: en grå systemknapp och "No file chosen" på
engelska mitt i en svensk sida. Knappdelen får appens form, texten bredvid
är filnamnet. */
input[type="file"] { min-height: 40px; padding: 0; display: flex; align-items: center; color: var(--muted); font-size: .88rem; border-bottom: 0; cursor: pointer; }
input[type="file"]::file-selector-button { min-height: 34px; margin-right: .7rem; padding: 0 14px; color: var(--ink); font: inherit; font-size: .82rem; font-weight: 700; background: var(--surface); border: 1.5px solid var(--hairline); border-radius: 999px; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--dampad); }
input[type="file"]:focus-visible { outline: none; }
input[type="file"]:focus-visible::file-selector-button { outline: var(--falt-fokus) solid var(--ink); outline-offset: 2px; }
.import-preview { max-width: none; }
.import-summary { margin-block: 1rem; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radie-kort); overflow: hidden; }
.import-summary span { padding: .65rem .75rem; display: flex; align-items: baseline; gap: .35rem; color: var(--muted); font-size: .8rem; border-right: 1px solid var(--line); }
.import-summary span:last-child { border-right: 0; }
.import-summary strong { color: var(--ink); font-size: 1.1rem; }
.activation-link-card { max-width: none; margin-bottom: 1rem; }
.activation-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.activation-link-row input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; }
.activation-card { margin-top: 2rem; }
.activation-form { padding: 1rem 0 0; grid-template-columns: 1fr; }
/* Training detail */
/* Inverterad bricka: texten måste vara ytans färg, inte vit — i mörkt läge
är --ink ljus och vit på ljust är vitt på vitt. */
/* Föräldern har overflow: hidden för att runda hörnen, och den klippte bort
rubrikens fokusring: fyra av 1 078 × 56 pixlar ändrades (Astra P2-44
varv 10). En inåtvänd ring ritas innanför kanten och överlever klippningen. */
.account-reminder-setting { margin-top: .5rem; padding: .65rem .75rem; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.account-reminder-setting label { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; }
.account-reminder-setting input { width: 24px; height: 24px; margin-top: .15rem; accent-color: var(--green); }
.account-reminder-setting span { display: grid; }
.account-reminder-setting small { color: var(--muted); font-size: .8rem; }
.account-booking-list { background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); overflow: hidden; }
.account-booking-row { min-height: 3.1rem; padding: .38rem .6rem; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; color: var(--ink); border-bottom: 1px solid var(--line); }
.account-booking-row:last-child { border-bottom: 0; }
.account-booking-row:hover { background: var(--surface-muted); }
.account-booking-row time { display: grid; justify-items: center; font-size: .8rem; font-variant-numeric: tabular-nums; }
.account-booking-row time span { color: var(--muted); }
.account-booking-main { min-width: 0; display: grid; }
.account-booking-main strong, .account-booking-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-booking-main small { color: var(--muted); font-size: .8rem; }
.account-booking-statuses { display: flex; gap: .25rem; }
.account-history { margin-top: 1rem; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.account-history > summary { min-height: 2.8rem; padding: .5rem .7rem; cursor: pointer; list-style: none; }
.account-history > summary::-webkit-details-marker { display: none; }
.account-history > summary span { display: grid; }
.account-history > summary small { color: var(--muted); font-size: .8rem; font-weight: 450; }
.account-history .account-booking-list { border-width: 1px 0 0; border-radius: 0 0 var(--radius) var(--radius); }
.account-password-card { max-width: 34rem; }
/* Spelarens egna siffror på Mina sidor (VIK-P2-48): snitt, form och de senaste
matcherna. Sidans krok — det enda här som är värt att öppna appen för utan
att ha blivit kallad.
Kurvan ritas med currentColor och tar rollen --lank, inte --accent: klubbrött
#c1121f mot den mörka kortytan #17171b mäter 2,87:1, och golvet för ett
grafiskt objekt är 3:1 (WCAG 1.4.11). --lank håller 8,98:1 i ljust läge och
5,85:1 i mörkt.
Rutnätet höll inte samma golv. --line-strong mäter 1,95:1 mot vit yta (3,12:1
i mörkt läge) — en axel med ett snittvärde bredvid en linje man knappt ser.
--line-starkare räcker inte heller (2,68:1 ljust). Rollen är därför
--text-dekor: 5,92:1 ljust och 5,22:1 mörkt, med ett tunnare streck så den
syns utan att konkurrera med kurvan. */
.spelarsektion { margin-bottom: 1.2rem; }
.spelarform { display: flex; }
.spelarform select { min-height: 40px; padding: 0 1.8rem 0 .6rem; font-size: .9rem; }
.spelarstat { display: grid; gap: .5rem; }
.spelarstat.ar-laddar { opacity: .5; }
.spelarsiffror { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.2rem, 1fr)); gap: .4rem; }
.spelarsiffra { min-width: 0; padding: .6rem .7rem; display: grid; gap: .1rem; align-content: start; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.spelaretikett { color: var(--muted); font-family: var(--font-etikett); font-size: .8rem; font-weight: 500; letter-spacing: 0; } /* .8rem = 12 px vid :root 15px, exakt textgolvet */
.spelarvarde { font-size: 1.45rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.spelarnot { color: var(--muted); font-size: .8rem; }
/* Formkurvan. SVG:n ligger med bevarat sidförhållande och width:100%, så en
punkt på y hamnar på y/viewBox-höjd av elementets höjd — det är därför
axelvärdena kan ligga som vanlig HTML-text ovanpå och ändå stå i lod med
sin linje. Som inuti bilden hade de skalat med den och renderats
under tolv pixlar på en telefon. */
.formkurva { margin: 0; padding: .7rem .75rem .55rem; display: grid; gap: .45rem; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.kurvyta { position: relative; }
.kurvbild { display: block; width: 100%; height: auto; color: var(--lank); }
.kurvnat { color: var(--text-dekor); }
.kurvmedian { color: var(--muted); }
.kurvpunkt { fill: currentcolor; }
.kurvpunkt.ar-borta { fill: var(--surface); }
.kurvaxel { position: absolute; inset: 0 auto 0 0; pointer-events: none; }
.kurvaxel span { position: absolute; right: .3rem; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; transform: translateY(-50%); }
.kurvfot { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .7rem; color: var(--muted); font-size: .8rem; }
.kurvdatum { white-space: nowrap; }
/* Teckenförklaringen: fylld punkt hemma, ihålig borta, streck median. Utan den
betyder punktens fyllning ingenting. Prickarna är samma klasser som kurvans,
så de kan inte glida isär från bilden. */
.kurvteckenrad { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.kurvtecken { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.kurvprick { flex: none; width: 11px; height: 11px; }
.kurvteckning::before { content: ""; width: 1.3rem; border-top: 2px dashed currentcolor; }
@media (max-width: 30rem) { .kurvteckenrad { flex-basis: 100%; order: 3; justify-content: center; } }
/* Matchlistan: samma form som snittlistan, utan egen bakgrund på huvudet —
dämpad text på en tonad yta faller under 4,5:1 (mätt: 3,99:1 i ljust läge). */
.matchkort { background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); overflow: hidden; }
.matchlista { margin: 0; padding: 0; list-style: none; }
.spelarmatch { min-height: 2.5rem; padding: .4rem .7rem; display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) 2.6rem 3.4rem; align-items: center; column-gap: .5rem; border-bottom: 1px solid var(--line); }
.matchlista .spelarmatch:last-child { border-bottom: 0; }
.matchhuvud { min-height: 0; padding-block: .35rem; color: var(--muted); font-family: var(--font-etikett); font-size: .8rem; font-weight: 500; letter-spacing: 0; }
.matchdag { font-size: .8rem; font-variant-numeric: tabular-nums; }
.matchplats { min-width: 0; display: grid; }
.matchplats strong, .matchplats small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matchplats strong { font-size: .9rem; font-weight: 650; }
.matchplats small { color: var(--muted); font-size: .8rem; }
.matchserier { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; text-align: right; }
.matchsnitt { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.matchhuvud .matchplats, .matchhuvud .matchserier, .matchhuvud .matchsnitt { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; }
/* Rubrikraden och innehållet håller samma bredd. Med taket bara på .spelarstat
gick understrykningen under "Snitt och form" över hela sidan medan korten
slutade vid 42rem. Taket sitter på sektionen: kurvan behåller sitt
sidförhållande, och en bild som fyller 1440 px blir 472 px hög. */
/* Desktop: siffrorna i full bredd, kurvan och matcherna sida vid sida
(Sami 2026-10-06: halva skärmen stod tom). */
@media (min-width: 62rem) {
.spelarsektion .spelarstat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: .75rem 1.25rem; align-items: start; }
.spelarsektion .spelarstat > * { grid-column: 1 / -1; }
.spelarsektion .spelarsiffror { grid-column: 1; grid-row: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spelarsektion .spelarstat > .formkurva { grid-column: 1; grid-row: 2; align-self: stretch; margin: 0; display: flex; flex-direction: column; justify-content: center; }
.spelarsektion .spelarstat > .matchkort { grid-column: 2; grid-row: 1 / span 2; }
/* Spelarvalet på flikradens höjd, inte på en egen rad. */
.spelarsektion > .minapanel-rad:has(form) { margin: -3.65rem 0 1rem auto; width: fit-content; }
}
.reminder-admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); overflow: hidden; }
.reminder-admin-stats > span { min-height: 3.3rem; padding: .45rem .65rem; display: grid; align-content: center; color: var(--muted); font-size: .8rem; border-right: 1px solid var(--line); }
.reminder-admin-stats > span:last-child { border-right: 0; }
.reminder-admin-stats strong { color: var(--ink); font-size: 1.1rem; }
.reminder-admin-stats .is-sent strong { color: var(--god-text); }
.reminder-admin-stats .is-failed strong { color: var(--kritisk-text); }
.reminder-command-help { margin-top: .65rem; }
.reminder-command-help p { margin: .15rem 0 0; font-size: .8rem; }
.reminder-delivery-list { background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); overflow: hidden; }
.reminder-delivery-row { min-height: 2.8rem; padding: .4rem .6rem; display: grid; grid-template-columns: 5.5rem minmax(9rem, 1fr) minmax(10rem, auto) auto 4rem; align-items: center; gap: .55rem; border-bottom: 1px solid var(--line); }
.reminder-delivery-row:last-child { border-bottom: 0; }
.reminder-delivery-row time, .reminder-delivery-email, .reminder-delivery-row > .muted { font-size: .8rem; }
.reminder-delivery-main { min-width: 0; display: grid; }
.reminder-delivery-main strong, .reminder-delivery-main small, .reminder-delivery-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reminder-delivery-main small { color: var(--muted); font-size: .8rem; }
/* 1,45rem blev 21,75 px vid skrivbordsbredd — under golvet 24, och närmaste
interaktiva granne ligger intill, så WCAG 2.5.8:s avståndsundantag gäller
inte (Astra P2-44 varv 10). Vid 390 var den redan 40 px. */
/* Dialogs */
.app-dialog { width: min(94vw, 35rem); max-height: 90vh; padding: 0; overflow-y: auto; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radie-stor); box-shadow: var(--shadow-dialog); }
.app-dialog::backdrop { background: var(--overlaggsdimma); backdrop-filter: blur(2px); }
.side-sheet { position: fixed; inset: 0 0 0 auto; width: min(94vw, 29rem); height: 100vh; max-height: 100vh; margin: 0; border-radius: var(--radie-stor) 0 0 var(--radie-stor); }
.tool-sheet { width: min(96vw, 58rem); }
.tool-dialog-body { padding: 1rem; }
.tool-dialog-body > .messages { margin-top: 0; }
.tool-dialog-body .page-header, .tool-dialog-body .compact-header { margin-bottom: 1rem; }
.tool-dialog-body > .page-header h1, .tool-dialog-body > .page-header .sidmeta,
.tool-dialog-body > .compact-header h1, .tool-dialog-body > .compact-header .sidmeta { display: none; }
.tool-dialog-body .breadcrumbs { display: none; }
.tool-loading { padding: 2rem; text-align: center; }
.dialog-titlebar { position: sticky; z-index: 2; top: 0; padding: .8rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.dialog-titlebar h2, .dialog-titlebar .sidmeta { margin: 0; }
.compact-form { padding: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compact-form > .form-field:first-of-type, .compact-form > .guardian-field, .compact-form > .form-actions, .compact-form > .form-errors, .compact-form > .advanced-fields, .schedule-form > * { grid-column: 1 / -1; }
.guardian-field { min-width: 0; margin: 0; padding: .65rem; border: 1px solid var(--line); border-radius: var(--radie-kort); }
.guardian-field legend { padding-inline: .25rem; font-size: .82rem; font-weight: 700; }
.inline-account-panel { grid-column: 1 / -1; padding: .7rem; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .7rem; background: var(--surface-muted); border: 1px solid var(--line); border-radius: var(--radie-kort); }
.inline-account-panel h3, .inline-account-panel p { margin: 0; }
.account-status-ok { color: var(--god-text); }
.inline-activation-result, .inline-account-head { flex: 1 1 100%; }
.inline-activation-result > label { display: block; margin-bottom: .25rem; font-size: .8rem; }
.inline-activation-result > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; }
.inline-activation-result input { min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; }
.checkbox-list { max-height: 12rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .6rem; overflow-y: auto; }
.side-sheet .checkbox-list { grid-template-columns: 1fr; }
.checkbox-list label { padding: .25rem; display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 500; }
.checkbox-list label > span { min-width: 0; flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
/* small ärver webbläsarens font-size: smaller och landade på 10 px i
bokningsdialogen — priset är information, inte dekor (Astra P3-37). 1rem
var för mycket åt andra hållet: priset blev 15 px mot namnets 12 och
trängde ut personen det gäller (varv 3). Samma storlek som etiketten. */
.checkbox-list small { font-size: inherit; color: var(--muted); }
.schedule-form { display: block; }
.schedule-form > * { margin-bottom: .75rem; }
.schedule-history { padding: 1rem; border-top: 1px solid var(--line); }
.schedule-history article { padding: .55rem 0; display: flex; align-items: center; justify-content: space-between; gap: .7rem; border-bottom: 1px solid var(--line); }
.schedule-history article div { display: grid; }
.schedule-history article span { color: var(--muted); font-size: .8rem; }
/* Payments */
.payment-dropzone { min-height: 12rem; padding: 1.5rem; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: .3rem; text-align: center; background: var(--surface-muted); border: 1px dashed var(--line-strong); border-radius: var(--radie-kort); cursor: pointer; }
.payment-dropzone.is-dragging { background: var(--blue-soft); border-color: var(--lank); }
.payment-dropzone__icon { color: var(--lank); }
.payment-dropzone input { width: 100%; min-width: 0; min-height: auto; margin-top: .5rem; padding: .35rem; font-size: .8rem; border: 0; }
.payment-upload-actions { margin-top: .75rem; justify-content: flex-end; }
.payment-preview { margin-top: 1rem; max-width: none; }
.payment-preview-heading, .payment-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* Flex med flex-grow, inte fasta kolumner: rutorna delar raden lika oavsett
om de är fyra eller fem (förslagsrutan tillkom med Swish-rapporten). */
.payment-summary-grid { margin-block: 1rem; display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radie-kort); overflow: hidden; }
.payment-summary-item { flex: 1 1 8rem; padding: .75rem; display: grid; border-right: 1px solid var(--line); }
.payment-summary-item:last-child { border-right: 0; }
.payment-summary-item strong { font-size: 1.25rem; }
.payment-summary-item span { color: var(--muted); font-size: .8rem; }
.payment-summary-item--ok strong, .payment-status--matched { color: var(--god-text); }
/* Ett förslag är varken matchat eller omatchat: det väntar på kassören. */
.payment-status--suggested { color: var(--varning-text); }
.forslagsval { padding: .2rem .35rem; font-size: .88rem; }
.forslagsval small { display: block; color: var(--muted); font-size: .8rem; font-weight: 500; }
.payment-table-wrap { margin-bottom: 1rem; overflow-x: auto; }
.payment-table { width: 100%; border-collapse: collapse; }
.payment-table th, .payment-table td { padding: .55rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.payment-table .forslagsval { max-width: 22rem; white-space: normal; }
.payment-table td small.muted { white-space: normal; }
.payment-table th { color: var(--muted); font-size: .8rem; }
.amount-cell { text-align: right !important; }
/* Login/footer */
.login-card { width: min(100%, 30rem); margin-inline: auto; }
/* Inloggningen följer läget som resten av appen (målbild v3) — ingen
egen mörk scen längre. */
.login-page { min-height: 100vh; display: block; background: var(--canvas); }
.login-page .site-header, .login-page .site-footer, .login-page .skip-link { display: none; }
.login-page .page-content { width: 100%; max-width: none; min-height: 100vh; padding: clamp(1.5rem, 5vh, 3.5rem) 1rem; display: grid; place-items: center; }
.login-shell { width: min(100%, 27rem); display: grid; justify-items: center; gap: 1rem; }
.login-logo { width: min(50vw, 11rem); height: auto; max-height: 11rem; margin-bottom: .75rem; object-fit: contain; }
.login-page .login-card { padding: 1.75rem; }
.login-heading { margin-bottom: .85rem; text-align: center; }
.login-heading h1 { margin-bottom: .35rem; font-size: 1.9rem; }
/* Knappen overstyrde .button-primary:s bakgrund men inte dess pa-farg, sa
texten stod #181818 pa #22222a - 1,12:1, i bade ljust och morkt lage, pa
appens ytterdorr (Astra P3-38 varv 3). Overstyrningen ar borta: knappen AR
primarknappen, klubbgul med husets pa-farg, samma par som mats i resten av
appen. Det satter ocksa klubbens farg pa inloggningen, vilket ar vad
kriteriet om markets roller ber om. */
.login-submit { width: 100%; margin-top: .2rem; }
/* Ensam pa sin rad, alltsa ett eget tryckmal: minst 24 px (Astra P3-37 varv 3). */
.login-help-link { margin-top: .65rem; min-height: 24px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .8rem; text-align: center; }
.login-help-link:hover { color: var(--ink); }
.login-logo--small { width: min(40vw, 8rem); }
.login-message-card { text-align: center; }
.login-message-card .button { margin-top: .35rem; }
/* Matchschema och laguttagningar */
.season-picker { min-width: 0; display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 650; }
.season-picker select { min-width: 0; max-width: 100%; min-height: 2rem; }
.team-tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.team-tab { flex: 0 0 auto; min-height: 2.5rem; padding: .45rem .7rem; display: flex; align-items: center; gap: .4rem; color: var(--muted); font: inherit; font-weight: 650; white-space: nowrap; background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radie-kort) var(--radie-kort) 0 0; cursor: pointer; }
.team-tab small { padding: .05rem .35rem; font-size: .8rem; font-variant-numeric: tabular-nums; background: var(--surface-muted); border-radius: 999px; }
.team-tab:hover { color: var(--ink); background: var(--surface-muted); }
.team-tab[aria-selected="true"] { position: relative; z-index: 1; margin-bottom: -1px; padding-bottom: calc(.45rem + 1px); color: var(--ink); background: var(--surface); border-color: var(--line); }
.team-panel { padding: .8rem; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radie-kort) var(--radie-kort); }
.team-panel-head { margin-bottom: .7rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.team-panel-head > div { display: grid; gap: .08rem; }
.team-panel-head small, .match-main small { color: var(--muted); font-size: .8rem; }
.team-archive { margin-top: .7rem; padding-top: .6rem; display: grid; gap: .35rem; border-top: 1px solid var(--line); }
.team-archive-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; max-width: 22rem; color: var(--muted); font-size: .82rem; }
/* small ärver .82rem och krymper till 10,25 px. Textgolvet är 12. */
.team-archive-row small { font-size: 1rem; }
.team-member-form { display: grid; gap: .55rem; }
.team-member-form > label { display: grid; gap: .25rem; font-size: .8rem; font-weight: 650; }
.team-member-search { min-width: 0; max-width: 22rem; flex: 1 1 14rem; }
.squad-toolbar label { display: grid; gap: .25rem; font-size: .8rem; font-weight: 650; }
.squad-toolbar { margin-bottom: .5rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.squad-periods { display: flex; gap: .2rem; padding: .15rem; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 999px; }
.squad-period { min-height: 26px; padding: .28rem .7rem; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 650; white-space: nowrap; background: transparent; border: 0; border-radius: 999px; cursor: pointer; }
.squad-period:hover { color: var(--ink); }
.squad-period[aria-pressed="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--skugga-liten); }
.squad-panel { --stat-col: 4.9rem; --stat-gap: .5rem; border: 1px solid var(--line); border-radius: var(--radie-kort); }
.squad-table { max-height: 26rem; display: grid; align-content: start; overflow: auto; border-radius: 0 0 var(--radie-kort) var(--radie-kort); }
.squad-head { position: relative; z-index: 3; color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: 0; background: var(--surface-muted); border-bottom: 1px solid var(--line); border-radius: var(--radie-kort) var(--radie-kort) 0 0; }
/* Kryssrutan har en EGEN spalt på 24 px — samma mått som rutan själv.
Spalten var 1,1rem (16,5 px vid rotstorleken 15) medan rutan är 24, och
webbläsarens egen `margin: 3px 3px 3px 4px` på en kryssruta sköt dessutom
ut den ytterligare fyra: mätt vid 320 och 390 px slutade rutan på 58,9 och
namnet började på 54,9, så första bokstaven låg på rutans fyllning. Vid
1440 gick de jämsides med 0,3 px marginal — lika fel, bara inte synligt.
Nollställd marginal, så spalten och rutan är samma sak (VIK-P3-69). */
.squad-head-labels, .squad-head-row, .squad-row { display: grid; grid-template-columns: 24px minmax(9rem, 1fr) auto; align-items: center; gap: .75rem; padding: .3rem .7rem; }
.squad-head-labels { padding-bottom: 0; }
.squad-head-row { padding-top: .15rem; }
.squad-group-labels { display: grid; grid-template-columns: calc(2 * var(--stat-col) + var(--stat-gap)) calc(5 * var(--stat-col) + 4 * var(--stat-gap)); gap: var(--stat-gap); }
.squad-group { padding-bottom: .1rem; color: var(--muted); font-size: .8rem; font-weight: 700; text-align: center; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.squad-row { min-height: 2.4rem; border-bottom: 1px solid var(--line); }
.squad-row:last-of-type { border-bottom: 0; }
.squad-row:hover { background: var(--surface-muted); }
.squad-row input { width: 24px; height: 24px; margin: 0; }
.squad-row:has(input:checked) { background: var(--dampad); }
/* De valda ligger alltid först. Linjen visar var truppen slutar och registret börjar. */
.squad-row:has(input:checked) + .squad-row:not(:has(input:checked)) { border-top: 2px solid var(--line-strong); }
.squad-name { min-width: 0; display: flex; align-items: baseline; gap: .4rem; font-size: .82rem; font-weight: 650; }
.squad-name small { color: var(--muted); font-size: .8rem; font-weight: 400; }
.squad-stats, .squad-sort-group { display: grid; grid-template-columns: repeat(7, var(--stat-col)); gap: var(--stat-gap); }
.squad-stat { font-size: .8rem; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.squad-stat--bits { color: var(--muted); }
.squad-stat--first, .squad-sort--first { padding-left: var(--stat-gap); border-left: 1px solid var(--line); }
.squad-trend { font-weight: 650; }
/* Riktningen är en ikon, inte ett tecken: ▲ och ▼ står i ban-listan och
renderas olika i olika typsnitt (Astra P2-43 varv 2). Masken följer
textfärgen, så grönt och rött gäller i båda lägena. */
.squad-trend[data-direction]::before { content: ""; width: .7em; height: .7em; margin-right: .15em; display: inline-block; vertical-align: baseline; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.squad-trend[data-direction="up"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.squad-trend[data-direction="down"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.squad-trend[data-direction="up"] { color: var(--god-text); }
.squad-trend[data-direction="down"] { color: var(--kritisk-text); }
.squad-sort { display: block; width: 100%; min-height: 24px; padding: 0; color: inherit; font: inherit; text-align: right; background: none; border: 0; cursor: pointer; }
.squad-sort--name { text-align: left; }
.squad-sort:hover { color: var(--ink); text-decoration: underline; }
.squad-sort[aria-pressed="true"] { color: var(--ink); text-decoration: underline; }
.squad-hint { position: relative; display: block; }
.hint-bubble { position: absolute; z-index: 20; top: calc(100% + .4rem); right: 0; width: 16rem; padding: .55rem .65rem; color: var(--pa-djup-stark); font-size: .8rem; font-weight: 500; line-height: 1.4; text-align: left; text-transform: none; letter-spacing: 0; background: var(--yta-djup); border-radius: var(--radie-kort); opacity: 0; visibility: hidden; transform: translateY(-.2rem); transition: opacity .14s ease, transform .14s ease; pointer-events: none; box-shadow: var(--skugga-stor); }
.squad-hint:hover .hint-bubble, .squad-hint:focus-within .hint-bubble { opacity: 1; visibility: visible; transform: none; }
.team-member-empty { padding: .7rem .5rem; color: var(--muted); font-size: .8rem; }
.team-name-list { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .8rem; }
.team-name-list span { padding: .2rem .4rem; background: var(--surface-muted); border-radius: var(--radie-liten); }
/* Passets notering: en rad som gäller just det passet ("ungdomarna har 6-8
platser"). Gemener och klubbgult streck till vänster, så den skiljer sig
från metaraden ovanför utan att skrika. */
/* ── Snittlistan ──────────────────────────────────────────────────────────
En rad per spelare, fallande: plats, namn, snitt. Femtiosex rader ska gå att
skumma på en telefon, så raden bär ingenting annat — vilket snitt som visas
står i reglaget ovanför och vad det betyder bakom i-ikonen. */
.snittstyr { position: relative; display: flex; align-items: center; gap: .35rem; }
/* Förklaringsrutan hängs på hela reglageraden och inte på i-knappen: mätt vid
390 px stack den 36 px utanför vänsterkanten när den räknade från knappens
egen högerkant, som har fler knappar till höger om sig. */
.snittstyr .info { position: static; }
.snittstyr .info-ruta { left: auto; right: 0; max-width: calc(100vw - 1.6rem); }
/* Pillren på bredd, rullgardinen på telefon. Fyra pillrar tar hela
rubrikraden vid 390 px; en rullgardin tar 130 px (Sami 2026-09-16). */
.snittval { display: none; flex-wrap: wrap; gap: .3rem; }
.snittknapp { min-height: 34px; padding: 0 .75rem; display: inline-flex; align-items: center; color: var(--muted); font-family: var(--font-etikett); font-size: .82rem; font-weight: 500; text-decoration: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; }
.snittknapp:hover { color: var(--ink); }
.snittknapp.ar-vald { color: var(--pa-accent); background: var(--accent); border-color: var(--accent); }
.snittform { display: flex; }
.snittform select { min-height: 40px; padding: 0 1.8rem 0 .6rem; font-size: .85rem; }
@media (min-width: 48rem) { .snittval { display: flex; } .snittform { display: none; } }
/* Kopieringsikonen är en ikon, inte en knapp med ram — den står bredvid
i-ikonen och ska väga lika lite. */
.snittkopia { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; color: var(--muted); background: transparent; border: 0; box-shadow: none; }
.snittkopia:hover { color: var(--ink); background: var(--dampad); background-image: none; }
.snittkopia.ar-kopierad { color: var(--god-text); }
.snittlista { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); overflow: hidden; }
/* En rad, inte två: raden bär bara plats, namn och siffra, och med två
gridrader hamnade namnet i överkant medan siffran låg mitt i (Sami). */
.snittrad { padding: .45rem .8rem; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto auto; align-items: center; column-gap: .6rem; border-bottom: 1px solid var(--line); }
/* Antal serier står dämpat före snittet: åtta serier och hundra serier är inte
samma sorts siffra, och den som läser listan ska se skillnaden. */
.snittserier { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; text-align: right; }
/* Kolumnhuvudet, samma form som serietabellernas: versaler, spärrat, dämpat. */
.snitthuvud { padding-block: .35rem; color: var(--muted); font-family: var(--font-etikett); font-size: .8rem; font-weight: 500; letter-spacing: 0; } /* .8rem = 12 px, textgolvet */
.snitthuvud .snittnamn, .snitthuvud .snittserier, .snitthuvud .snittsiffra { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; }
.snittrad:last-child { border-bottom: 0; }
.snittplats { color: var(--muted); font-family: var(--font-etikett); font-size: .85rem; font-variant-numeric: tabular-nums; text-align: right; }
.snittnamn { min-width: 0; overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.snittsiffra { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.snittrad.ar-jag { background: var(--profil-svag); }
.snittrad.ar-egen { border-top: 2px solid var(--line-strong); }
.snittfot { margin: .5rem 0 0; font-size: .8rem; }
/* Redan besvarade matcher ligger hopfällda under frågorna som väntar: man ska
kunna ändra sig, men det får inte skymma det som faktiskt ska besvaras. */
.svarade { margin-top: .4rem; }
.svarade > summary { min-height: 44px; display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .88rem; font-weight: 600; cursor: pointer; list-style: none; }
.svarade > summary::-webkit-details-marker { display: none; }
/* Chevron som form, inte som tecken: triangeln ritas olika i varje typsnitt
och star pa ban-listan (Astra P2-43 varv 3). Masken foljer currentColor,
sa den vander med hover och med morkt lage utan en enda farg har. */
.svarade > summary::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / 18px 18px no-repeat; mask: url("data:image/svg+xml;utf8,") center / 18px 18px no-repeat;
transition: transform var(--tid-kvick) var(--kurva-standard); }
.svarade[open] > summary::before { transform: rotate(90deg); }
.svarade > summary:hover { color: var(--ink); }
.svarade > .svarslista { margin-top: .6rem; }
/* Bild i en nyhet: egen rad, aldrig inuti ett stycke, och aldrig bredare än
texten. Bildtexten står under i samma dämpade ton som övrig metatext. */
.nyhetsbild { margin: .9rem 0; }
.nyhetsbild img { display: block; width: 100%; height: auto; border-radius: var(--radie-kort); }
.nyhetsbild figcaption { margin-top: .35rem; color: var(--muted); font-size: .84rem; }
.textverktyg-besked { margin: .3rem 0 0; font-size: .84rem; }
/* Märkningshjälpen som en liten tabell: tecknet till vänster, vad det gör till
höger. Som löptext blev de sju reglerna en vägg man inte läser. */
.markhjalp { padding-top: .2rem; }
.markhjalp h3 { margin: 0 0 .4rem; color: var(--muted); font-family: var(--font-etikett); font-size: .8rem; font-weight: 500; letter-spacing: 0; }
.markhjalp dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .6rem; align-items: baseline; }
.markhjalp dt { min-width: 0; }
.markhjalp dt code { font-size: .8rem; word-break: break-word; }
.markhjalp dd { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.4; }
@media (max-width: 62rem) { .markhjalp dl { grid-template-columns: minmax(0, 1fr); gap: 0 0; } .markhjalp dd { margin: 0 0 .4rem; } }
.textverktyg-besked:empty { display: none; }
/* Ett kort, inte flera: resten av listan fäller ut direkt under femte raden
i stället för att ligga i ett eget block längre ned (Sami 2026-09-16). */
.snittkort { background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); overflow: hidden; }
.snittkort .snittlista { background: transparent; border: 0; border-radius: 0; }
.snittkort .snittlista + .snittlista .snittrad:first-child { border-top: 1px solid var(--line); }
.snittegen .snittrad { border-bottom: 0; }
.snittmer { width: 100%; min-height: 44px; padding: 0 .8rem; display: flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .85rem; font-weight: 600; text-align: left; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; cursor: pointer; }
.snittmer:hover { color: var(--ink); background: var(--dampad); background-image: none; }
.snittpil { flex: none; transition: transform .15s ease-in-out; }
.snittmer[aria-expanded="true"] .snittpil { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .snittpil { transition: none; } }
/* Utan skript fäller knappen inget: då visas hela listan direkt i stället. */
html:not(.js) .snittresten { display: block !important; }
html:not(.js) .snittmer { display: none; }
.snittkort.ar-laddar { opacity: .5; }
.snittdesktop { display: none; }
.snittremsa::-webkit-scrollbar { display: none; }
.snittremsa:focus-visible { outline: 3px solid var(--fokusring); outline-offset: 2px; }
.snittremsa { scrollbar-width: none; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 1.5rem) / 3); gap: .75rem; overflow-x: auto; scroll-snap-type: x proximity; padding: .25rem .2rem .75rem; }
.snittpanel { min-width: 0; scroll-snap-align: start; }
.snittpanel:last-child { scroll-snap-align: end; }
.snittpanel > .section-heading { position: relative; }
.snittpanel h3 { margin: 0; font-size: 1rem; }
@media (min-width: 62rem) { .snittmobil { display: none; } .snittdesktop { display: block; } }
/* Hemskärmsmärket i medlemslistan: samma dämpade ton som övrig metatext, med
klubbgult bara på ikonen. En statusbricka hade skrikit lika högt som Admin. */
.hemskarm-marke { display: inline-flex; align-items: center; color: var(--muted); }
.hemskarm-raknare { display: inline-flex; align-items: center; gap: .25rem; }
.passnotering { margin: .15rem 0 0; padding-left: .5rem; color: var(--ink); font-size: .84rem; border-left: 3px solid var(--profil); }
/* I passlistan är noteringen en egen rad över hela bredden. Klämd i
titelkolumnen bredvid Redigera-knappen bröts den i tre rader och drog ut
raden till 131 px. */
/* Noteringen ligger på rad 2 med en uttrycklig grid-row. Utan den auto-
placerades den och knuffade ner nästa barn — Boka-knappen, statusbrickan
eller chevronen — till en tredje rad, och raden växte från 71 till 140 px
på telefon (Astra P3-35). Sista kolumnen står kvar på rad 1 oavsett vad
den innehåller. */
.calendar-session > .passnotering { grid-column: 2 / -1; grid-row: 2; margin-top: 0; }
.calendar-session:has(> .passnotering) > .calendar-session-state,
.calendar-session:has(> .passnotering) > .button,
.calendar-session:has(> .passnotering) > a[aria-label] { grid-column: -2; grid-row: 1; }
@media (max-width: 40rem) { .calendar-session > .passnotering { grid-column: 1 / -1; } }
.notis { color: var(--muted); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.notis.ar-bra { color: var(--god-text); }
.notis.ar-knappt { color: var(--varning-text); }
.notis.ar-tunt { color: var(--kritisk-text); }
.match-result-card { margin-bottom: 1rem; padding: .9rem; display: grid; gap: .7rem; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.match-result-score { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; font-size: .95rem; }
.match-result-score strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.match-result-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.match-result-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.match-result-table th, .match-result-table td { padding: .35rem .5rem; text-align: right; border-bottom: 1px solid var(--line); }
.match-result-table thead th { color: var(--muted); font-size: .8rem; letter-spacing: 0; }
.match-result-table tbody th, .match-result-table thead th:first-child { text-align: left; }
.match-result-table tr:last-child th, .match-result-table tr:last-child td { border-bottom: 0; }
.match-result-series { display: flex; justify-content: flex-end; gap: .3rem; font-variant-numeric: tabular-nums; }
/* Guiden 'Lägg appen på hemskärmen': en del per telefon, numrerade steg. */
.guide-status { margin-bottom: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.guide-status p { margin: 0; }
.guide-del { margin-bottom: 1rem; padding: .85rem 1rem; background: var(--surface); border: 0; border-radius: var(--radie-kort); box-shadow: var(--skugga-kort); }
.guide-del h2 { margin: 0 0 .5rem; font-size: .92rem; font-weight: 700; letter-spacing: 0; }
.guide-steg { margin: 0; padding-left: 1.4rem; display: grid; gap: .35rem; line-height: 1.45; }
.guide-steg li::marker { color: var(--muted); font-weight: 700; }
.guide-bilder { margin-top: .9rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; }
.guide-bilder figure { margin: 0; display: grid; gap: .4rem; }
.guide-bilder img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radie-kort); }
.guide-bilder figcaption { font-size: .8rem; line-height: 1.4; color: var(--muted); }
@media (max-width: 480px) { .guide-bilder { grid-template-columns: 1fr; } }
/* Laget på matchsidan: det alla i klubben läser efter kallelsen — spelarna i
platsordning, reserverna, kapten, samling. */
.laget-kort { margin-bottom: 1rem; padding: .85rem; background: var(--surface); border: 0; border-radius: var(--radie-kort); box-shadow: var(--skugga-kort); }
.laget-huvud { margin-bottom: .5rem; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.laget-huvud h2 { margin: 0; flex: none; font-size: .92rem; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.laget-status { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: .4rem .8rem; }
.laget-lista .uttag-kvitto { margin-left: .25rem; }
.laget-lista { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .25rem .8rem; }
.laget-lista li { min-height: 1.9rem; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--line); }
.laget-nr { min-width: 2.25rem; height: 1.75rem; padding: 0 .55rem; display: inline-grid; place-items: center; flex: none; color: var(--ink); font-size: .8rem; font-weight: 700; background: var(--yta-ton-svag); border-radius: 999px; }
.laget-k { padding: 0 .3rem; color: var(--pa-accent); font-size: .8rem; font-weight: 700; line-height: 1.35; background: var(--accent); border-radius: var(--radie-liten); }
.laget-reserver, .laget-info { margin: .5rem 0 0; display: flex; gap: .5rem; font-size: .9rem; }
/* Redigeringen är ett details: ihopfällt när kallelsen gått ut. */
.callup-response-card { margin-bottom: 1rem; padding: .85rem; display: grid; gap: .65rem; background: var(--profil-svag); border: 1px solid var(--line); border-radius: var(--radie-kort); }
.callup-response-card h2 { margin-bottom: .15rem; }
.callup-response-row { padding-top: .55rem; display: grid; grid-template-columns: minmax(8rem, 1fr) auto auto; align-items: center; gap: .5rem .6rem; border-top: 1px solid var(--line); }
.standing-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.standing-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.standing-table th, .standing-table td { padding: .36rem .5rem; text-align: right; border-bottom: 1px solid var(--line); }
.standing-table th:nth-child(2), .standing-table td:nth-child(2) { text-align: left; }
/* Lagnamnet tar platsen som blir över och kortas av hellre än att bryta raden
i två (BK / Femtionian i en smal telefon, VIK-P2-133). */
.standing-table tbody th { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standing-table tr.is-own-team { background: var(--profil-svag); } /* klubbens egen bleka gula, inte varningsgult: raden säger "det här är vi". Text 15,8:1, dämpad text 5,6:1 */
@media (max-width: 700px) {
.callup-response-row { grid-template-columns: 1fr auto; }
}
.demo-login-card { margin-top: 0; padding: .7rem 1rem !important; }
.demo-login-card summary { cursor: pointer; list-style: none; }
.demo-login-card summary::-webkit-details-marker { display: none; }
.demo-login-card summary > span { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.demo-login-card summary small { color: var(--muted); font-size: .8rem; font-weight: 450; }
.demo-login-card[open] summary { margin-bottom: .6rem; }
.demo-login-card h2 { margin: 0; font-size: 1rem; }
.demo-login-list { margin-top: .6rem; display: grid; gap: .35rem; }
.demo-login-button { width: 100%; min-height: 2.7rem; display: grid; justify-items: center; gap: 0; text-align: center; }
.demo-login-button small { font-size: inherit; color: var(--muted); font-weight: 430; }
/* Sidfoten: en rad med klubbens uppgifter, kanaler och byline. */
.site-footer { margin-top: 3rem; padding-block: 1.25rem 1.75rem; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); }
/* Sidfotens innehåll i Mer-panelen på mobil (Sami 2026-10-06). */
.mer-fot { display: grid; gap: .3rem; padding: .6rem .5rem .2rem; margin-top: .3rem; border-top: 1px solid var(--line); color: var(--muted); }
.mer-fot small { font-size: .8rem; }
.mer-fot small a { min-height: 24px; display: inline-flex; align-items: center; color: var(--ink); }
.mer-fot .sociala { margin-left: -.6rem; }
.fotrad { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.fotbyline { margin-left: auto; }
.fotbyline a, .fotrad > a { min-height: 24px; display: inline-flex; align-items: center; color: var(--ink); }
.sociala { display: flex; flex-wrap: wrap; gap: .25rem; }
.sociala .social { width: 44px; height: 44px; display: inline-grid; place-items: center; color: var(--muted); border-radius: 50%; transition: background var(--tid-kvick), color var(--tid-kvick); }
.sociala .social:hover { color: var(--ink); background: var(--dampad); }
@media (max-width: 48rem) {
.container { width: calc(100% - 2rem); }
.page-content { padding-block: 1.35rem 2.5rem; }
/* Telefon: märket och utseendet i toppen, vägarna i flikraden, menyn som
ett ark nerifrån när Mer trycks. */
/* Ingen backdrop-filter här: den gör sidhuvudet till inneslutande block för
position: fixed, och då hamnade menyarket ovanför skärmen i stället för
ovanför flikraden. */
.site-header { background: var(--canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header__content { min-height: 3.75rem; gap: .5rem; }
.appmarke img, .appmarke-initialer { height: 32px; }
.appmarke-initialer { width: 32px; }
.notisklocka { margin-left: auto; }
.account-menu { display: none; }
.site-header .site-nav { position: fixed; z-index: 40; left: .5rem; right: .5rem; bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 10.8rem - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px)); overflow-y: auto; padding: .6rem; display: grid; gap: .4rem; background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-flyt); visibility: hidden; opacity: 0; transform: translateY(.75rem); pointer-events: none; transition: opacity var(--tid-normal) var(--kurva-panel), transform var(--tid-normal) var(--kurva-panel), visibility 0s linear var(--tid-normal); }
.site-header.is-open .site-nav { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
.site-nav__links { order: 0; margin: 0; padding: 0; flex-direction: column; align-items: stretch; background: none; }
.site-nav__links > a { min-height: 48px; padding: 0 .9rem; color: var(--ink); font-size: 1.02rem; border-radius: var(--radie-kort); }
.site-nav__links > a.is-active { background: var(--profil-svag); box-shadow: none; }
.meny-ikon { display: inline-block; flex: 0 0 auto; color: var(--muted); }
.mobil-konto { display: grid; gap: .1rem; padding-top: .4rem; border-top: 1px solid var(--line); }
.mobil-konto .account-identity { align-items: center; }
.mobil-konto .account-item { min-height: 48px; color: var(--ink); font-size: 1rem; }
.flikrad { position: fixed; z-index: 30; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); padding: 6px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 28px; box-shadow: var(--skugga-flyt); }
.flikrad a, .flikrad button { min-height: 54px; padding: 4px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: .75rem; font-weight: 500; text-decoration: none; background: none; border: 0; border-radius: 22px; }
.flikrad button:hover, .flikrad a:hover { color: var(--ink); background: none; background-image: none; }
.flikikon { width: 52px; height: 30px; display: grid; place-items: center; border-radius: 999px; transition: background var(--tid-normal) var(--kurva-standard); }
.flikrad [aria-current="page"], .flikrad [aria-expanded="true"] { color: var(--ink); font-weight: 600; }
.flikrad [aria-current="page"] .flikikon, .flikrad [aria-expanded="true"] .flikikon { color: var(--profil-text); background: var(--profil-svag); }
body:has(> .flikrad) { padding-bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px)); }
/* Mobil: ingen sidfot under flikraden; innehållet finns i Mer-panelen. */
.site-footer { display: none; }
.fotbyline { margin-left: 0; }
.page-header, .compact-header { margin-bottom: 1.1rem; align-items: flex-start; flex-direction: column; }
/* Månadsraden och infoikonen på samma rad, centrerade; knapparna under. */
.matchhuvud { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .4rem; }
.matchhuvud .header-actions { margin-left: 0; }
.compact-header .header-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
/* Fyra knappar i 2×2 i stället för tre plus en ensam på rad två. */
.compact-header .header-actions .button { width: 100%; }
.compact-header .header-actions .season-picker { grid-column: 1 / -1; }
.compact-header .header-actions .season-picker select { width: 100%; }
.sidmeta { margin-bottom: .25rem; }
h1 { font-size: 1.8rem; }
.form-grid, .form-row, .compact-form { grid-template-columns: 1fr; }
.form-grid > *, .form-row > *, .compact-form > * { grid-column: 1 !important; }
/* Telefon: knapparna har 40 px träffyta och tar mer plats, och namnet måste
ändå få rimlig bredd. */
.member-list { --medlem-kontakt-bredd: 5.6rem; --medlem-knapp-bredd: 2.75rem; }
.member-row { gap: .3rem; }
/* Medlemslistan på telefon: namn och metarad på hela bredden överst,
brickor, kontakt och knappar på en andra rad — i stället för en spalt på
70–100 px där namnet kapas och metaraden bryts sju gånger. */
.compact-member-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; }
.compact-member-row .member-identity { grid-column: 1 / -1; grid-row: 1; }
.member-identity { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem; }
.compact-member-row .member-flags { grid-column: 1; grid-row: 2; max-width: none; justify-content: flex-start; }
.compact-member-row .contact-status { grid-column: 2; grid-row: 2; }
.compact-member-row .member-actions { grid-column: 3; grid-row: 2; }
.member-identity { align-items: flex-start; flex-direction: column; gap: 0; }
/* I kolumnläge krymper flexbarnen till innehållet; utan tak klipps de aldrig. */
.member-identity strong, .member-meta { max-width: 100%; }
/* Metaraden får radbrytas så tiden 'i appen' går att läsa; på hela bredden
blir det högst två rader. */
.member-meta { white-space: normal; }
.member-actions { justify-content: flex-end; }
/* Sökfältet får egen rad: med två räknare och Kopiera e-post på samma rad
klipptes platshållaren och knappen bröts i två rader vid 390 px. */
.registry-toolbar { padding-inline: 0; flex-wrap: wrap; }
.registry-toolbar input { flex: 1 0 calc(100% - 3.4rem); }
.contact-icon { width: 1.4rem; height: 1.4rem; font-size: .8rem; }
.member-flags { max-width: 5.5rem; flex-wrap: wrap; justify-content: flex-end; }
.account-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: .1rem .4rem; }
.account-row .member-identity { grid-column: 1; grid-row: 1; }
.account-row .account-email { grid-column: 1; grid-row: 2; }
.account-row .member-meta { display: none; }
/* Licensen döljs på telefon, men vem som är förälder ska synas där också: hela bredden, under raden. */
.account-row > .account-relation { grid-column: 1 / -1; grid-row: 3; }
.account-row > .status-badge { grid-column: 2; grid-row: 1 / 3; }
.account-row .member-actions { grid-column: 3; grid-row: 1 / 3; }
.form-card .compact-upload-form { align-items: stretch; flex-direction: column; }
.import-summary { grid-template-columns: repeat(2, 1fr); }
.import-summary span:nth-child(2) { border-right: 0; }
.import-summary span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.activation-link-row { grid-template-columns: 1fr; }
.checkbox-list { grid-template-columns: 1fr; }
.inline-account-panel { align-items: stretch; flex-direction: column; }
.inline-account-panel > .button { width: 100%; }
.payment-preview-heading, .payment-preview-footer { align-items: flex-start; flex-direction: column; }
.payment-summary-grid { grid-template-columns: repeat(2, 1fr); }
.payment-summary-item:nth-child(2) { border-right: 0; }
.payment-summary-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.account-booking-row { grid-template-columns: 2.7rem minmax(0, 1fr) auto; gap: .4rem; }
.account-booking-statuses { grid-column: 2 / 4; grid-row: 2; flex-wrap: wrap; }
.account-booking-row > span:last-child { grid-column: 3; grid-row: 1; }
.reminder-admin-stats { grid-template-columns: repeat(2, 1fr); }
.reminder-admin-stats > span:nth-child(2) { border-right: 0; }
.reminder-admin-stats > span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.reminder-delivery-row { grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: .2rem .45rem; }
.reminder-delivery-email { grid-column: 2 / 4; grid-row: 2; }
.reminder-delivery-row > .muted { grid-column: 2; grid-row: 3; }
.squad-panel { --stat-col: 4.05rem; --stat-gap: .35rem; }
.squad-head-labels, .squad-head-row, .squad-row { grid-template-columns: 24px minmax(6rem, 1fr) auto; gap: .5rem; padding-inline: .5rem; }
.hint-bubble { width: 14rem; }
}
@media (max-width: 30rem) {
/* Under ~480 px trängs tid, titel och knapp ihop och matchtiteln kapas.
Titeln får då en egen rad. Mätt vid 390 px. Svarspillren ställer sig till
höger om tiden, där raden ändå är tom — det sparar en rad per match och
drar ihop luften ovanför tiden (Sami 2026-09-16). */
/* Under ~480 px ryms inte namn och fem sifferkolumner på samma rad utan att
namnen bryts sönder. Siffrorna får en egen rad under namnet i stället. */
.squad-panel { --stat-col: 1fr; --stat-gap: .15rem; }
.squad-head-labels, .squad-head-row, .squad-row { grid-template-columns: 24px minmax(0, 1fr); gap: .3rem .5rem; padding-block: .45rem; }
/* Grupprubrikerna måste vara kvar: annars står "Snitt" två gånger utan att
det syns att den ena är BITS och den andra vår egen period. */
.squad-group-labels { grid-column: 2 / -1; grid-template-columns: 2fr 5fr; }
.squad-group { font-size: .8rem; letter-spacing: .03em; }
.squad-stats, .squad-sort-group { grid-column: 2 / -1; grid-template-columns: repeat(7, 1fr); }
.squad-stat--first, .squad-sort--first { padding-left: .15rem; }
.hint-bubble { width: 13rem; }
.squad-name { flex-wrap: wrap; }
.squad-stat, .squad-sort { font-size: .8rem; }
.squad-toolbar { align-items: stretch; flex-direction: column; }
.team-member-search { flex: 0 0 auto; max-width: none; }
}
/* På de smalaste telefonerna prioriteras periodens snitt och trend.
Samma kolumner döljs i rubriken och varje spelarrad. */
@media (max-width: 359px) {
.squad-group-labels { grid-template-columns: minmax(0, 1fr); }
.squad-group-labels > :first-child { display: none; }
.squad-stats, .squad-sort-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.squad-sort-group > :not(:nth-child(3)):not(:nth-child(7)),
.squad-stat:not([data-cell="snitt"]):not([data-cell="trend"]) { display: none; }
.squad-stat--first, .squad-sort--first { padding-left: 0; border-left: 0; }
.squad-hint .hint-bubble { right: auto; left: 0; max-width: 12rem; }
.squad-hint:last-child .hint-bubble { right: 0; left: auto; }
}
@media (max-width: 24rem) {
.account-trigger__name { display: none; }
.account-dropdown { min-width: 13rem; }
/* Passraden på den smalaste bredden: tiden överst, titeln med metaraden
under den, knappen i egen spalt bredvid båda.
Regeln pekade på .calendar-session-title, som INTE är ett rutnätsbarn —
titeln ligger i .match-main sedan passraden fick sin metarad, och en regel
som pekar på ett barnbarn gör ingenting i rutnätet. Följden var att
.match-main placerades automatiskt i spalt 2, samma ruta som knappen:
mätt vid 320 px blev "Redigera" 23 px bred (golvet är 24) och låg 15,5 px
ovanpå passets titel (VIK-P3-66). Matchlistan hade redan fått sin
motsvarande rättelse på .calendar-match .match-main; den här raden hade
bara aldrig följt med.
minmax(0, 1fr) i stället för 1fr: annars är spaltens minsta bredd sitt
eget innehåll, och trängseln går ut över knappens spalt i stället. */
}
/* Utskick: brevet visas som brev, i monospace och med radbrytningarna kvar. */
.broadcast-preview { margin: 0; padding: .9rem 1rem; max-height: 26rem; overflow: auto; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; background: var(--surface-muted); border: 1px solid var(--line); border-radius: var(--radie-kort); }
/* Inloggningen är ledarnas väg in. Medlemmarna ska inte stå och leta efter ett
lösenord de aldrig fått, så den andra vägen står skriven direkt under. */
.login-note { padding: 1rem 1.15rem; color: var(--ink); background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.login-note h2 { margin: 0 0 .35rem; font-size: .95rem; }
.login-note p { margin: 0 0 .4rem; font-size: .86rem; line-height: 1.5; }
.login-note p:last-child { margin-bottom: 0; }
/* Utskicksformuläret: ämne och text i full bredd, och bara den målväljare som
hör till valt mottagarläge. Fyra tomma väljare samtidigt tvingar ledaren att
gissa vilken som gäller. */
.compact-form > .broadcast-wide { grid-column: 1 / -1; }
/* Utskicket i två spalter på bredd: brevet till vänster, mottagarkretsen och
vårdnadshavarrutan till höger. Ett textfält tvärs över hela skrivbordet är
svårare att läsa än en spalt, och inställningarna ska synas samtidigt som
man skriver. En spalt på telefon (Sami 2026-09-16). */
.utskicksform { grid-template-columns: minmax(0, 1fr); }
.utskicksform > .utskick-skriv, .utskicksform > .utskick-sida, .utskicksform > .form-actions { grid-column: 1 / -1; }
.utskick-skriv, .utskick-sida { display: grid; align-content: start; gap: .9rem; }
@media (min-width: 62rem) {
.utskicksform { grid-template-columns: minmax(0, 1fr) 19rem; gap: .9rem 1.4rem; }
.utskicksform > .utskick-skriv { grid-column: 1; }
.utskicksform > .utskick-sida { grid-column: 2; padding-left: 1.4rem; border-left: 1px solid var(--line); }
.utskicksform > .form-actions { grid-column: 1 / -1; }
}
.compact-form > .broadcast-audience { align-self: start; }
.compact-form > .broadcast-target { align-self: start; }
.broadcast-wide textarea { min-height: 15rem; resize: vertical; }
.checkbox-field.broadcast-wide label { display: grid; gap: .15rem; }
/* Hjälpraden under kryssrutan ärvde 10,5 px av label-småstilen. 12 px är
golvet, och den här raden är den som förklarar vem som får brevet. */
.checkbox-field.broadcast-wide label small { font-size: .8rem; text-transform: none; letter-spacing: 0; }
/* Listan över dem som saknar e-post kan bli hela klubben. Antalet är det som
ska läsas; namnen fälls ut av den som ska åtgärda dem. */
.missing-email-card summary { cursor: pointer; }
.missing-email-list { margin: .5rem 0 0; padding-left: 1.1rem; columns: 3; column-gap: 1.4rem; font-size: .84rem; line-height: 1.6; }
@media (max-width: 900px) { .missing-email-list { columns: 2; } }
@media (max-width: 560px) { .missing-email-list { columns: 1; } }
/* Kontaktuppgift i medlemsregistret: ledaren ska kunna se och kopiera en
adress eller ett nummer utan att öppna redigeringspanelen, där ett tryck fel
kan spara något. */
button.contact-icon { padding: 0; width: 1.6rem; min-width: 1.6rem; height: 1.6rem; min-height: 1.6rem; line-height: 1; background: transparent; border-color: transparent; border-radius: var(--radie-kort); cursor: pointer; }
button.contact-icon:hover { background: var(--surface-muted); border-color: var(--line); }
.contact-popover { position: absolute; z-index: 40; display: grid; gap: .4rem; padding: .6rem .7rem; min-width: 12rem; max-width: min(22rem, calc(100vw - 1rem)); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radie-kort); box-shadow: var(--skugga-stor); }
.contact-popover__who { margin: 0; color: var(--muted); font-size: .8rem; }
.contact-popover__value { min-height: 24px; display: inline-flex; align-items: center; color: var(--ink); font-size: .9rem; font-weight: 600; word-break: break-all; }
/* Avgifter. Raden har ett eget rutnät i stället för leveranslistans: kassören
måste kunna läsa hela namnet och nå statusväljaren, och de kolumnerna får
inte klämmas av en mall byggd för något annat. */
.charge-row { min-height: 2.9rem; padding: .45rem .7rem; display: grid; grid-template-columns: minmax(10rem, 1fr) auto auto auto auto; align-items: center; gap: .7rem; border-bottom: 1px solid var(--line); }
.charge-row:last-child { border-bottom: 0; }
.charge-who { min-width: 0; display: grid; }
.charge-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.charge-who small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.charge-reference { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; white-space: nowrap; }
.charge-amount { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.charge-status-form { display: flex; align-items: center; gap: .35rem; }
.charge-status-form select { min-width: 7.5rem; }
/* En betald rad ska kunna hittas i en lång lista utan att läsas ord för ord. */
.charge-row.is-paid { background: var(--tint-god); }
.charge-row.is-pending .charge-amount { color: var(--kritisk-text); }
.compact-form > .charge-wide { grid-column: 1 / -1; }
@media (max-width: 720px) {
.charge-row { grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .6rem; }
.charge-reference { grid-column: 1; grid-row: 2; }
.charge-row .charge-amount { grid-column: 2; grid-row: 2; text-align: right; }
.charge-status-form { grid-column: 1 / -1; grid-row: 4; }
.charge-status-form select { flex: 1 1 auto; }
}
/* Medlemmens egen avgiftsrad. Beloppet ska stå före knappen — man vill veta
vad det kostar innan man trycker på betala. */
.my-charge-row { position: relative; padding: .6rem .7rem; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .5rem .7rem; border-bottom: 1px solid var(--line); }
.my-charge-row:last-child { border-bottom: 0; }
.my-charge-what { min-width: 0; display: grid; }
.my-charge-what small { color: var(--muted); font-size: .8rem; }
.my-charge-atgard { display: flex; align-items: center; gap: .4rem; }
.att-betala { position: relative; margin-bottom: 1rem; background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.att-betala-lank { padding: .7rem .75rem .7rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--ink); text-decoration: none; }
.att-betala-lank > span:first-child { min-width: 0; display: grid; }
.att-betala-bort { position: absolute; z-index: 1; top: -8px; left: -8px; width: 26px; height: 26px; min-height: 26px; padding: 0; display: grid; place-items: center; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--skugga-liten); cursor: pointer; }
.att-betala-bort:hover { color: var(--ink); }
.att-betala small { color: var(--muted); font-size: .8rem; }
.schedule-rule { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
/* Redigera och Avsluta på samma rad. ".schedule-history article div" gör
varje div i regelraden till ett rutnät — det är rätt för textblocket och
fel för knapparna, så knappraden pekas ut med samma tyngd. */
.schedule-history article .schedule-rule-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: .35rem; }
.schedule-rule-actions form { display: contents; }
/* Kryssrutelistor i formulär: en rad per val, hårlinje emellan. */
.form-field ul, .form-card ul[id^="id_"] { margin: 0; padding: 0; list-style: none; display: grid; }
.form-field ul li, .form-card ul[id^="id_"] li { display: flex; align-items: center; gap: .55rem; min-height: 2.4rem; font-size: .95rem; font-weight: 500; border-bottom: 1px solid var(--line); }
.form-field ul li:last-child, .form-card ul[id^="id_"] li:last-child { border-bottom: 0; }
.form-field ul li label, .form-card ul[id^="id_"] li label { display: flex; align-items: center; gap: .55rem; font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.form-field ul input[type="checkbox"], .form-card ul[id^="id_"] input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; margin: 0; accent-color: var(--kryssfyllning); }
/* Boka direkt i kalendern: knappen och statusen ska ligga i samma kolumn som
ledarens Redigera, så raden inte hoppar beroende på vem som tittar. */
.calendar-session-state { text-decoration: none; }
/* Svaren per match. Tre kolumner med hårlinjerader, inte punktlistor — samma
radform som tavlan, så ögat känner igen sig när det går dit. */
.svarsmatch { margin-bottom: 1.2rem; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); overflow: hidden; }
.svarsrad { min-height: 2.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 600; border-bottom: 1px solid var(--line); }
.svarsrad:last-child { border-bottom: 0; }
.svarsrad small { color: var(--muted); font-weight: 500; }
.svarsrad.ar-tyst { color: var(--muted); font-weight: 500; }
/* ── Kan du spela? ───────────────────────────────────────────────────────
Sidan ställer en fråga per match, och svaret är två fält som delar raden:
grönt för kan spela, rött för kan inte. Radioringen är borta — den sa inget
som fyllnaden inte säger tydligare, och den gjorde valet till en blankett
(Sami 2026-09-17: "ja nej knapparna ser förjäkliga ut").
Från 52rem ligger matchen till vänster och svaret till höger på samma rad.
Under 52rem ligger de under varandra. Vit på grön mäter 4,53:1 och vit på
röd 4,60:1 — båda över AA-golvet för brödtext. */
.svarssida { display: grid; gap: .9rem; }
.svarslista { display: grid; gap: .6rem; }
.svarsmatch { padding: .8rem .9rem; display: grid; gap: .6rem; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.svarsmatch.ar-obesvarad { border-color: var(--line-strong); }
.svarsmatch-lag { display: grid; gap: .15rem; min-width: 0; }
.svarsmatch-lag > strong { text-wrap: balance; }
.svarsmatch-vem { color: var(--ink); font-weight: 700; }
.svarsval { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.svarsfall { position: relative; min-height: 44px; padding: .5rem .8rem; display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: 1rem; font-weight: 700; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 999px; cursor: pointer; transition: background-color var(--tid-kvick) var(--kurva-standard), border-color var(--tid-kvick) var(--kurva-standard); }
/* Radion styr fortfarande allt — tangentbord, uppläsning, formulärdata — men
ritas inte. Fokusringen flyttas till fältet runt den. */
.svarsfall input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; pointer-events: none; }
/* Ikonen är Lucide, inte ett Unicode-tecken: ✓ och ✕ står namngivna i
ban-listan eftersom de renderas olika i olika typsnitt (Astra P2-43). */
.svarsikon { display: none; flex: none; }
/* Krysset i stäng- och ta bort-knappar: Lucide, inte tecknet ×. */
.ikonkryss { display: block; flex: none; }
.svarsfall:hover { background: var(--dampad); }
.svarsfall:has(input:focus-visible) { outline: var(--falt-fokus) solid var(--ink); outline-offset: 2px; }
.svarsfall:has(input:checked) .svarsikon { display: block; }
.svarsfall.ar-ja:has(input:checked) { color: var(--surface); background: var(--god-text); border-color: var(--god-text); }
.svarsfall.ar-nej:has(input:checked) { color: var(--surface); background: var(--kritisk-text); border-color: var(--kritisk-text); }
.svarsmatch-extra { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem .8rem; }
.svarskommentar { flex: 1 1 16rem; max-width: 30rem; display: grid; gap: .2rem; }
.svarskommentar > span { color: var(--muted); font-size: .84rem; font-weight: 600; }
.svarsmatch-bil { flex: 0 1 auto; align-items: center; }
.svarsmatch-bil small { color: var(--muted); font-size: .8rem; }
.svarsspara { display: flex; justify-content: flex-end; }
.svarsspara .button { width: 100%; }
@media (min-width: 52rem) {
.svarsmatch { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1.2rem; }
.svarsval { grid-column: 2; width: 21rem; }
.svarsmatch-extra { grid-column: 1 / -1; }
.svarsfall { min-height: 40px; }
.svarsspara .button { width: auto; }
}
/* Visningsläget måste synas hela tiden. Att glömma att man tittar som någon
annan är precis det fel banderollen finns för att förhindra. */
/* Ytan vänder med läget (--ink går från nästan svart till nästan vitt), så
på-färgen måste vända med den. Vit text låg kvar och mätte 1,14:1 i mörkt
läge — banderollen som ska synas hela tiden var helt oläslig, på varje sida
medan visningsläget är på (Astra P2-44 varv 6). Appens två andra
--ink-fyllningar och .skip-link gör redan rätt:
--surface är ytans egen på-färg. */
.view-as-bar { padding: .5rem 1rem; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .6rem; color: var(--surface); font-size: .88rem; background: var(--ink); }
.view-as-bar strong { color: var(--surface); }
.view-as-bar .button { color: var(--ink); background: var(--surface); border-color: var(--surface); }
.view-as-form { display: inline-flex; }
/* ── Telefon: träffytor ──────────────────────────────────────────────────
Mätt vid 390 px: navigeringen låg på 30 px och små knappar på 29 px. Det
räcker för en muspekare men inte för en tumme, och appen är gjord för att
ligga på hemskärmen. Golvet är 44 px för navigering och fristående knappar,
40 px för knappar i täta listor där varje rad annars växer orimligt.
Länkar inne i löpande text får vara som de är — de följer radhöjden, och att
blåsa upp dem skulle bryta sönder styckena. (WCAG 2.5.8 undantar just dem.) */
@media (max-width: 700px) {
.button, button { min-height: 44px; }
/* 40 px. Höjdes till 44 efter granskningen och backades igen: "44 är för
stort får inte plats med något. 24 är väl rimligare då" (Sami 2026-09-17).
Golvet är WCAG 2.2:s 24 px; 40 ligger en bra bit över. */
.button-small { min-height: 40px; padding: .5rem .75rem; font-size: .82rem; }
.icon-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
/* Radrubriker i listor är radens primära träffyta, inte en länk i löpande
text. De ska gå att träffa med tummen. 40 px där raden ändå är hög; 24 px
— WCAG 2.2:s golv — där rubriken sitter i en inuti en tät rad,
som i utskicks- och kallelselistorna (Sami 2026-09-17: "44 är för stort
får inte plats med något. 24 är väl rimligare då"). */
strong > a, h2 > a, .remsastyr > a { min-height: 24px; display: inline-flex; align-items: center; }
.calendar-session-title,
.calendar-session-state,
.section-heading + p > a { min-height: 40px; display: inline-flex; align-items: center; }
/* button.contact-icon sätter egen bredd med högre specificitet än .contact-icon. */
button.contact-icon { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
.squad-sort { min-height: 32px; padding: .3rem .35rem; }
.squad-period { min-height: 34px; }
/* Kryssrutor och radioknappar ritas av webbläsaren i 13 px som standard. */
/* flex: none — rutan krymptes till 20,6 px av sin flexförälder trots
width: 24px, och då föll den under WCAG 2.2:s golv. */
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; flex: none; }
.squad-row input[type="checkbox"], .checkbox-list input[type="checkbox"] { width: 24px; height: 24px; }
select, input[type="text"], input[type="email"], input[type="search"],
input[type="number"], input[type="tel"], input[type="password"],
input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"] {
min-height: 44px;
/* Under 16 px zoomar iOS in fältet när det får fokus och lämnar sidan
kvar i det läget. */
font-size: max(16px, 1rem);
}
textarea { font-size: max(16px, 1rem); }
}
/* Nyheter på startsidan. Mejlet försvinner i inkorgen; samma text ska gå att
hitta igen på lördag morgon utan att leta. */
.nyheter { margin-bottom: 1.4rem; }
.nyhetslista { display: grid; gap: .5rem; }
.nyhetstext { padding: 1.1rem 1.2rem; max-width: 44rem; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); line-height: 1.62; }
/* Förhandsgranskningen är hopfälld: man vill se den ibland, inte varje gång. */
/* Uttagningstavlan.
---------------------------------------------------------------------------
Tavlan öppnar TOM. Det som finns är inte lag utan anmälningar: en hög namn
per lag som sagt att de kan spela den här helgen. UK:s arbete är att flytta
dem uppåt i platserna, och listan under varje lag är därför inte en bilaga
utan halva verktyget.
Samma namn ligger i flera kolumner — den som kan spela kan spela för flera
lag. Placeras hen i ett lag dimmas hen i de andra listorna i stället för att
försvinna: att se att någon är upptagen är lika viktigt som att se vem som
är ledig.
Grafit har ingen kulör, så hierarkin bärs av typografi och luft: lagbokstaven
är stor, allt annat litet, och kolumnerna skiljs av hårlinjer.
------------------------------------------------------------------------- */
/* Tavlan ryms i samma ram som toppmenyn (Sami 2026-10-07): namnen kortas
hellre än att sidan blir bredare än resten av appen. */
.sida-uttagning .page-content { padding-block: 1.4rem 2rem; }
/* Rubriken i linje med kolumntexten: registrets .75 rem plus tavlans 1 px ram. */
.uttagning-huvud { margin-bottom: .35rem; padding-left: calc(.75rem + 1px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; }
.uttagning-huvud h1 { margin-bottom: .15rem; }
.uttagning-verktyg { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
/* Omgångsväljaren: en details som ser ut som ett fält och öppnar en lista i
husets typsnitt. */
.omgangsval { position: relative; }
.omgangsval > summary { min-height: 40px; padding: 0 .6rem 0 .8rem; display: inline-flex; align-items: center; gap: .55rem; list-style: none; color: var(--ink); font-size: 1rem; font-weight: 700; border: 1.5px solid var(--hairline); border-radius: 999px; cursor: pointer; }
.omgangsval > summary::-webkit-details-marker { display: none; }
.omgangsval > summary:hover { background: var(--dampad); }
.omgangsval-etikett { color: var(--muted); font-size: .8rem; font-weight: 600; }
/* small ärver 0.8em av föräldern och hamnade på 11,25 px i omgångsväljaren. */
.omgangsval small, .omgangsval a small { font-size: .8rem; }
.omgangsval > summary svg { flex: none; color: var(--muted); }
.omgangsval[open] > summary svg { transform: rotate(180deg); }
.omgangslista { position: absolute; z-index: 30; top: calc(100% + .4rem); left: 0; min-width: 16rem; padding: .35rem; display: grid; background: var(--surface); border: 0; border-radius: var(--radie-kort); box-shadow: var(--skugga-kort); box-shadow: var(--skugga-stor); }
.omgangslista a { min-height: 40px; padding: 0 .7rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--ink); font-size: .9rem; font-weight: 600; text-decoration: none; border-radius: var(--radie-liten); white-space: nowrap; }
.omgangslista a small { color: var(--muted); font-weight: 500; white-space: nowrap; }
.omgangslista a:hover { background: var(--dampad); }
.omgangslista a.ar-vald { background: var(--yta-2); font-weight: 700; }
.testmark { padding: .05rem .35rem; color: var(--varning-text); font-weight: 700; background: var(--amber-soft); border-radius: var(--radie-liten); }
/* En yta med hårlinjer emellan, inte fem lådor på grå botten. Registret ligger
utanför lagens rutnät: delade de rader skulle dess längd sträcka ut platserna. */
.uttagning-tavla { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); align-items: stretch; gap: 0 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radie-stor); overflow: hidden; }
.lagkolumner { min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11.5rem, 1fr); gap: 0 1px; background: var(--line); overflow-x: auto; }
.register, .lagkolumn { min-width: 0; padding: .9rem .75rem 1rem; background: var(--surface); }
.register { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: start; }
/* Kolumnerna radas upp av fasta mått, inte av subgrid. Subgriden lät en kolumn
med kort lista dra ihop raderna för alla andra, och rubriken hamnade ovanpå
sin egen lista. Ett rubrikmått och en fast platshöjd gör samma jobb utan att
kolumnerna kan påverka varandra. */
.lagkolumn > .kolumnhuvud { min-height: 7.6rem; }
.kolumnhuvud { margin-bottom: .7rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.kolumnhuvud h2 { margin-bottom: .4rem; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-size: 1rem; }
.lagbokstav { font-family: var(--font-etikett); font-size: 2.1rem; font-weight: 500; line-height: 1; letter-spacing: .01em; }
.kolumnmeta { margin-bottom: .2rem; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.kolumnmeta strong { color: var(--ink); font-weight: 700; }
.rakna { color: var(--muted); font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kolumnstatus { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.bilar { font-size: .8rem; font-weight: 700; white-space: nowrap; }
.bilar.ar-bra { color: var(--god-text); }
.bilar.ar-knappt { color: var(--varning-text); }
.bilar.ar-tunt { color: var(--kritisk-text); }
.bilar.ar-tomt { color: var(--muted); }
.platser { margin: 0; padding: 0; list-style: none; display: grid; align-content: start; }
.plats { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); align-items: center; gap: .3rem; height: 3rem; border-bottom: 1px solid var(--line); }
/* Man spelar i par, så platserna läses två och två. */
.plats.par-slut { margin-bottom: .45rem; }
.plats.reservplats { margin-top: .35rem; border-top: 1px solid var(--line); }
.plats.ar-ledig { box-shadow: inset 0 0 0 1px var(--hairline); border-radius: var(--radie-kort); }
.plats.ar-over { box-shadow: inset 0 0 0 2px var(--accent); border-radius: var(--radie-kort); }
.plats.ar-sparrad { background: var(--red-soft); border-radius: var(--radie-kort); }
.plats.ar-sparrad.ar-over { box-shadow: inset 0 0 0 2px var(--kritisk); }
.plats:focus-visible { outline: 3px solid var(--fokusring); outline-offset: 1px; border-radius: var(--radie-kort); }
.platsnummer { color: var(--muted); font-size: .8rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.platsinnehall { min-width: 0; height: 100%; display: grid; align-items: center; }
/* Etiketten över väljaren och väljaren i hela kolumnens bredd. Reserv-
markeringen står först i alternativet, så det som eventuellt klipps i en
smal kolumn är namnets slut, aldrig markeringen. */
.kaptenrad { margin: .55rem 0 0; padding-top: .45rem; display: grid; gap: .2rem; color: var(--muted); font-size: .8rem; font-weight: 600; border-top: 1px solid var(--line); }
.kaptenrad select { width: 100%; min-width: 0; min-height: 34px; padding: 4px 1.4rem 4px .2rem; color: var(--ink); font-size: .86rem; font-weight: 700; }
/* Banpar och reserv på plats (VIK-P1-130): en rad under kaptenen. Med
bocken läses platserna inte som par — numren och parens mellanrum tonas ned. */
.paplatsrad { margin-top: .35rem; min-height: 32px; display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .8rem; font-weight: 600; cursor: pointer; }
/* En växel i appens form, inte webbläsarens kryssruta (Sami 2026-10-13:
"konstiga checkmarks"). Hela raden är träffytan; växeln är 40×24. */
.paplatsrad input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 40px; height: 24px; min-height: 0; margin: 0; border-radius: 999px; background: var(--hairline); cursor: pointer; transition: background .2s; }
.paplatsrad input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: var(--skugga-liten); transition: transform .2s; }
.paplatsrad input:checked { background: var(--ink); }
.paplatsrad input:checked::after { transform: translateX(16px); }
.paplatsrad input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.paplatsrad:has(input:checked) { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .paplatsrad input, .paplatsrad input::after { transition: none; } }
.lagkolumn.ar-pa-plats .platsnummer { opacity: .35; }
.lagkolumn.ar-pa-plats .plats.par-slut { margin-bottom: 0; }
/* Om laget är skickat och Skicka, på en rad under kaptenen (VIK-P1-129). */
.skickrad { margin-top: .4rem; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.skickrad .button-small { flex: none; }
.form-field-hel { grid-column: 1 / -1; }
.kandidatdel { margin: .8rem -.75rem -1rem; padding: .55rem .75rem .9rem; background: var(--yta-2); border-top: 1px solid var(--line); }
.kandidatdel .spelare { background: var(--surface); }
.kandidathuvud { margin: 0 0 .35rem; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .8rem; font-weight: 700; }
.kandidatlista { display: grid; align-content: start; min-height: 4rem; max-height: 26rem; overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; }
/* Registret fyller kolumnens höjd och listan rullar inuti den: contain: size
gör att listans innehåll inte räknas när radens höjd bestäms, så det är
lagkolumnerna som sätter höjden — inte 51 namn i registret. */
.register .kandidatlista { max-height: none; contain: size; }
.tomtext { margin: 0; color: var(--muted); font-size: .84rem; }
.poolsok { width: 100%; min-height: 36px; margin-top: .5rem; padding: 0 .55rem; font-size: .92rem; }
/* Spelarkortet. Namnet på en rad, snittet till höger, märkena under — och
lagen som badge (A, F1) i stället för "Vårkulla IK A" tre gånger på samma
rad. Klubbnamnet är detsamma för alla och säger ingenting. */
.spelare { position: relative; width: 100%; padding: .4rem 1.5rem .4rem .55rem; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 0 .45rem; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--radie-kort); cursor: grab; touch-action: pan-y; user-select: none; }
/* Hovring utan ruta och ram: en svag ton räcker (Sami 2026-10-06: "de här
runda overringarna passar inte alls"). */
.spelare:hover { background: var(--dampad); border-color: transparent; border-radius: 6px; }
/* Kortet är tabindex="0" role="button" och den PRIMÄRA kontrollen på
uttagningstavlan — man plockar laget med det. Det hade ingen
fokusmarkering alls, så den som väljer lag med tangentbord inte kunde se
vilket kort hen stod på (Astra P2-44 varv 9, funnet av svepet efter att
kryssrutorna och filväljaren rättats). */
/* Inåtvänd, inte utåt: kandidatraderna ligger i .kandidatlista, som bara SÄGER
overflow-y: auto — men när en axel inte är visible blir den andra auto, så
listan klipper i sidled också, och den omsluter raderna exakt. Pixelmätt mot
driftdata vid 390 px: 1 038 ändrade pixlar i en ruta 346×3, alltså ETT
vågrätt streck under raden, omöjligt att skilja från listans egen
radavdelare. Vid 1440 blir det ett L (717 px, två kanter) och passerade
därför varje varv fram till det som mätte fokus vid 390 (Astra P2-44 varv 17).
Rättelsen står HÄR och inte i uppräkningen på rad 407: den här regeln har
samma vikt och ligger senare i filen, så en inåtring där uppe hade förlorat
kaskaden och blivit död CSS som ser ut som en rättelse. Tredje gången det
mönstret dyker upp i projektet (filväljaren, .mobil-konto, den här). */
.spelare:focus-visible { outline: 3px solid var(--fokusring); outline-offset: -3px; }
.spelare.ar-vald { color: var(--pa-accent); background: var(--accent); border-color: var(--accent); }
.spelare.ar-vald .spelare-snitt, .spelare.ar-vald .mark, .spelare.ar-vald .spelare-bort { color: var(--pa-accent); }
.spelare.ar-vald .mark { border-color: rgb(255 255 255 / 45%); }
.spelare.ar-dras { opacity: .3; }
/* Dragskuggan är kortet, inte en uppblåst kopia: samma bredd som en plats. */
.spelare.ar-skugga { position: fixed; z-index: 60; top: 0; left: 0; width: 14rem !important; max-width: 70vw; height: auto; padding-right: .55rem; pointer-events: none; background: var(--surface); border-color: var(--accent); box-shadow: var(--skugga-flyt); cursor: grabbing; }
.spelare.ar-skugga .spelare-bort { display: none; }
/* En rad per kort: namn, brickor till höger om namnet, snittet sist och tyst. */
.spelare-namn { min-width: 0; max-width: 100%; font-size: .88rem; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* K-märket är ett eget element efter namnet: namnet får klippas, aldrig K. */
.spelare-k { display: none; order: 2; padding: 0 .3rem; color: var(--pa-accent); font-size: .8rem; font-weight: 700; line-height: 1.35; background: var(--accent); border-radius: var(--radie-liten); }
.spelare.ar-kapten .spelare-k { display: inline-block; }
.spelare-snitt { order: 4; color: var(--muted); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.spelare-marken { order: 3; display: flex; flex-wrap: nowrap; align-items: center; gap: .2rem; font-size: .8rem; font-weight: 700; line-height: 1.3; }
.spelare-marken:empty { display: none; }
.mark { padding: 0 .3rem; white-space: nowrap; border: 1px solid var(--line-strong); border-radius: var(--radie-liten); }
.mark-bil { padding: 0 .2rem; display: inline-flex; align-items: center; color: var(--god-text); border-color: var(--god-kant); }
/* Lagbrickor på kortet: röd = kan inte, grå = har inte svarat. Oswald som lagbokstäverna. */
.mark-lagnej, .mark-lagtyst { min-width: 1.35rem; padding: 0 .25rem; font-family: var(--font-etikett); font-size: .8rem; font-weight: 500; letter-spacing: .04em; text-align: center; }
.mark-lagnej { color: var(--kritisk-text); border-color: var(--kritisk-kant); }
.mark-lagtyst { color: var(--muted); border-color: var(--hairline); }
/* Står också i ett annat lag som inte krockar: syns, döljs inte. */
.mark-lagdubbel { color: var(--ink); background: var(--yta-2); border-color: var(--hairline); }
/* Dubblare i lagets huvud: vem som dubblar ner. Bryts regeln (sparat innan
den fanns) säger texten det, och chipen blir röd på vit yta — 4,6:1. */
.dubblare { margin-left: .5rem; padding: .1rem .45rem; font-size: .8rem; font-weight: 700; color: var(--muted); background: var(--yta-2); border-radius: 999px; vertical-align: middle; }
.dubblare.ar-tunt { color: var(--kritisk-text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--kritisk); }
/* Tom chip = ingen dubblare: tar ingen plats men finns kvar i trädet (role=status). */
.dubblare:empty { margin: 0; padding: 0; }
.kandidatlista .spelare { border-bottom: 1px solid var(--line); border-radius: 0; }
.kandidatlista .spelare:hover { border-color: transparent; border-bottom-color: var(--line); background: var(--dampad); }
.kandidatlista .spelare:last-child { border-bottom-color: transparent; }
/* Krysset syns när kortet ligger på en plats — det är där det finns något att
ångra. Höjden är vad ögat ser, hitboxen vad fingret träffar (REGLER §11). */
/* Krysset är själv 44 px (touchmålet ligger i elementets egen box, inte i
en ::after-gloria); glyfen centreras i den. Syns bara på en plats. */
.spelare-bort { position: absolute; top: 50%; right: 0; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; display: none; place-items: center; color: var(--muted); font-size: 1rem; line-height: 1; background: transparent; border: 0; border-radius: 999px; box-shadow: none; cursor: pointer; transform: translateY(-50%); }
.plats .spelare-bort { display: grid; }
/* Hovern ritas på en 1.4rem rundad yta runt glyfen (samma mått och radie som
knappen hade före 44-pixelsytan), inte över hela knappen. Pseudoytan ligger
INNANFÖR knappens box och utökar ingen träffyta. */
.spelare-bort { isolation: isolate; }
.spelare-bort::before { content: ""; position: absolute; top: 50%; left: 50%; width: 1.4rem; height: 1.4rem; transform: translate(-50%, -50%); border-radius: var(--radie-liten); z-index: -1; }
.spelare-bort:hover { color: var(--kritisk-text); transform: translateY(-50%); }
.spelare-bort:hover, .spelare-bort:active { background: transparent; box-shadow: none; }
.spelare-bort:hover::before { background: transparent; }
.plats .spelare { padding-right: 3.2rem; }
/* Upptagen: kvar i listan men nedtonad. Att se vem som är tagen är lika
viktigt som att se vem som är ledig. */
/* .62, inte .34: kortet går att markera och är alltså ingen inaktiv
komponent — namnet mätte 2,17:1 (Astra P3-38). Det ska synas att spelaren
redan är placerad, inte vara oläsligt. */
/* Kortet dämpas, texten inte: opacity träffar även .spelare-snitt som redan
bär --muted, och landade på 2,75:1 (Astra P3-38 varv 2). Kortet går att
markera — role=button, tabindex=0 — så inget undantag gäller. */
.kandidatlista .spelare.ar-upptagen { opacity: 1; background: var(--dampad); }
.kandidatlista .spelare.ar-upptagen .spelare-namn { color: var(--muted); }
.kandidatlista .spelare.ar-upptagen .spelare-snitt { color: var(--muted); }
.kandidatlista .spelare.ar-nej, .spelare.ar-tyst { color: var(--muted); }
.spelare.ar-nej .spelare-namn, .spelare.ar-tyst .spelare-namn, .spelare.ar-nej .spelare-snitt, .spelare.ar-tyst .spelare-snitt { color: var(--muted); }
/* Markeringen vinner över dämpningen — annars muted på accent (2,8:1). */
.spelare.ar-vald .spelare-namn, .spelare.ar-vald .spelare-snitt { color: inherit; }
/* Markeringen vinner över både listhovern (0,3,0) och dämpningen (opacity):
ett kort som just markerats står med pekaren på sig, och ett upptaget kort
kan markeras för att flyttas. */
.kandidatlista .spelare.ar-vald, .kandidatlista .spelare.ar-vald:hover { color: var(--pa-accent); background: var(--accent); border-color: var(--accent); opacity: 1; }
/* På en plats är höjden given, så raden måste rymmas i den. */
.plats .spelare { height: 100%; padding-block: .2rem; align-content: center; overflow: hidden; }
.plats .spelare .mark-lagnej, .plats .spelare .mark-lagtyst { display: none; }
/* Dubblering går nedåt: en A-spelare hjälper till i F1, inte tvärtom. Regeln
har undantag som en lagledare måste kunna göra, så den varnar och spärrar inte. */
.spelare.ar-varning { box-shadow: inset 2px 0 0 var(--varning); }
@media (max-width: 68rem) {
.uttagning-huvud { align-items: flex-start; flex-direction: column; }
.uttagning-verktyg { width: 100%; }
.omgangsval { flex: 1 1 12rem; }
.omgangsval select { flex: 1 1 auto; min-width: 0; }
.uttagning-verktyg .button { flex: 1 1 auto; }
.uttagning-tavla { grid-template-columns: minmax(0, 1fr); gap: 1px 0; }
.lagkolumner { grid-auto-columns: minmax(13rem, 17rem); }
.register .kandidatlista { max-height: 17rem; contain: none; }
/* På telefon är raderna träffytor, inte bara rader: 44 px (REGLER §11). */
.plats { height: 3.2rem; }
.spelare { min-height: 2.95rem; }
}
@media (max-width: 48rem) {
/* Telefon: en lagkolumn i taget som snäpper, kortet utan snitt för plats. */
.lagkolumner { grid-auto-columns: 82vw; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lagkolumn { scroll-snap-align: start; }
.spelare-snitt { display: none; }
.spelare { grid-template-columns: minmax(0, 1fr) auto auto; }
}
/* Uttagningen sparar sig själv (VIK-P1-114): statusen i huvudet. */
.sparstatus { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 36px; min-height: 40px; padding: 0 .4rem; color: var(--muted); font-size: .85rem; font-weight: 600; white-space: nowrap; background: transparent; border-radius: 999px; }
.sparstatus:hover { color: var(--ink); background: transparent; }
/* Den som sparade senast: initialer i en boll, namnet i title och i toasten. */
.sparstatus-vem { width: 1.5rem; height: 1.5rem; display: inline-grid; place-items: center; color: var(--ink); font-size: .62rem; font-weight: 700; letter-spacing: .02em; background: var(--yta-ton); border-radius: 999px; }
.sparstatus-vem[hidden] { display: none; }
.sparstatus-ikon { color: var(--god-text); transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.sparstatus[data-lage="andrat"] .sparstatus-ikon, .sparstatus[data-lage="sparar"] .sparstatus-ikon { opacity: .35; }
.sparstatus[data-lage="sparat"] .sparstatus-ikon { animation: sparat-bock var(--tid-lugn) var(--kurva-expo); }
.sparstatus[data-lage="fel"] { color: var(--kritisk-text); }
.sparstatus[data-lage="fel"] .sparstatus-ikon { display: none; }
/* Bocken kommer upp och ritas; den växer inte och studsar inte (VIK-P2-133). */
@keyframes sparat-bock { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Ett lag i fokus (från matchsidan): de andra lagen finns kvar för reglerna men syns inte. */
.uttagning-tavla.ar-fokus .lagkolumn.ar-utanfor { display: none; }
.uttagning-tavla.ar-fokus .lagkolumner { grid-auto-columns: minmax(0, 1fr); }
.tillbakalank { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; color: var(--muted); font-size: .9rem; font-weight: 600; text-decoration: none; }
.tillbakalank:hover { color: var(--ink); }
.tillbakalank svg { width: 16px; height: 16px; }
/* Matchsidans verktygsrad och modaler (VIK-P1-114). */
.matchverktyg { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; }
.matchverktyg .button svg { flex: none; }
.svarsknapp { gap: .75rem; font-variant-numeric: tabular-nums; }
.svarsknapp span { display: inline-flex; align-items: center; gap: .25rem; color: var(--muted); }
.svarsknapp .ar-ja { color: var(--god-text); }
.svarsknapp .ar-nej { color: var(--kritisk-text); }
.matchdialog { width: min(94vw, 40rem); }
/* Dialogen glider upp med samma rörelse som designsystemets byte.css: 16 px,
expo-kurvan, utan uppskalning; stängningen samma väg ned (VIK-P2-133). */
.matchdialog[open] { animation: dialog-in var(--tid-lugn) var(--kurva-expo); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.matchdialog-kropp { display: grid; gap: .8rem; padding: 1rem; }
.matchdialog-fot { justify-content: flex-end; margin: 0; }
.nyhetsdialog { width: min(94vw, 48rem); }
.nyhetsdialog textarea { min-height: 18rem; }
.nyhetsdialog .textverktyg { margin-bottom: .35rem; }
.compact-header > .button svg { flex: none; }
.compact-header.notis-huvud { align-items: center; }
@media (max-width: 48rem) {
.compact-header.nyhet-huvud { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; }
/* Notiser: kugghjulet står kvar bredvid rubriken, inte på en egen rad. */
.compact-header.notis-huvud { flex-direction: row; flex-wrap: nowrap; align-items: center; }
.nyhet-redigera { width: 40px; padding: 0; justify-content: center; flex: none; }
.nyhet-redigera span { display: none; }
}
.matchdialog .uttag-rader { max-height: 55vh; overflow-y: auto; }
.uttag-rad.svarsrad { grid-template-columns: minmax(0, 1fr) auto; }
.kallalista .uttag-rad { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
@media (max-width: 48rem) {
.matchdialog { width: 100%; max-width: none; max-height: 88vh; margin: auto 0 0; border-radius: 28px 28px 0 0; border-bottom: 0; }
.matchdialog[open] { animation: blad-upp var(--tid-lugn) var(--kurva-expo); }
.matchverktyg .button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .matchdialog[open] { animation: none; } }
/* Kvitton och bil som ikoner (Sami 2026-10-06: "använd ikoner"). Texten
ligger kvar för skärmläsare och som verktygstips; ikonen är en mask som tar
färgen ur currentColor och följer läget. */
.laget-kort .uttag-kvitto { position: relative; width: 24px; height: 24px; padding: 0; display: inline-block; vertical-align: middle; overflow: hidden; border: 0; background: transparent; font-size: .75rem; line-height: 24px; text-indent: 100%; white-space: nowrap; color: var(--muted); }
.laget-kort .uttag-kvitto::before { content: ""; position: absolute; inset: 4.5px; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.laget-kort .uttag-kvitto.ar-skickad::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E"); }
.laget-kort .uttag-kvitto.ar-sett { color: var(--god-text); }
.laget-kort .uttag-kvitto.ar-sett::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 7 17l-5-5'/%3E%3Cpath d='m22 10-7.5 7.5L13 16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 7 17l-5-5'/%3E%3Cpath d='m22 10-7.5 7.5L13 16'/%3E%3C/svg%3E"); }
.laget-kort .uttag-kvitto:has(.kvitto-f) { width: 44px; }
.laget-kort .uttag-kvitto:has(.kvitto-f)::before { inset: 4.5px auto auto 2px; }
.laget-kort .uttag-kvitto .kvitto-f { position: absolute; right: 0; top: 50%; transform: translateY(-50%); text-indent: 0; padding: 1px .3rem; font-size: .75rem; line-height: 1.2; }
.bilval { width: 30px; padding: 0; font-size: 0; display: inline-grid; place-items: center; }
.bilval::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16h14M6.5 16l1.4-5.2A2 2 0 0 1 9.8 9.3h4.4a2 2 0 0 1 1.9 1.5L17.5 16'/%3E%3Ccircle cx='7.5' cy='17.5' r='1.5'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16h14M6.5 16l1.4-5.2A2 2 0 0 1 9.8 9.3h4.4a2 2 0 0 1 1.9 1.5L17.5 16'/%3E%3Ccircle cx='7.5' cy='17.5' r='1.5'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.matchdialog .uttag-rad.svarsrad { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.matchdialog .svarsrad .uttag-namn { min-width: 0; }
.matchdialog .svarsrad .uttag-svar { display: flex; flex-direction: row-reverse; align-items: center; gap: .35rem; flex: none; }
.uttagning-tavla.ar-fokus { grid-template-columns: 15.5rem minmax(0, 44rem); width: fit-content; max-width: 100%; }
/* Ny kallelse på tavlan: lagen som chips på en rad. */
.lagval-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; border: 0; }
.lagval-chips legend { margin-bottom: .35rem; padding: 0; font-size: .85rem; font-weight: 700; }
.lagval-chip { position: relative; cursor: pointer; }
.lagval-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lagval-chip span { min-width: 3rem; min-height: 40px; padding: 0 .9rem; display: inline-grid; place-items: center; border-radius: var(--radie-piller, 999px); background: var(--surface-muted); font-weight: 700; transition: background .2s, color .2s; }
.lagval-chip input:checked + span { background: var(--ink); color: var(--surface); }
/* Dialogen för Ny kallelse: lagen och Grupper på en rad (VIK-P1-129). */
.lagval-lag { display: contents; }
.lagval-mer { min-height: 40px; padding: 0 .9rem; display: inline-flex; align-items: center; gap: .35rem; border: 1.5px dashed var(--hairline); border-radius: var(--radie-piller, 999px); background: transparent; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.lagval-mer:hover { color: var(--ink); border-color: var(--ink); }
.lagval-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.knapp-ikon svg { flex: none; }
@media (max-width: 48rem) { .sida-uttagning .knapp-ikon span { display: none; } .sida-uttagning .knapp-ikon { width: 40px; padding: 0; justify-content: center; } }
/* Omgångsbrevet: ikonen bara på de smalaste telefonerna, där texten annars
tränger ut omgångsväljaren (320 px, VIK-P1-129). */
.brevknapp { display: inline-flex; align-items: center; gap: .4rem; }
.brevknapp svg { display: none; }
@media (max-width: 22.5rem) { .sida-uttagning .brevknapp span { display: none; } .sida-uttagning .brevknapp svg { display: block; } .sida-uttagning .brevknapp { width: 40px; padding: 0; justify-content: center; } }
/* Tavlan smalare (Sami 2026-10-06): lagens egna listor är dolda — listan till
vänster filtreras per lag i stället — och kolumnerna har en maxbredd. */
.registerfilter { margin: .5rem 0 0; }
.registerfilter button { min-width: 0; min-height: 30px; font-size: .8rem; padding: 0 .2rem; }
/* Fem knappar på 14 rem: lagbokstaven i grönt räcker, bocken kläms bort ändå. */
.registerfilter button.ja svg { display: none; }
/* Desktop (Sami 2026-10-06): fyra lag ryms på en vanlig skärm — kolumnerna
krymper till 12rem innan tavlan skrollar i sidled, och sex lag skrollar
inom tavlan i stället för att spräcka sidan. Ett ensamt lag blir en smal
kolumn bredvid listan, inte en utdragen yta. Huvudet är en rad med små knappar. */
@media (min-width: 48.01rem) {
.sida-uttagning .uttagning-tavla { grid-template-columns: 14rem minmax(0, 1fr); }
.sida-uttagning .lagkolumner { grid-auto-columns: minmax(12rem, 1fr); }
.sida-uttagning .uttagning-tavla:has(.lagkolumn:only-child),
.sida-uttagning .uttagning-tavla.ar-fokus { grid-template-columns: 14rem minmax(0, auto); width: fit-content; max-width: 100%; }
.sida-uttagning .uttagning-tavla:has(.lagkolumn:only-child) .lagkolumner,
.sida-uttagning .uttagning-tavla.ar-fokus .lagkolumner { grid-auto-columns: minmax(16rem, 22rem); }
/* Hela klubben är en panel som öppnas med knappen i verktygsraden (Sami
2026-10-06: fem lag fick inte plats). Stängd får lagen hela bredden och
varje lag visar sina tillgängliga under platserna, som förut. */
.sida-uttagning .uttagning-tavla:not(.visa-klubben) { grid-template-columns: minmax(0, 1fr); }
.sida-uttagning .uttagning-tavla:not(.visa-klubben):has(.lagkolumn:only-child),
.sida-uttagning .uttagning-tavla.ar-fokus:not(.visa-klubben) { grid-template-columns: minmax(0, auto); }
.sida-uttagning .uttagning-tavla:not(.visa-klubben) .register { display: none; }
.sida-uttagning .uttagning-tavla.visa-klubben .register { animation: panel-in .25s var(--kurva-panel); }
.sida-uttagning .kandidatdel { max-height: 22rem; overflow-y: auto; }
.sida-uttagning .uttagning-huvud { flex-wrap: nowrap; align-items: flex-end; margin-bottom: .8rem; padding-left: 0; }
.sida-uttagning .uttagning-huvud > div:first-child { flex: 1 1 auto; min-width: 0; }
.sida-uttagning .uttagning-huvud h1 { font-size: 2.2rem; }
.sida-uttagning .sidmeta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sida-uttagning .uttagning-verktyg { flex: none; flex-wrap: nowrap; gap: .4rem; }
.sida-uttagning .uttagning-verktyg .button { min-height: 34px; height: 34px; padding: 0 .85rem; font-size: .85rem; white-space: nowrap; }
.sida-uttagning .sparstatus { min-height: 34px; height: 34px; }
.sida-uttagning .omgangsval > summary { min-height: 34px; height: 34px; font-size: .88rem; }
.sida-uttagning .lagkolumn > .kolumnhuvud { min-height: 0; }
}
.kolumnrad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes panel-in { from { opacity: 0; transform: translateX(-12px); } }
.klubbknapp[aria-pressed="true"] { background: var(--ink); color: var(--canvas); }
@media (max-width: 48rem) { .klubbknapp { display: none; } }
.laget-andra { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: .2rem; vertical-align: middle; border-radius: 50%; color: var(--muted); transition: color .2s, background .2s; }
.laget-andra:hover { color: var(--ink); background: var(--dampad); }
.matchdialog.ar-stanger { animation: dialog-ut var(--tid-normal) cubic-bezier(.78, 0, .81, 0) forwards; }
@keyframes dialog-ut { to { opacity: 0; transform: translateY(16px); } }
@media (max-width: 48rem) { .matchdialog.ar-stanger { animation: blad-ner .22s cubic-bezier(.4,0,1,1) forwards; } }
/* Knapp som skickar: låst med en snurra tills sidan svarat. */
.ar-skickar { position: relative; color: transparent !important; pointer-events: none; }
.ar-skickar > * { visibility: hidden; }
.ar-skickar::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2.5px solid var(--ink); border-right-color: transparent; animation: snurra .7s linear infinite; }
.button-primary.ar-skickar::after { border-color: var(--pa-profil); border-right-color: transparent; }
@keyframes snurra { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ar-skickar::after { animation-duration: 2s; } }
/* Svarsfilter som en rad med ikoner: bryts aldrig (Sami 2026-10-06). */
.svarsseg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: 14px; background: var(--surface-muted); }
.svarsseg button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: 0 .5rem; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: none; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.svarsseg button:hover { background: transparent; color: var(--ink); }
.svarsseg button.ja, .svarsseg button.ja[aria-pressed="true"] { color: var(--god-text); }
.svarsseg button.nej, .svarsseg button.nej[aria-pressed="true"] { color: var(--kritisk-text); }
.svarsseg button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--skugga-kort); }
/* Telefonens lagflikar ovanför tavlan, med glidande markör. */
.lagflikar { display: none; }
@media (max-width: 48rem) {
.lagflikar { position: relative; display: grid; grid-template-columns: repeat(var(--antal, 4), minmax(0, 1fr)); margin: .4rem 0 .7rem; padding: 4px; border-radius: 16px; background: var(--surface-muted); }
.lagflikar-markor { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--antal, 4)); border-radius: 12px; background: var(--surface); box-shadow: var(--skugga-kort); transform: translateX(calc(var(--aktiv, 0) * 100%)); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.lagflik { position: relative; z-index: 1; min-height: 48px; display: grid; place-items: center; align-content: center; gap: 1px; padding: 4px 0; border: 0; border-radius: 12px; background: transparent; color: var(--ink); box-shadow: none; cursor: pointer; }
.lagflik:hover { background: transparent; }
.lagflik b { font-size: .95rem; line-height: 1; }
.lagflik-antal { color: var(--muted); font-size: .75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.lagflik.ar-full .lagflik-antal { color: var(--god-text); font-weight: 700; }
.lagflik-stapel { width: 22px; height: 3px; border-radius: 9px; background: var(--line-strong); overflow: hidden; }
.lagflik-stapel i { display: block; height: 100%; background: var(--god); transition: width .4s cubic-bezier(.2,.8,.2,1); }
/* Huvudet på en skärm: rubrik, en stödrad och en verktygsrad. */
.sida-uttagning .uttagning-huvud { gap: .5rem; margin-bottom: 0; }
.sida-uttagning .uttagning-huvud h1 { font-size: 1.7rem; }
.sida-uttagning .uttagning-huvud > div:first-child { min-width: 0; width: 100%; }
.sida-uttagning .sidmeta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sida-uttagning .uttagning-verktyg { display: flex; flex-wrap: nowrap; align-items: center; gap: .45rem; }
.sida-uttagning .omgangsval { flex: 1 1 auto; min-width: 0; }
.sida-uttagning .omgangsval-etikett { display: none; }
.sida-uttagning .omgangsval > summary { display: flex; width: 100%; min-width: 0; }
.sida-uttagning .omgangsval-vald { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sida-uttagning .uttagning-verktyg .button { flex: none; min-height: 40px; height: 40px; padding: 0 .9rem; font-size: .88rem; }
.sida-uttagning .sparstatus { padding: 0 .1rem; }
.sida-uttagning .sparstatus-vem { display: none; }
.sida-uttagning [data-sparstatus-text] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sida-uttagning .sparstatus[data-lage="fel"] [data-sparstatus-text] { position: static; width: auto; height: auto; clip: auto; }
.lagkolumn > .kolumnhuvud h2 .lagbokstav { display: none; }
.lagkolumn > .kolumnhuvud h2:not(:has(.kolumnstatus, .dubblare:not(:empty))) { display: none; }
.lagkolumn .kolumnmeta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; }
/* Lagen först: hela klubben och listorna under lagen bor i bladet. */
.sida-uttagning .register, .sida-uttagning .kandidatdel { display: none; }
.uttagning-tavla { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.lagkolumner { gap: 10px; background: transparent; grid-auto-columns: calc(100% - 2rem); padding-bottom: .3rem; }
.uttagning-tavla.ar-fokus .lagkolumner { grid-auto-columns: 100%; }
.lagkolumn { border-radius: var(--radie-stor); }
.lagkolumn > .kolumnhuvud { min-height: 0; padding-bottom: .4rem; }
.plats { height: 2.75rem; cursor: pointer; }
.plats .spelare { min-height: 0; }
.plats.par-slut { margin-bottom: 0; }
.plats .platsinnehall { display: grid; align-items: center; }
.sida-uttagning .platsplus { display: grid; }
.sida-uttagning .plats:has(.spelare) .platsplus { display: none; }
}
.plats.ar-ny { animation: plats-ny 1.1s cubic-bezier(.2,.8,.2,1); border-radius: var(--radie-kort); }
@keyframes plats-ny { 0% { background: var(--profil-svag); } 100% { background: transparent; } }
.plats.ar-ny .spelare-namn { animation: plats-in .45s cubic-bezier(.2,.8,.2,1); }
@keyframes plats-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
/* Bladet: glider upp nerifrån, stängs nedåt. */
.valblad { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 40rem; max-height: 80vh; margin: 0 auto; padding: .4rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); display: none; flex-direction: column; gap: .6rem; border: 0; border-radius: 28px 28px 0 0; background: var(--surface); color: var(--ink); box-shadow: 0 -20px 50px -20px var(--skuggfarg); }
.valblad[open] { display: flex; animation: blad-upp var(--tid-lugn) var(--kurva-expo); }
.valblad.ar-stanger { animation: blad-ner .22s cubic-bezier(.4,0,1,1) forwards; }
.valblad::backdrop { background: var(--overlaggsdimma); animation: sloja-in .3s; }
@keyframes blad-upp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes blad-ner { to { transform: translateY(100%); } }
@keyframes sloja-in { from { opacity: 0; } }
.valblad-greppe { width: 40px; height: 5px; margin: .2rem auto 0; border-radius: 9px; background: var(--line-strong); }
.valblad-huvud { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.valblad-huvud h2 { margin: 0; font-size: 1.1rem; }
.valblad-lista { overflow-y: auto; margin: 0 -1rem; padding: 0 1rem; }
.valrad { width: 100%; min-height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .3rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); text-align: left; box-shadow: none; cursor: pointer; }
.valrad:hover { background: transparent; }
.valrad-text { display: grid; min-width: 0; }
.valrad-namn { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.valrad-bil { display: inline-flex; color: var(--muted); }
.valrad small { color: var(--muted); font-size: .78rem; }
.valrad.ar-upptagen { opacity: .5; }
.valrad.ar-sparrad .valrad-namn { color: var(--muted); }
/* Läskvittot bland de tysta: öga med tiden, överstruket öga när ingen öppnat. */
.valrad-sett { display: inline-flex; align-items: center; gap: .25rem; vertical-align: -2px; }
.valrad-sett.ar-oppnad-inte { color: var(--varning-text); font-weight: 600; }
.plusknapp, .platsplus { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--profil); color: var(--pa-profil); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.plusknapp svg, .platsplus svg { display: block; }
.platsplus { display: none; justify-self: end; margin-right: .2rem; }
.valrad:hover .plusknapp { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) { .valblad[open], .valblad.ar-stanger, .plats.ar-ny, .plats.ar-ny .spelare-namn, .sparstatus-ikon, .lagflikar-markor { animation: none !important; transition: none !important; } }
/* Förhandsgranskningen är hopfälld: man vill se den ibland, inte varje gång. */
/* UK-sidan: omgång för omgång, en ruta per match. Den omgång som är närmast
får en mörk kant — det är den som ska göras klart först. */
.omgang { margin-bottom: 1.6rem; }
.omganghuvud { margin-bottom: .6rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; }
.omganghuvud h2 { margin-bottom: .15rem; font-size: 1.3rem; }
.omganghuvud .kolumnmeta { margin: 0; }
.omgangknappar { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; }
.knapp-ikon { display: inline-flex; align-items: center; gap: .4rem; }
/* En ikonknapp utan text är rund: lika bred som hög. */
.button.knapp-ikon:not(:has(> span)) { aspect-ratio: 1; padding: 0; justify-content: center; }
/* Telefon: knappraden bryts aldrig — Alla kallelser och Speltid blir ikoner
(Sami 2026-10-13). */
@media (max-width: 48rem) {
.omganghuvud { flex-direction: column; align-items: stretch; }
.omganghuvud .omgangknappar { width: 100%; }
.omgangknappar .button:last-child { margin-left: auto; }
.knapp-ikon-mobil span { display: none; }
.knapp-ikon-mobil { width: 36px; padding: 0; justify-content: center; }
}
button.rutalank { font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
/* Rutorna sträcks till radens högsta med flit: underkanterna ska linjera,
annars ser omgången sönderhackad ut (Sami 2026-09-17, med rödpenna på
skärmbilden). Tomrummet inuti en kort ruta är priset för det. */
.matchrutor { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem; }
/* Ett spellediget lag håller sin plats i raden, tyst och utan vit yta, så att
kolumnerna står i lod genom hela sidan. */
.matchruta.ar-vilande { background: transparent; border-style: dashed; }
.matchruta.ar-vilande h3 { color: var(--muted); font-weight: 700; }
.matchruta.ar-vilande > .rutalage { margin-top: .1rem; padding-top: 0; }
/* En kolumn på telefon: då finns inget hål att fylla, och den tysta rutan blir
bara en rad till att skrolla förbi. */
@media (max-width: 48rem) { .matchruta.ar-vilande { display: none; } }
.matchruta { position: relative; padding: .85rem .95rem .75rem; display: flex; flex-direction: column; gap: .35rem; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); overflow: hidden; isolation: isolate; }
/* Matchkortet går att öppna var som helst, men den riktiga länken behåller
tangentbordsfokus och skärmläsartext. På dubbelkort ligger den andra länken
ovanpå den utsträckta träffytan. */
.matchruta:has(.matchrad) { cursor: pointer; }
.matchruta .matchrad:first-child::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; }
.matchruta .matchrad:first-child:focus-visible::after { outline: 3px solid var(--focus-ring, var(--ink)); outline-offset: -3px; }
.matchruta .matchrad:not(:first-child), .matchruta button.piller { position: relative; z-index: 2; }
.matchruta:has(.matchrad:hover), .matchruta:has(.matchrad:focus-visible) { border-color: var(--line-strong); }
.omgang.ar-nu .matchruta { border-color: var(--line-strong); }
.matchruta.ar-ofragad { background: var(--yta-2); }
/* Rubriken säger lag och sort (Hemma, Borta, Dubbel borta); matcherna står
under som matchrader, en eller två, likadana (VIK-P2-133). */
.matchruta h3 { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: .98rem; font-weight: 700; }
.rutamot { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matchruta .kolumnmeta { margin: 0; }
/* Statusraden trycks till rutans underkant: när rutorna i en omgång är lika
höga hamnar "Laget är satt" och kallelseknappen på samma linje hela raden. */
.rutalage { margin: .1rem 0 0; }
.matchruta > .rutalage { margin-top: auto; padding-top: .35rem; }
/* Svaren och om laget är skickat på en rad (VIK-P1-129). */
.matchruta > .rutafot { margin-top: auto; padding-top: .35rem; display: flex; align-items: center; justify-content: space-between; gap: .4rem .6rem; }
.matchruta > .rutafot > * { min-width: 0; }
.matchruta > .rutafot > .notis { flex: none; white-space: nowrap; }
.matchruta > .rutafot > .piller-rad { flex-wrap: nowrap; }
.status-kort { display: none; }
/* Smal skärm: statusens korta form, så att svaren och statusen står på en rad. */
@media (max-width: 34rem) {
.rutafot .status-lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rutafot .status-kort { display: inline; }
.rutafot .piller { padding: 0 .45rem 0 .32rem; gap: .2rem; }
.rutafot .piller-rad { gap: .25rem; }
}
.uttagningsstatus { display: inline-flex; align-items: center; gap: .3rem; }
.uttagningsstatus svg { flex: none; }
/* Matchsidans huvud: månaden till höger, i rubrikens nivå. */
/* Månaden är radens rubrik; sidrubriken är dold (menyn visar var man är). */
.matchhuvud { align-items: center; justify-content: flex-start; gap: .3rem; }
.matchhuvud .header-actions { margin-left: auto; }
.matchhuvud .manadsrad { margin-bottom: 0; }
.matchhuvud .season-picker { margin-right: .4rem; }
.matchhuvud .season-picker select { width: auto; min-height: 34px; padding: 0 .55rem; font-size: .88rem; }
/* Rubrikraden tight mot programmet: inget stycke emellan. */
.matchhuvud { margin-bottom: .7rem; }
.info-ruta .infostycke { display: block; }
.info-ruta .infostycke + .infostycke { margin-top: .5rem; }
.infolista { margin-top: .25rem; display: grid; gap: .15rem; font-size: .8rem; }
.infolista em { color: var(--muted); font-style: normal; }
/* Rubriken indragen till där datumkolumnens text börjar. */
.matchtitel { display: flex; align-items: center; gap: .5rem; }
.matchtitel h1 { margin: 0; }
.matchhuvud .manadsrad .button { margin-right: .35rem; }
/* Infoikonen: förklaringen finns när man ber om den, inte i löptexten. */
.info { position: relative; display: inline-flex; }
.info-knapp { width: 1.6rem; min-width: 1.6rem; height: 1.6rem; min-height: 1.6rem; padding: 0; display: inline-grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 50%; box-shadow: none; cursor: pointer; }
.info-knapp:hover, .info-knapp[aria-expanded="true"] { color: var(--ink); background: var(--dampad); background-image: none; }
/* Verklig yta, ingen osynlig ::after som går in över grannen. 34 px med mus —
knappen står bredvid en 34 px rullgardin och en 34 px pillerknapp, och en
44 px cirkel där ser ut som ett misstag. 44 px på pekskärm. */
.info-knapp { width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
@media (pointer: coarse) { .info-knapp { width: 44px; min-width: 44px; height: 44px; min-height: 44px; } }
.info-ruta { position: absolute; z-index: 20; top: calc(100% + .4rem); left: 0; width: max-content; max-width: min(22rem, 80vw); padding: .6rem .75rem; color: var(--ink); font-size: .84rem; font-weight: 500; line-height: 1.45; text-transform: none; letter-spacing: 0; background: var(--surface); border: 0; border-radius: var(--radie-kort); box-shadow: var(--skugga-kort); box-shadow: var(--skugga-stor); }
.info-ruta a { color: var(--ink); font-weight: 700; }
/* Startsidans remsor: tre kort i bredd på skrivbord, svep i sidled på telefon.
Snäpp per kort, så ett svep landar på nästa kort och inte mittemellan. */
.remsasektion { margin-bottom: 2rem; }
.halsning { margin-bottom: 2rem; }
.halsning h1 { margin: 0; }
.halsning p { margin: .5rem 0 0; color: var(--muted); font-size: 1.12rem; }
.remsasektion .section-heading { margin-top: 0; }
.remsa { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 1.4rem) / 3); gap: .7rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .2rem; }
.remsa::-webkit-scrollbar { display: none; }
.remsakort { position: relative; min-width: 0; padding: .8rem .9rem; display: grid; align-content: start; gap: .3rem; color: inherit; text-decoration: none; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); scroll-snap-align: start; overflow: hidden; isolation: isolate; }
a.remsakort:hover { border-color: var(--line-strong); }
.remsakort.ar-nast { box-shadow: var(--skugga-kort); }
.kortdatum { grid-row: 1 / 3; display: grid; justify-items: center; align-content: start; color: var(--muted); line-height: 1; text-transform: uppercase; }
.kortdatum .kortdag { font-size: .8rem; font-weight: 700; }
.kortdatum strong { min-width: 2.2rem; margin: .1rem 0; padding: 0 .3rem; color: var(--pa-profil); font-family: var(--font-etikett); font-size: 1.6rem; font-weight: 500; font-variant-numeric: tabular-nums; text-align: center; background: var(--profil); border-radius: var(--radie-liten); }
.kortdatum span:last-child { font-size: .8rem; font-weight: 700; }
.korttext { min-width: 0; display: grid; gap: .1rem; }
.korttext > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.korttext > strong a { color: var(--ink); text-decoration: none; }
.korttext > span { color: var(--muted); font-size: .8rem; }
.kortchips { display: flex; flex-wrap: wrap; gap: .25rem; }
.kortchips:empty { display: none; }
.kortknapp { grid-column: 2; justify-self: start; margin-top: .2rem; }
.kortknapp form { margin: 0; }
.matchkort .kolumnmeta { margin: 0; }
@media (max-width: 60rem) { .remsa, .tabellremsa, .snittremsa { grid-auto-columns: calc((100% - .75rem) / 2); } }
@media (max-width: 40rem) { .remsa { grid-auto-columns: 84%; } }
/* Matchsidans uttagning: två kolumner. Vänster spelarna i täta rader, höger
meddelande, samling och alla knappar — klistrad, så man aldrig behöver
skrolla till botten för att spara. Rollen är tre små val i rad, inte en
rullista; platsen ett tvåteckensfält som bara syns när spelaren är vald. */
.uttag { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 0 1px; background: var(--line); }
.uttag-grupptitel { margin: 0; padding: .3rem .8rem; color: var(--muted); font-family: var(--font-etikett); font-size: .8rem; letter-spacing: 0; background: var(--yta-2); border-bottom: 1px solid var(--line); }
.uttag-rad { min-height: 2.4rem; padding: .15rem .8rem; display: grid; grid-template-columns: minmax(0, 1fr) auto auto 2.6rem 1.6rem; align-items: center; gap: .5rem; border-bottom: 1px solid var(--line); }
.uttag-rad:hover { background: var(--dampad); }
.uttag-rad.ar-vald { background: var(--yta-2); }
/* Spärrad rad: namnet dämpas och rollvalet tonas, men orsaken och etiketterna
står i full kontrast — det är dem UK ska läsa. */
.uttag-rad.ar-sparrad .uttag-namn strong { color: var(--muted); }
/* Inte opacity: kaptensrutan går att klicka i en spärrad rad, och 'K' hamnade
på 2,17:1 (Astra P3-38 varv 2). Dämpa med färg i stället. */
.uttag-namn { min-width: 0; display: block; font-size: .9rem; }
.uttag-namn strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uttag-namn small { display: block; max-width: 18rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: .8rem; white-space: nowrap; }
/* Spärrens orsak står under namnet i klartext, inte som en chip med tooltip. */
.uttag-namn .uttag-skal { color: var(--kritisk-text); white-space: normal; }
/* Läskvitto på uttagen spelare: inte skickad / skickad / sett. */
.uttag-kvitto { padding: 0 .3rem; font-size: .8rem; font-weight: 700; color: var(--muted); border: 1px solid var(--line-strong); border-radius: var(--radie-liten); }
.uttag-kvitto.ar-oskickad { border-style: dashed; }
.uttag-kvitto.ar-sett { color: var(--ink); }
/* F: brevet gick till, eller laget öppnades av, vårdnadshavaren. Samma mått
som K för kapten (.laget-k: .8rem, 800, 1.35, .3rem sidluft), i bläck i
stället för klubbrött (Sami 2026-09-22). Står i utskriftsblockets lista
över fyllda kontroller, som K — annars trycks vit text på ofärgad botten. */
.kvitto-f { padding: 0 .3rem; color: var(--yta); font-size: .8rem; font-weight: 700; line-height: 1.35; background: var(--ink); border-radius: var(--radie-liten); }
.kvittosiffror { margin: 0; color: var(--muted); font-size: .84rem; font-weight: 600; }
.kontosiffror { margin: -.4rem 0 1rem; color: var(--muted); font-size: .9rem; }
.nyhet-matcher { margin-top: 1.4rem; }
.nyhet-matcher h2 { margin: 0 0 .4rem; font-size: .84rem; font-weight: 700; letter-spacing: 0; }
.nyhet-matcher ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
.nyhet-matcher a { min-height: 44px; padding: .35rem .6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; color: var(--ink); text-decoration: none; background: var(--surface); border: 0; border-radius: var(--radie-kort); box-shadow: var(--skugga-kort); }
.nyhet-matcher a:hover strong { text-decoration: underline; }
.nyhet-match-nar { color: var(--muted); font-size: .84rem; }
.kontosiffror strong { color: var(--ink); }
/* Smal skärm: orsaken på egen rad under namnet i stället för att namnet kapas. */
@media (max-width: 40rem) { .uttag-namn { flex-wrap: wrap; } }
.uttag-svar { display: flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 700; }
.uttag-brickor { display: inline-flex; align-items: center; gap: .25rem; }
/* Skrivbord: svaret, brickorna (bil, lag, varning), rollvalet, platsen och K
står i var sin kolumn, så att rollvalet ligger i linje rad för rad även när
en rad bär en lagbricka och nästa inte. */
@media (min-width: 62.0625rem) {
.uttag-rad { grid-template-columns: minmax(0, 1fr) auto minmax(4.6rem, auto) auto 2.6rem 1.6rem; }
.uttag-svar { display: contents; }
}
/* Ja/nej/tyst i raden: samma segmentkontroll som rollvalet. Tre knappar i
en form som ligger utanför laguttagningens (form="svarform"). */
.svarval { display: inline-flex; padding: 2px; background: var(--yta-2); border-radius: 999px; }
.svarval button { width: 2rem; min-width: 2rem; min-height: 1.7rem; height: auto; padding: 0; display: inline-grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 999px; box-shadow: none; }
.svarval button:hover { color: var(--ink); background-color: var(--dampad); background-image: none; transform: none; }
/* Tryckt läge i svarets färg: grön bock, rött kryss, grått streck. */
.svarval button[aria-pressed="true"] { color: var(--pa-accent); }
.svarval .svar-ja[aria-pressed="true"] { color: var(--surface); background: var(--god-text); }
.svarval .svar-nej[aria-pressed="true"] { color: var(--surface); background: var(--kritisk-text); }
/* "Inget svar" är den dämpade tonen som fyllning, och då måste på-färgen vända
med den. Vitt låg kvar från grannarnas gröna och röda: --muted går från mörk
grå i ljust läge till ljus grå i mörkt, så ikonen mätte 2,42:1 i mörkt — under
ikongolvet 3:1, och det är det läge 22 knappar står i som DEFAULT innan någon
svarat (Astra P2-44 varv 5). Sidans egen yta är den på-färg som vänder
likadant. Ikonkontrast hade aldrig mätts här: varje svep tog bara element med
egen textnod, och de här knapparna bär en SVG. */
.svarval .svar-utan[aria-pressed="true"] { color: var(--yta); background: var(--muted); }
.svarval button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Bil på bortamatch: växlas på en ja-rad. Fylld grön kant = har bil. */
.bilval { min-height: 1.7rem; height: auto; padding: 0 .55rem; color: var(--muted); font-size: .8rem; font-weight: 700; background: transparent; border: 1.5px solid var(--hairline); border-radius: 999px; box-shadow: none; }
.bilval[aria-pressed="true"] { color: var(--god-text); border-color: currentColor; }
.bilval:hover { color: var(--ink); background-color: var(--dampad); background-image: none; transform: none; }
.bilval:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mark-varning { color: var(--varning-text); border-color: var(--varning-kant); }
/* Vald roll i bläck, inte klubbrött: rött ska bara betyda Kan inte, och tre
fyllda piller i tre färger per rad gjorde listan oläslig (Sami 2026-09-22).
"Ingen roll" (–) fylls inte alls — det är utgångsläget, inte ett val. */
/* En uttagen spelare som blivit spärrad: rollen är det viktigaste på raden och ska läsas. */
/* Pekskärm: svarsknappar, bil och rollval 34 px höga — samma rad, samma mål.
Inte 44: sex kontroller à 44 per spelare gjorde listan "extrem" på telefon
(Sami 2026-09-22). 34 är husets lilla knapphöjd, gott över WCAG:s golv på
24. Regeln träffar svarsremsan på tavlan och matchsidan också, med flit:
samma kontroll ska vara lika stor var den än står. */
@media (pointer: coarse) { .svarval button { width: 34px; min-width: 34px; min-height: 34px; } .bilval { min-width: 34px; min-height: 34px; padding: 0 .6rem; justify-content: center; } }
/* 24 px, inte 1,5rem (22,5): kaptensrutan är en träffyta och golvet är 24. */
/* Kryssrutan är opacity: 0 bakom sitt , så ringen ritades på något ögat
inte ser — noll ändrade pixlar när tangentbordet landade (Astra P2-44
varv 10, pixelmätt). Grannarna löste samma sak rätt: .uttag-roll och
.svarsfall lägger markeringen på den SYNLIGA rutan. Nu gör den här det med. */
@media (max-width: 62rem) {
.uttag { grid-template-columns: minmax(0, 1fr); gap: 1px 0; }
.uttag-rad { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
/* Svarsdelen får radbrytas (bil och brickor under bock/kryss/frågetecken)
i stället för att svämma över in under rollvalet och stjäla dess träffyta. */
.uttag-svar { grid-column: 1; grid-row: 2; flex-wrap: wrap; }
}
/* Telefon: namnet på egen rad, svaret och rollvalet under det sida vid sida;
bil och brickor radbryts inom svaret. Brytpunkten för en tredje rad står
nedanför, härledd ur uppmätta bredder. */
@media (max-width: 40rem) {
/* Telefon: bilknappen flyttar upp till namnraden, där det står tomt ändå.
Då ryms svarsremsan (136 px) och rollvalet (178 px) på rad två utan att
bil bryts ned till en egen rad — raden går från 129 px till ~85 px, och
med sextio medlemmar i listan är det två skärmhöjder mindre att dra
igenom (Sami 2026-09-16). display: contents lyfter ut svarets delar så
att de kan placeras var för sig i radens rutnät. */
.uttag-rad { padding-block: .3rem; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: .25rem; }
.uttag-svar { display: contents; }
.uttag-namn { grid-column: 1; grid-row: 1; }
.uttag-brickor { grid-column: 2; grid-row: 1; justify-self: end; }
.svarval { grid-column: 1; grid-row: 2; justify-self: start; }
}
/* Under ~367 px är innehållsbredden ~315 px och remsan plus rollvalet mäter
136 + 178 + 8. Rollvalets etiketter får då smalare sidoluft i stället för
en tredje rad — höjden 44 px och träffytan 44 px står kvar, det är bara
luften runt texten som krymper. I pixlar, eftersom rem i en mediefråga
räknas mot webbläsarens 16 px, inte dokumentets 15. */
/* Under ~350 px räcker inte heller det (uppmätt: 296 + 8 mot 299). Då får
rollvalet en egen rad. */
@media (max-width: 349px) {
.uttag-rad { grid-template-rows: auto auto auto; }
.svarval { grid-column: 1 / -1; grid-row: 2; }
}
/* Svarspiller: ja, nej, tysta, bilar som piller med ikon. En siffra med en
glyf läses på en tiondel; "21 ja · 17 nej · 11 tysta" måste läsas. */
.piller-rad { display: flex; flex-wrap: wrap; gap: .3rem; }
.piller { display: inline-flex; align-items: center; gap: .25rem; min-height: 1.55rem; padding: 0 .55rem 0 .4rem; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 999px; border: 1.5px solid var(--hairline); color: var(--ink); }
.piller svg { flex: none; }
.piller-ja { color: var(--god-text); border-color: var(--god-kant); }
.piller-nej { color: var(--kritisk-text); border-color: var(--kritisk-kant); }
.piller-tyst { color: var(--muted); }
/* Klockan som knapp: påminner lagets tysta (VIK-P1-129). Samma piller, med
en träffyta som räcker i telefonen utan att pillret blir större. */
button.piller { position: relative; font: inherit; font-size: .8rem; font-weight: 700; background: var(--surface); cursor: pointer; transition: color .15s, border-color .15s; }
button.piller::after { content: ""; position: absolute; inset: -8px -4px; }
button.piller-tyst:hover, button.piller-tyst:focus-visible { color: var(--ink); border-color: var(--ink); }
.piller-bil { color: var(--ink); background: var(--yta-2); border-color: transparent; }
.piller-lag { color: var(--ink); }
.piller-lag small { margin-left: .1rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.piller-jag { color: var(--god-text); border-color: var(--god-kant); }
/* Lagrutan: en ruta per lag, matcherna som rader i den. */
.rutamatcher { display: grid; }
/* ── Metaraden (static/js/metarad.js, VIK-P2-133) ─────────────────────────
Delar som "18:00–19:30 · 6 banor": varje del håller ihop, raden bryts bara
mellan delarna, och pricken syns bara mellan två delar på samma rad. En del
som inte får plats ens ensam kortas av med tre punkter. */
.metarad { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.metarad > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metarad > :not(:last-child)::after { content: "·"; margin: 0 .38em; }
.metarad > .ar-radslut::after { visibility: hidden; }
.notistext > strong { text-wrap: balance; }
/* ── Listraden (VIK-P2-133) ────────────────────────────────────────────────
Samma sak ser likadan ut överallt: en rads titel och dess metarad har samma
storlek och vikt i passlistan, på översiktens träningskort och i matchraden. */
.listrad-titel, .matchrad-mot { font-size: .94rem; font-weight: 700; line-height: 1.3; }
.listrad-titel { min-width: 0; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.listrad-titel a, .listrad-titel strong { color: inherit; font-weight: inherit; text-decoration: none; }
.listrad-meta, .matchrad-meta { color: var(--muted); font-size: .8rem; line-height: 1.35; }
/* ── Matchraden (partials/matchrad.html, VIK-P2-133) ──────────────────────
En match likadant överallt: motståndaren och dag och tid på första raden,
hemma eller borta, hall och serie på andra. Två rader i ett rutnät, så att
tiden aldrig hamnar på en egen rad och raderna linjerar. Namn och hall
kortas av med tre punkter, aldrig mitt i ett ord på två rader. */
.matchrad { padding: .45rem 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "mot nar" "meta hoger";
align-items: center; gap: .1rem .75rem; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.matchrad:last-child { border-bottom: 0; }
.matchrad-mot { grid-area: mot; min-width: 0; display: flex; align-items: center; gap: .5rem; }
.matchrad-mot .laget-nr { min-width: 2rem; height: 1.5rem; padding: 0 .45rem; font-size: .78rem; }
.matchrad-namn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matchrad-nar { grid-area: nar; justify-self: end; color: var(--muted); font-size: .84rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.matchrad-nar b { color: var(--ink); font-weight: 700; }
.matchrad-nar b.ar-osatt { color: var(--muted); font-weight: 600; }
.matchrad-meta { grid-area: meta; min-width: 0; display: flex; white-space: nowrap; overflow: hidden; }
.matchrad-meta > span { flex: none; }
.matchrad-meta > span + span::before { content: "·"; margin: 0 .38em; }
/* Hallen kortas sist: serien ger efter först (den stora krympfaktorn), och i
telefonen står serien inte alls, där räcker lagets bokstav. */
.matchrad-meta > .matchrad-hall, .matchrad-meta > .matchrad-serie { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.matchrad-meta > .matchrad-serie { flex-shrink: 1000; }
@media (max-width: 48rem) { .matchrad-serie { display: none; } }
.matchrad-meta .platsikon { margin-right: .2rem; }
.matchrad-hoger { grid-area: hoger; justify-self: end; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.matchrad-res { color: var(--ink); font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.matchrad.ar-installd .matchrad-namn { color: var(--muted); text-decoration: line-through; }
@media (hover: hover) { .matchrad:hover .matchrad-namn { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } }
.rutalank { min-height: 34px; padding: 0 14px; display: inline-flex; align-items: center; color: var(--ink); font-size: .82rem; font-weight: 700; text-decoration: none; background: var(--surface); border: 1.5px solid var(--hairline); border-radius: 999px; }
.rutalank:hover { background: var(--dampad); }
/* Remsans pilar: ett kort i taget. */
.remsastyr { display: inline-flex; align-items: center; gap: .1rem; }
.remsastyr a { margin-left: .6rem; }
/* Knappbasen ger 40 px minhöjd och en kant; pilen ska vara en pil. */
.remsastyr .manadspil { width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
@media (pointer: coarse) { .remsastyr .manadspil { width: 44px; height: 44px; } }
.remsastyr .manadspil svg { width: 16px; height: 16px; }
.remsastyr .manadspil:hover { background: var(--dampad); background-image: none; }
/* Senaste nyheten: ett stycke överst, inte ett kort. Tre rader synliga när
texten är lång, resten bakom "Visa hela". */
.nyhet { margin-bottom: 1.4rem; padding: .9rem 1rem 1rem; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.nyhetmeta { margin: 0 0 .35rem; display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .8rem; font-weight: 700; }
.nyhetbricka { padding: .1rem .5rem; color: var(--pa-profil); font-size: .8rem; font-weight: 700; letter-spacing: 0; background: var(--profil); border-radius: 999px; }
.nyhet h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.nyhet h2 a { color: var(--ink); text-decoration: none; }
.nyhet h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nyhettext { max-width: 68ch; color: var(--ink); font-size: .95rem; line-height: 1.55; }
/* Lång nyhet på översikten: fast höjd som tonar ut, sedan Läs mer. Radklipp
(line-clamp) fungerar bara på ett textblock — nyheten är flera stycken, och
nästa stycke ritades ovanpå knappen (Sami 2026-10-04). */
.nyhettext.ar-klippt { max-height: 6.5em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent); mask-image: linear-gradient(to bottom, black 55%, transparent); }
.nyhetvisa { margin-top: .75rem; min-height: 36px; padding: 0 16px; display: inline-flex; align-items: center; color: var(--ink); font-size: .88rem; font-weight: 600; text-decoration: none; background: var(--yta-ton-svag); border-radius: 999px; }
.nyhetvisa:hover { color: var(--ink); background: var(--yta-ton); }
/* På pekskärm är "Visa hela" en fristående kontroll, inte en länk i löpande
text: 14 px hög text går inte att träffa med tummen. Luften läggs under
texten så att raden inte flyttar sig (Sami 2026-09-16). */
/* Äldre nyheter som rader under den senaste, och vägen till arkivet. */
.nyhetmer { margin-top: .7rem; padding-top: .5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; border-top: 1px solid var(--line); }
.nyhetrad { min-width: 0; min-height: 40px; display: flex; align-items: center; gap: .6rem; color: var(--ink); font-size: .9rem; text-decoration: none; }
.nyhetrad time { flex: none; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.nyhetrad span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nyhetrad:hover span { text-decoration: underline; text-underline-offset: 2px; }
.nyhetalla { min-height: 40px; display: inline-flex; align-items: center; color: var(--muted); font-size: .84rem; font-weight: 600; }
.nyhetalla:hover { color: var(--ink); }
/* Nyhetsarkivet: en rad per utskick, datum och rubrik, ingress dämpad under. */
.nyhetslista { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); overflow: hidden; }
.nyhetsrad + .nyhetsrad { border-top: 1px solid var(--line); }
/* Bladdringen under nyhetsarkivet: Nyare till vanster, Aldre till hoger,
sidnumret emellan. Samma 34 px-piller som ovriga sma knappar. */
.sidbladdring { margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: .75rem; }
.sidbladdring .muted { font-size: .8rem; }
.nyhetsrad a { padding: .7rem .9rem; display: grid; gap: .1rem; color: var(--ink); text-decoration: none; }
.nyhetsrad a:hover { background: var(--dampad); }
.nyhetsdatum { color: var(--muted); font-family: var(--font-etikett); font-size: .8rem; }
.nyhetsingress { font-size: .84rem; line-height: 1.4; }
/* ── Textsida med spalt ──────────────────────────────────────────────────
Nyhetssidorna körde en smal spalt mitt på en bred skärm och lämnade halva
sidan tom (Sami 2026-09-17: "det är många sidor som har bara halva vidden.
tex nyheter"). Från 62rem ligger texten till vänster och en spalt med fler
nyheter, nästa match och nästa träning till höger. Under 62rem faller
spalten under texten — samma ordning som i markupen. */
.textsida { display: grid; gap: 1rem; align-items: start; }
.textsida-huvud { min-width: 0; display: grid; gap: 1rem; align-content: start; }
.textsida .nyhetstext { max-width: none; }
@media (min-width: 62rem) { .textsida { grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.6rem; } }
.sidospalt { display: grid; gap: .8rem; align-content: start; min-width: 0; }
.spaltkort { padding: .85rem .95rem; display: grid; gap: .4rem; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.spaltkort h2 { margin: 0; color: var(--muted); font-family: var(--font-etikett); font-size: .8rem; font-weight: 700; letter-spacing: 0; }
.fritidskort-kort h2 { display: flex; align-items: center; gap: .4rem; }
.spaltkort .account-reminder-setting { margin: 0; padding: .35rem 0; background: none; border-radius: 0; box-shadow: none; }
.fritidskort-kort .form-help { margin: 0; }
.spaltlista { margin: 0; padding: 0; list-style: none; display: grid; }
.spaltlista li + li { border-top: 1px solid var(--line); }
.spaltlista a { min-height: 40px; padding: .4rem 0; display: grid; gap: .1rem; color: var(--ink); text-decoration: none; }
.spaltlista time { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.spaltlista a > span { font-size: .9rem; font-weight: 600; line-height: 1.3; }
.spaltlista a:hover > span { text-decoration: underline; text-underline-offset: 2px; }
.spaltpost { min-height: 40px; display: grid; gap: .15rem; color: var(--ink); text-decoration: none; }
.spaltpost strong { font-size: .95rem; line-height: 1.25; }
.spaltpost > span { color: var(--muted); font-size: .84rem; line-height: 1.35; }
.spaltpost:hover strong { text-decoration: underline; text-underline-offset: 2px; }
.anslagstext { font-size: .95rem; line-height: 1.55; overflow-wrap: anywhere; }
.anslagstext p { margin: 0 0 .5rem; }
.anslagstext p:last-child, .anslagstext ul:last-child { margin-bottom: 0; }
.anslagstext ul { margin: 0 0 .5rem; padding-left: 1.2rem; list-style: disc; }
.anslagstext h2 { margin: .3rem 0 .2rem; font-size: 1rem; font-weight: 700; }
.anslagstext a { color: var(--lank); }
.spaltlista a > time { display: block; color: var(--muted); font-size: .8rem; }
.spaltfot { min-height: 24px; display: inline-flex; align-items: center; color: var(--muted); font-size: .82rem; font-weight: 700; text-decoration: none; }
.spaltfot:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .nyhetvisa { min-height: 40px; padding-block: .55rem; margin-top: 0; align-self: start; } }
/* Större kort — två och en bit i bredd, så det syns att det går att svepa. */
.dagkort { grid-template-columns: 2.9rem minmax(0, 1fr); gap: .2rem .7rem; }
.dagpass { min-width: 0; display: grid; }
.dagpassrad { padding: .35rem 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; border-bottom: 1px solid var(--line); }
.dagpassrad:last-child { border-bottom: 0; }
.dagpassrad .kortknapp { margin: 0; display: flex; align-items: center; gap: .35rem; }
.kortoppna { width: 36px; height: 36px; display: inline-grid; place-items: center; color: var(--ink); background: var(--yta-ton-svag); border-radius: 999px; }
.kortoppna:hover { background: var(--dampad); }
.kortoppna svg { width: 16px; height: 16px; }
/* Kommande matcher: en rad per omgång med alla lag i bredd. */
.omgangskolumn { margin-bottom: .2rem; }
/* Etiketten linjerar med kortens TEXT: kortets ram (1 px) plus dess
vänsterpadding (.95rem). Uppmätt 2026-09-16 — etiketten låg 6 px till
vänster om "Dubbel borta" och hängde utanför. */
.omgangsetikett { margin: 0 0 .4rem; padding-left: calc(.95rem + 1px); font-size: .84rem; font-weight: 700; }
.platsikon { margin-right: .15rem; vertical-align: -2px; opacity: .75; }
.omgangsetikett span { margin-left: .4rem; color: var(--muted); font-weight: 600; }
.lagrutor { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
@media (max-width: 60rem) { .lagrutor { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .lagrutor { grid-template-columns: minmax(0, 1fr); } .remsa { grid-auto-columns: 86%; } }
/* Översikten: EN omgång i taget, matcherna under varandra, pilarna bläddrar
till nästa omgång. Står EFTER kolumnreglerna ovan, som annars vinner på att
komma sist. */
.omgangsremsa { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; align-items: start; gap: .8rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.omgangsremsa::-webkit-scrollbar { display: none; }
.omgangskolumn { min-width: 0; align-self: start; scroll-snap-align: start; }
.lagrutor-kolumn { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
/* Träningskalenderns rad, samma form som matchraden. Tidsspannet är bredare än
en klockslagskolumn. */
/* Klubbadmin: en ruta per område, länkar som rader. */
/* Klubbadmin: ett band per område, en platta per sak man kan göra.
Listorna med nakna länkar sa inget för den som inte redan visste vad
"Kontaktimport" var, och fem kort i ett rutnät lämnade ett hål och en tom
högerhalva (Sami 2026-09-17: "rörig, ser inte formaterad ut eller intuitiv").
Flex med flex-grow, inte grid: plattorna delar sin rad lika oavsett om
bandet har två eller fem, så ingen rad slutar i ett hål. */
/* Klubbadmin: varje område är en grupperad lista — ikon i rund bricka, namn,
en rad om vad det gör (målbild v3). Plattorna med fem, tre och fyra i bredd
gav ojämna rader; listan är lika bred i alla band. */
.adminband { margin-bottom: 2rem; }
.adminband h2 { margin: 0 0 .75rem; padding: 0 .25rem; color: var(--ink); font-size: 1.15rem; font-weight: 650; }
.adminplattor { padding: .5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .5rem; background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.adminplatta { min-height: 4.5rem; padding: .85rem 1rem; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 1rem; row-gap: .1rem; color: var(--ink); text-decoration: none; border-radius: var(--radie-kort); transition: background var(--tid-kvick) var(--kurva-standard); }
.adminplatta svg { grid-row: 1 / 3; width: 44px; height: 44px; padding: 11px; color: var(--ink); background: var(--surface-muted); border-radius: 50%; }
.adminplatta strong { align-self: end; font-size: 1rem; font-weight: 600; line-height: 1.25; }
.adminplatta > span { align-self: start; color: var(--muted); font-size: .9rem; line-height: 1.4; text-wrap: pretty; }
/* Smalaste telefonerna: plattans rubrik räcker; beskrivningen blev tre rader (VIK-P2-133). */
@media (max-width: 22.5rem) { .adminplatta > span { display: none; } .adminplatta strong { align-self: center; } .adminplatta svg { grid-row: 1; } }
.adminplatta:hover { background: var(--dampad); }
.adminplatta:focus-visible { outline: var(--falt-fokus) solid var(--ink); outline-offset: -2px; }
@media (max-width: 48rem) { .adminplattor { grid-template-columns: minmax(0, 1fr); } }
/* ── Klubbadmins listor: säsongerna och uppdragen ────────────────────────
Samma kort som utskickens leveranslista: en ram runt raderna och en linje
mellan dem. Raden är namnet till vänster och det man kan göra till höger,
och bryts i två rader när bredden inte räcker — inga kolumner som klipper.
Den aktuella säsongen får klubbens bleka gula, samma ton som serietabellens
egen rad: raden säger "det här gäller nu" (text 15,8:1, dämpad text 5,6:1
i ljust, 5,5:1 i mörkt — räknat, inte uppskattat). */
.klubblista { background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); overflow: hidden; }
.klubbrad { min-height: 3rem; padding: .6rem .8rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .9rem; border-bottom: 1px solid var(--line); }
.klubbrad:last-child { border-bottom: 0; }
.klubbrad.ar-aktuell { background: var(--profil-svag); }
.klubbrad-namn { min-width: 0; display: grid; gap: .1rem; }
.klubbrad-namn strong { font-size: .95rem; font-weight: 700; line-height: 1.25; }
.klubbrad-meta { color: var(--muted); font-size: .82rem; line-height: 1.35; }
/* Ett uppdrag är en bricka med sitt eget kryss: borttaget hör till rollen,
inte till personen, och en person kan bära flera. Krysset är 28 px, över
golvet för ett tryckmål, och ligger inuti brickan så raden inte växer. */
.rollmarken { display: flex; flex-wrap: wrap; gap: .35rem; }
.rollmarke { min-height: 30px; padding: .1rem .25rem .1rem .7rem; display: inline-flex; align-items: center; gap: .35rem; color: var(--ink); font-size: .82rem; font-weight: 650; background: var(--dampad); border-radius: 999px; }
.rollmarke.ar-last { padding-right: .7rem; }
.rollmarke-last { color: var(--muted); font-size: .82rem; font-weight: 700; letter-spacing: 0; }
.rollmarke-bort { width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 999px; }
.rollmarke-bort:hover { color: var(--ink); background-color: var(--dampad-hover); background-image: none; }
/* Ett formulär i sidospalten står i en kolumn. Dialogernas .compact-form är
tvåkolumners och har egen padding — i en 19rem-spalt blev ett datumfält
106 px och klippte sin text (mätt vid 1440). */
/* Två saker i radens högerkant: märket som säger vad raden ÄR och knappen som
ändrar det. De står bredvid varandra bara i det trassliga läget — två
säsonger som båda står som aktuella. */
.spaltform { display: grid; gap: .7rem; }
.spaltform .form-actions { margin-top: .1rem; }
/* Handbokens rollrad: vem som når sidorna avsnittet pekar på. Den står under
rubriken och ska läsas före texten, inte gömmas i den. */
.handbok-krav { margin: -.4rem 0 .7rem; color: var(--muted); font-size: .82rem; font-weight: 650; }
/* QR i hallen: ledarens telefon visar koden, medlemmens läser den. Stor kod,
kort text, inget annat. */
.qr-sida { max-width: 24rem; margin-inline: auto; display: grid; justify-items: center; gap: .6rem; text-align: center; }
.qr-sida h1 { margin: 0; }
.qr-pass { margin: 0; color: var(--muted); }
.qr-ruta { width: 100%; max-width: 20rem; margin-top: .4rem; padding: .6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radie-stor); }
.qr-ruta svg { display: block; width: 100%; height: auto; }
.qr-hjalp { margin: .2rem 0 0; }
.qr-chips { justify-content: center; }
.qr-belopp { margin: .2rem 0 0; display: grid; gap: .1rem; }
.qr-belopp strong { font-size: 2rem; line-height: 1.1; }
.qr-belopp .muted { font-size: .84rem; }
.qr-kvitto { margin-top: .3rem; }
.qr-lank { margin: 0; font-size: .8rem; }
.qr-sparr { white-space: normal; }
/* Utkastet från tavlan: det som saknas överst, sedan texten att rätta. */
.utkast-brister { margin: 0 1rem; padding: .55rem .85rem; display: grid; gap: .3rem; color: var(--varning-text); font-size: .88rem; font-weight: 600; background: var(--yta-2); border-radius: var(--radie-kort); }
.utkast-brister ul { margin: 0; padding-left: 1.1rem; }
/* Utskicksutkastet: hela texten ska gå att läsa och rätta i modalen — bred
panel och ett textfält som fyller den på höjden. */
#utkast-dialog.side-sheet { width: min(96vw, 52rem); }
.utkast-form { padding: 0 1rem 1rem; }
.utkast-form > .form-field { grid-column: 1 / -1; }
/* Textfältet är UK:s egna ord, inte hela utskicket längre — lagen skrivs av
appen. Sex rader räcker; den som vill skriva mer drar i handtaget. */
.utkast-form textarea { width: 100%; min-height: 8.5rem; box-sizing: border-box; font-size: .95rem; line-height: 1.5; resize: vertical; }
.utkast-form input[name="subject"] { width: 100%; box-sizing: border-box; }
.tavla-notis { margin: 0 0 .8rem; padding: .55rem .8rem; font-size: .88rem; font-weight: 600; color: var(--ink); background: var(--yta-2); border-left: 3px solid var(--varning); border-radius: var(--radie-liten); }
.tavla-notis a { margin-left: .25rem; color: var(--ink); }
/* Användning: staplar i CSS (--andel är 0–100), tal i tabellsiffror. */
.anv-block { margin-bottom: 1.4rem; }
.anv-kolumner { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
.anv-dagar { margin: 0; padding: 0 .7rem; list-style: none; display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: .25rem; align-items: end; }
.anv-dagar li { display: grid; gap: .2rem; justify-items: center; }
.anv-dagar .anv-stapel { width: 100%; height: calc(4.5rem * var(--andel, 0) / 100); min-height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; }
.anv-dagtext { font-size: .8rem; color: var(--muted); }
.anv-tal { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; white-space: nowrap; }
.anv-dagar .anv-tal { font-size: .8rem; font-weight: 600; text-align: center; }
.anv-tabell { width: 100%; border-collapse: collapse; font-size: .9rem; }
.anv-tabell th, .anv-tabell td { padding: .45rem .7rem; text-align: left; border-bottom: 1px solid var(--line); }
/* Radrubrikerna är sidnamn, inte etiketter: normal skrift. */
.anv-tabell th[scope="row"] { font-weight: 600; font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; }
.anv-stapelcell { width: 50%; }
.anv-stapelcell .anv-stapel { display: block; height: .55rem; width: calc(var(--andel, 0) * 1%); background: var(--accent); border-radius: 999px; }
.anv-not { margin-top: .5rem; font-size: .8rem; }
@media (max-width: 48rem) { .anv-kolumner { grid-template-columns: 1fr; } .anv-dagar { gap: .12rem; } .anv-dagtext, .anv-dagar .anv-tal { font-size: .8rem; } }
/* ── Telefon: skala ─────────────────────────────────────────────────────────
Uppmätt vid 390 px 2026-09-16, efter att medlemmar klagat på mobilvyn:
rubriken tog 27 px och tre rader, ingresserna tre rader, kortens padding
15 px plus containerns 10 px, och knapparna var så breda att tre pillrar
blev två rader. Blocket skalar TYP och LUFT, inte funktion: träffytor och
textgolv (44 px, 12 px) rörs inte. Står sist i filen — samma specificitet,
sist vinner. */
@media (max-width: 48rem) {
/* Målbild v3 på telefon: Sponds mått — stor rubrik, 16–17 px text, luft
mellan grupperna. Det täta blocket som stod här (h2 13 px, kort .7 rem)
var motsatsen. */
h1 { font-size: 1.95rem; letter-spacing: -.03em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1.02rem; }
.page-lead { font-size: 1rem; line-height: 1.45; }
.page-content { padding-block: 1.25rem 2.5rem; }
.compact-header, .page-header { margin-bottom: 1.25rem; }
.button { padding: 0 1.1rem; font-size: 15px; }
.button-small { padding: 0 .9rem; font-size: 14px; }
.header-actions, .form-actions { gap: .5rem; }
.section-heading { margin: 2rem 0 .75rem; gap: .25rem .6rem; flex-wrap: wrap; }
.section-heading > div { min-width: 0; display: grid; gap: .1rem; }
.section-heading h2 { font-size: 1.15rem; }
.section-heading .muted, .section-heading span.muted { font-size: .88rem; line-height: 1.35; }
.form-card, .notice-card, .laget-kort, .callup-response-card, .remsakort,
.svarsmatch, .match-result-card { padding: 1.1rem; }
.form-card, .notice-card { margin-bottom: 1rem; }
/* Pilarna står kvar (VIK-P3-98) men smalare, så rubriken ryms på en rad. */
.remsastyr .manadspil { width: 36px; height: 36px; }
.remsastyr a { margin-left: .3rem; }
.remsasektion .section-heading { flex-wrap: nowrap; }
.remsasektion .section-heading h2 { min-width: 0; }
.header-actions { flex-direction: row; flex-wrap: wrap; }
}
/* Telefon: de sista träffytorna under 40 px, mätta 2026-09-16. Kryssrutor är
undantagna i WCAG när etiketten är klickbar — etiketten får höjden i stället. */
@media (max-width: 48rem) {
.kortoppna { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
/* Segmentkontrollerna (rollval, svarsval, kapten) har egna mått och egen
träffyta — de får inte staplas upp av den generella etikettregeln. */
:where(.form-field, .checkbox-list, td) label:has(> input[type="checkbox"]),
:where(.form-field, .checkbox-list, td) label:has(> input[type="radio"]) { min-height: 40px; display: inline-flex; align-items: center; gap: .45rem; }
}
/* Textverktygen ovanför utskickets textfält. Märkningen är liten med flit:
fet, rubrik, punkt, länk. Knapparna skriver tecknen åt den som hellre
trycker; den som kan skriva dem själv behöver aldrig röra raden. */
.textverktyg { margin-bottom: .3rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.textverktyg-knapp { min-height: 34px; padding: 0 .7rem; color: var(--muted); font-size: .84rem; font-weight: 700; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radie-kort); cursor: pointer; }
.textverktyg-knapp:hover { color: var(--ink); background: var(--dampad); }
.nyhetstext--forhand { max-width: none; white-space: normal; }
.nyhetstext h2 { margin: 1.1rem 0 .3rem; font-size: 1rem; font-weight: 700; letter-spacing: .01em; }
.nyhetstext h2:first-child { margin-top: 0; }
.nyhetstext p { margin: 0 0 .7rem; }
.nyhetstext p:last-child, .nyhetstext ul:last-child { margin-bottom: 0; }
.nyhetstext ul { margin: 0 0 .7rem; padding-left: 1.2rem; display: grid; gap: .15rem; }
.nyhetstext a { color: var(--lank); }
@media (max-width: 48rem) { .textverktyg-knapp { min-height: 40px; } }
/* Utkastets dialog: samlingen på en rad, förhandsvisningen hopfälld. */
.utkast-form > .utkast-samling, .utkast-form > .utkast-forhand { grid-column: 1 / -1; }
.utkast-samling { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; align-items: start; }
.utkast-forhand { margin-top: .2rem; }
.utkast-forhand > summary { min-height: 44px; display: flex; align-items: center; font-size: .88rem; font-weight: 700; cursor: pointer; }
/* Öppen från början och med ett GOLV, inte bara ett tak: kriteriet säger att
brevet ska gå att läsa i panelen, och en hopfälld ruta är noll hög
(Astra P1-22 varv 6). 20rem visar hela ett normalt omgångsbrev. */
.utkast-forhand .nyhetstext { margin-top: .3rem; min-height: 20rem; max-height: 22rem; overflow: auto; font-size: .88rem; }
@media (max-width: 48rem) { .utkast-samling { grid-template-columns: minmax(0, 1fr); } }
/* ── Liv ────────────────────────────────────────────────────────────────────
Korten reser sig när sidan laddats, med en kort förskjutning per kort så
ögat får en riktning att följa. Allt är gated på .js: utan skript syns
allting direkt, och prefers-reduced-motion stänger av rörelsen helt.
Ingen animation väntar på scroll — det som ska läsas syns i första bilden. */
@media (prefers-reduced-motion: no-preference) {
.js .matchruta, .js .remsakort, .js .nyhet, .js .laget-kort, .js .form-card {
animation: stig-in .38s cubic-bezier(.22, .61, .36, 1) both;
}
.js .omgangskolumn .matchruta:nth-child(2) { animation-delay: .05s; }
.js .omgangskolumn .matchruta:nth-child(3) { animation-delay: .1s; }
.js .omgangskolumn .matchruta:nth-child(4) { animation-delay: .15s; }
.js .omgangskolumn .matchruta:nth-child(n + 5) { animation-delay: .2s; }
}
@keyframes stig-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Korten står still (animation-skillen: kortet rör sig inte, VIK-P2-133);
det man pekar på svarar i stället, matchradens namn och knapparna. */
/* Telefon: månadsraden centrerad på matcher och träningar, och rutorna som
fälls ut under den (info, tips) hålls innanför skärmen. Basregeln
.matchhuvud { justify-content: flex-start } står senare i filen än den
gamla mobilregeln och vann — därför står den här, sist. */
@media (max-width: 48rem) {
/* Månadsraden mitt på skärmen; förklaringsikonen lyfts ur flödet till
högerkanten så att månaden centreras i HELA bredden, inte i det som
blir över. */
.matchhuvud { position: relative; justify-content: center; }
.matchhuvud .manadsrad { flex: 1 1 auto; justify-content: center; }
.matchhuvud .matchtitel { position: absolute; z-index: 1; right: 0; top: 50%; transform: translateY(-50%); }
.matchhuvud .header-actions { margin-left: 0; justify-content: center; }
/* Utfällt hänger från ikonens högerkant och växer inåt, med en bredd som
aldrig kan gå utanför skärmen. */
.matchhuvud .info-ruta { left: auto; right: 0; top: calc(100% + .4rem); width: max-content; max-width: calc(100vw - 1.6rem); }
/* Bubblan hänger från knappens högerkant och växer inåt. Centrerad sköt
den ut dokumentet till 500 px på en 390 px skärm — hela appen gick att
dra i sidled. Namnkolumnen står längst till vänster och får hänga åt
andra hållet i stället. */
.hint-bubble { right: 0; left: auto; width: min(18rem, calc(100vw - 2rem)); }
.squad-hint:has(.squad-sort--name) .hint-bubble { right: auto; left: 0; }
}
/* Notiskortet på Mina sidor. */
.notiskort .form-actions { margin-top: .5rem; }
/* Guidens stegkort: ikon, rubrik och en mening per steg. Ersätter en blaffa
löptext — samma innehåll, men går att skumma. */
.guide-ingress { margin: 0 0 .8rem; color: var(--muted); line-height: 1.5; }
.stegkort { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; counter-reset: steg; }
.stegkort > li { position: relative; padding: .7rem .8rem .7rem 3.1rem; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .6rem; background: var(--yta-2); border-radius: var(--radie-kort); }
.stegkort > li::before { counter-increment: steg; content: counter(steg); position: absolute; left: .8rem; top: .7rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; color: var(--pa-profil); font-size: .8rem; font-weight: 700; background: var(--profil); border-radius: 999px; }
.stegkort .stegikon { grid-column: 1; margin-top: .1rem; color: var(--muted); }
.stegkort > li > div { grid-column: 2; display: grid; gap: .15rem; }
.stegkort strong { font-size: .94rem; }
.stegkort span { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.stegkort em { font-style: normal; font-weight: 700; color: var(--ink); }
.guide-strul { margin-top: .8rem; }
.guide-strul > summary { min-height: 44px; display: flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 700; cursor: pointer; }
.guide-strul ul { margin: .3rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.guide-strul em { font-style: normal; font-weight: 700; color: var(--ink); }
.guide-strul p { margin: .3rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.guide-strul .guide-steg { margin-top: .4rem; }
/* Ledtexten som säger vilken väg man helst ska ta, före stegen. */
.guide-ledtext { margin: 0 0 .6rem; padding: .5rem .7rem; font-size: .88rem; line-height: 1.5; background: var(--profil-svag); border-radius: var(--radie-kort); }
@media (max-width: 48rem) { .stegkort > li { padding-left: 2.9rem; } }
/* Telefonfältet på Mina sidor: medlemmen fyller i sitt eget nummer. */
.telefonform { margin-top: .6rem; display: grid; gap: .5rem; }
.telefonform .form-actions { margin: 0; }
.match-result-kaglor { margin: .2rem 0 0; color: var(--muted); font-size: .84rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
/* Serietabellerna: ett kort per lag, dragbara i sidled, med knappar som
hoppar direkt till ett lag. */
/* > .tabellval, inte bara .tabellval: mobilblocket sätter .section-heading > div
till display: grid, och den selektorn är starkare än en ensam klass — utan
barnkombinatorn hamnade lagknapparna i en lodrät stapel på telefon. */
.section-heading > .tabellval { margin: 0 0 0 auto; display: flex; flex-wrap: wrap; gap: .3rem; }
.tabellsektion .section-heading { align-items: center; }
/* Alla knappar är samma cirkel: med luft i sidled blev "A" rund och "F1" oval.
Fast bredd = höjden, etiketten centrerad; två tecken i .95rem mäter 18 px och
får plats med marginal. Tar dessutom mindre plats på mobil. */
.tabellknapp { min-height: 34px; width: 34px; min-width: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-family: var(--font-etikett); font-size: .82rem; font-weight: 500; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; }
.tabellknapp:hover { color: var(--ink); }
.tabellknapp.ar-vald { color: var(--pa-accent); background: var(--accent); border-color: var(--accent); }
.tabellremsa { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 1.4rem) / 3); gap: .7rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .2rem; }
.tabellremsa::-webkit-scrollbar { display: none; }
.tabellkort { min-width: 0; padding: .7rem .8rem; scroll-snap-align: start; background: var(--surface); border: 0; border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.tabellmeta { margin: 0 0 .4rem; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; font-size: .88rem; }
.tabellmeta .muted { margin-left: auto; font-size: .8rem; font-weight: 600; }
@media (max-width: 48rem) {
.tabellremsa { grid-auto-columns: 96%; }
/* 36 px, inte 44: fyra cirklar i rubrikraden blev för tunga på telefon
(Sami 2026-09-16, efter att golvet höjts till 44 i varv 1). Cirkeln är
fortfarande större än WCAG 2.2:s golv på 24 px. */
.tabellknapp { min-height: 36px; width: 36px; min-width: 36px; font-size: .85rem; }
/* Rubrik, fyra lagknappar och två pilar mäter 396 px mot 366 px vid 390 px,
och då bryts raden. Pilarna får gå: på telefon drar man i remsan med
fingret, och knapparna tar en direkt till rätt lag. */
.tabellsektion .remsastyr { display: none; }
}
/* Under 360 px ryms inte namn, badge och knapp på en rad: badgen
"Via vårdnadshavare" är 174 px och klämde namnet till ett tecken vid 320
(granskningsfynd). Badge och knapp får då en egen rad under namnet.
Egen mediefråga, sist i filen: den första versionen öppnades mitt i
48rem-frågan och drog 41 regelgrupper ned till 360 px (granskningsfynd). */
@media (max-width: 22.5rem) {
.account-row { grid-template-columns: minmax(0, 1fr) auto; }
.account-row .member-identity { grid-column: 1 / -1; grid-row: 1; }
.account-row .account-email { grid-column: 1 / -1; grid-row: 2; }
.account-row > .status-badge { grid-column: 1; grid-row: 3; justify-self: start; }
.account-row .member-actions { grid-column: 2; grid-row: 3; }
.account-row > .account-relation { grid-row: 4; }
}
/* Utskrift: papperet är vitt oavsett tema, och webbläsare skriver inte ut
bakgrundsfärger. Den som valt mörkt läge fick vit text på vitt papper
(granskningsfynd: 1 725 av 1 786 texter under golvet). Här tvingas de
ljusa rollerna, alla, i samma ordning som i :root — test_tema.py faller
om blocken glider isär. */
/* Agendan: träningar per dag och matcher per vecka (målbild v3, VIK-P2-105).
EN definition av raderna — tidigare stod passraden på fem ställen och
matchraden på tre, med mobilregler som tog ut varandra. Varje dag och vecka
är ett eget kort med luft emellan; inga zebrarader, inga färgade kanter. */
.calendar-agenda { display: grid; gap: 1rem; }
.calendar-day, .calendar-week { background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); overflow: hidden; }
.calendar-day { padding: .5rem; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: .25rem; }
.calendar-date { width: 3.5rem; height: 3.5rem; margin: .5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; text-transform: uppercase; background: var(--surface-muted); border-radius: var(--radie-kort); }
.calendar-date span { color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .04em; }
.calendar-date strong { margin-top: .2rem; color: var(--ink); font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.calendar-sessions, .calendar-matches { min-width: 0; display: grid; }
.calendar-session { min-height: 4rem; padding: .85rem 1rem; display: grid; align-items: center; gap: .3rem 1rem; border-radius: var(--radie-kort); }
.calendar-session { grid-template-columns: 7.5rem minmax(0, 1fr) auto; }
.calendar-session + .calendar-session { box-shadow: inset 0 1px 0 var(--line); }
.calendar-session > time { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Matcherna i veckan är matchrader (VIK-P2-133), som på UK-sidan och Översikten. */
.calendar-matches > .matchrad { padding: .7rem 1rem; border-bottom: 0; border-radius: var(--radie-kort); }
.calendar-matches > .matchrad + .matchrad { box-shadow: inset 0 1px 0 var(--line); }
.calendar-session-title { min-width: 0; overflow: hidden; color: var(--ink); font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.calendar-session-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.calendar-session.is-cancelled { color: var(--muted); }
.calendar-session.is-cancelled .calendar-session-title { text-decoration: line-through; }
.calendar-week { padding: .5rem; }
.calendar-week-heading { padding: .75rem 1rem .5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.calendar-week-heading strong { font-size: 1.05rem; font-weight: 650; }
.calendar-week-heading span, .calendar-week-heading .calendar-week-round { color: var(--muted); font-size: .9rem; font-weight: 500; }
/* Omgången står i veckans rubrik — inte en gång till på varje rad. */
.match-main { min-width: 0; display: grid; gap: .2rem; }
.calendar-session-title { display: block; min-height: 24px; }
@media (max-width: 40rem) {
.calendar-day { grid-template-columns: 3.75rem minmax(0, 1fr); padding: .35rem; }
.calendar-date { width: 3rem; height: 3rem; margin: .4rem .35rem; }
.calendar-date strong { font-size: 1.2rem; }
.calendar-session { grid-template-columns: minmax(0, 1fr) auto; padding: .75rem .65rem; }
.calendar-session > time { grid-column: 1; grid-row: 1; }
.calendar-session .match-main { grid-column: 1; grid-row: 2; }
.calendar-session > :last-child:not(.passnotering) { grid-column: 2; grid-row: 1 / 3; }
.calendar-week { padding: .25rem; }
.calendar-week-heading { padding: .55rem .65rem .15rem; }
.match-agenda .calendar-agenda { gap: .6rem; }
.calendar-matches > .matchrad { padding: .6rem .65rem; }
}
/* Radmenyn ⋯ (målbild v3): en rads åtgärder bakom en knapp i stället för en
rad knappar som bryts på två rader. Ett details-element — öppnas och stängs
utan skript; base.html stänger den vid klick utanför och Esc. */
.radmeny { position: relative; display: inline-block; }
.radmeny > summary { width: 40px; height: 40px; display: grid; place-items: center; color: var(--muted); list-style: none; cursor: pointer; border-radius: 50%; }
.radmeny > summary::-webkit-details-marker { display: none; }
.radmeny > summary:hover, .radmeny[open] > summary { color: var(--ink); background: var(--dampad); }
.radmeny-panel { position: absolute; z-index: 25; top: calc(100% + 4px); right: 0; min-width: 15rem; padding: 6px; display: grid; background: var(--surface); border-radius: var(--radie-kort); box-shadow: var(--skugga-stor); }
.radmeny-panel form { margin: 0; display: grid; }
.radmeny-val { width: 100%; min-height: 44px; padding: 0 .8rem; display: flex; align-items: center; justify-content: flex-start; text-decoration: none; color: var(--ink); font-size: .95rem; font-weight: 500; text-align: left; background: none; border-radius: 10px; }
.radmeny-val:hover { color: var(--ink); background: var(--dampad); }
#copy-visible-emails { white-space: nowrap; }
.member-header-actions { align-items: center; }
/* Remsorna rullar i sidled, och en rullande behållare klipper allt som
sticker ut — även kortens skugga nedåt. Inre luft ger skuggan plats; den
negativa marginalen tar tillbaka luften så att layouten står kvar. */
.remsa, .tabellremsa, .snittremsa, .omgangsremsa { padding: 8px 10px 30px; margin: -8px -10px -22px; scroll-padding-inline: 10px; }
/* Notiscentret (notiser.html). */
.notisfilter { margin: 0 -1rem 1.5rem; padding: 0 1rem; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.notisfilter::-webkit-scrollbar { display: none; }
.notisfilter a { flex: none; min-height: 36px; padding: 0 .9rem; font-size: .9rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-weight: 500; text-decoration: none; background: var(--yta-ton-svag); border-radius: 999px; }
.notisfilter a span { font-size: .8rem; opacity: .75; }
.notisfilter a[aria-current="page"] { color: var(--pa-accent); background: var(--accent); }
.notisgrupp { margin-bottom: 2rem; }
.notisgrupp h2 { margin: 0 0 .75rem; padding: 0 .25rem; font-size: 1.15rem; }
.notislista { padding: .4rem; display: grid; background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.notisrad { min-height: 64px; padding: .7rem .8rem; display: flex; align-items: center; gap: .9rem; color: var(--ink); text-decoration: none; border-radius: var(--radie-kort); }
.notisrad + .notisrad { box-shadow: inset 0 1px 0 var(--line); }
.notisrad:hover { color: var(--ink); background: var(--dampad); }
.notisikon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; color: var(--ink); background: var(--surface-muted); border-radius: 50%; }
.notisrad.ar-ny .notisikon { color: var(--profil-text); background: var(--profil-svag); }
.notistext { min-width: 0; flex: 1; display: grid; gap: .1rem; }
.notistext strong { font-weight: 600; overflow-wrap: anywhere; }
.notistext > span { color: var(--muted); font-size: .88rem; }
.notisny { flex: none; padding: .2rem .6rem; color: var(--pa-profil); font-size: .78rem; font-weight: 700; background: var(--profil); border-radius: 999px; }
@media print {
:root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
--yta: #ffffff;
--yta-2: #f6f5f2;
--yta-ton: #e9e7e2;
--yta-ton-svag: #efeee9;
--yta-djup: #1b1a17;
--text: #1b1a17;
--text-svag: #67635c;
--text-dekor: #6b675f;
--ikon-chevron: url("data:image/svg+xml;utf8,");
--ikon-kalender: url("data:image/svg+xml;utf8,");
--ikon-klocka: url("data:image/svg+xml;utf8,");
--pa-ton: #1b1a17;
--pa-djup: #f2f0eb;
--accent: #1b1a17;
--pa-accent: #ffffff;
--accent-hover: #000000;
--kryssfyllning: #1b1a17;
--profil: var(--klubb, #F0D000);
--pa-profil: var(--pa-klubb, #1b1a17);
--profil-svag: var(--klubb-mjuk, #fbf2c4);
--profil-text: var(--klubb-text, #1b1a17);
--pa-djup-stark: #ffffff;
--hairline: rgb(27 26 23 / 12%);
--dampad: rgb(27 26 23 / 5%);
--dampad-hover: rgb(27 26 23 / 9%);
--god: #1d8751;
--varning: #a36800;
--kritisk: #d53e34;
--god-text: #1a693d;
--varning-text: #845600;
--kritisk-text: #ad342c;
--lank: #1b1a17;
--lank-hover: #000000;
--god-kant: rgb(29 135 81 / 30%);
--varning-kant: rgb(163 104 0 / 32%);
--kritisk-kant: rgb(213 62 52 / 32%);
--tint-god: rgb(29 135 81 / 7%);
--tint-varning: rgb(163 104 0 / 8%);
--tint-kritisk: rgb(213 62 52 / 7%);
--fokusring: #1b1a17;
--line-starkare: rgb(27 26 23 / 40%);
--skuggfarg: rgb(27 26 23 / 6%);
--skugga-liten: 0 1px 2px var(--skuggfarg);
--skugga-kort: 0 1px 2px rgb(27 26 23 / 4%), 0 14px 34px -18px rgb(27 26 23 / 16%);
--skugga-stor: 0 2px 4px rgb(27 26 23 / 5%), 0 18px 40px -12px rgb(27 26 23 / 22%);
--skugga-flyt: 0 2px 6px rgb(27 26 23 / 6%), 0 18px 40px -16px rgb(27 26 23 / 26%);
--duk-dimma: rgb(246 245 242 / 92%);
--overlaggsdimma: rgb(27 26 23 / 38%);
--marke-opacitet: .07;
--canvas: var(--yta-2);
--surface: var(--yta);
--surface-muted: var(--yta-ton-svag);
--ink: var(--text);
--muted: var(--text-svag);
--line: rgb(27 26 23 / 8%);
--line-strong: rgb(27 26 23 / 18%);
--blue: var(--accent);
--blue-hover: var(--accent-hover);
--blue-soft: rgb(27 26 23 / 6%);
--green: var(--god);
--green-soft: rgb(29 135 81 / 11%);
--amber: var(--varning);
--amber-soft: rgb(163 104 0 / 12%);
--red: var(--kritisk);
--red-soft: rgb(213 62 52 / 10%);
--radie-liten: 8px;
--radie-kort: 16px;
--radie-stor: 24px;
--radius: var(--radie-kort);
--falt-hojd: 48px;
--falt-grad: 16px;
--falt-radie: 14px;
--falt-pad: 14px;
--falt-fokus: 2px;
--tid-kvick: .12s;
--tid-snabb: .05s;
--kurva-standard: cubic-bezier(.4, 0, .2, 1);
--tid-normal: .2s;
--tid-lugn: .4s;
--kurva-panel: cubic-bezier(.55, 0, .35, 1);
--shadow-dialog: 0 24px 70px rgb(27 26 23 / 24%);
--font-brod: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-etikett: var(--font-brod);
color-scheme: light;
}
}
/* Utskriften, del två: vad som ritas — rollerna står i blocket ovanför, som
test_tema håller i lod med :root. Webbläsare skriver inte ut bakgrundsgrafik,
så varje fyllning försvinner och varje text landar på VITT papper med sin
egen färg. Mätt med emulerad print över nio sidor i båda lägena: 287 av
1 132 texter under AA-golvet, och 54 kromfynd (VIK-P3-62). */
@media print {
/* KROMET SKRIVS INTE UT. En utskrift ska bära sidans innehåll, inte appens
ram: hoppa-till-innehållet, snabblänkarna, menyknappen, huvudmenyn med
kontomenyn, toasterna och sidfoten är vägar att klicka på, och papper
klickar man inte på. De stod för 225 av de 287 texterna — sidfotens
länkkolumner och den alltid svarta toppens vita text, 1,00:1 och 1,71:1
mot pappret. Märket i toppen står kvar: det är en bild, och en utskrift
utan avsändare är sämre än en med.
!important, för mobilmediefrågan sätter samma egenskaper med två klasser
och en print-regel ska inte behöva vinna en specificitetstävling. */
.skip-link, .tema-snabb, .site-nav, .flikrad, .toasts, .site-footer { display: none !important; }
/* FYLLDA KONTROLLER RITAS SOM KANT, INTE SOM FYLLNING. Ett valt piller
tappar sin fyllning i utskriften men behöver sin ljusa text: vit på vitt,
uppmätt 1,00:1 på tavlans kaptensbricka, det valda snittpillret och den
valda lagfliken. Valet syns i stället som mörk text i en kant — samma
information, utan en droppe onödig färg.
Selektorerna är de KOMPONENTREGLERNAS EGNA, tecken för tecken. Första
försöket skrev `.svarval button[aria-pressed="true"]` (0,2,1) och förlorade
mot `.svarval .svar-utan[aria-pressed="true"]` (0,3,0) tjugo rader upp: den
valda "Inte svarat"-knappen behöll --yta på --muted och mätte 1,00:1 på
papper, 56 knappar på matchsidan. En print-regel som väger lättare än den
den ska ersätta ser ut som en rättelse och gör ingenting — provet mäter
därför numera, per selektor, att regeln faktiskt slog igenom.
Tre selektorer togs samtidigt bort: .kanalknapp.ar-vald fanns inte i någon
mall (död klass — hela den gamla anslagstavlans CSS är borta sedan
VIK-P3-69), .datumval-dag.ar-vald byggs av datumval.js i en
position: fixed-ruta som aldrig finns i en utskrift, och .spelare.ar-vald
sätts av tavlans skript medan man drar ett kort. Ingen av dem går att
rendera på en sida, och en regel som inget prov kan nå är inte en regel. */
/* Papper har ingen rörelse. Utan den här raden stod en knapp med mjuk
färgövergång (målbild v3) kvar i skärmfärgen när utskriften byggdes. */
*, *::before, *::after { transition: none !important; }
.snittknapp.ar-vald, .tabellknapp.ar-vald, .squad-period[aria-pressed="true"], .svarsfall.ar-ja:has(input:checked), .svarsfall.ar-nej:has(input:checked), .spelare-k, .laget-k, .kvitto-f {
color: var(--ink);
background: transparent;
border: 1px solid var(--line-strong);
}
/* Visningslägets banderoll är en varning, inte krom: den säger vems sidor
utskriften visar. Den ritas som en linje över innehållet i stället för en
bläckfylld remsa med vit text. */
.view-as-bar { color: var(--ink); background: transparent; border-bottom: 1px solid var(--line-strong); }
.view-as-bar strong { color: var(--ink); }
.view-as-bar .button { color: var(--ink); background: transparent; border-color: var(--line-strong); }
}
/* ── Rubrikrad med ikon ─────────────────────────────────────────────────────
Rubriken och en ikon på samma rad: kommentarsikonen på matchsidan, kalendern
på träningssidan. Ikonen står längst till höger, mitt för rubriktexten, utan
ring — en knapp med ram på egen rad under huvudet tog en hel rad på telefon
och hängde ensam i hörnet på skrivbord (Sami 2026-09-22). */
.rubrikrad { margin-bottom: .2rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.rubrikrad h1 { min-width: 0; margin-bottom: 0; }
.match-detail-header > div:first-child { flex: 1 1 auto; }
.samtalknapp { flex: none; width: 44px; height: 44px; margin-right: -.6rem; padding: 0; display: inline-grid; place-items: center; color: var(--ink); background: transparent; border: 0; border-radius: 999px; box-shadow: none; cursor: pointer; list-style: none; }
.samtalknapp::-webkit-details-marker { display: none; }
.samtalknapp:hover { color: var(--ink); background: var(--dampad); background-image: none; transform: none; }
.samtalknapp:focus-visible { outline: 3px solid var(--fokusring); outline-offset: 2px; }
/* Utan tråd är ikonen en details: formuläret öppnar i en ruta under ikonen,
högerställd, aldrig bredare än skärmen minus sidluften. */
.samtal { position: relative; flex: none; }
.samtal > details > form { position: absolute; z-index: 30; top: calc(100% + .4rem); right: 0; width: min(22rem, calc(100vw - 2rem)); padding: .8rem .9rem; display: grid; gap: .45rem; text-align: left; background: var(--surface); border: 0; border-radius: var(--radie-kort); box-shadow: var(--skugga-kort); box-shadow: var(--skugga-stor); }
.samtal > details > form label { font-size: .84rem; font-weight: 700; }
.samtal > details > form p { margin: 0; font-size: .84rem; }
/* ── Nyheten på översikten ──────────────────────────────────────────────────
Samma märkning som nyhetssidan: lagen som rubriker (h3 under kortets h2),
spelarna som punkter. Som ren text blev matchutskicket en klump med namn
(Sami 2026-09-22). */
.nyhettext h3 { margin: .7rem 0 .15rem; font-size: .88rem; font-weight: 700; letter-spacing: 0; }
.nyhettext h3:first-child { margin-top: 0; }
.nyhettext p { margin: 0 0 .5rem; }
/* Listan är ett block, INTE grid: ett grid-barn ger inga radboxar i den
-webkit-box som klipper kortet till tre rader, och hela laguttagningen
visades (granskning 2026-09-22, uppmätt 171 px oklippt mot 67 klippt). */
.nyhettext ul { margin: 0 0 .5rem; padding-left: 1.1rem; }
.nyhettext li { margin: .1rem 0; }
.nyhettext p:last-child, .nyhettext ul:last-child { margin-bottom: 0; }
.nyhettext a { color: var(--lank); }
.nyhettext .nyhetsbild { margin: .6rem 0; }
/* ── Svarssidan sparar direkt ───────────────────────────────────────────────
Valt läge som klass utöver :has(): äldre telefoner utan :has() visade inte
ens att trycket tagit. Kvittot under matchen säger Sparar, Sparat eller
felet; utan skript är det tomt och Spara-knappen gäller. */
.svarsfall.ar-vald .svarsikon { display: block; }
.svarsfall.ar-ja.ar-vald { color: var(--surface); background: var(--god-text); border-color: var(--god-text); }
.svarsfall.ar-nej.ar-vald { color: var(--surface); background: var(--kritisk-text); border-color: var(--kritisk-text); }
.svarskvitto { color: var(--muted); font-size: .84rem; font-weight: 700; }
/* Tomt kvitto lämnar flödet men INTE tillgänglighetsträdet: display: none
tar bort live-området, och första "Sparat" läses då inte upp. */
.svarskvitto:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.svarsmatch { position: relative; }
.svarskvitto.ar-sparat { color: var(--god-text); }
.svarskvitto.ar-fel { color: var(--kritisk-text); }
.svarsspara { flex-wrap: wrap; gap: .4rem; }
/* Nyheter: redigerbara innehållsblock med samma form i utkast och läsvy. */
.nyhetsblock{margin:1.25rem 0;padding:1.1rem 1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radie-kort);overflow-wrap:anywhere}
.nyhetsblock-etikett{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.nyhetsblock-etikett svg{flex-shrink:0}
.nyhetsblock h2,.nyhetsblock h3{margin:.6rem 0 1rem;font-family:var(--font-brod);font-size:1.25rem;letter-spacing:normal;text-transform:none}
.nyhetsblock-lag h2,.nyhetsblock-lag h3{font-size:1rem;line-height:1.35;margin:0 0 .6rem}
.nyhetsblock>p:last-child{margin-bottom:0}
.nyhetsblock-lag>ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem;padding:0;margin:1rem 0;list-style:none}
.nyhetsblock-lag>ul>li{padding:.65rem 0;border-bottom:1px solid var(--line);font-weight:600;font-size:.95rem}
/* Truppen utan banpar (VIK-P1-130): en kolumn, så att inga par läses in. */
.nyhetsblock-trupp>ul{grid-template-columns:minmax(0,1fr)}
.nyhetsblock-info,.nyhetsblock-samling{border-left:4px solid var(--accent)}
.nyhetseditor{min-width:0}
.nyhetseditor textarea{min-height:240px;resize:vertical}
.nyhetseditor button{min-height:44px}
.nyhetseditor-lag{margin:.5rem 0 .75rem;padding:.5rem .75rem;border:1px solid var(--line);border-radius:var(--radie-kort)}
.nyhetseditor-lag summary{cursor:pointer;min-height:44px;font-weight:700;display:flex;align-items:center}
.nyhetseditor-lag label{display:block;margin:.5rem 0}
.nyhetseditor-matchval{display:flex;gap:.5rem;flex-wrap:wrap}
.nyhetseditor-matchval select{flex:1;min-width:0;max-width:100%}
.nyhetseditor-lag p{font-size:.85rem}
@media(max-width:40rem){.nyhetsblock{padding:1rem}.nyhetsblock-lag>ul{grid-template-columns:minmax(0,1fr)}.nyhetseditor-matchval{flex-direction:column}}
.nyhetsbrev-preview{display:block;width:100%;height:620px;border:1px solid var(--line);border-radius:var(--radie-kort);background:#f2f2f2;margin:1rem 0}
.missing-email-card { width:100%; max-width:none; min-width:0; box-sizing:border-box; }
#broadcast-draft-form { width:100%; min-width:0; }
#broadcast-draft-form > .form-card { width:100%; max-width:none; min-width:0; box-sizing:border-box; }
.broadcast-send-card, .guardian-routed-card { width:100%; max-width:none; min-width:0; box-sizing:border-box; }
.broadcast-preview-dialog { width:min(94vw, 52rem); max-width:calc(100vw - 1rem); max-height:92dvh; overflow:auto; border:1px solid var(--line); border-radius:var(--radie-stor); padding:1rem; background:var(--surface); color:var(--text); box-sizing:border-box; }
.broadcast-preview-dialog::backdrop { background:rgb(0 0 0 / .55); }
.broadcast-preview-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.broadcast-preview-dialog-head h2 { margin:0; font-size:1.15rem; }
.broadcast-preview-dialog .nyhetsbrev-preview { height:min(68dvh, 680px); margin:.75rem 0; }
.broadcast-send-actions { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.nyhetsbrev-preview { max-width:100%; }
@media (max-width: 700px) {
.nyhetsbrev-preview { height:min(72vh, 620px); }
#broadcast-draft-form .form-actions { flex-wrap:wrap; }
.broadcast-preview-dialog { width:calc(100vw - 1rem); max-width:calc(100vw - 1rem); max-height:94dvh; padding:.75rem; }
.broadcast-preview-dialog .nyhetsbrev-preview { height:68dvh; }
}
.broadcast-edit-details > summary { cursor:pointer; list-style:revert; }
.broadcast-edit-details > summary h2 { display:inline; margin:0; font-size:1rem; }
.broadcast-edit-details[open] > summary { margin-bottom:1rem; }
.nyhetseditor [hidden]{display:none!important}
.nyhetseditor-blocklista{display:grid;gap:.75rem;margin:.75rem 0}
.nyhetseditor-block{padding:.75rem;border:1px solid var(--line);border-radius:var(--radie-kort);min-width:0}
.nyhetseditor-blockhuvud{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.nyhetseditor-blockknappar{display:flex;gap:.25rem;flex-wrap:wrap}
.nyhetseditor-blockknappar button{font-size:.8rem;padding:0 .5rem}
.nyhetseditor-block textarea{min-height:100px}
.nyhetseditor-source{margin-bottom:.5rem}
/* Nyheter: skrivytan visar formateringen, extra innehåll är ett tillval. */
.nyhetseditor .textverktyg { padding:.5rem; margin:0; border:1px solid var(--line); border-radius:var(--radie-kort); background:var(--dampad); align-items:center; }
.nyhetseditor-blocklista { margin:.75rem 0; }
.nyhetseditor-block { padding:0; overflow:visible; background:var(--surface); }
.nyhetseditor-blockhuvud { margin:0; padding:.4rem .8rem; border-bottom:1px solid var(--line); font-size:.8rem; color:var(--muted); }
.nyhetseditor-skrivyta { max-width:none; border:0; border-radius:0 0 var(--radie-kort) var(--radie-kort); min-height:220px; padding:1.1rem; outline:none; overflow-wrap:anywhere; white-space:pre-wrap; }
.nyhetseditor-skrivyta:focus { box-shadow:inset 0 0 0 2px var(--accent); border-radius:0 0 var(--radie-kort) var(--radie-kort); }
.nyhetseditor-skrivyta:empty::before { content:attr(data-placeholder); color:var(--muted); pointer-events:none; }
.nyhetseditor-skrivyta>:first-child { margin-top:0; }
.nyhetseditor-skrivyta>:last-child { margin-bottom:0; }
.nyhetseditor-skrivyta img { max-width:100%; height:auto; }
.nyhetseditor-ordna summary,.nyhetseditor-avancerat summary { cursor:pointer; min-height:36px; display:flex; align-items:center; }
.nyhetseditor-ordna summary { justify-content:flex-end; }
.nyhetseditor-ordna[open] { flex-basis:100%; }
.nyhetseditor-avancerat { font-size:.8rem; color:var(--muted); margin:.5rem 0; }
.nyhetseditor-symboler { position:relative; }
.nyhetseditor-symboler summary { display:flex; align-items:center; list-style:none; }
.nyhetseditor-symboler>div { position:absolute; top:100%; right:0; z-index:5; display:grid; grid-template-columns:repeat(8, 40px); gap:2px; max-height:16rem; overflow-y:auto; padding:.4rem; border:1px solid var(--line); border-radius:var(--radie-kort); background:var(--surface); box-shadow:var(--skugga-stor); }
.nyhetseditor-symboler button { width:40px; height:40px; padding:0; border:0; border-radius:10px; background:transparent; font-size:1.25rem; line-height:1; cursor:pointer; }
.nyhetseditor-symboler button:hover { background:var(--dampad); }
.nyhetseditor-tillval { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 1rem; }
.nyhetseditor-hjalp { padding-left:1.1rem; font-size:.88rem; line-height:1.6; }
.nyhetseditor-hjalp li+li { margin-top:.6rem; }
.reminder-delivery-main small { display:block; color:var(--muted); }
@media(max-width:40rem){.nyhetseditor-skrivyta{padding:.8rem;min-height:200px}
/* Symbolerna som ett ark ovanför flikraden: som en ruta vid knappen spillde de
10 px utanför skärmen vid 320 px. */
.nyhetseditor-symboler>div{position:fixed;z-index:45;left:1rem;right:1rem;top:auto;bottom:calc(6rem + env(safe-area-inset-bottom, 0px));width:auto;grid-template-columns:repeat(auto-fill,40px);justify-content:center;box-shadow:var(--skugga-flyt)}}
.broadcast-deliveries .reminder-delivery-row { grid-template-columns:5.5rem minmax(9rem,1fr) minmax(10rem,1fr) auto minmax(12rem,1fr); }
.broadcast-deliveries .reminder-delivery-main small { white-space:normal; overflow-wrap:anywhere; }
.broadcast-deliveries .reminder-delivery-row>.muted { overflow-wrap:anywhere; }
@media(max-width:64rem){
.broadcast-deliveries .reminder-delivery-row { grid-template-columns:4.5rem minmax(0,1fr) auto; gap:.2rem .45rem; }
.broadcast-deliveries .reminder-delivery-email { grid-column:2/4; grid-row:2; }
.broadcast-deliveries .reminder-delivery-row>.muted { grid-column:2/4; grid-row:3; }
}
.payment-qr-register-header { align-items: end; }
.payment-qr-print-controls { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.payment-qr-print-controls nav { display: flex; gap: .25rem; }
.payment-qr-print-controls nav a { min-width: 2rem; text-align: center; padding: .3rem; border-radius: .4rem; text-decoration: none; }
.payment-qr-print-controls nav a[aria-current="page"] { background: #eee; color: #111; box-shadow: inset 0 0 0 1px #888; }
.personal-qr-sheet { max-width: 70rem; margin: 1.5rem auto; padding: 1rem; background: #fff; color: #111; }
.personal-qr-sheet-heading { display: flex; justify-content: space-between; border-bottom: 1px solid #aaa; padding-bottom: .45rem; margin-bottom: .65rem; font-size: .85rem; }
.personal-qr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.personal-qr-card { min-width: 0; min-height: 8rem; display: flex; align-items: center; gap: .45rem; border: 1px dashed #aaa; padding: .4rem; break-inside: avoid; }
.personal-qr-code { width: 42%; flex: 0 0 42%; aspect-ratio: 1; }
.personal-qr-code svg { display: block; width: 100%; height: 100%; }
.personal-qr-member { min-width: 0; display: flex; flex-direction: column; gap: .25rem; overflow-wrap: anywhere; }
.personal-qr-member strong { font-size: clamp(.8rem, 1.5vw, 1.1rem); line-height: 1.1; }
.personal-qr-member span { font: .62rem ui-monospace, SFMono-Regular, Menlo, monospace; color: #333; }
.personal-qr-member .personal-qr-amount { font: 700 .95rem/1.1 system-ui, sans-serif; color: #111; }
.personal-qr-card.is-empty { border-color: transparent; }
.personal-qr-empty { width: 42%; aspect-ratio: 1; }
.personal-qr-warning { color: #9a3412; }
.payment-qr-download { white-space: nowrap; }
.payment-qr-downloads { display: flex; gap: .5rem; flex-wrap: wrap; }
.payment-qr-download-all { background: #111; border-color: #111; color: #fff; white-space: nowrap; }
.payment-qr-download-all:hover { background: #333; border-color: #333; color: #fff; }
@media (max-width: 600px) {
.payment-qr-register-header { align-items: start; }
.personal-qr-sheet { overflow-x: auto; padding: .5rem; }
.personal-qr-grid { min-width: 32rem; }
}
/* QR-registrets utskrift. Avgränsad till registersidan (VIK-P1-107): utan
:has() gömde blocket visningsbannern och nollade main på VARJE utskriven
sida, och @page satte A4 med 8 mm marginal för hela appen. */
@page qrark { size: A4 portrait; margin: 8mm; }
@media print {
body:has(.personal-qr-sheet) { background: #fff !important; }
.personal-qr-sheet { page: qrark; }
body:has(.personal-qr-sheet) :is(.skip-link, .view-as-bar, .site-header, .site-nav, .breadcrumbs, .payment-qr-register-header, .site-footer, .flikrad) { display: none !important; }
body:has(.personal-qr-sheet) main, .personal-qr-sheet { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; }
.personal-qr-sheet { height: 280mm; }
.personal-qr-sheet-heading { margin-bottom: 4mm; font-size: 10pt; }
.personal-qr-grid { height: 264mm; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 2mm; }
.personal-qr-card { min-height: 0; border: .25mm dashed #999; padding: 2mm; }
.personal-qr-member strong { font-size: 14pt; }
.personal-qr-member span { font-size: 7pt; }
.personal-qr-member .personal-qr-amount { font-size: 11pt; }
.personal-qr-warning { display: block; }
}
/* Träningspasset (prototyp v4, Sami 2026-10-06): en lista, tryck på namnet
prickar, betalningen en liten ikon, ··· för resten. Rubriken, metaraden och
kapaciteten i ett tätt block; inga förklaringstexter. */
.ikonsprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.pi { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pass-huvud { margin-bottom: 1rem; }
.pass-titelrad { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.pass-titelrad h1 { margin: 0; min-width: 0; }
.pass-verktyg { display: flex; align-items: center; gap: .4rem; flex: none; }
.pass-ikonknapp { width: 40px; height: 40px; display: inline-grid; place-items: center; color: var(--ink); border-radius: 50%; transition: background var(--tid-snabb); }
.pass-ikonknapp:hover { background: var(--dampad); }
.pass-ikonknapp svg.pi { width: 20px; height: 20px; stroke-width: 1.8; }
.pass-lagg-till { min-height: 40px; height: 40px; padding: 0 1rem; gap: .35rem; }
.pass-meta { margin: .2rem 0 0; color: var(--muted); font-size: .92rem; }
.pass-leder { color: var(--ink); font-weight: 600; }
.pass-installt { color: var(--kritisk-text); font-weight: 700; }
.pass-huvud .passnotering { margin: .5rem 0 0; }
.kapacitet { margin-top: .75rem; display: grid; gap: .35rem; max-width: 32rem; }
.kapacitet-rad { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--muted); font-size: .85rem; }
.jag-leder { margin-left: auto; }
.kapacitet-rad b { color: var(--ink); }
.kapacitet-stapel { height: 6px; border-radius: 9px; background: var(--dampad); overflow: hidden; }
.kapacitet-stapel i { display: block; height: 100%; max-width: 100%; border-radius: 9px; background: var(--god); transition: width .45s var(--kurva-panel); }
.passkort { margin-bottom: 1rem; padding: .75rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); align-items: start; gap: .6rem; background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.personkort { display: grid; gap: .35rem; padding: .5rem .5rem .5rem .75rem; background: var(--canvas); border-radius: var(--radie-kort); }
.personkort .swishrad { padding: 0; background: none; }
.bokad-rad { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.bokad-status { display: inline-flex; align-items: center; gap: .45rem; color: var(--god-text); font-weight: 700; }
.bokad-status.ar-ko { color: var(--varning-text); }
.lank-knapp { padding: 0; min-height: 32px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.swishrad { position: relative; display: flex; align-items: center; gap: .6rem; padding: .65rem .75rem; background: var(--canvas); border-radius: var(--radie-kort); }
.swishrad > span { min-width: 0; flex: 1; display: grid; }
.swishrad small { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.swish-qr-val > summary { width: 36px; height: 36px; display: grid; place-items: center; list-style: none; border-radius: 50%; cursor: pointer; color: var(--ink); }
.swish-qr-val > summary::-webkit-details-marker { display: none; }
.swish-qr-val > summary:hover { background: var(--dampad); }
.swish-qr-val[open] > .swish-qr { position: absolute; z-index: 5; right: 0; top: calc(100% + .4rem); padding: .75rem; background: var(--surface); border-radius: var(--radie-kort); box-shadow: var(--skugga-stor); }
/* Fritidskortet (Sami 2026-10-09): samma ruta som QR-koden, med referensen
att ange i e-tjänsten, vägen dit och "Jag har betalat". */
.fritidskort-val > summary { list-style: none; cursor: pointer; }
.fritidskort-val > summary::-webkit-details-marker { display: none; }
.fritidskort-val[open] > .fritidskort-ruta { position: absolute; z-index: 5; right: 0; top: calc(100% + .4rem); padding: .75rem; display: grid; gap: .5rem; min-width: 14rem; background: var(--surface); border-radius: var(--radie-kort); box-shadow: var(--skugga-stor); }
.fritidskort-ruta form { display: grid; }
.fritidskort-ref { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .5rem; }
.fritidskort-ref small { grid-column: 1 / -1; color: var(--muted); font-size: .8rem; }
.fritidskort-ref b { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Rutorna (QR och Fritidskortet) sticker ut under raden; listans
overflow: hidden klippte bort dem på sista raden. */
#avgifter .reminder-delivery-list { overflow: visible; }
/* Tre val bredvid texten får inte plats på en telefon: knapparna går till en
egen rad under namnet, i höger kant. */
@media (max-width: 34rem) {
.my-charge-row:has(.fritidskort-val) { grid-template-columns: minmax(0, 1fr) auto; }
.my-charge-row:has(.fritidskort-val) .my-charge-atgard { grid-column: 1 / -1; justify-content: flex-end; }
}
.swishknapp { flex: none; }
.vem { display: flex; flex-wrap: wrap; gap: .4rem; }
.narvaro { display: grid; gap: .6rem; }
.narvarofilter { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: 14px; background: var(--dampad); max-width: 32rem; }
.narvarofilter button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font: inherit; font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--tid-snabb), color var(--tid-snabb); }
.narvarofilter button.ar-ja { color: var(--god-text); }
.narvarofilter button.ar-kr { color: var(--varning-text); }
.narvarofilter button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--skugga-liten); }
.passlista { padding: .25rem .6rem; background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.passgrupp { padding: .8rem .25rem .2rem; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.deltagare { min-height: 52px; padding: 0 .25rem; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 32px; align-items: center; gap: .6rem; border-bottom: 1px solid var(--line); border-radius: 10px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background var(--tid-snabb); }
.deltagare:hover { background: var(--dampad); }
.deltagare:focus-visible { outline: 2px solid var(--fokusring); outline-offset: -2px; }
.deltagare[hidden] { display: none; }
.dnamn { min-width: 0; display: grid; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dstatus { color: var(--varning-text); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.dstatus:empty { display: none; }
.ar-absent .dstatus { color: var(--kritisk-text); }
.ar-ko .dstatus { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .8rem; }
.ar-ko { opacity: .75; cursor: default; }
.prick { width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid var(--line-strong); border-radius: 50%; color: transparent; transition: background .25s var(--kurva-panel), border-color .25s, color .2s, transform .2s var(--kurva-panel); }
.prick svg.pi { width: 13px; height: 13px; stroke-width: 3.2; }
.ar-present .prick, .ar-har .prick { color: var(--surface); background: var(--god); border-color: var(--god); }
/* Prickens bock ritas när den sätts, i stället för att pricken studsar (VIK-P2-133). */
.ar-present .prick svg path, .ar-har .prick svg path { stroke-dasharray: 24; animation: bock-rita-in var(--tid-lugn) var(--kurva-expo); }
@keyframes bock-rita-in { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.ar-sick .prick, .ar-absent .prick { border-style: dashed; }
.betal { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.betal svg.pi { width: 15px; height: 15px; }
.betal--ej { color: var(--varning-text); background: var(--amber-soft); }
.betal--ok { color: var(--god-text); }
.deltagare .mer { flex: none; align-self: center; width: 32px; height: 32px; min-height: 32px; min-width: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.deltagare .mer:hover { background: var(--dampad); color: var(--ink); }
.tomrad { margin: 0; padding: .9rem .25rem; color: var(--muted); }
.passfot { position: sticky; bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); z-index: 5; display: none; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem .45rem .45rem 1rem; border-radius: 999px; background: var(--ink); color: var(--canvas); font-size: .88rem; font-weight: 600; }
.passfot .button { min-height: 38px; height: 38px; gap: .3rem; }
.passmeny { padding: .4rem .6rem .8rem; display: grid; }
.passdialog .passmeny button { justify-content: flex-start; width: 100%; min-height: 48px; padding: 0 .75rem; display: flex; align-items: center; gap: .75rem; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer; }
.passmeny button:hover { background: var(--dampad); }
.passmeny button svg.pi { width: 18px; height: 18px; color: var(--muted); }
.passmeny button[hidden] { display: none; }
.passmeny .fara, .passmeny .fara svg.pi { color: var(--kritisk-text); }
.passdialog { width: min(94vw, 30rem); }
.valista { max-height: 55vh; overflow-y: auto; display: grid; }
.valrad { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 0 .25rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: opacity .2s, transform .2s; }
.valrad:hover { background: var(--dampad); }
.valrad.ar-vald { opacity: .4; transform: translateX(16px); }
.valrad[hidden] { display: none; }
.plusrund { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--profil); color: var(--pa-profil); }
.plusrund svg.pi { width: 12px; height: 12px; stroke-width: 3; }
.historik { gap: 0; }
.historikrad { display: flex; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.historikrad time { flex: none; width: 6.5rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.historikrad small { display: block; color: var(--muted); }
@media (max-width: 48rem) {
.pass-verktyg .pass-lagg-till { display: none; }
.passfot { display: flex; }
}
@media (min-width: 60rem) {
/* Datorn: samma lista i två spalter, siffrorna på en rad. */
.passlista { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.75rem; padding: .35rem .9rem; }
.passlista > .passgrupp, .passlista > .tomrad { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .prick, .kapacitet-stapel i, .valrad { transition: none; animation: none !important; } }
/* Kommunens blankett, rad för rad som i Interbook Go. */
.kommunruta { margin-block: 1rem; padding: 1rem; background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); overflow-x: auto; }
.kommunruta h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
.kommuntabell { width: 100%; border-collapse: collapse; font-size: .9rem; }
.kommuntabell th { padding: .4rem .5rem; text-align: right; color: var(--muted); font-size: .8rem; font-weight: 700; border-bottom: 1px solid var(--line); }
.kommuntabell td { padding: .45rem .5rem; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line); }
.kommuntabell th:first-child, .kommuntabell td:first-child { text-align: left; }
.kommuntabell small { color: var(--muted); }
.valrad:focus-visible { outline: 2px solid var(--fokusring); outline-offset: -2px; }
.passfot .button:focus-visible { outline: 2px solid var(--canvas); outline-offset: 2px; }
/* Tom plats säger vad den är (prototypen 2026-10-06): "Tom plats", "Reserv". */
.sida-uttagning .plats:not(:has(.spelare)) .platsinnehall { grid-template-columns: minmax(0, 1fr) auto; }
.sida-uttagning .plats:not(:has(.spelare)) .platsinnehall::before { content: "Tom plats"; color: var(--muted); font-size: .88rem; }
.sida-uttagning .reservplats:not(:has(.spelare)) .platsinnehall::before { content: "Reserv"; }
.kolumnmotstand strong { color: var(--ink); font-size: .9rem; }
/* Mina sidor: rubrik och undermeny på var sin tät rad, en del i taget. */
.mina-huvud { margin-bottom: .75rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.mina-huvud h1 { margin: 0; }
.minaflikar { margin-bottom: 1rem; display: flex; gap: 2px; padding: 3px; width: fit-content; max-width: 100%; overflow-x: auto; border-radius: 14px; background: var(--dampad); scrollbar-width: none; }
.minaflikar a { min-height: 36px; padding: 0 1rem; display: inline-flex; align-items: center; gap: .35rem; border-radius: 11px; color: var(--muted); font-size: .9rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background var(--tid-snabb), color var(--tid-snabb); }
.minaflikar a span { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.minaflikar a.ar-vald { background: var(--surface); color: var(--ink); box-shadow: var(--skugga-liten); }
/* Med byte.js glider en platta mellan flikarna (VIK-P2-133); flikens egen
bakgrund behövs bara utan skript. */
.js [data-byte-vaxel] > .ar-vald, .js [data-byte-vaxel] > [aria-pressed="true"] { background: transparent; box-shadow: none; }
.minaflikar[data-byte-vaxel] > .byte-markor { border-radius: 11px; }
.squad-periods[data-byte-vaxel] > .byte-markor { border-radius: 999px; }
.js .minaflikar.ar-aktiv ~ .minapanel:not(.ar-vald) { display: none; }
.minapanel { margin-bottom: 1.25rem; }
.minapanel .account-history { margin-top: .75rem; }
.minapanel-rad { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.minapanel-rad:has(form) { margin-bottom: .6rem; }
.minapanel-rad h2 { margin: 0; font-size: 1.15rem; }
.kontokort { margin-bottom: .75rem; padding: .35rem 1rem .9rem; background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); max-width: 40rem; }
.kontorad { min-height: 52px; padding: .45rem 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--line); }
.kontorad > span:first-child { min-width: 0; display: grid; overflow-wrap: anywhere; }
.kontorad small { color: var(--muted); font-size: .82rem; }
.telefonform { padding-top: .75rem; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.telefonfalt { flex: 1 1 18rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; }
.telefonfalt .form-field { margin: 0; }
.kontokort .account-reminder-setting { margin: 0; padding: .7rem 0; background: none; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); }
.kontokort > .account-reminder-setting:last-child { border-bottom: 0; }
/* Notisvalen: en rad per sort, en ruta per kanal i egna kolumner som linjerar
under rubrikerna (Sami 2026-10-09). */
/* Konto-fliken: kontot och notiserna i två kolumner på datorn, som de andra
flikarna tar hela bredden (Sami 2026-10-09). */
.kontolayout { display: grid; gap: .75rem; }
.kontokolumn { min-width: 0; display: grid; gap: .75rem; align-content: start; }
.kontokolumn > .kontokort, .kontokolumn > .notice-card { margin-bottom: 0; }
@media (min-width: 60rem) {
.kontolayout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.kontolayout .kontokort { max-width: none; }
}
.notis-antal { color: var(--muted); font-size: .82rem; font-weight: 400; }
.notisval .notiskort .kontorad { border-bottom: 1px solid var(--line); }
.notisval { display: grid; }
.notisval-rad { min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem; align-items: center; border-bottom: 1px solid var(--line); }
.notisval-rad:last-of-type { border-bottom: 0; }
.notisval-rad > :not(:first-child) { justify-self: center; }
.notisval-rad input { width: 24px; height: 24px; margin: 0; accent-color: var(--green); cursor: pointer; }
.notisval-huvud { min-height: 44px; }
.notisval-huvud span { color: var(--muted); font-size: .82rem; }
.notisknappar { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.notiskort .kontorad { border-bottom: 0; }
/* Exportikonen: menyn öppnas åt höger från ikonen, och på telefon står
ikonerna på samma rad som knapparna i stället för i ett eget rutnät. */
.exportmeny .radmeny-panel { left: 0; right: auto; }
@media (max-width: 48rem) {
.compact-header .header-actions:has(> .exportmeny) { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.compact-header .header-actions:has(> .exportmeny) > .button { width: auto; }
.compact-header .header-actions:has(> .exportmeny) > .button,
.compact-header .header-actions:has(> .exportmeny) > form { flex: 1 1 auto; width: auto; }
.compact-header .header-actions:has(> .exportmeny) > form .button { width: 100%; }
.compact-header .header-actions > .exportmeny, .compact-header .header-actions > .radmeny { flex: none; }
}
/* Aktivitetsstöd (2026-10-06): tal, kommunens tabell och passen i en tät
tabell. Reglerna bakom ⓘ, inte som brödtext. */
.stod-huvud { margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.stod-titel { display: flex; align-items: center; gap: .4rem; }
.stod-titel h1 { margin: 0; }
.stod-period { display: flex; align-items: center; gap: .4rem; }
.stod-period select { width: auto; min-height: 36px; padding: 0 2rem 0 .75rem; font-size: .9rem; }
.stod-tal { margin-bottom: .75rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .75rem; }
.stod-tal > div { padding: .8rem 1rem; background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); color: var(--muted); font-size: .92rem; }
.stod-tal span { display: block; margin-bottom: .1rem; color: var(--ink); font-weight: 700; }
.stod-tal b { color: var(--ink); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.stod-saknas { margin-bottom: .75rem; background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.stod-saknas > summary { min-height: 48px; padding: 0 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; cursor: pointer; list-style: none; }
.stod-saknas > summary::-webkit-details-marker { display: none; }
.stod-saknas[open] > summary { border-bottom: 1px solid var(--line); }
.stod-saknas .aktivitet-kompletteringar, .stod-saknas .stod-tabellram { box-shadow: none; padding: 0 .5rem .5rem; }
.stod-antal { min-width: 1.6rem; padding: 0 .45rem; color: var(--muted); font-weight: 700; text-align: center; background: var(--dampad); border-radius: 999px; font-variant-numeric: tabular-nums; }
.stod-tabellram { overflow-x: auto; background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.stod-tabell { width: 100%; border-collapse: collapse; font-size: .88rem; }
.stod-tabell th { padding: .55rem .75rem; text-align: left; color: var(--muted); font-size: .78rem; font-weight: 700; border-bottom: 1px solid var(--line); white-space: nowrap; }
.stod-tabell td { padding: .5rem .75rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.stod-tabell tr:last-child td { border-bottom: 0; }
.stod-tabell .h { text-align: right; font-variant-numeric: tabular-nums; }
.stod-tabell a { color: var(--ink); font-weight: 600; }
.stod-ok { color: var(--god-text); font-weight: 700; white-space: nowrap; }
.stod-nej { color: var(--muted); font-size: .82rem; }
.datornotis { display: none; }
@media (max-width: 48rem) {
.datornotis { margin: 0 0 .6rem; padding: .1rem .2rem .1rem .7rem; line-height: 1.2; display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .85rem; background: var(--dampad); border-radius: 999px; width: fit-content; }
.datornotis button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
}
/* Avgifter (2026-10-06): sorterna som flikar med standardbelopp, talen på en
rad, beloppet ändras direkt i raden. Förklaringarna bakom ⓘ. */
.avgiftsval { margin-bottom: .75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.avgiftsval > a { min-height: 34px; padding: 0 .85rem; display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; background: var(--dampad); color: var(--ink); font-size: .88rem; font-weight: 700; text-decoration: none; }
.avgiftsval > a span { color: var(--muted); font-weight: 600; }
.avgiftsval > a[aria-current="page"] { background: var(--ink); color: var(--canvas); }
.avgiftsval > a[aria-current="page"] span { color: inherit; opacity: .75; }
.avgiftssok { margin-left: auto; width: 12rem; min-height: 34px; padding: 0 .85rem; font-size: .88rem; border-radius: 999px; }
.ingen-traff { padding: .75rem 0; }
.avgiftsperiod select { width: auto; min-height: 34px; padding: 0 2rem 0 .75rem; font-size: .88rem; }
.avgiftstal { margin-bottom: .75rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); overflow: hidden; }
.avgiftstal > button { padding: .6rem .85rem; display: grid; justify-content: start; justify-items: start; align-content: start; text-align: left; color: var(--muted); font: inherit; font-size: .8rem; background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; cursor: pointer; }
.avgiftstal > button:first-child { border-left: 0; }
.avgiftstal > button[aria-pressed="true"] { background: var(--dampad); }
.avgiftstal > button:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.avgiftstal strong { color: var(--ink); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.avgiftstal .is-failed strong { color: var(--kritisk-text); }
.avgiftstal .is-sent strong { color: var(--god-text); }
.charge-amount-form { display: inline-flex; align-items: center; gap: .25rem; }
.charge-amount-form input { width: 5.5rem; min-height: 34px; padding: 0 .5rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 48rem) {
.avgiftstal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.avgiftstal > button:nth-child(3) { border-left: 0; }
.avgiftstal > button:nth-child(n+3) { border-top: 1px solid var(--line); }
.avgiftssok { margin-left: 0; flex: 1 1 calc(100% - 9rem); width: auto; min-width: 0; }
}
@media print { .avgiftsval, .stod-period, .datornotis { display: none !important; } }
/* Bekräftelsen före en bokning: liten, mitt på, en mening och två knappar. */
.bekrafta-dialog { width: min(92vw, 24rem); }
.bekrafta-text { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
/* Passkortet: en rad per person med egen Boka-knapp, två i bredd på datorn. */
.bokakort { min-height: 56px; padding: .5rem .5rem .5rem .9rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; background: var(--canvas); border-radius: var(--radie-kort); }
.bokakort > span { min-width: 0; display: grid; }
.bokakort strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bokakort small { color: var(--muted); font-size: .82rem; }
.bokakort .button { flex: none; min-height: 40px; }
.pass-atgarder { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; }
.dagkort > .kortdatum { align-self: center; align-content: center; }
@media (max-width: 48rem) {
.pass-atgarder .edit-session { width: 36px; padding: 0; justify-content: center; }
.pass-atgarder .edit-session span { display: none; }
}
.pass-atgarder .edit-session { gap: .35rem; }
/* Medlemsraden (Sami 2026-10-06: "varför kan det inte bli snygga linjer"):
e-post, telefon och hemskärm har var sin fasta plats, tom när uppgiften
saknas, och rollerna står i en fast kolumn — så ikonerna linjerar i hela listan. */
.member-list .member-row { grid-template-columns: minmax(0, 1fr) auto auto var(--medlem-knapp-bredd); }
.member-list .contact-status { display: grid; grid-template-columns: repeat(3, 2rem); justify-items: center; gap: .15rem; }
.member-list .kontaktplats { width: 1px; height: 1px; }
.member-list .contact-status .hemskarm-marke { width: 2rem; justify-content: center; }
@media (min-width: 48.01rem) { .member-list .member-flags { width: 10rem; justify-content: flex-end; } }
@media (max-width: 700px), (pointer: coarse) { .member-list .contact-status { grid-template-columns: repeat(3, 40px); } .member-list .contact-status .hemskarm-marke { width: 40px; } }
/* Kontoraderna: fasta kolumner så att e-post och märken står i linje även när
ett märke är bredare ("Via vårdnadshavare"). */
@media (min-width: 60.01rem) {
.account-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 11rem 6rem; }
.account-row > :nth-child(3) { justify-self: end; }
}
/* Importsidan: två lika breda kort sida vid sida, listan full bredd under. */
.importkort { margin-bottom: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: .75rem; }
.importkort .form-card { margin: 0; display: grid; align-content: start; gap: .5rem; }
.importkort h2 { margin: 0; font-size: 1.05rem; }
.importkort p { margin: 0; }
.importkort form:not(.compact-upload-form) { justify-self: start; }
.sasonglista { background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); overflow: hidden; }
.sasongrad { min-height: 56px; padding: .55rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--line); }
.sasongrad:last-child { border-bottom: 0; }
.sasongrad > span { min-width: 0; display: grid; }
.sasongrad small { color: var(--muted); font-size: .82rem; }
.avstamning { margin-bottom: 1rem; display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; gap: .75rem; }
.avstamning > .payment-import-card { margin: 0; max-width: none; }
.avstamning-lage { padding: 1rem; display: grid; gap: .4rem; background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.avstamning-lage h2 { margin: 0 0 .2rem; font-size: 1rem; }
.avstamning-lage p { margin: 0; font-size: .85rem; }
.lagerad { min-height: 44px; padding: 0 .75rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--ink); text-decoration: none; background: var(--canvas); border-radius: var(--radie-kort); }
.lagerad strong { font-variant-numeric: tabular-nums; }
@media (max-width: 48rem) { .avstamning { grid-template-columns: minmax(0, 1fr); } }
.bekrafta-dialog .matchdialog-fot { flex-wrap: wrap; }
/* Bekräftelsen står mitt på skärmen även på telefon — den är en fråga, inte ett blad. */
@media (max-width: 48rem) {
.matchdialog.bekrafta-dialog { width: min(92vw, 24rem); max-height: none; margin: auto; border-radius: var(--radie-stor); border-bottom: 1px solid transparent; }
.matchdialog.bekrafta-dialog[open] { animation: dialog-in var(--tid-lugn) var(--kurva-expo); }
}
/* Medlemsklasserna på avgiftssidan: en rad per klass, redigerbar på plats. */
.klasslista { gap: .35rem; }
/* Varje rad är ett eget rutnät: knappkolumnen har fast bredd, annars blir
Spara och Lägg till olika breda och kolumnerna ovanför glider isär. */
.klassrad { margin: 0; display: grid; grid-template-columns: minmax(0, 1.6fr) 7.5rem minmax(0, 1fr) 6.5rem 5.5rem; align-items: center; gap: .4rem; }
.klassrad > .button { justify-self: stretch; }
/* Raden Efter ålder: vuxen och ungdom bredvid varandra i årsavgiftens kolumn. */
.klassbelopp { display: flex; gap: .25rem; }
.klassbelopp input { min-width: 0; flex: 1; padding-inline: .45rem; }
.klasskryss { display: flex; justify-content: center; }
.klasskryss input { width: 22px; height: 22px; }
.klassrad input, .klassrad select { min-height: 36px; }
.klassrad--huvud { color: var(--muted); font-size: .78rem; font-weight: 700; }
@media (max-width: 40rem) { .klassrad { grid-template-columns: 1fr 7.5rem; } }
/* Skickaflödet (skicka.js): fråga → laddning → bock, eller fel. Ett steg i
taget i samma dialog, centrerad även på telefon (Sami 2026-10-06). */
.skickadialog { width: min(92vw, 25rem); margin: auto; border-bottom: 1px solid var(--line-strong); }
.skickadialog[open] { animation: dialog-in var(--tid-lugn) var(--kurva-expo); }
.skicka-steg { display: none; justify-items: center; gap: .55rem; padding: 1.5rem 1.25rem 1.25rem; text-align: center; }
.skickadialog[data-steg="fraga"] .skicka-steg-fraga,
.skickadialog[data-steg="skickar"] .skicka-steg-skickar,
.skickadialog[data-steg="klart"] .skicka-steg-klart,
.skickadialog[data-steg="fel"] .skicka-steg-fel { display: grid; animation: steg-in .26s cubic-bezier(.2,.8,.2,1); }
@keyframes steg-in { from { opacity: 0; transform: translateY(6px); } }
.skicka-steg h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.skicka-steg p { margin: 0; color: var(--muted); font-size: .95rem; }
.skicka-ikon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--profil-svag); }
.skicka-ikon-fel { color: var(--kritisk-text); background: var(--dampad); }
.skicka-fot { width: 100%; margin-top: .6rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.skicka-steg-fel .skicka-fot { grid-template-columns: 1fr; }
.skicka-steg-skickar, .skicka-steg-klart { min-height: 11rem; align-content: center; }
.skicka-snurra { width: 44px; height: 44px; border-radius: 50%; border: 3.5px solid var(--dampad); border-top-color: var(--ink); animation: snurra .8s linear infinite; }
.skicka-bock { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; color: var(--god-text); background: var(--tint-god); animation: sparat-bock .45s cubic-bezier(.2,.8,.2,1); }
.skicka-bock path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: bock-rita .35s .15s ease-out forwards; }
@keyframes bock-rita { to { stroke-dashoffset: 0; } }
.skicka-steg-klart p { color: var(--ink); font-weight: 700; }
.toast-text a { color: inherit; font-weight: 700; white-space: nowrap; }
.ar-uppdaterad > :first-child { animation: plats-ny 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .skickadialog[open], .skicka-steg, .skicka-bock, .skicka-bock path { animation: none !important; stroke-dashoffset: 0; } .skicka-snurra { animation-duration: 2s; } }
/* Nytt utskick i en modal (Sami 2026-10-06), helskärm på telefon. */
.skrivdialog { width: min(96vw, 68rem); }
.skrivform .utskicksform { padding: 1rem; }
.skriv-fot { position: sticky; z-index: 2; bottom: 0; padding: .75rem 1rem; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; background: var(--surface); border-top: 1px solid var(--line); }
.skriv-lage { margin-right: auto; color: var(--muted); font-size: .8rem; }
@media (max-width: 48rem) {
.skrivdialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
.skrivdialog[open] { animation: dialog-in .28s cubic-bezier(.2,.8,.2,1); }
}
/* Utskickets kvitto (Sami 2026-10-06). */
.kvitto-huvud { margin-bottom: 1rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.kvitto-huvud h1 { margin: 0; }
.kvitto-huvud .sidmeta { margin: .35rem 0 0; }
.kvittolista { background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.kvittorad { padding: .6rem .85rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--line); }
.kvittorad:last-child { border-bottom: 0; }
.kvitto-namn { min-width: 0; display: grid; }
.kvitto-namn small { overflow: hidden; color: var(--muted); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.kvitto-lage { flex: none; display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .85rem; font-weight: 600; }
.kvitto-lage.ar-last { color: var(--god-text); }
.kvitto-lage.ar-ej { color: var(--kritisk-text); }
/* Kallelsens kvitto: svaret som ikon intill läsningen (VIK-P1-129). */
.kvitto-hoger { flex: none; display: inline-flex; align-items: center; gap: .6rem; }
.kvittorad .kvitto-namn { flex: 1; }
.kvitto-lage .ikon-foralder { color: var(--muted); }
.kvittosvar { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--muted); background: var(--yta-2); }
.kvittosvar.ar-ja { color: var(--god-text); }
.kvittosvar.ar-nej { color: var(--kritisk-text); }
.kvitto-lead { margin: 0 0 .8rem; }
@media (max-width: 48rem) { .kvitto-huvud { flex-direction: column; } }
.charge-swishad { color: var(--god-text); font-weight: 700; }
.swish-qr form { justify-self: stretch; display: grid; }
.swishad { display: inline-flex; align-items: center; gap: .3rem; color: var(--god-text); font-size: .85rem; font-weight: 700; white-space: nowrap; }
.betalval { display: inline-flex; align-items: center; gap: .4rem; }
.swishad-lage { display: inline-flex; align-items: center; gap: .25rem; }
.swisha-igen { width: 34px; height: 34px; min-height: 34px; padding: 0; display: inline-grid; place-items: center; color: var(--muted); background: var(--dampad); border: 0; border-radius: 50%; cursor: pointer; }
.swisha-igen:hover { color: var(--ink); }
.swishrad > .betalval, .swishrad > .swishad-lage { flex: none; display: inline-flex; align-items: center; gap: .4rem; }
.stod-tabell-fast { table-layout: fixed; min-width: 40rem; }
.stod-tabell-fast .k-datum { width: 9.5rem; }
.stod-tabell-fast .k-tal { width: 6.5rem; }
.stod-tabell-fast .k-bed { width: 9.5rem; }
/* Integritetspolicy och användarvillkor (VIK-P2-112): läsbar textspalt. */
.juridik { max-width: 44rem; line-height: 1.6; }
.juridik h1 { margin-bottom: .2rem; }
.juridik h2 { margin: 1.6rem 0 .4rem; font-size: 1.15rem; }
.juridik p, .juridik li { color: var(--ink); }
.juridik ul { padding-left: 1.2rem; display: grid; gap: .3rem; }
/* Kassörens översikt (Sami 2026-10-07). */
.ekonomi-period { margin: -.4rem 0 .75rem; }
.ekonomi-tal strong { font-size: 1.15rem; }
.ekonomi-delning { display: grid; gap: 1.25rem; }
@media (min-width: 62rem) { .ekonomi-delning { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } }
.ekonomi-rubrikrad { margin-bottom: .5rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ekonomi-rubrikrad h2, .ekonomi-sida h2 { margin: 0; font-size: 1.1rem; }
.ekonomi-rubrikrad h2 span { color: var(--muted); font-weight: 600; }
.ekonomi-rubrikrad .avgiftssok { margin-left: auto; }
.ekonomi-sida { display: grid; gap: 1.25rem; }
.ekonomi-sida h2 { margin-bottom: .5rem; }
.ekonomirad { gap: .6rem; }
.ekonomirad .kvitto-namn { flex: 1; }
.ekonomi-belopp { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.ekonomi-lage { flex: none; width: 6.5rem; color: var(--kritisk-text); font-size: .8rem; font-weight: 700; }
.ekonomi-lage.ar-swishad { color: var(--god-text); }
.ekonomi-lage.ar-ej_har { color: var(--muted); }
.ekonomi-atgard { flex: none; display: inline-flex; gap: .3rem; }
.ekonomi-knapp { width: 34px; height: 34px; min-height: 34px; padding: 0; display: grid; place-items: center; color: var(--muted); background: var(--dampad); border: 0; border-radius: 50%; cursor: pointer; }
.ekonomi-knapp:hover { color: var(--ink); }
.ekonomi-knapp.ar-betald { color: var(--god-text); background: var(--tint-god); }
.ekonomi-manader { padding: .5rem .85rem; display: grid; gap: .35rem; background: var(--surface); border-radius: var(--radie-stor); box-shadow: var(--skugga-kort); }
.ekonomi-manad { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 6rem; align-items: center; gap: .6rem; font-size: .85rem; }
.ekonomi-manad .spar { height: 8px; border-radius: 999px; background: var(--dampad); overflow: hidden; }
.ekonomi-manad .spar b { display: block; width: var(--b); height: 100%; border-radius: inherit; background: var(--god); }
.ekonomi-manad .h { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ekonomi-mitt { flex: none; display: flex; align-items: center; gap: .6rem; }
@media (max-width: 48rem) {
.ekonomi-mitt { display: grid; justify-items: end; gap: 0; }
.ekonomi-lage { width: auto; }
}
/* Sortering (static/js/sortera.js, Sami 2026-10-07). */
.sortmeny { flex: none; }
.sortmeny .radmeny-val[aria-pressed="true"] { font-weight: 700; color: var(--ink); }
.sortmeny .radmeny-val[aria-pressed="true"]::after { content: " ✓"; }
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]::after { content: " ↕"; opacity: .35; }
th[data-sort][aria-sort="ascending"]::after { content: " ↑"; opacity: 1; }
th[data-sort][aria-sort="descending"]::after { content: " ↓"; opacity: 1; }
/* Kontaktboken (Sami 2026-10-07). */
.kontakt-sjalv { margin: -.25rem 0 .6rem; display: inline-block; color: var(--muted); font-size: .85rem; }
.kontaktrad .kvitto-namn { flex: 1; }
.kontakt-knappar { flex: none; display: inline-flex; gap: .3rem; }
/* Felsidorna 404, 403 och 500 (Sami 2026-10-07). */
.felsida-knappar { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 30rem) { .felsida-knappar { grid-template-columns: 1fr; } }
/* Speltid (Sami 2026-10-09): en flik per lag. Tavlans rubrikrad kortar sin
sidmeta till en rad; listans ska få bryta. */
.speltid-panel:not(.ar-vald) { display: none; }
.speltid-panel > .sidmeta { margin: 0 0 .5rem; overflow: visible; white-space: normal; }
.speltid-efter { color: var(--varning-text); font-weight: 700; white-space: nowrap; }
.speltid-vem > span { display: block; font-weight: 600; }
.speltid-vem small { display: block; color: var(--muted); font-size: .8rem; }
.speltid-skillnad { font-weight: 700; }
.speltid-tabell tr.ar-efter .speltid-skillnad { color: var(--varning-text); }
.speltid-noll { color: var(--muted); }
.speltid-skillnad.speltid-noll { font-weight: 500; }
.speltid-stapel { display: none; }
.speltid-blad.side-sheet { width: min(100vw, 40rem); max-width: 100vw; }
/* Bred lista (sidan på datorn): senaste matchen och de andra lagen i egna
kolumner, och en stapel som visar åt vilket håll fördelningen lutar. Efter
listans bredd och inte skärmens, så att tavlans sidopanel blir smal. */
.speltid { container: speltid / inline-size; }
@container speltid (min-width: 48rem) {
.speltid-tel { display: none; }
.speltid-tal { display: inline-block; min-width: 2.4rem; }
.speltid-stapel { position: relative; display: inline-block; width: 8rem; height: 6px; margin-right: .9rem; vertical-align: middle; border-radius: 3px; background: var(--dampad); }
.speltid-stapel::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: calc(var(--andel) * 50%); border-radius: 3px; background: var(--line-starkare); }
.speltid-stapel.ar-minus::before { left: auto; right: 50%; background: var(--varning); }
.speltid-stapel::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: calc(50% - .5px); width: 1px; background: var(--line-strong); }
}
/* Smal lista: tätare celler, namnet står kvar när en bred tabell rullas. */
@container speltid (max-width: 47.99rem) {
.speltid-dator { display: none; }
.speltid-tabell th, .speltid-tabell td { padding: .5rem .35rem; }
.speltid-tabell th:first-child, .speltid-tabell td:first-child { position: sticky; z-index: 1; left: 0; min-width: 8.5rem; padding-left: .75rem; background: var(--surface); }
.speltid-tabell th:last-child, .speltid-tabell td:last-child { padding-right: .75rem; }
.speltid-tabell th[data-sort]:not([aria-sort])::after { content: none; }
}
@media (max-width: 34rem) { .speltid-blad .tool-dialog-body { padding: .75rem; } }
/* Telefonen: Speltid står på rubrikraden, där det finns plats bredvid
Uttagning. I verktygsraden trängde den undan omgångsväljaren. */
@media (max-width: 48rem) {
.sida-uttagning .uttagning-huvud { position: relative; }
.sida-uttagning .uttagning-verktyg .speltid-rubrikknapp { position: absolute; top: 0; right: 0; }
}