/* Arenix designsystem — tokens + arx-*-komponenter.
 * Normerande dokument: docs/ARENIX_DESIGNSYSTEM.md + docs/ARENIX_FARGSYSTEM.md.
 * app.css och pm-hifi.css är raderade (Fas 8, Task 2) — arenix.css är
 * ensamt stillager. */
:root {
    --arx-ink: #111b28;
    --arx-ink-2: #253345;
    --arx-muted: #667168;
    --arx-line: #dce2d4;
    --arx-canvas: #f6f8f1;
    --arx-white: #ffffff;
    --arx-lime: #d1ee62;
    --arx-lime-rgb: 209, 238, 98;
    --arx-lime-hover: #def57e;
    --arx-lime-panel: #e8efcd;
    --arx-lime-mist: #f2f6df;
    --arx-lime-ink: #526a0f;
    --arx-midnight: #111b28;
    --arx-midnight-raised: #172b3a;
    --status-success: #4f8b6c;
    --status-success-ink: #356b50;
    --status-success-soft: #e3f0e7;
    --status-warning: #b45309;
    --status-warning-soft: #fef3c7;
    --status-danger: #be123c;
    --status-danger-soft: #ffe4e6;
    --status-info: #0369a1;
    --status-info-soft: #e0f2fe;
    --arx-orange: #f0a453;
    --arx-radius-xl: 36px;
    --arx-radius-lg: 16px;
    --arx-radius: 12px;
    --arx-radius-sm: 10px;
    --arx-shadow-card: 0 1px 2px rgba(17, 27, 40, .06), 0 8px 24px rgba(17, 27, 40, .05);
}

.arx-heading { font-family: "Space Grotesk", system-ui, sans-serif; letter-spacing: -0.02em; }
.arx-logo { font-family: "Audiowide", system-ui, sans-serif; }
/* Tabellsiffror som inte ska "hoppa" i bredd när de ändras (t.ex. streak-
   ringens mitträknare) — porterad från pm-hifi:s .pm-num (Fas 8, Task 1). */
