/* =====================================================================
 * aka-18-utility.css — Utility / Search-mode v2 (Fas 0, passivt fundament)
 * ---------------------------------------------------------------------
 * Status: PASSIV. Inga befintliga komponenter använder dessa klasser
 * ännu. Filen laddas globalt men ändrar ingenting visuellt sajten över.
 *
 * Aktiveras i migrationsfas 4 enligt:
 *   docs/CHANGELOG.md  (entry 2026-05-13 · Design-system v2 · Fas 0)
 *   .cursor/rules/aka-design-modes.mdc
 *
 * Avsedd för "Utility / Search Mode"-sidor:
 *   - Hitta vård (Norden / Europa)
 *   - Ordlistan /ord/
 *   - Framtida register / databaser
 *   - WooCommerce produkt-kategoriarkiv
 *   - Notifications-center, Mina rapporter
 *
 * Kontrast mot aka-17-cards.css (Editorial):
 *   - Tätare densitet (mindre padding)
 *   - Inga topplinjer som dekoration
 *   - Färgkodning som markör (badge/dot), inte ytfärg
 *   - Symmetri är OK — gör resultat skanbara
 *
 * Tokens från aka-01-base-and-design-system.css.
 * ===================================================================== */

/* --- Sökfält (utility) ------------------------------------------------ */
/* Bottom-border-stil. Använd: <input class="aka-util-search" …>         */
.aka-util-search {
    width: 100%;
    height: var(--aka-util-search-h);
    box-sizing: border-box;
    border: 0;
    border-bottom: 2px solid var(--aka-util-line);
    background: transparent;
    padding: 10px 0;
    font: inherit;
    font-size: 1.05rem;
    color: inherit;
    transition: border-color .15s ease;
}
.aka-util-search:focus {
    outline: none;
    border-bottom-color: var(--color-brand);
}
.aka-util-search::placeholder {
    color: #999;
}

/* Pill-variant: matchar ordlistans nuvarande sökruta. Modifier kan kombineras
 * med .aka-util-search för Hitta vård och framtida register som vill ha
 * samma look som /ord/ utan att duplicera CSS. Passiv tills aktivt använd. */
.aka-util-search--pill {
    height: var(--aka-util-search-h, 48px);
    padding: 0 50px 0 14px;
    border: 1px solid var(--aka-util-line);
    border-bottom: 1px solid var(--aka-util-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.aka-util-search--pill:focus {
    outline: none;
    border-color: var(--color-brand);
    border-bottom-color: var(--color-brand);
    box-shadow: 0 0 0 2px rgba(26,188,156,.12);
}

/* --- Filterrad (utility) --------------------------------------------- */
/* Typografiska chips, inte färgklumpar. */
.aka-util-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--aka-util-line);
}
.aka-util-filterbar__label {
    font-size: .85rem;
    font-weight: 600;
    color: #555;
    margin-right: 4px;
}
.aka-util-filterbar__group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
}
.aka-util-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--aka-util-chip-h);
    padding: 4px 2px;
    font-size: .95rem;
    color: #555;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.aka-util-chip:hover {
    color: #111;
}
.aka-util-chip.is-active {
    color: var(--color-care);
    border-bottom-color: var(--color-care);
    font-weight: 600;
}
.aka-util-chip[data-pillar="brand"].is-active   { color: var(--color-brand);   border-bottom-color: var(--color-brand); }
.aka-util-chip[data-pillar="care"].is-active    { color: var(--color-care);    border-bottom-color: var(--color-care); }
.aka-util-chip[data-pillar="food"].is-active    { color: var(--color-food);    border-bottom-color: var(--color-food); }
.aka-util-chip[data-pillar="treat"].is-active   { color: var(--color-treat);   border-bottom-color: var(--color-treat); }
.aka-util-chip[data-pillar="disease"].is-active { color: var(--color-disease); border-bottom-color: var(--color-disease); }
.aka-util-chip[data-pillar="anat"].is-active    { color: var(--color-anat);    border-bottom-color: var(--color-anat); }