.arx-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* --- Knappar --- */
.arx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font: 600 .9375rem/1 "Inter", system-ui, sans-serif;
    padding: .625rem 1.125rem; border-radius: 999px;
    border: 1px solid transparent; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    text-decoration: none;
}
.arx-btn--primary { background: var(--arx-lime); color: var(--arx-ink); }
.arx-btn--primary:hover { background: var(--arx-lime-hover); }
.arx-btn--secondary { background: transparent; color: var(--arx-ink); border-color: var(--arx-line); }
.arx-btn--secondary:hover { border-color: var(--arx-ink-2); background: var(--arx-white); }
.arx-btn--danger { background: var(--status-danger); color: #fff; }
.arx-btn--danger:hover { filter: brightness(1.08); }
/* Statusbekräftande handling (t.ex. "Checka in") — ALDRIG lime (arx-badge--
   success delar samma token, se docs/ARENIX_DESIGNSYSTEM.md). */
.arx-btn--success { background: var(--status-success); color: #fff; }
.arx-btn--success:hover { filter: brightness(1.08); }
.arx-btn--sm { padding: .375rem .75rem; font-size: .8125rem; }
/* Garanterad touchyta (≥44px) oavsett font/padding — täta vyer med
   check-in-liknande handlingar (Fas 4, Task 18). */
.arx-btn--touch { min-height: 44px; padding-left: 1.25rem; padding-right: 1.25rem; }
.arx-btn:focus-visible { outline: 2px solid var(--arx-lime-ink); outline-offset: 2px; }
.arx-btn[disabled] { opacity: .5; cursor: not-allowed; }
/* arenix.css laddas EFTER tailwind.css (master.php) — utan denna regel vinner
   .arx-btn{display:inline-flex} över Tailwinds .hidden{display:none} vid samma
   specificitet, så en arx-btn med JS-växlad .hidden (t.ex. push_onboarding.php:s
   aktivera/stäng av-knappar) blir aldrig faktiskt dold. Upptäckt visuellt Fas 5, Task 4. */
.arx-btn.hidden { display: none; }

/* --- Kort --- */
.arx-card {
    background: var(--arx-white); border: 1px solid var(--arx-line);
    border-radius: var(--arx-radius); box-shadow: var(--arx-shadow-card);
    padding: 1.25rem;
}
.arx-card--raised {
    background: radial-gradient(circle at 82% 17%, rgba(var(--arx-lime-rgb), .13), transparent 12rem), var(--arx-midnight-raised);
    color: #e8edf3; border-color: transparent;
}
.arx-card--raised .arx-heading { color: #fff; }
/* Komponenter som hårdkodar --arx-ink blir osynliga på den mörka ytan
   (#111b28 mot #172b3a = 1,19:1). Sidrubriken saknade sin override — startsidans
   "Hej <förnamn>!" försvann helt. Vaktas av kontrastvakten i tests/run.php. */
.arx-card--raised .arx-page-title { color: #fff; }
.arx-card--raised .arx-btn--secondary { color: #fff; border-color: rgba(255, 255, 255, .28); }
.arx-card--raised .arx-btn--secondary:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .55); }
/* arx-link-action delar --arx-lime-ink med arx-link och behöver samma byte:
   #526a0f mot #172b3a ger 2,37:1. Kontrastvakten nedan ser bara kort och länk
   som står i SAMMA vyfil, så en override är det som faktiskt stänger fällan
   när kortet öppnas i en partial och länken renderas i en annan. */
.arx-card--raised .arx-link,
.arx-card--raised .arx-link-action { color: var(--arx-lime); }
.arx-card--raised .arx-link:hover,
.arx-card--raised .arx-link-action:hover { color: #fff; }
/* Fokusringen i --arx-lime-ink ger 2,37:1 mot ytan — under 3:1-kravet. Samma
   byte som .arx-btn--ghost gör på sina mörka ytor. */
.arx-card--raised .arx-btn:focus-visible,
.arx-card--raised .arx-link:focus-visible,
.arx-card--raised .arx-link-action:focus-visible { outline-color: var(--arx-lime); }

/* --- Badges (status = betydelse, aldrig dekoration) --- */
.arx-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    font: 600 .75rem/1.2 "Inter", system-ui, sans-serif;
    padding: .1875rem .5625rem; border-radius: 999px;
    white-space: nowrap;
}
.arx-badge--success { background: var(--status-success-soft); color: var(--status-success-ink); }
.arx-badge--warning { background: var(--status-warning-soft); color: var(--status-warning); }
.arx-badge--danger  { background: var(--status-danger-soft); color: var(--status-danger); }
.arx-badge--info    { background: var(--status-info-soft); color: var(--status-info); }
.arx-badge--neutral { background: var(--arx-lime-mist); color: var(--arx-lime-ink); }

/* --- Tooltip: ?-knapp med kort förklaring (t.ex. produkttyp i butiken).
   <details>-baserad: tap/Enter togglar (touch och tangentbord klarar sig
   utan hover), :hover visar panelen direkt på desktop. Ingen JS. --- */
.arx-tip { position: relative; display: inline-block; flex-shrink: 0; }
.arx-tip__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.375rem; height: 1.375rem; border-radius: 999px;
    border: 1px solid var(--arx-line); background: var(--arx-canvas);
    color: var(--arx-muted); font: 700 .75rem/1 "Inter", system-ui, sans-serif;
    cursor: pointer; user-select: none; list-style: none;
}
.arx-tip__btn::-webkit-details-marker { display: none; }
.arx-tip__btn:hover { border-color: var(--arx-lime-ink); color: var(--arx-lime-ink); }
.arx-tip__btn:focus-visible { outline: 2px solid var(--arx-lime-ink); outline-offset: 2px; }
.arx-tip__panel {
    display: none; position: absolute; right: 0; top: calc(100% + .375rem); z-index: 30;
    width: min(17rem, 78vw);
    background: var(--arx-white); border: 1px solid var(--arx-line);
    border-radius: var(--arx-radius-sm); box-shadow: var(--arx-shadow-card);
    padding: .625rem .75rem;
    font: 400 .8125rem/1.5 "Inter", system-ui, sans-serif; color: var(--arx-ink-2);
}
.arx-tip[open] .arx-tip__panel, .arx-tip:hover .arx-tip__panel { display: block; }
.arx-tip__title { display: block; font-weight: 700; color: var(--arx-ink); margin-bottom: .25rem; }

/* --- Filterpiller (radio-styrda knapprader, t.ex. startsidans "Hitta
   aktiviteter"-tidsfilter). Dold radio (.peer) + synlig <span class="arx-pill">;
   CSS-syskonselektorn styr det valda läget. Ersätter pm-hifi:s
   [class*="peer-checked:bg-brand"]-hack (Fas 8, Task 1). --- */
.arx-pill {
    display: inline-flex; align-items: center;
    padding: .375rem .75rem; border-radius: 999px;
    border: 1px solid var(--arx-line);
    background: var(--arx-white); color: var(--arx-ink);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.peer:checked + .arx-pill { background: var(--arx-lime); color: var(--arx-ink); border-color: transparent; }
.peer:focus-visible + .arx-pill { outline: 2px solid var(--arx-lime-ink); outline-offset: 2px; }

/* --- Formulärfält --- */
.arx-field { display: block; margin-bottom: 1rem; }
/* arx-field används ibland på ett äkta <fieldset> (radio-/checkboxgrupper
   med en <legend>, för korrekt skärmläsargruppering) — Tailwinds preflight
   nollar fieldsets padding/margin men inte browsarens standardram/min-width,
   så neutralisera dem här (Fas 8, Task 4). */
fieldset.arx-field { border: 0; min-width: 0; }
.arx-label { display: block; font: 600 .8125rem/1.4 "Inter", system-ui, sans-serif; color: var(--arx-ink-2); margin-bottom: .3125rem; }
.arx-input {
    display: block; width: 100%;
    font: 400 .9375rem/1.4 "Inter", system-ui, sans-serif; color: var(--arx-ink);
    background: var(--arx-white); border: 1px solid var(--arx-line);
    border-radius: var(--arx-radius-sm); padding: .5625rem .75rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.arx-input:focus { outline: none; border-color: var(--arx-lime-ink); box-shadow: 0 0 0 3px rgba(var(--arx-lime-rgb), .35); }
.arx-input[aria-invalid="true"] { border-color: var(--status-danger); }
/* Låst men läsbart värde (avgiftens fasta belopp i "Registrera betalning
   utanför Arenix…") — skiljer sig från disabled: värdet skickas med. Egen
   klass, INTE [readonly]: attributet bärs också av t.ex. profilens låsta
   födelsedatum, som ska behålla sitt vanliga utseende (granskningsfynd 11).
   Ingen fokusring — fältet går inte att redigera. */
.arx-input--las { background: var(--arx-canvas); color: var(--arx-ink-2); }
.arx-input--las:focus { border-color: var(--arx-line); box-shadow: none; }
.arx-help { font-size: .8125rem; color: var(--arx-muted); margin-top: .25rem; }
.arx-error { font-size: .8125rem; color: var(--status-danger); margin-top: .25rem; }

/* Inputgrupp: fast prefix + fält, t.ex. URL-prefixet framför en redigerbar
   slug (tenant/settings.php, tenant/signup.php). Fas 6, Task 5. */
.arx-input-group { display: flex; align-items: stretch; border: 1px solid var(--arx-line); border-radius: var(--arx-radius-sm); overflow: hidden; background: var(--arx-white); transition: border-color .15s ease, box-shadow .15s ease; }
.arx-input-group:focus-within { border-color: var(--arx-lime-ink); box-shadow: 0 0 0 3px rgba(var(--arx-lime-rgb), .35); }
.arx-input-group__prefix { padding: .5625rem .75rem; background: var(--arx-canvas); color: var(--arx-muted); font: 400 .875rem/1.4 "Inter", system-ui, sans-serif; white-space: nowrap; user-select: none; }
.arx-input-group .arx-input { flex: 1; min-width: 0; border: 0; border-radius: 0; box-shadow: none !important; }

/* --- Alerts (flash-meddelanden) --- */
.arx-alert { padding: .625rem 1rem; font-size: .875rem; border-bottom: 1px solid; }
.arx-alert--success { background: var(--status-success-soft); color: var(--status-success-ink); border-color: #c8e2d0; }
.arx-alert--error   { background: var(--status-danger-soft); color: var(--status-danger); border-color: #fecdd3; }
.arx-alert--info    { background: var(--status-info-soft); color: var(--status-info); border-color: #bae6fd; }
.arx-alert--warning { background: var(--status-warning-soft); color: var(--status-warning); border-color: #fde68a; }

/* --- Sidrubrik --- */
.arx-page-head { margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.arx-page-title { font: 700 1.5rem/1.2 "Space Grotesk", system-ui, sans-serif; letter-spacing: -0.02em; color: var(--arx-ink); margin: 0; }
.arx-page-sub { font-size: .9375rem; color: var(--arx-muted); margin: .25rem 0 0; }

/* --- Tomläge --- */
.arx-empty {
    text-align: center; padding: 2.5rem 1.25rem;
    background: var(--arx-lime-mist); border: 1px dashed var(--arx-line);
    border-radius: var(--arx-radius); color: var(--arx-ink-2);
}
.arx-empty .arx-btn { margin-top: 1rem; }

/* --- Tabell (tät nivå: 14px, kompakt padding, ingen rörelse) --- */
.arx-table-wrap { overflow-x: auto; background: var(--arx-white); border: 1px solid var(--arx-line); border-radius: var(--arx-radius-sm); }
.arx-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.arx-table th {
    text-align: left; font: 600 .75rem/1.3 "Inter", system-ui, sans-serif;
    text-transform: uppercase; letter-spacing: .04em; color: var(--arx-muted);
    padding: .5rem .75rem; border-bottom: 1px solid var(--arx-line);
    background: var(--arx-canvas); white-space: nowrap;
}
.arx-table td { padding: .5rem .75rem; border-bottom: 1px solid var(--arx-line); vertical-align: top; }
.arx-table tbody tr:last-child td { border-bottom: none; }
.arx-table tbody tr:hover { background: var(--arx-lime-mist); }

/* --- Filterrad ovanför listor/tabeller --- */
.arx-filterbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.arx-filterbar .arx-input { width: auto; min-width: 12rem; }

/* --- Publikt appskal (utloggad header/footer) — kompakt Midnight-variant.
   Flytande rundad pill i index3-stil (nav-beslut 2026-08-19) — fast
   positionerad; body:has-regeln nedan kompenserar med toppadding så
   flashar och innehåll inte hamnar under den. Scroll-krympning (index3:s
   is-scrolled) är medvetet inte med än — kräver JS på alla publika sidor. --- */
.arx-nav-float {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 30;
    padding-top: 16px;
    pointer-events: none;
}
.arx-nav-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 62px;
    padding: 8px 10px 8px 22px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: linear-gradient(110deg, rgba(25, 42, 56, .82), rgba(16, 31, 40, .76));
    box-shadow: 0 18px 50px rgba(10, 16, 24, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    pointer-events: auto;
}
/* Knapp- och länketiketter i pillen får aldrig radbrytas — vid 320px blev
   "Logga in" två rader och "Skapa konto" bröts inuti sin egen pillerknapp
   (bugg 2026-08-24). Nowrap ensamt hade bara flyttat problemet till överflöd,
   så det smala läget krymper också logotyp, gap och padding. Scopat till
   pillen: en fritt placerad .arx-btn med lång etikett ska fortfarande få bryta. */
.arx-nav-pill .arx-btn,
.arx-nav-public-link { white-space: nowrap; }
.arx-nav-public-brand {
    font-size: 1.375rem;
    color: #fff;
    letter-spacing: .02em;
    text-decoration: none;
}
.arx-nav-public-brand span { color: var(--arx-lime); text-shadow: 0 0 12px rgba(var(--arx-lime-rgb), .4); }
.arx-nav-public-link { color: rgba(255, 255, 255, .82); font: 600 .875rem "Inter", system-ui, sans-serif; text-decoration: none; transition: color .15s ease; }
.arx-nav-public-link:hover { color: #fff; }
.arx-nav-public-link:focus-visible { outline: 2px solid var(--arx-lime); outline-offset: 2px; }

/* Reservationen för den fixerade pillen: 16px topputrymme (.arx-nav-float)
   + 62px pill + 16px luft under = 94px. */
body:has(.arx-nav-float) { padding-top: 94px; }
/* Äldre browsers utan :has får en nästan-korrekt fallback via main-marginal. */
@supports not selector(:has(*)) {
    .arx-nav-float ~ main { margin-top: 94px; }
}

/* ORDNINGEN ÄR BÄRANDE: det smala läget måste ligga SIST i hela nav-avsnittet.
   En @media-fråga höjer inte specificiteten — av två lika starka regler vinner
   den som står sist i filen, oavsett om frågan matchar. Låg t.ex.
   `.arx-nav-public-brand { font-size: 1.375rem }` efter blocket vann den över
   blockets 1.25rem, och logotypen krympte aldrig trots att regeln fanns
   (uppmätt 22px vid 390px, 2026-08-24 — det var buggen). Samma sak gällde
   body-paddingen nedan. Flytta alltså inte tillbaka bas-reglerna hit under, och
   lägg inga nya nav-regler efter blocket: hör de till bredden ska de IN i det,
   annars ovanför. */
@media (max-width: 400px) {
    .arx-nav-pill { gap: .5rem; padding: 8px 8px 8px 14px; min-height: 56px; }
    .arx-nav-pill nav { gap: .625rem; }
    .arx-nav-public-brand { font-size: 1.25rem; }
    .arx-nav-pill .arx-btn--sm { padding: .375rem .625rem; }
    /* Pillen är 6px lägre här (56 i stället för 62), så reservationen ska ner
       lika mycket: 16 + 56 + 16 = 88. Annars öppnar sidan med 22px tomrum
       under headern i stället för 16 — och det är på de smalaste skärmarna
       lodrätt utrymme räcker sämst. Uppmätt 2026-08-24, inte räknat. */
    body:has(.arx-nav-float) { padding-top: 88px; }
    @supports not selector(:has(*)) {
        .arx-nav-float ~ main { margin-top: 88px; }
    }
}

.arx-footer-public { background: #0e1923; color: #e9e6ef; }
.arx-footer-public a { color: #e9e6ef; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(233, 230, 239, .35); }
.arx-footer-public a:hover { text-decoration-color: currentColor; }
.arx-footer-public a:focus-visible { outline: 2px solid var(--arx-lime); outline-offset: 2px; }
.arx-footer-public-copy { color: #8e88a0; }

/* --- Inloggat appskal (Midnight-header + desktop-nav) — Fas 3, Task 13.
   Ersätter den ljusa arenix-header/pm-logo-stylingen (app.css/pm-hifi.css,
   frysta) för $currentUser-fallet i master.php. --- */
.arx-nav-app {
    background: var(--arx-midnight);
    color: #e8edf3;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.arx-nav-app-brand {
    font-size: 1.375rem;
    color: #fff;
    letter-spacing: .02em;
    text-decoration: none;
}
.arx-nav-app-brand span { color: var(--arx-lime); text-shadow: 0 0 12px rgba(var(--arx-lime-rgb), .4); }
.arx-nav-app-brand:focus-visible { outline: 2px solid var(--arx-lime); outline-offset: 2px; }

.arx-nav-app-select {
    display: block; width: 100%;
    font: 500 .875rem/1.3 "Inter", system-ui, sans-serif;
    color: #e8edf3;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--arx-radius-sm);
    padding: .4375rem .625rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.arx-nav-app-select:focus { outline: none; border-color: var(--arx-lime); box-shadow: 0 0 0 3px rgba(var(--arx-lime-rgb), .3); }
/* <option> ärver textfärg från OS/browser-chrome i de flesta motorer, men
   en explicit mörk bakgrund + ljus text hjälper där den respekteras
   (t.ex. Firefox) i stället för att falla tillbaka på vitt-på-vitt. */
.arx-nav-app-select option { color: var(--arx-ink); background: var(--arx-white); }

.arx-nav-app-tenant-link { color: rgba(232, 237, 243, .82); text-decoration: none; }
.arx-nav-app-tenant-link:hover { color: #fff; text-decoration: underline; }
.arx-nav-app-tenant-link:focus-visible { outline: 2px solid var(--arx-lime); outline-offset: 2px; }

.arx-nav-app-link { color: rgba(232, 237, 243, .82); text-decoration: none; }
.arx-nav-app-link:hover { color: #fff; }
.arx-nav-app-link:focus-visible { outline: 2px solid var(--arx-lime); outline-offset: 2px; }

.arx-nav-app-icon-btn { color: rgba(232, 237, 243, .82); }
.arx-nav-app-icon-btn:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.arx-nav-app-icon-btn:focus-visible { outline: 2px solid var(--arx-lime); outline-offset: 2px; }

.arx-nav-app-logout {
    color: rgba(232, 237, 243, .62);
    background: transparent; border: none; cursor: pointer;
}
.arx-nav-app-logout:hover { color: #fff; }
.arx-nav-app-logout:focus-visible { outline: 2px solid var(--arx-lime); outline-offset: 2px; }

/* Desktop-nav sitter i samma <header>, ärver Midnight-ytan. Klassnamnen
   (desktop-nav/desktop-nav-item/.active) är låsta av tester — bara
   färgerna byts, inte strukturen.
   Bas-strukturen (layout/typografi/den generiska aktiv-stapeln) porterad
   hit från app.css inför dess radering (Fas 8, Task 1) — .desktop-nav
   används bara i den här headern, så ingen ljus variant behövs. */
.desktop-nav { border-top: 1px solid rgba(255, 255, 255, .08); }
.desktop-nav-item {
    position: relative;
    display: inline-flex; align-items: center;
    padding: .5rem .75rem;
    font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
    text-decoration: none;
    transition: color .12s;
}
.desktop-nav-item.active::after {
    content: ''; position: absolute; bottom: 0; left: .75rem; right: .75rem;
    height: .1875rem;
}
.arx-nav-app .desktop-nav { background: var(--arx-midnight); border-top-color: rgba(255, 255, 255, .08); }
.arx-nav-app .desktop-nav-item { color: rgba(232, 237, 243, .7); }
.arx-nav-app .desktop-nav-item:hover { color: #fff; }
.arx-nav-app .desktop-nav-item.active { color: #fff; }
.arx-nav-app .desktop-nav-item.active::after { background: var(--arx-lime); }
.desktop-nav-item:focus-visible { outline: 2px solid var(--arx-lime); outline-offset: 2px; }

/* --- Bottennav (mobil): bas + hi-fi-uppgraderingen (mono/versalt/backdrop-
   blur) porterade hit från app.css/pm-hifi.css inför deras radering (Fas 8,
   Task 1). Aktiv flik får lime-ink text på en lime-mist-platta i stället för
   den gamla lila accent-stapeln. Klassnamn/markup oförändrade — tester låser
   dem. --- */
.arx-nav-bottom {
    background: color-mix(in oklab, var(--arx-canvas) 88%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--arx-line);
}
.bottom-nav-item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: .125rem;
    padding: .5rem .25rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--arx-muted);
    text-decoration: none;
    transition: color .12s;
}
.bottom-nav-item .icon { width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; }
.bottom-nav-item:hover { color: var(--arx-ink); }
.bottom-nav-item:focus-visible { outline: 2px solid var(--arx-lime-ink); outline-offset: -2px; }
.bottom-nav-item.active { color: var(--arx-ink); font-weight: 700; }
.bottom-nav-item.active::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 2rem; height: .1875rem; background: var(--arx-lime);
}
.arx-nav-bottom .bottom-nav-item.active {
    color: var(--arx-lime-ink);
    z-index: 0;
}
.arx-nav-bottom .bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: .125rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.75rem;
    height: 1.75rem;
    background: var(--arx-lime-mist);
    border-radius: 999px;
    z-index: -1;
}

/* --- Sticky boknings-CTA (<md) — KVARFYND "Öppna tickets" #5,
   sessions/show.php. Pre-migreringen (git dbc2ce5^, pm-hifi) gjorde HELA
   action-ytan (boka/avboka/prova-på/bli medlem m.fl.) sticky med
   `position: sticky; bottom: 0`; det ATT-migrerade beslutet begränsar det
   medvetet till bara den primära boka/väntelista-knappen (INTE avboka) —
   samma <form> som ligger in-flow på ≥md, ingen dubblettpost. `position:
   sticky` (inte `fixed`) återanvänder samma teknik som originalet: elementet
   ligger kvar i normalt dokumentflöde tills det annars skulle rulla ur
   synfältet, då fastnar det vid `bottom`-offsetet — inget separat
   spacer-element eller höjdberäkning krävs, och det släpper naturligt när
   sidans slut (t.ex. admin-åtgärdskortet) rullas fram. Positionerad OVANFÖR
   den fasta bottennaven (.arx-nav-bottom) med samma safe-area-hänsyn samt
   samma canvas/blur-yta så de två barerna hör visuellt ihop. ≥md: ingen
   särskild positionering — knappen ligger kvar precis där den redan
   renderas i flödet. */
@media (max-width: 767px) {
    .arx-sticky-cta {
        position: sticky;
        bottom: calc(4.25rem + env(safe-area-inset-bottom, 0));
        z-index: 20;
        margin: 0 -1rem;
        padding: .75rem 1rem;
        background: color-mix(in oklab, var(--arx-canvas) 90%, transparent);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--arx-line);
    }
}

/* --- Hantera-sidebar (desktop ≥md) — Fas 3, Task 14. Rollfiltrerade
   genvägar till admin-ytorna (klubb/aktiviteter/narvaro/lok/import/
   produkter-admin/admin). Mobil: ingen sidebar, bottennaven gäller.
   Referens: index3.html .sidebar/.side-link (~rad 1714–1725). --- */
.arx-sidebar {
    display: none;
    flex-direction: column;
    gap: .125rem;
    background: #142432;
    border-radius: var(--arx-radius-lg);
    padding: .75rem;
}
/* Sidebaren är desktop-only (mobil använder bottennaven). display:none som bas +
   md-breakpoint HÄR i stället för Tailwinds hidden md:block i markupen — arenix.css
   lastar efter tailwind.css och vann annars kaskaden (Ruling F6-2, upptäckt Fas 6 Task 1). */
@media (min-width: 768px) {
    .arx-sidebar {
        display: flex;
    }
}
.arx-side-link {
    display: block;
    padding: .5rem .75rem;
    border-radius: var(--arx-radius-sm);
    font: 600 .875rem/1.3 "Inter", system-ui, sans-serif;
    color: rgba(232, 237, 243, .75);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.arx-side-link:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.arx-side-link.active { background: rgba(var(--arx-lime-rgb), .13); color: var(--arx-lime); }
.arx-side-link:focus-visible { outline: 2px solid var(--arx-lime); outline-offset: 2px; }

/* ==========================================================================
   MARKNADSNIVÅ (täthetsnivå: MARKNAD) — Fas 4, Task 15.
   Gäller ENDAST publika presentationsytor (utloggad startsida). Stora
   display-grader, mycket luft, rörelse. Appytorna ovanför (tät nivå) är
   oberörda — ingen klass här delas med en inloggad vy.
   Extraherad ur public/index3.html (färgvariant "Midnight Lime"); vyerna
   får aldrig bära egen CSS, allt bor här.
   ========================================================================== */

/* --- Hero --- */
.arx-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(3.5rem, 9vw, 6.5rem) clamp(1.25rem, 4vw, 3.5rem);
    border-radius: var(--arx-radius-xl);
    color: #fff;
    text-align: center;
    background: #142432;
}
/* Hero-fotot som eget parallaxlager (aktiverat 2026-08-20, peber-beslut).
   Överhöjt ±14% så translateY aldrig blottar kanter; gradienten (::before)
   ligger ovanpå (z -1 > -2). Reduced motion nollar transformen via
   [data-parallax]-regeln i rörelseblocket nedan. */
.arx-hero-bg {
    position: absolute; z-index: -2; inset: -14% 0; content: "";
    /* Bilden ligger i public/img/ — relativ sökväg så den följer med oavsett
       var CSS:en monteras (dev-prefix, CDN). */
    background: url("../img/arenix-community-hero.webp") center 52% / cover no-repeat;
    will-change: transform;
}
.arx-hero::before {
    position: absolute; z-index: -1; inset: 0; content: "";
    background:
        linear-gradient(180deg, rgba(8, 22, 38, .62), rgba(10, 29, 40, .34) 42%, rgba(7, 16, 27, .78)),
        linear-gradient(90deg, rgba(20, 47, 50, .3), transparent 48%, rgba(17, 30, 37, .2));
}
.arx-hero-inner { position: relative; max-width: 46rem; margin-inline: auto; }
.arx-hero-kicker {
    display: inline-flex; align-items: center; gap: .625rem;
    margin-bottom: 1.5rem; padding: .5rem .875rem .5rem .5rem;
    border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px;
    background: rgba(20, 19, 34, .3); color: rgba(255, 255, 255, .9);
    font: 600 .6875rem/1 "Inter", system-ui, sans-serif;
    letter-spacing: .055em; text-transform: uppercase;
}
.arx-hero-kicker b {
    padding: .375rem .5rem; border-radius: 999px;
    background: var(--arx-lime); color: var(--arx-ink);
    font-size: .5625rem; letter-spacing: .1em;
}
.arx-hero-title {
    margin: 0 0 1.25rem;
    font: 700 clamp(2.5rem, 6.6vw, 4.5rem)/.96 "Space Grotesk", system-ui, sans-serif;
    letter-spacing: -.05em; text-wrap: balance;
}
.arx-hero-title em { color: var(--arx-lime); font-style: normal; }
.arx-hero-lead {
    max-width: 38rem; margin: 0 auto 1.75rem;
    color: rgba(255, 255, 255, .82);
    font-size: clamp(1rem, 1.5vw, 1.1875rem); line-height: 1.65; text-wrap: balance;
}
.arx-hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .6875rem; }
.arx-hero-note { margin: 1.25rem 0 0; color: rgba(255, 255, 255, .62); font-size: .75rem; line-height: 1.6; }

.arx-btn--lg { padding: .875rem 1.5rem; font-size: 1rem; }
.arx-btn--ghost {
    color: #fff; border-color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .08);
}
.arx-btn--ghost:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .16); }
.arx-btn--ghost:focus-visible { outline-color: var(--arx-lime); }

/* --- Målgruppsrad direkt under heron --- */
.arx-audience-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1.25rem; padding: 1.75rem 0;
}
.arx-audience-bar p { max-width: 16rem; margin: 0; color: var(--arx-muted); font-size: .8125rem; line-height: 1.5; }
.arx-audiences { display: flex; flex-wrap: wrap; gap: .625rem; }
.arx-audience {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .625rem .9375rem; color: var(--arx-ink-2);
    border: 1px solid var(--arx-line); border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    font: 600 .75rem/1 "Space Grotesk", system-ui, sans-serif;
}
.arx-audience svg { width: 1rem; height: 1rem; color: var(--arx-lime-ink); }

/* --- Sektionsrytm --- */
.arx-section { padding-top: clamp(3.5rem, 7vw, 6rem); }
.arx-section--tight { padding-top: clamp(1.75rem, 4vw, 3rem); }
.arx-section-head {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(16rem, .8fr);
    gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: 2.5rem;
}
.arx-eyebrow {
    display: flex; align-items: center; gap: .6875rem; margin: 0 0 1rem;
    color: var(--arx-lime-ink);
    font: 700 .6875rem/1.2 "Inter", system-ui, sans-serif;
    letter-spacing: .11em; text-transform: uppercase;
}
.arx-eyebrow::before { width: 1.6875rem; height: 2px; border-radius: 2px; background: currentColor; content: ""; }
.arx-section-title {
    margin: 0;
    font: 700 clamp(2rem, 4.6vw, 3.35rem)/1 "Space Grotesk", system-ui, sans-serif;
    letter-spacing: -.045em; text-wrap: balance;
}
.arx-section-copy { margin: 0; color: var(--arx-muted); font-size: 1rem; line-height: 1.75; }

/* --- Funktionsrutnät (byggstenarna) --- */
.arx-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .875rem; }
/* Vid 1152 px-skalet skulle auto-fit ge 4+2-rader för de sex korten —
 * låst till 3 kolumner på md+ så gridden alltid blir balanserad 3+3
 * (breddbeslut peber 2026-08-19). */
@media (min-width: 768px) {
    .arx-feature-grid { grid-template-columns: repeat(3, 1fr); }
}
.arx-feature { padding: 1.75rem; border-radius: var(--arx-radius-lg); }
.arx-feature-icon {
    display: grid; place-items: center; width: 2.8125rem; height: 2.8125rem;
    border-radius: var(--arx-radius);
    color: var(--arx-lime-ink); background: var(--arx-lime-mist);
}
.arx-feature h3 {
    margin: 1.5rem 0 .5rem;
    font: 700 1.1875rem/1.15 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.03em;
}
.arx-feature p { margin: 0; color: var(--arx-muted); font-size: .875rem; line-height: 1.65; }

/* --- "Hitta aktiviteter nära dig" — mörkt skal på ljus sida --- */
.arx-discover {
    position: relative; isolation: isolate; overflow: hidden;
    padding: .875rem; border-radius: clamp(1.5rem, 3vw, 2.375rem);
    background: #0e1923; color: #fff;
    box-shadow: 0 36px 90px rgba(17, 27, 40, .16);
}
.arx-discover::before {
    position: absolute; z-index: -1; top: -17rem; left: -11rem;
    width: 38rem; height: 38rem; border-radius: 50%; content: "";
    background: radial-gradient(circle, rgba(var(--arx-lime-rgb), .16), rgba(var(--arx-lime-rgb), 0) 67%);
}
.arx-discover-panel {
    padding: clamp(1.75rem, 4vw, 3.25rem);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: clamp(1rem, 2vw, 1.75rem);
    background: linear-gradient(135deg, rgba(25, 43, 55, .96), rgba(13, 27, 36, .98));
}
.arx-discover-live {
    display: inline-flex; align-items: center; gap: .5625rem; margin-bottom: 1.5rem;
    color: #d9ee8c; font: 700 .6875rem/1 "Inter", system-ui, sans-serif;
    letter-spacing: .11em; text-transform: uppercase;
}
.arx-discover-live::before {
    width: .5rem; height: .5rem; border-radius: 50%; content: "";
    background: var(--arx-lime); box-shadow: 0 0 0 .375rem rgba(var(--arx-lime-rgb), .1);
}
.arx-discover-title {
    max-width: 32rem; margin: 0;
    font: 700 clamp(1.875rem, 4.2vw, 3.1rem)/1 "Space Grotesk", system-ui, sans-serif;
    letter-spacing: -.05em;
}
.arx-discover-title em { color: var(--arx-lime); font-style: normal; }
.arx-discover-intro {
    max-width: 34rem; margin: 1.375rem 0 2rem;
    color: rgba(255, 255, 255, .67); font-size: .9375rem; line-height: 1.7;
}
.arx-discover-periods { display: flex; flex-wrap: wrap; gap: .4375rem; margin-bottom: .625rem; }
.arx-discover-period { cursor: pointer; }
.arx-discover-period input { position: absolute; opacity: 0; pointer-events: none; }
.arx-discover-period span {
    display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .9375rem;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
    color: rgba(255, 255, 255, .78);
    font: 600 .75rem/1 "Inter", system-ui, sans-serif;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.arx-discover-period input:checked + span { color: var(--arx-ink); border-color: var(--arx-lime); background: var(--arx-lime); }
.arx-discover-period input:focus-visible + span { outline: 2px solid var(--arx-lime); outline-offset: 2px; }
.arx-discover-fields { display: grid; grid-template-columns: minmax(0, 1fr) 6.25rem 3rem 5.5rem; gap: .5rem; }
.arx-discover-input-wrap { position: relative; }
.arx-discover-input-wrap svg {
    position: absolute; top: 50%; left: 1rem; width: 1.125rem; height: 1.125rem;
    color: #76818a; pointer-events: none; transform: translateY(-50%);
}
.arx-discover-input,
.arx-discover-radius,
.arx-discover-locate,
.arx-discover-submit {
    min-height: 3.125rem; border: 0; border-radius: .8125rem;
    font: 600 .8125rem/1 "Inter", system-ui, sans-serif;
}
.arx-discover-input,
.arx-discover-radius { width: 100%; color: var(--arx-ink); background: #fff; }
.arx-discover-input { padding: 0 .875rem 0 2.75rem; }
.arx-discover-input::placeholder { color: #8b949b; }
.arx-discover-radius { padding: 0 .625rem; cursor: pointer; }
.arx-discover-locate,
.arx-discover-submit { display: inline-grid; place-items: center; cursor: pointer; transition: background-color .18s ease; }
.arx-discover-locate {
    color: #fff; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .07);
}
.arx-discover-locate svg { width: 1.1875rem; height: 1.1875rem; }
.arx-discover-locate:hover { background: rgba(255, 255, 255, .13); }
.arx-discover-locate[disabled] { cursor: wait; opacity: .65; }
.arx-discover-submit { color: var(--arx-ink); background: var(--arx-lime); }
.arx-discover-submit:hover { background: var(--arx-lime-hover); }
.arx-discover-input:focus,
.arx-discover-radius:focus,
.arx-discover-locate:focus-visible,
.arx-discover-submit:focus-visible { outline: 3px solid rgba(var(--arx-lime-rgb), .55); outline-offset: 2px; }
.arx-discover-status { min-height: 1.125rem; margin: .5625rem 0 0; color: rgba(255, 255, 255, .55); font-size: .75rem; }
.arx-discover-status a { color: var(--arx-lime); }

.arx-discover-results { padding: clamp(1.5rem, 3vw, 1.9375rem) clamp(.75rem, 2vw, 1.75rem) 1.6875rem; }
.arx-discover-results-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.1875rem;
}
.arx-discover-results-head h3 { margin: 0; font: 700 1.25rem/1.2 "Space Grotesk", system-ui, sans-serif; color: #fff; }
.arx-discover-results-head p { margin: .25rem 0 0; color: rgba(255, 255, 255, .55); font-size: .75rem; }
.arx-discover-all-link {
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--arx-lime); font-size: .75rem; font-weight: 700; text-decoration: none;
}
.arx-discover-all-link:hover { text-decoration: underline; }
.arx-discover-all-link:focus-visible { outline: 2px solid var(--arx-lime); outline-offset: 3px; }
.arx-discover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .625rem; }
.arx-discover-card {
    display: block; color: var(--arx-ink); text-decoration: none;
    border-radius: var(--arx-radius-lg); border-color: transparent;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
}
.arx-discover-card:hover { transform: translateY(-4px); box-shadow: 0 18px 35px rgba(0, 0, 0, .28); }
.arx-discover-card:focus-visible { outline: 3px solid var(--arx-lime); outline-offset: 3px; }
.arx-discover-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .875rem; }
.arx-discover-card-distance {
    display: inline-flex; align-items: center; padding: .1875rem .5625rem; border-radius: 999px;
    color: var(--arx-lime-ink); background: rgba(var(--arx-lime-rgb), .45);
    font: 700 .6875rem/1.2 "Inter", system-ui, sans-serif;
}
.arx-discover-card h4 {
    margin: 0; font: 700 1.1875rem/1.15 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.03em;
}
.arx-discover-card-sub { display: block; margin-top: .1875rem; color: var(--arx-muted); font-size: .875rem; }
.arx-discover-card-meta { margin: .75rem 0 0; color: var(--arx-muted); font-size: .8125rem; line-height: 1.5; }
.arx-discover-card-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .75rem; }
.arx-discover-note { margin: 1rem 0 0; color: rgba(255, 255, 255, .5); font-size: .75rem; }
/* Tomläget är samma komponent som i appen, bara anpassad till den mörka ytan. */
.arx-discover .arx-empty {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .78);
}

/* --- För verksamheten: rollkort med ett prioriterat (arx-card--raised) --- */
.arx-benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .875rem; }
.arx-benefit {
    position: relative; display: flex; flex-direction: column;
    min-height: 18rem; padding: clamp(1.5rem, 3vw, 2rem);
    padding-bottom: 4.5rem; border-radius: var(--arx-radius-lg);
}
.arx-benefit-icon {
    display: grid; place-items: center; width: 2.8125rem; height: 2.8125rem;
    border-radius: var(--arx-radius); color: var(--arx-lime-ink); background: var(--arx-lime-mist);
}
.arx-card--raised .arx-benefit-icon { color: #fff; background: rgba(255, 255, 255, .13); }
.arx-benefit h3 {
    margin: auto 0 .8125rem;
    font: 700 1.4375rem/1.05 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.03em;
}
.arx-benefit p { margin: 0; color: var(--arx-muted); font-size: .875rem; line-height: 1.65; }
.arx-card--raised.arx-benefit p { color: rgba(255, 255, 255, .74); }
.arx-benefit-chip {
    position: absolute; right: 1.5rem; bottom: 1.5rem;
    padding: .5rem .75rem; border-radius: 999px;
    color: var(--arx-ink); background: var(--arx-lime-panel);
    font: 600 .6875rem/1 "Inter", system-ui, sans-serif;
}

/* --- Avslutande CTA-panel --- */
.arx-cta-panel {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.75rem, 4vw, 3rem); align-items: center;
    padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 4vw, 4.25rem);
    border-radius: var(--arx-radius-xl);
    background: var(--arx-midnight); color: #fff;
}
.arx-cta-panel::before,
.arx-cta-panel::after { position: absolute; z-index: -1; border-radius: 50%; content: ""; }
.arx-cta-panel::before {
    top: -10rem; right: 6%; width: 27rem; height: 27rem;
    border: 1px solid rgba(var(--arx-lime-rgb), .21);
    box-shadow: 0 0 0 2.625rem rgba(var(--arx-lime-rgb), .03), 0 0 0 5.375rem rgba(var(--arx-lime-rgb), .018);
}
.arx-cta-panel::after {
    right: -5rem; bottom: -13rem; width: 24rem; height: 24rem;
    background: radial-gradient(circle, rgba(130, 165, 41, .5), rgba(130, 165, 41, 0) 68%);
}
/* Drivande limeglöd i CTA-panelen (parallax 2026-08-20) — komplement till
   de statiska ::before/::after-orbarna; eget element eftersom pseudo-element
   inte kan bära data-parallax. */
.arx-cta-orb {
    position: absolute; z-index: -1; left: -6rem; top: -9rem;
    width: 21rem; height: 21rem; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--arx-lime-rgb), .16), rgba(var(--arx-lime-rgb), 0) 66%);
    will-change: transform; pointer-events: none;
}
.arx-cta-panel .arx-eyebrow { color: var(--arx-lime); }
.arx-cta-panel .arx-section-title { color: #fff; }
.arx-cta-panel p { max-width: 38rem; margin: 1.25rem 0 0; color: rgba(255, 255, 255, .7); line-height: 1.65; }
.arx-cta-checks { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.arx-cta-check {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem .875rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
    color: rgba(255, 255, 255, .84); font-size: .8125rem;
}
.arx-cta-check svg { width: 1rem; height: 1rem; color: var(--arx-lime); }
.arx-cta-button {
    display: grid; place-items: center; width: 8.75rem; height: 8.75rem;
    border-radius: 50%; background: var(--arx-lime); color: var(--arx-ink);
    box-shadow: 0 17px 38px rgba(0, 0, 0, .28);
    font: 700 .875rem/1.25 "Space Grotesk", system-ui, sans-serif;
    text-align: center; text-decoration: none;
    transition: transform .2s ease, background-color .15s ease;
}
.arx-cta-button:hover { background: var(--arx-lime-hover); transform: rotate(-4deg) scale(1.04); }
.arx-cta-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* --- Juridiska länkarna längst ned på marknadssidan --- */
.arx-legal-links { margin: 2.5rem 0 0; color: var(--arx-muted); font-size: .75rem; text-align: center; }
/* Understrykningen är default, inte ett hover-tillstånd: på touch finns ingen
   hover, så raden hade ingen länkaffordans alls där. Samma nedtonade mönster
   som .arx-footer-public — synlig men lågmäld, hover förstärker den. */
.arx-legal-links a {
    color: inherit; text-decoration: underline;
    text-underline-offset: 3px; text-decoration-color: rgba(102, 113, 104, .45);
}
.arx-legal-links a:hover { color: var(--arx-ink); text-decoration-color: currentColor; }

@media (max-width: 767px) {
    .arx-section-head { grid-template-columns: 1fr; gap: 1.25rem; }
    .arx-discover-fields { grid-template-columns: minmax(0, 1fr) 5.5rem 3rem; }
    .arx-discover-submit { grid-column: 1 / -1; }
    .arx-cta-panel { grid-template-columns: 1fr; justify-items: start; }
}

/* ==========================================================================
   APPNIVÅ (täthetsnivå: APP) — Fas 4, Task 17.
   Schema (arketyp 7) + tillfällesdetalj (arketyp 5). Mallar för Fas 5:s
   medlemsytor — ljus canvas, uppgiftsfokuserade kort, ingen rörelse.
   ========================================================================== */

/* --- Schema: sidhuvud och dagväljare --- */
.arx-schedule-actions { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.arx-schedule-days {
    display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; margin-bottom: 1.5rem;
    -webkit-overflow-scrolling: touch;
}
.arx-schedule-day {
    display: flex; flex-direction: column; align-items: center; gap: .125rem;
    min-width: 3rem; padding: .5rem .375rem; flex-shrink: 0;
    border: 1px solid var(--arx-line); border-radius: var(--arx-radius-sm);
    background: var(--arx-white); color: var(--arx-ink-2); text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.arx-schedule-day .d { font: 600 .6875rem/1 "Inter", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; opacity: .65; }
.arx-schedule-day .n { font: 700 1.0625rem/1 "Space Grotesk", system-ui, sans-serif; }
.arx-schedule-day:hover { border-color: var(--arx-ink-2); }
.arx-schedule-day.active { background: var(--arx-lime); border-color: var(--arx-lime); color: var(--arx-ink); }
.arx-schedule-day:focus-visible { outline: 2px solid var(--arx-lime-ink); outline-offset: 2px; }

/* --- Schema: daggrupperad lista av tillfällen --- */
.arx-schedule-list { display: flex; flex-direction: column; gap: .625rem; }
.arx-schedule-date { margin: 1rem 0 0; font-size: .8125rem; font-weight: 700; color: var(--arx-muted); text-transform: uppercase; letter-spacing: .04em; }
.arx-schedule-list .arx-schedule-date:first-child { margin-top: 0; }

.arx-session-card {
    display: flex; align-items: center; gap: .875rem;
    padding: .875rem 1rem; text-decoration: none; color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.arx-session-card:hover { border-color: var(--arx-ink-2); }
.arx-session-card:focus-visible { outline: 2px solid var(--arx-lime-ink); outline-offset: 2px; }
.arx-session-card.is-cancelled { opacity: .6; }
.arx-session-time { flex-shrink: 0; width: 3.75rem; text-align: left; }
.arx-session-time-value { display: block; font: 700 1.125rem/1 "Space Grotesk", system-ui, sans-serif; }
.is-cancelled .arx-session-time-value { text-decoration: line-through; color: var(--arx-muted); }
.arx-session-time-dur { display: block; margin-top: .1875rem; font-size: .6875rem; color: var(--arx-muted); }
.arx-session-info { flex: 1; min-width: 0; }
.arx-session-name { font: 700 .9375rem/1.25 "Space Grotesk", system-ui, sans-serif; }
.is-cancelled .arx-session-name { text-decoration: line-through; color: var(--arx-muted); }
.arx-session-leader,
.arx-session-capacity { margin-top: .1875rem; font-size: .75rem; color: var(--arx-muted); }
.arx-session-badges { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }

/* --- Tillfällesdetalj: metadata som definitionslista --- */
.arx-dl {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1rem;
    margin: 1.5rem 0; padding: 1rem 1.25rem;
    background: var(--arx-white); border: 1px solid var(--arx-line); border-radius: var(--arx-radius);
}
.arx-dl-item dt { font: 600 .6875rem/1.3 "Inter", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--arx-muted); margin: 0 0 .25rem; }
.arx-dl-item dd { margin: 0; font: 700 1rem/1.25 "Space Grotesk", system-ui, sans-serif; color: var(--arx-ink); }
.arx-dl-item dd a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* --- Tillfällesdetalj: liten sekundärtext inuti primära knappar (t.ex. klockslag) --- */
.arx-btn-meta { font-size: .75rem; font-weight: 500; opacity: .7; }

/* --- Tillfällesdetalj: aktivitetsbeskrivning och verksamhets-CTA-text --- */
.arx-session-description { margin: 1rem 0 0; font-size: .875rem; line-height: 1.55; color: var(--arx-muted); }

/* ==========================================================================
   APPNIVÅ (täthetsnivå: APP/TÄT) — Fas 4, Task 18.
   Verksamhetsdashboard (arketyp 3), medlemslista (arketyp 4) och närvarovy
   (arketyp 5/tät). Inga nya färger — bara nya kompositioner av tokens.
   ========================================================================== */

/* --- Dashboard: nyckeltalskort + snabbåtkomst --- */
.arx-stat-label { font-size: .75rem; color: var(--arx-muted); }
.arx-stat-value { margin-top: .125rem; font: 700 1.5rem/1.2 "Space Grotesk", system-ui, sans-serif; color: var(--arx-ink); }
.arx-card--raised .arx-stat-label { color: rgba(232, 237, 243, .6); }
.arx-card--raised .arx-stat-value { color: #fff; }

.arx-quicklink {
    display: block; padding: .75rem; border-radius: var(--arx-radius-sm);
    background: var(--arx-canvas); border: 1px solid transparent;
    color: var(--arx-ink-2); font: 600 .875rem/1.3 "Inter", system-ui, sans-serif;
    text-decoration: none; transition: background-color .15s ease, border-color .15s ease;
}
.arx-quicklink:hover { background: var(--arx-white); border-color: var(--arx-line); }
.arx-quicklink:focus-visible { outline: 2px solid var(--arx-lime-ink); outline-offset: 2px; }

/* Kodsnutten i "aktivera publik sida"-tipset (t.ex. arenix.se/kommun/klubb). */
.arx-alert code { background: rgba(17, 27, 40, .07); padding: .0625rem .3125rem; border-radius: .25rem; font-size: .8125rem; }

/* --- Kompakta fält (medlemslistans panel, bulkraden m.fl.). arenix.css laddas
   EFTER tailwind.css, så .arx-input{width:100%} slår Tailwinds w-*-utilities
   på alla arx-input — bredder sätts därför med de här modifierarna, som står
   efter .arx-input i kaskaden och därmed vinner. --- */
.arx-input--sm { padding: .3125rem .5rem; font-size: .8125rem; }
.arx-input--num { display: inline-block; width: 5.5rem; vertical-align: middle; }
.arx-input--grow { width: auto; flex: 1 1 9rem; }
.arx-inline-form { background: var(--arx-canvas); border: 1px solid var(--arx-line); border-radius: var(--arx-radius-sm); padding: .5rem; }
.arx-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.arx-bulkbar .arx-input { width: auto; max-width: 100%; }
.arx-bulkbar .arx-input--grow { flex-basis: 12rem; }

/* --- Radlista (medlemslistan, 2026-09-01) — ersätter arx-table där varje rad
   bär egna formulär. Tabellen fick en horisontell scrollbar redan på desktop:
   åtgärdscellen med fem–sex inline-<details> och whitespace-nowrap blev ~700px
   bred på egen hand, i en innehållsyta på ~880px (max-w-6xl minus sidomenyn).
   Här är raden en <summary>: namn + e-post · roll | status/avgift i FASTA
   rem-spår (så badgarna linjerar som kolumner) | chevron. Tryck öppnar
   åtgärdspanelen i radens fulla bredd. Overflow är omöjlig i konstruktionen:
   spåren styrs inte av innehållet och e-posten bryter (overflow-wrap:
   anywhere). Kolumnlayouten styrs av en CONTAINER-query på listans egen bredd,
   inte viewporten: vid md-brytpunkten (768px) dyker 220px-sidomenyn upp och
   innehållsytan krymper till ~490px — en viewport-query på 640px gav där ~140px
   åt namn + e-post och bröt varje adress mitt i ordet. Under 36rem listbredd
   ligger badgarna på egen rad under namnet. --- */
.arx-rowlist { background: var(--arx-white); border: 1px solid var(--arx-line); border-radius: var(--arx-radius-sm); overflow: hidden; container-type: inline-size; }
.arx-rowlist__head { display: none; }
.arx-rowlist__rows { list-style: none; margin: 0; padding: 0; }
.arx-rowlist__row { display: flex; align-items: flex-start; }
.arx-rowlist__row + .arx-rowlist__row { border-top: 1px solid var(--arx-line); }
/* Radmarkering vid hover/öppen: på <li>, inte på <summary> — annars står
   kryssrutekolumnen kvar vit som en remsa till vänster om den tonade raden. */
.arx-rowlist__row:has(> details > .arx-rowlist__summary:hover),
.arx-rowlist__row:has(> details[open]) { background: var(--arx-lime-mist); }
.arx-rowlist__check { flex: 0 0 2.5rem; display: flex; justify-content: center; padding-top: .9375rem; }
.arx-rowlist__check input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--arx-lime-ink); cursor: pointer; }
.arx-rowlist__item { flex: 1 1 auto; min-width: 0; }
.arx-rowlist__summary {
    display: grid; grid-template-columns: auto minmax(0, 1fr) 1.5rem;
    grid-template-areas: "who who chev" "status fee fee";
    column-gap: .5rem; row-gap: .375rem; align-items: center;
    padding: .75rem .75rem .75rem 0; list-style: none; cursor: pointer;
}
/* Utan kryssrutekolumn (avgiften avstängd) står raden själv för vänsterluften. */
.arx-rowlist__item:first-child > .arx-rowlist__summary,
.arx-rowlist__item:first-child > .arx-rowlist__panel { padding-left: .875rem; }
.arx-rowlist__summary::-webkit-details-marker { display: none; }
.arx-rowlist__summary::marker { content: ""; }
.arx-rowlist__summary:focus-visible { outline: 2px solid var(--arx-lime-ink); outline-offset: -2px; border-radius: var(--arx-radius-sm); }
.arx-rowlist__summary--static { cursor: default; }
.arx-rowlist__who { grid-area: who; min-width: 0; }
.arx-rowlist__name { display: block; font: 600 .9375rem/1.3 "Inter", system-ui, sans-serif; color: var(--arx-ink); overflow-wrap: anywhere; }
.arx-rowlist__meta { display: block; margin-top: .125rem; font-size: .8125rem; line-height: 1.35; color: var(--arx-muted); overflow-wrap: anywhere; }
.arx-rowlist__role--priv { font-weight: 600; color: var(--arx-ink-2); }
.arx-rowlist__status { grid-area: status; }
.arx-rowlist__fee { grid-area: fee; }
.arx-rowlist__none { display: none; font-size: .8125rem; color: var(--arx-muted); }
.arx-rowlist__chev {
    grid-area: chev; justify-self: end; width: 1.5rem; height: 1.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--arx-muted); transition: transform .15s ease;
}
details[open] > .arx-rowlist__summary .arx-rowlist__chev { transform: rotate(180deg); color: var(--arx-ink); }
@media (prefers-reduced-motion: reduce) { .arx-rowlist__chev { transition: none; } }
/* Den neutrala badgen delar token (lime-mist) med radtonen vid hover/öppen —
   utan hårlinjen löstes "Avslutad"/"Ingen avgift just nu" upp i bakgrunden
   så fort raden öppnades. */
.arx-rowlist .arx-badge--neutral { box-shadow: inset 0 0 0 1px var(--arx-line); }

/* Åtgärdspanelen: ett dragspel, en åtgärd per rad i full bredd. Formuläret
   öppnas på plats under sin etikett, så ingenting flyttar sig under pekaren
   (chips i en brytande rad gjorde det: en öppnad chip hoppade till egen rad).
   min-width:0 på varje led — annars blir ett långt produktnamn i en <select>
   formulärets min-content-bredd och klipps tyst av .arx-rowlist{overflow:hidden}. */
.arx-rowlist__panel { min-width: 0; padding: 0 .75rem .875rem 0; }
.arx-rowlist__actions { display: grid; gap: .375rem; }
.arx-action { min-width: 0; background: var(--arx-white); border: 1px solid var(--arx-line); border-radius: var(--arx-radius-sm); }
.arx-action[open] { border-color: var(--arx-ink-2); }
.arx-action__summary, .arx-action__btn {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    width: 100%; min-height: 2.5rem; padding: .5rem .75rem;
    font: 600 .8125rem/1.3 "Inter", system-ui, sans-serif; color: var(--arx-ink); text-align: left;
    background: none; border: 0; border-radius: var(--arx-radius-sm); appearance: none;
    cursor: pointer; list-style: none;
}
.arx-action__summary::-webkit-details-marker { display: none; }
.arx-action__summary::marker { content: ""; }
.arx-action__summary::after {
    content: ""; flex-shrink: 0; width: .5rem; height: .5rem; margin: 0 .25rem .1875rem 0;
    border-right: 1.75px solid var(--arx-muted); border-bottom: 1.75px solid var(--arx-muted);
    transform: rotate(45deg);
}
.arx-action[open] > .arx-action__summary::after { transform: rotate(-135deg); margin: .1875rem .25rem 0 0; }
.arx-action__summary:hover, .arx-action__btn:hover { background: var(--arx-canvas); }
.arx-action__summary:focus-visible, .arx-action__btn:focus-visible { outline: 2px solid var(--arx-lime-ink); outline-offset: -2px; }
.arx-action .arx-inline-form {
    margin: 0; max-width: 100%; background: none; border: 0; border-radius: 0;
    border-top: 1px solid var(--arx-line); padding: .625rem .75rem .75rem;
}
.arx-action .arx-input { width: auto; max-width: 100%; min-width: 0; }
.arx-action .arx-input--num { width: 5.5rem; }

@container (min-width: 36rem) {
    .arx-rowlist__head {
        display: flex; background: var(--arx-canvas); border-bottom: 1px solid var(--arx-line);
        border-radius: var(--arx-radius-sm) var(--arx-radius-sm) 0 0;
    }
    .arx-rowlist__head .arx-rowlist__check { padding: 0; }
    .arx-rowlist__cols {
        flex: 1 1 auto; min-width: 0; display: grid; align-items: center;
        padding: .5rem .75rem .5rem 0;
        font: 600 .6875rem/1.3 "Inter", system-ui, sans-serif;
        text-transform: uppercase; letter-spacing: .04em; color: var(--arx-muted);
    }
    .arx-rowlist__cols:first-child { padding-left: .875rem; }
    .arx-rowlist__summary, .arx-rowlist__cols {
        grid-template-columns: minmax(0, 1fr) 6rem 1.5rem;
        grid-template-areas: "who status chev";
        column-gap: .75rem;
    }
    .arx-rowlist--fee .arx-rowlist__summary, .arx-rowlist--fee .arx-rowlist__cols {
        grid-template-columns: minmax(0, 1fr) 6rem 9rem 1.5rem;
        grid-template-areas: "who status fee chev";
    }
    .arx-rowlist__none { display: inline; }
}
/* Generisk inline-länk (ersätter legacy brand-link i migrerade vyer —
 * beslut peber 2026-08-19: lime-mönstret, inte lila). Ärver textstorlek;
 * arx-link-action nedan är varianten för små radåtgärder (12px). */
.arx-link {
    color: var(--arx-lime-ink); font-weight: 600;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.arx-link:hover { color: var(--arx-ink); }
.arx-link:focus-visible { outline: 2px solid var(--arx-lime-ink); outline-offset: 2px; }

.arx-link-action {
    display: inline-block; color: var(--arx-lime-ink);
    font: 600 .75rem/1.3 "Inter", system-ui, sans-serif;
    text-decoration: underline; text-underline-offset: 2px;
    background: none; border: none; padding: 0; cursor: pointer;
}
.arx-link-action:hover { color: var(--arx-ink); }
.arx-link-action:focus-visible { outline: 2px solid var(--arx-lime-ink); outline-offset: 2px; }

/* --- Närvaro: touchvänliga rader (≥44px), ingen hover-beroende funktion --- */
.arx-attendance-tabs { display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem; background: var(--arx-white); border: 1px solid var(--arx-line); border-radius: var(--arx-radius-sm); }

.arx-attendance-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; text-align: center; }
.arx-attendance-summary > div { border-radius: var(--arx-radius-sm); padding: .625rem; }
.arx-attendance-summary .n { font: 700 1.125rem/1 "Space Grotesk", system-ui, sans-serif; }
.arx-attendance-summary .l { margin-top: .125rem; font-size: .75rem; }
.arx-attendance-present { background: var(--status-success-soft); color: var(--status-success-ink); }
.arx-attendance-absent { background: var(--status-danger-soft); color: var(--status-danger); }

/* Kort med en flush rubrikrad (h2 klistrad mot kortets kant) ovanpå en lista
   av arx-attendance-row — ersätter card-body-paddingen med rubrikens egen. */
.arx-card--flush { padding: 0; }
.arx-card--flush > h2 { margin: 0; padding: .75rem 1rem; border-bottom: 1px solid var(--arx-line); }

.arx-attendance-list { list-style: none; margin: 0; padding: 0; }
.arx-attendance-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
    min-height: 44px; padding: .625rem 1rem;
    border-bottom: 1px solid var(--arx-line);
}
.arx-attendance-list > .arx-attendance-row:last-child { border-bottom: none; }
.arx-attendance-row--empty { justify-content: center; color: var(--arx-muted); }
/* Rad vars åtgärd är ett fritextfält och inte får trängas ihop med texten. */
.arx-attendance-row--stack { flex-direction: column; align-items: stretch; }
.arx-attendance-name { font: 600 .9375rem/1.3 "Inter", system-ui, sans-serif; color: var(--arx-ink); display: flex; align-items: center; gap: .375rem; }
.arx-attendance-meta { margin-top: .125rem; font-size: .75rem; color: var(--arx-muted); }
.arx-attendance-check { color: var(--status-success-ink); }

/* ==========================================================================
   APPNIVÅ (täthetsnivå: APP) — Fas 5, Task 1. Bokningar/produkter/köpflöden
   (arketyp 3/4/9). Inga nya färger — tokens från ovan.
   ========================================================================== */

/* --- Generisk dämpad text (etiketter, radbildtexter) — till skillnad från
   arx-help/arx-page-sub bär den ingen egen marginal, så den går att lägga
   i en flex-rad utan att rubba baslinjen. Efterfrågad i
   DESIGNMIGRATION_KVARFYND.md ("inför en arx-text-muted/caption-klass"). --- */
.arx-text-muted { color: var(--arx-muted); }
.arx-card--raised .arx-text-muted { color: rgba(232, 237, 243, .6); }

/* --- Kort med flera avdelade sektioner i EN card (t.ex. köpgranskningens
   säljare/produkt/avtal/formulär) — ersätter ad-hoc `border-t pt-3`. --- */
.arx-card-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--arx-line); }

/* --- Mina tillfällen: streak-kortets nyckeltalsrad (månad/totalt/längsta),
   avdelad från streak-headlinen ovanför. På den mörka arx-card--raised-ytan
   används en ljus, halvgenomskinlig linje i stället för arx-line. --- */
.arx-card-divider { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--arx-line); }
.arx-card--raised .arx-card-divider { border-top-color: rgba(255, 255, 255, .14); }

/* --- Streak-ring (arx_streak_ring(), bookings/mine.php) — porterad från
   pm-hifi:s .pm-ring inför dess radering (Fas 8, Task 1). Basen är ljus;
   .arx-card--raised-varianten (mörk yta) tar över på streak-kortet. --- */
.arx-ring { transform: rotate(-90deg); }
.arx-ring circle { fill: none; stroke-linecap: round; }
.arx-ring circle:first-of-type { stroke: rgba(17, 27, 40, .12); }
.arx-ring circle:last-of-type { stroke: var(--arx-lime-ink); }
.arx-card--raised .arx-ring circle:first-of-type { stroke: rgba(255, 255, 255, .16); }
.arx-card--raised .arx-ring circle:last-of-type { stroke: var(--arx-lime); }

/* Ring-etikett (t.ex. "DAGAR I RAD" i ringens mitt). Storleken sätts inline
   per instans (arx_streak_ring() skalar den med ringstorleken); max-width
   håller texten inom ringens raka mittparti så den inte skär ringens böjda
   kant på breda etiketter (Fas 8, Task 4 — f8t2-ring-crop.png). */
.arx-ring-label {
    max-width: 74%;
    margin-inline: auto;
    font: 700 .625rem/1.15 "Inter", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: center;
    color: var(--arx-muted);
}
.arx-card--raised .arx-ring-label { color: rgba(232, 237, 243, .6); }