/* --- Resultatkort (utility) ------------------------------------------ */
/* Konsekvent rad/kort, jämförbar uppifrån och ner. */
.aka-util-card {
    display: block;
    background: var(--aka-util-bg);
    border: 1px solid var(--aka-util-line);
    border-radius: var(--aka-util-radius);
    padding: var(--aka-util-pad);
    box-shadow: var(--aka-util-shadow);
    color: inherit;
    text-decoration: none;
    transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.aka-util-card:hover {
    background: var(--aka-util-bg-hover);
    box-shadow: var(--aka-util-shadow-hover);
}

.aka-util-card--tight {
    padding: var(--aka-util-pad-tight);
    border-radius: var(--aka-util-radius-tight);
}

/* Inre rad-struktur: ikon/flagga | titel + meta | pil */
.aka-util-card__row {
    display: grid;
    grid-template-columns: 32px 1fr 16px;
    gap: 12px;
    align-items: start;
}
.aka-util-card__media {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
}
.aka-util-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}
.aka-util-card__meta {
    margin: 2px 0 0 0;
    font-size: .9rem;
    color: #555;
    line-height: 1.4;
}
.aka-util-card__meta + .aka-util-card__meta {
    margin-top: 2px;
}
.aka-util-card__chevron {
    align-self: center;
    color: #999;
}

/* Kategori-badge (textfärg, ingen pill-bakgrund) */
.aka-util-badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #777;
}
.aka-util-badge[data-pillar="brand"]   { color: var(--color-brand); }
.aka-util-badge[data-pillar="care"]    { color: var(--color-care); }
.aka-util-badge[data-pillar="food"]    { color: var(--color-food); }
.aka-util-badge[data-pillar="treat"]   { color: var(--color-treat); }
.aka-util-badge[data-pillar="disease"] { color: var(--color-disease); }
.aka-util-badge[data-pillar="anat"]    { color: var(--color-anat); }
.aka-util-badge[data-pillar="research"]{ color: var(--color-research); }
.aka-util-badge[data-pillar="rights"]  { color: var(--color-rights); }
.aka-util-badge[data-pillar="family"]  { color: var(--color-family); }
.aka-util-badge[data-pillar="tool"]    { color: var(--color-tool); }

/* --- Resultatlista (lexikon-/registerstil) --------------------------- */
.aka-util-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.aka-util-list > li {
    border-top: 1px solid var(--aka-util-line);
    padding: var(--aka-util-pad-tight);
    min-height: var(--aka-util-row-min);
}
.aka-util-list > li:last-child {
    border-bottom: 1px solid var(--aka-util-line);
}
.aka-util-list > li:hover {
    background: var(--aka-util-bg-hover);
}

.aka-util-list__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.aka-util-list__title {
    margin: 0;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.3;
}
.aka-util-list__lead {
    margin: 2px 0 0 0;
    color: #555;
    font-size: .95rem;
    line-height: 1.45;
}