/* --- Pulserande statuspunkt (arx_pulse()) — porterad från pm-hifi:s
   .pm-pulse, status-info-tokenen i stället för den lila accenten (Fas 8,
   Task 1). --- */
@keyframes arxPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .3; } }
.arx-pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--status-info); position: relative; display: inline-block; }
.arx-pulse::after {
    content: ''; position: absolute; inset: 0; border-radius: 999px;
    background: var(--status-info); animation: arxPulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .arx-pulse::after { animation: none; }
}

/* --- Chattbubbla (messages/show.php) — ersätter ad-hoc bg-white/rounded-lg,
   som fick en dubbel kant av pm-hifi:s .bg-white.rounded-lg-box-shadow
   OVANPÅ den egna border-linec-kanten (Fas 8, Task 1). --- */
.arx-bubble { border-radius: var(--arx-radius); padding: .75rem; background: var(--arx-white); border: 1px solid var(--arx-line); }
.arx-bubble--own { background: var(--arx-lime); color: var(--arx-ink); border-color: transparent; }

/* --- Bekräftelse-/felsidor (arketyp 12, etablerad i Fas 5 Task 2 —
   e-postbytets confirm_success/stop_success/confirm_invalid, återanvänds av
   Task 3–5). Ikonen är en EGEN DOM-nod, aldrig sammanslagen med rubrikens
   textinnehåll — säkerhetsgranskad copy (signup-granskningen 2026-08-17) i
   e-postbyteskedjan ska förbli ordagrann. --- */
.arx-outcome-icon {
    width: 2.75rem; height: 2.75rem; margin: 0 auto .75rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 1.25rem; font-weight: 700; line-height: 1;
}
.arx-outcome-icon--success { background: var(--status-success-soft); color: var(--status-success-ink); }
.arx-outcome-icon--warning { background: var(--status-warning-soft); color: var(--status-warning); }
.arx-outcome-icon--error   { background: var(--status-danger-soft); color: var(--status-danger); }

/* Medlemssökrutan i "lägg till deltagare" (JS-renderad resultatlista). */
.arx-suggest-panel { background: var(--arx-white); border: 1px solid var(--arx-line); border-radius: var(--arx-radius-sm); box-shadow: var(--arx-shadow-card); }
.arx-suggest-header { padding: .375rem .75rem; font: 700 .6875rem/1.3 "Inter", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--arx-muted); background: var(--arx-canvas); }
.arx-suggest-item { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: .5rem .75rem; cursor: pointer; }
.arx-suggest-item:hover, .arx-suggest-item:focus { background: var(--arx-lime-mist); }
.arx-suggest-item .name { font-size: .875rem; color: var(--arx-ink); }
.arx-suggest-item .email { font-size: .75rem; color: var(--arx-muted); }

/* ==========================================================================
   APPNIVÅ (täthetsnivå: APP) — Fas 5, Task 4. Inbox/notiser (arketyp 4).
   ========================================================================== */