/* --- Resultat-grid (utility) ----------------------------------------- */
/* Konsekvent 2-3 kol grid. Får vara symmetrisk — det hjälper scanning. */
.aka-util-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.aka-util-grid--2 {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

/* --- Sektionsrubriker (utility — tunna, typografiska) ---------------- */
.aka-util-section-heading {
    margin: var(--aka-util-rhythm-section) 0 var(--aka-util-rhythm) 0;
    padding: 0 0 6px 0;
    border-bottom: 1px solid var(--aka-util-line);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: #222;
}
.aka-util-section-heading__count {
    font-size: .85rem;
    font-weight: 500;
    color: #888;
}

/* --- Tomt tillstånd (utility) ---------------------------------------- */
.aka-util-empty {
    padding: 32px 16px;
    text-align: center;
    color: #666;
    border: 1px dashed var(--aka-util-line);
    border-radius: var(--aka-util-radius);
}
.aka-util-empty__title {
    margin: 0 0 .35rem 0;
    font-weight: 700;
    color: #333;
}
.aka-util-empty__reset {
    display: inline-block;
    margin-top: .5rem;
    color: var(--color-brand);
    text-decoration: none;
    font-weight: 600;
}
.aka-util-empty__reset:hover {
    text-decoration: underline;
}

/* --- Mobil-justeringar ----------------------------------------------- */
@media (max-width: 600px) {
    .aka-util-filterbar {
        gap: 6px 10px;
    }
    .aka-util-card__row {
        grid-template-columns: 28px 1fr 14px;
        gap: 10px;
    }
    .aka-util-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Återanvändbar kicker (utility) ---------------------------------- */
.aka-util-kicker {
    display: block;
    margin: 0 0 4px 0;
    font-size: .72rem;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: #888;
}

/* =====================================================================
 * Utility-bibliotek v2 — extension för Hitta vård och framtida register
 * ---------------------------------------------------------------------
 * Passivt tillägg. Inga befintliga selectors ändrade. Aktiveras först
 * när komponenter (HV, registret etc.) markeras med dessa klasser.
 * ===================================================================== */

/* --- Tools-band: sök + filter + counter på en rad -------------------- */
/* Användning:
 * <div class="aka-util-tools">
 *   <input class="aka-util-search aka-util-search--pill" …>
 *   <nav class="aka-util-filterbar">…</nav>
 *   <span class="aka-util-counter">23 träffar</span>
 * </div>
 */
.aka-util-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0 0;
}
.aka-util-tools > .aka-util-search,
.aka-util-tools > input.aka-util-search {
    flex: 1 1 280px;
    max-width: 420px;
}
.aka-util-tools > .aka-util-filterbar {
    flex: 1 1 auto;
    border-bottom: 0;
    padding: 0;
}
@media (max-width: 600px) {
    .aka-util-tools {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .aka-util-tools > .aka-util-search,
    .aka-util-tools > input.aka-util-search {
        max-width: none;
    }
}

/* --- Counter: "X termer / X kliniker / X träffar" -------------------- */
.aka-util-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: .82rem;
    color: #6b7280;
    white-space: nowrap;
}
.aka-util-counter__num {
    font-weight: 700;
    color: #1f2937;
}
.aka-util-counter__label {
    font-weight: 500;
}

/* --- Listmodifier: definition-style (div-baserad lexikon-lista) ------ */
/* Dokumenterar mönstret ordlistan redan använder (#glossaryList med
 * .g-entry-barn). Modifier låter `.aka-util-list--definition` användas
 * på en `<div>` istället för `<ul>`, för framtida register som följer
 * samma mönster utan att duplicera CSS. */
.aka-util-list--definition {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}
.aka-util-list--definition > div,
.aka-util-list--definition > article {
    display: block;
    padding: 14px 4px 16px;
    border-top: 1px solid var(--aka-util-line);
    cursor: pointer;
    transition: background .15s ease;
}
.aka-util-list--definition > div:last-child,
.aka-util-list--definition > article:last-child {
    border-bottom: 1px solid var(--aka-util-line);
}
.aka-util-list--definition > div:hover,
.aka-util-list--definition > article:hover,
.aka-util-list--definition > div:focus-visible,
.aka-util-list--definition > article:focus-visible {
    background: var(--aka-util-bg-hover);
    outline: none;
}

/* --- Flagg-slot ------------------------------------------------------- */
/* Generisk container för flagga inuti utility-kort/-rader.
 * Passar i `.aka-util-card__media` eller fristående.
 * Framtida `inc/aka-flag-registry.php` levererar markup som matchar.
 *
 * Default-storlek = `--md` (28x19, 4:3). Modifier byter storlek.
 * Inga färger/bilder här — bara box-stil och dimensioner. */
.aka-util-flag {
    display: inline-block;
    width: 28px;
    height: 19px;
    border-radius: 2px;
    background: #f3f4f6;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
    vertical-align: middle;
    flex-shrink: 0;
}
.aka-util-flag > img,
.aka-util-flag > svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.aka-util-flag--sm {
    width: 18px;
    height: 12px;
    border-radius: 1px;
}
.aka-util-flag--md {
    width: 28px;
    height: 19px;
    border-radius: 2px;
}
.aka-util-flag--lg {
    width: 48px;
    height: 32px;
    border-radius: 3px;
}
/* Emoji-fallback: när inom .aka-util-flag är ett <span>-emoji */
.aka-util-flag--emoji {
    background: transparent;
    box-shadow: none;
    line-height: 1;
    text-align: center;
    font-size: 16px;
}
.aka-util-flag--sm.aka-util-flag--emoji { font-size: 12px; }
.aka-util-flag--lg.aka-util-flag--emoji { font-size: 28px; }

/* =====================================================================
 * Ordlista /ord/ – Utility/Search Mode v1.0.0
 * ---------------------------------------------------------------------
 * Scope: body.aka-page-ordlista och #aka-glossary-app.
 * Aktiveras automatiskt — ingen body-flagga. Markup i inc/ordlista-markup.php.
 * JS-kontrakt (IDs, klasser) opåverkat; endast presentation.
 * ===================================================================== */

/* Kompakt utility-header (ersätter tidigare gradient-hero) */
body.aka-page-ordlista .aka-glossary-util-head {
    max-width: 720px;
    margin: 0 auto 12px;
    text-align: left;
    padding: 4px 0 0;
}
body.aka-page-ordlista .aka-glossary-util-head .aka-util-kicker {
    color: var(--color-brand);
}
body.aka-page-ordlista .aka-glossary-util-head h1 {
    margin: 0 0 4px 0 !important;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    color: #1f2937 !important;
    line-height: 1.2;
}
body.aka-page-ordlista .aka-glossary-util-head__lead {
    margin: 0;
    color: #4b5563;
    font-size: .98rem;
    line-height: 1.5;
    max-width: 60ch;
}

/* Kategoripiller — samma pastell-ton som artikel-drawer (aka-21 is-tone-*) */
body.aka-page-ordlista #catFilter.glossary-cat-filter {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    max-width: 980px;
    margin: 0 auto 8px;
    padding: 6px 0 2px;
    border-bottom: 0;
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    border-bottom: 1px solid transparent;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.15;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip:hover {
    filter: brightness(0.97);
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip.active {
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip.is-tone-neutral {
    background: color-mix(in srgb, var(--color-product, #2c3e50) 10%, #fff);
    color: color-mix(in srgb, var(--color-product, #2c3e50) 78%, #1a2430);
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip.is-tone-neutral.active {
    background: color-mix(in srgb, var(--color-product, #2c3e50) 18%, #fff);
    border-color: color-mix(in srgb, var(--color-product, #2c3e50) 28%, transparent);
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip.is-tone-brand {
    background: color-mix(in srgb, var(--color-brand, #1abc9c) 16%, #fff);
    color: color-mix(in srgb, var(--color-brand, #1abc9c) 82%, #145b3a);
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip.is-tone-brand.active {
    background: color-mix(in srgb, var(--color-brand, #1abc9c) 22%, #fff);
    border-color: color-mix(in srgb, var(--color-brand, #1abc9c) 35%, transparent);
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip.is-tone-disease {
    background: color-mix(in srgb, var(--color-disease, #e74c3c) 16%, #fff);
    color: color-mix(in srgb, var(--color-disease, #e74c3c) 82%, #4a1510);
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip.is-tone-disease.active {
    background: color-mix(in srgb, var(--color-disease, #e74c3c) 22%, #fff);
    border-color: color-mix(in srgb, var(--color-disease, #e74c3c) 35%, transparent);
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip.is-tone-treat {
    background: color-mix(in srgb, var(--color-treat, #f39c12) 16%, #fff);
    color: color-mix(in srgb, var(--color-treat, #f39c12) 82%, #3a2a07);
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip.is-tone-treat.active {
    background: color-mix(in srgb, var(--color-treat, #f39c12) 22%, #fff);
    border-color: color-mix(in srgb, var(--color-treat, #f39c12) 35%, transparent);
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip.is-tone-food {
    background: color-mix(in srgb, var(--color-food, #27ae60) 16%, #fff);
    color: color-mix(in srgb, var(--color-food, #27ae60) 82%, #145b3a);
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip.is-tone-food.active {
    background: color-mix(in srgb, var(--color-food, #27ae60) 22%, #fff);
    border-color: color-mix(in srgb, var(--color-food, #27ae60) 35%, transparent);
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip.is-tone-care {
    background: color-mix(in srgb, var(--color-care, #2874a6) 16%, #fff);
    color: color-mix(in srgb, var(--color-care, #2874a6) 82%, #1a2f3f);
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip.is-tone-care.active {
    background: color-mix(in srgb, var(--color-care, #2874a6) 22%, #fff);
    border-color: color-mix(in srgb, var(--color-care, #2874a6) 35%, transparent);
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip.is-tone-anat {
    background: color-mix(in srgb, var(--color-anat, #8e44ad) 16%, #fff);
    color: color-mix(in srgb, var(--color-anat, #8e44ad) 82%, #2a1236);
}
body.aka-page-ordlista #catFilter .aka-glossary-cat-chip.is-tone-anat.active {
    background: color-mix(in srgb, var(--color-anat, #8e44ad) 22%, #fff);
    border-color: color-mix(in srgb, var(--color-anat, #8e44ad) 35%, transparent);
}

/* Termlista — neutralisera ev. arv från andra .aka-util-list (UL) regler
 * eftersom #glossaryList är en <div> som fylls med <div class="g-entry">. */
body.aka-page-ordlista #glossaryList.aka-util-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    min-height: 200px;
}

/* En lexikon-post */
body.aka-page-ordlista .g-entry {
    display: block;
    padding: 14px 4px 16px;
    border-top: 1px solid var(--aka-line);
    cursor: pointer;
    transition: background .15s ease;
}
body.aka-page-ordlista .g-entry:last-child {
    border-bottom: 1px solid var(--aka-line);
}
body.aka-page-ordlista .g-entry:hover,
body.aka-page-ordlista .g-entry:focus-visible {
    background: var(--aka-card-bg-quiet);
    outline: none;
}
body.aka-page-ordlista .g-entry:focus-visible {
    box-shadow: inset 2px 0 0 var(--color-brand);
}

body.aka-page-ordlista .g-entry__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 4px 0;
}
body.aka-page-ordlista .g-entry__term {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.3;
    color: #1f2937;
}

/* Listpost-badge: dämpa pillen till text-only (modal-badgen bibehålls). */
body.aka-page-ordlista .g-entry .g-badge {
    background: transparent !important;
    padding: 0;
    border-radius: 0;
    font-size: .7rem;
    letter-spacing: .04em;
    flex-shrink: 0;
    margin: 0;
}

body.aka-page-ordlista .g-entry__lead {
    margin: 0 0 4px 0;
    color: #4b5563;
    font-size: .95rem;
    line-height: 1.55;
}
/* Klick-affordance: alltid synlig diskret hint, förstärks på hover/focus.
 * Placerad inline efter definitionen som en lättviktig länkindikator. */
body.aka-page-ordlista .g-entry__more {
    display: inline-block;
    margin-top: 2px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--color-brand);
    opacity: .55;
    transition: opacity .15s ease;
}
body.aka-page-ordlista .g-entry:hover .g-entry__more,
body.aka-page-ordlista .g-entry:focus-visible .g-entry__more {
    opacity: 1;
    text-decoration: underline;
}

/* --- Alfabetrad: index-/lexikon-stil --------------------------------- */
/* Neutralisera oscope:ade .az-btn-regler från aka-04-fakta-andra-sjukdomar.css
 * (rad 312-314) som annars ger fyllda 32x32px-boxar och mörk aktiv-state. */
body.aka-page-ordlista #azFilter .az-btn {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: #6b7280 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 2px 6px !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    transform: none !important;
}
body.aka-page-ordlista #azFilter .az-btn[data-letter="ALL"] {
    padding: 2px 8px !important;
    font-weight: 600 !important;
}
body.aka-page-ordlista #azFilter .az-btn:hover {
    color: #1f2937 !important;
    background: transparent !important;
    border-color: transparent !important;
}
body.aka-page-ordlista #azFilter .az-btn.active {
    color: #1f2937 !important;
    border-bottom-color: #1f2937 !important;
    background: transparent !important;
    font-weight: 700 !important;
}

/* Callout-not flyttad till botten — dämpad inline-rad */
body.aka-page-ordlista .glossary-related-callout {
    max-width: 720px;
    margin: 32px auto 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--aka-line);
    border-radius: 0;
    padding: 16px 4px 0;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    box-shadow: none;
}
body.aka-page-ordlista .glossary-related-callout p {
    margin: 0;
    color: #6b7280;
    font-size: .92rem;
    line-height: 1.5;
}
body.aka-page-ordlista .glossary-related-callout__btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--color-brand) !important;
    font-weight: 700;
    text-decoration: none !important;
    font-size: .9rem;
    padding: 0;
    border-radius: 0;
    min-height: 0;
    white-space: nowrap;
}
body.aka-page-ordlista .glossary-related-callout__btn:hover {
    text-decoration: underline !important;
}

/* Mobil — gör hela utility-headern och callouten staplad */
@media (max-width: 700px) {
    body.aka-page-ordlista #aka-glossary-app {
        padding: 12px 16px 0;
    }
    body.aka-page-ordlista .aka-glossary-util-head {
        margin-bottom: 8px;
    }
    body.aka-page-ordlista .glossary-related-callout {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    body.aka-page-ordlista .g-entry__head {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Ordlista / tooltip — global affordance (underline + CSS ring mark)
   K-7-V3-ARTICLE-SHARED-COMPONENT-LIVE-DEFECT-FIX-1
   Root cause of live “square glyphs”: mask + solid background → filled square
   when mask fails. Marker is pure CSS (ring + i-stem), no Unicode/font/mask.
   ========================================================================== */
:root {
    --aka-glossary-term-color: var(--color-brand, #1abc9c);
}

.aka-term-link[data-term],
.aka-glossary-term[data-slug],
.interactive-term[data-term] {
    color: inherit !important;
    background: transparent !important;
    border-bottom: 0 !important;
    text-decoration: underline !important;
    text-decoration-color: var(--aka-glossary-term-color) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
    font-weight: inherit !important;
    cursor: pointer;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.aka-term-link[data-term]:hover,
.aka-term-link[data-term]:focus-visible,
.aka-glossary-term[data-slug]:hover,
.aka-glossary-term[data-slug]:focus-visible,
.interactive-term[data-term]:hover,
.interactive-term[data-term]:focus-visible {
    color: var(--aka-glossary-term-color) !important;
    text-decoration-color: var(--aka-glossary-term-color) !important;
    background: transparent !important;
}

.aka-term-link[data-term]:focus-visible,
.aka-glossary-term[data-slug]:focus-visible,
.interactive-term[data-term]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--aka-glossary-term-color) 45%, transparent);
    outline-offset: 2px;
    border-radius: 2px;
}

.aka-term-link[data-term]::after,
.aka-glossary-term[data-slug]::after,
.interactive-term[data-term]::after {
    content: "" !important;
    display: inline-block !important;
    width: 0.7em !important;
    height: 0.7em !important;
    margin-left: 0.14em !important;
    vertical-align: -0.05em !important;
    box-sizing: border-box !important;
    border: 1.5px solid var(--aka-glossary-term-color) !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    background-image:
        radial-gradient(circle at 50% 30%, var(--aka-glossary-term-color) 0 0.11em, transparent 0.12em),
        linear-gradient(var(--aka-glossary-term-color), var(--aka-glossary-term-color)) !important;
    background-size: 100% 100%, 1.5px 0.28em !important;
    background-position: center, center 68% !important;
    background-repeat: no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: 1 !important;
    pointer-events: none;
}

.aka-term-link[data-term].aka-glossary-repeat,
.aka-glossary-term[data-slug].aka-glossary-repeat,
.interactive-term[data-term].aka-glossary-repeat {
    text-decoration-color: rgba(90, 105, 112, 0.42) !important;
}

#aka-glossary-app .aka-term-link[data-term],
#aka-glossary-app .aka-glossary-term[data-slug] {
    text-decoration: none !important;
}

#aka-glossary-app .aka-term-link[data-term]::after,
#aka-glossary-app .aka-glossary-term[data-slug]::after {
    content: none !important;
    display: none !important;
}

/* Forskning: behåll blå accent på text/underline, samma ikon */
body.aka-page-forskning .res-main-content .aka-term-link[data-term],
body.aka-page-forskning .res-stats-grid .aka-term-link[data-term],
body.aka-page-forskning .res-featured-article .aka-term-link[data-term],
body.aka-page-forskning .res-hero .aka-term-link[data-term],
body.aka-page-forskning .res-callout .aka-term-link[data-term] {
    color: inherit !important;
    text-decoration-color: var(--color-research, #2980b9) !important;
}

body.aka-page-forskning .res-main-content .aka-term-link[data-term]:hover,
body.aka-page-forskning .res-stats-grid .aka-term-link[data-term]:hover,
body.aka-page-forskning .res-featured-article .aka-term-link[data-term]:hover,
body.aka-page-forskning .res-hero .aka-term-link[data-term]:hover,
body.aka-page-forskning .res-callout .aka-term-link[data-term]:hover {
    color: var(--color-research, #2980b9) !important;
    background: rgba(41, 128, 185, 0.08) !important;
}