/* --- Trådrad (inkorg + notislista): en klickbar rad med ämne/utdrag till
   vänster och tid/oläst-antal till höger. Varken medlemslistans strukturerade
   kolumner (arx-table) eller schemats tidsfokuserade layout (arx-session-card,
   fast vänsterkolumn för klockslag) passar fritextinnehåll som ämnesrader och
   meddelandeutdrag — därför en egen, minimal komponent (Task 4-brief). Läggs
   i ett arx-card + arx-card--flush-skal, samma mönster som attendance-listan. --- */
.arx-thread-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
    padding: .875rem 1rem; text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--arx-line);
    transition: background-color .15s ease;
}
.arx-thread-row:last-child { border-bottom: none; }
.arx-thread-row:hover { background: var(--arx-lime-mist); }
.arx-thread-row:focus-visible { outline: 2px solid var(--arx-lime-ink); outline-offset: -2px; }
.arx-thread-subject { font: 600 .9375rem/1.3 "Inter", system-ui, sans-serif; color: var(--arx-ink); }
.arx-thread-row.is-unread .arx-thread-subject { font-weight: 700; }
.arx-thread-snippet {
    margin-top: .1875rem; font-size: .8125rem; color: var(--arx-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arx-thread-meta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.arx-thread-time { font-size: .75rem; color: var(--arx-muted); }

/* Notislistans utfällbara rad. En <summary> med display:flex tappar
   webbläsarens egen disclosure-triangel (den ritas bara på list-item), så
   chevronen nedan är dess ersättare — utan den ser raden ut som ren text och
   ingen hittar den fulla notistexten. */
.arx-notice__summary { cursor: pointer; }
.arx-notice__summary::-webkit-details-marker { display: none; }
.arx-notice__summary::marker { content: ""; }
.arx-notice__summary:hover { background: var(--arx-lime-mist); }
.arx-notice__summary:focus-visible { outline: 2px solid var(--arx-lime-ink); outline-offset: -2px; }
.arx-notice__chev {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.25rem; height: 1.25rem; color: var(--arx-muted);
    transition: transform .15s ease;
}
details[open] > .arx-notice__summary .arx-notice__chev { transform: rotate(180deg); color: var(--arx-ink); }
details[open] > .arx-notice__summary { background: var(--arx-lime-mist); }
/* Utdraget är sammanfattningens ersättning för hela texten — när den ändå står
   utskriven nedanför blir utdraget samma mening två gånger, den ena avklippt. */
details[open] > .arx-notice__summary .arx-thread-snippet { display: none; }
@media (prefers-reduced-motion: reduce) { .arx-notice__chev { transition: none; } }

/* ==========================================================================
   TÄT densitetsnivå (adminvyer i arx-sidebar-skalet) — Fas 6, Task 2.
   Medlemsadmin/delegationsärenden. Inga nya färger — tokens från ovan.
   ========================================================================== */

/* --- Citerad fritext i listor (t.ex. en medlemsansökans fritextmeddelande)
   — samma tondämpade ruta som arx-inline-form, men utan formulärsemantik. --- */
.arx-quote-box { background: var(--arx-canvas); border: 1px solid var(--arx-line); border-radius: var(--arx-radius-sm); padding: .5rem .75rem; white-space: pre-line; }

/* --- Odelbar användardata: e-postadresser, slugs, publika URL:er. De saknar
   mellanslag och blir ETT ord som webbläsaren vägrar bryta — i ett kort med
   max-w-md stack inbjudningssidans adress rakt ut ur kortet och ur skärmen vid
   320px (bugg 2026-08-23). 'anywhere' och inte 'break-word': bara anywhere
   påverkar min-content-bredden, så även föräldern får krympa. --- */
.arx-breakable { overflow-wrap: anywhere; }
/* Inline-<code> bär nästan alltid just sådan data i den här appen (slug,
   publik adress). Egen regel i stället för webbläsarens default, som saknar
   både brytning och storleksanpassning mot Inter. */
code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .875em; overflow-wrap: anywhere; }

/* --- Kodblock: förformaterad textvy (t.ex. JSON-förgranskningen vid
   CSV-import) — äkta whitespace/radbrytningar bevaras, olikt arx-quote-box. --- */
.arx-code-block { display: block; background: var(--arx-canvas); padding: .75rem 1rem; font: 400 .75rem/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace; color: var(--arx-ink-2); overflow-x: auto; white-space: pre; }

/* --- Indragen sublista (t.ex. en delegats administrerade personer) — ersätter
   ad-hoc `border-l-2 border-slate-200`. --- */
.arx-indent-list { padding-left: .75rem; border-left: 2px solid var(--arx-line); }

/* ==========================================================================
   TÄT densitetsnivå (adminvyer i arx-sidebar-skalet) — Fas 6, Task 3.
   Ekonomi/medlemsavgifter/LOK-rapporter. Inga nya färger — tokens från ovan.
   ========================================================================== */

/* --- Rapporternas nyckeltalsplattor (t.ex. Intäkt/Återbetalt, Betalda/
   Väntar, LOK-summeringen) — färgad variant av arx-stat-label/value, ersätter
   ad-hoc bg-emerald-50/bg-rose-50/bg-amber-50/bg-sky-50-rutor. Etiketten bär
   plattans betydelse, värdet förblir arx-ink så siffran läses lika tydligt
   oavsett variant. --- */
.arx-stat-tile { background: var(--arx-white); border: 1px solid var(--arx-line); border-radius: var(--arx-radius); padding: .875rem 1rem; }
.arx-stat-tile--success { background: var(--status-success-soft); border-color: #c8e2d0; }
.arx-stat-tile--success .arx-stat-label { color: var(--status-success-ink); }
.arx-stat-tile--danger { background: var(--status-danger-soft); border-color: #fecdd3; }
.arx-stat-tile--danger .arx-stat-label { color: var(--status-danger); }
.arx-stat-tile--info { background: var(--status-info-soft); border-color: #bae6fd; }
.arx-stat-tile--info .arx-stat-label { color: var(--status-info); }
.arx-stat-tile--warning { background: var(--status-warning-soft); border-color: #fde68a; }
.arx-stat-tile--warning .arx-stat-label { color: var(--status-warning); }
.arx-stat-tile--neutral { background: var(--arx-canvas); }

/* --- Formulärets grupperingsruta (t.ex. produktformens klippkorts-/
   medlemskapsfält, synliga oavsett vald typ) — ersätter ad-hoc
   `border border-slate-200 rounded p-3`. --- */
.arx-fieldset { border: 1px solid var(--arx-line); border-radius: var(--arx-radius-sm); padding: .75rem; }
.arx-fieldset > legend { font-size: .75rem; color: var(--arx-muted); padding: 0 .25rem; }

/* --- Rörelse (endast marknadsytor; arenix-motion.js sätter is-revealed) --- */
.motion-ready [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.motion-ready [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .motion-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
    [data-parallax] { transform: none !important; }
}