/*
 * =========================================================
 * FAMILY ARCHIVE – DESIGN PRESETS
 * =========================================================
 *
 * Detta lager gäller endast de nya profilerna:
 *
 *   Neutral
 *   Classic
 *   Modern
 *
 * Legacy-designen lämnas orörd.
 *
 * De enskilda frontendfilerna innehåller fortfarande delar
 * av det äldre visuella systemet. Presetlagret migrerar
 * komponenterna stegvis utan att skapa tre separata teman.
 * =========================================================
 */


/*
 * ---------------------------------------------------------
 * GEMENSAM SELECTOR
 * ---------------------------------------------------------
 *
 * Alla regler nedan har body-klassen i selektorn. Det gör
 * dem mer specifika än äldre komponentregler utan !important.
 */


/*
 * ---------------------------------------------------------
 * NAVIGATION
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-private-nav {
    background:
        color-mix(
            in srgb,
            var(--jfa-color-background) 96%,
            transparent
        );
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-private-nav-toggle {
    border-radius:
        var(--jfa-radius-button);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-private-nav-links a {
    border-radius:
        var(--jfa-radius-sm);
}


/*
 * ---------------------------------------------------------
 * STARTSIDA
 * ---------------------------------------------------------
 *
 * I den äldre designen är den betonade raden alltid serif.
 *
 * För presets följer den i stället profilens rubriktypografi:
 *
 * Neutral  -> sans
 * Classic  -> serif
 * Modern   -> sans
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-home-login-copy h1 em,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-home-hero-copy h1 em {
    font-family:
        var(--jfa-font-heading);
}


/*
 * ---------------------------------------------------------
 * FOTOÖVERSIKT
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview
.jfa-section-kicker {
    color:
        var(--jfa-pink-dark);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview
.jfa-overview-intro {
    color:
        var(--jfa-muted);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-filters {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        var(--jfa-surface);

    box-shadow:
        var(--jfa-shadow-sm);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-filters
.jfa-filter-field label {
    color:
        var(--jfa-navy);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-filters
.jfa-filter-field input,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-filters
.jfa-filter-field select {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius-sm);

    background:
        var(--jfa-surface);

    color:
        var(--jfa-text);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-filters
.jfa-filter-field input:focus,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-filters
.jfa-filter-field select:focus {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--jfa-teal) 18%,
            transparent
        );

    border-color:
        var(--jfa-teal);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview
.jfa-overview-result-count {
    color:
        var(--jfa-muted);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview-card {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        var(--jfa-surface);

    box-shadow:
        var(--jfa-shadow-sm);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview-card:hover {
    border-color:
        color-mix(
            in srgb,
            var(--jfa-pink) 30%,
            var(--jfa-border)
        );

    box-shadow:
        var(--jfa-shadow-hover);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview-image {
    background:
        var(--jfa-surface-soft);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview-image
.dashicons {
    color:
        var(--jfa-muted);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview-body h2 a {
    color:
        var(--jfa-pink-dark);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview-meta,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview-people strong {
    color:
        var(--jfa-muted);
}


/*
 * ---------------------------------------------------------
 * SLÄKTTRÄD
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-kicker {
    color:
        var(--jfa-pink-dark);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-header h1 {
    color:
        var(--jfa-navy);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-header > p {
    color:
        var(--jfa-muted);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-selector {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        var(--jfa-surface);

    box-shadow:
        var(--jfa-shadow-sm);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-selector label {
    color:
        var(--jfa-navy);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-selector select {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius-sm);

    background:
        var(--jfa-surface);

    color:
        var(--jfa-text);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-selector select:focus {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--jfa-teal) 18%,
            transparent
        );

    border-color:
        var(--jfa-teal);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-generation-label strong {
    color:
        var(--jfa-navy);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-generation-label span {
    background:
        color-mix(
            in srgb,
            var(--jfa-pink) 10%,
            var(--jfa-surface)
        );

    color:
        var(--jfa-pink-dark);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-person {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        var(--jfa-surface);

    box-shadow:
        var(--jfa-shadow-sm);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-person:hover {
    border-color:
        color-mix(
            in srgb,
            var(--jfa-pink) 30%,
            var(--jfa-border)
        );

    box-shadow:
        var(--jfa-shadow-hover);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-person-focus {
    border-color:
        var(--jfa-pink);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-person-photo {
    background:
        var(--jfa-surface-soft);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-person-name {
    color:
        var(--jfa-pink-dark);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-relation {
    color:
        var(--jfa-muted);
}


/*
 * Relationslinjer.
 *
 * Det gamla trädet använder en lila/beige linjefärg.
 * Presets använder sekundärfärgen mycket försiktigt i
 * stället för att göra genealogin visuellt dominant.
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-chart {
    --jfa-tree-line:
        color-mix(
            in srgb,
            var(--jfa-color-secondary) 42%,
            var(--jfa-border)
        );
}


/*
 * ---------------------------------------------------------
 * CLASSIC
 * ---------------------------------------------------------
 *
 * Klassisk får sin identitet främst genom typografi och
 * rakare proportioner, inte genom sepia.
 */

body.jfa-design-preset-classic
.jfa-photo-overview-card,

body.jfa-design-preset-classic
.jfa-tree-person {
    box-shadow:
        0 1px 2px rgb(35 42 49 / .025),
        0 4px 12px rgb(35 42 49 / .035);
}


/*
 * ---------------------------------------------------------
 * MODERN
 * ---------------------------------------------------------
 *
 * Modern får lite tydligare kortseparation och större
 * visuella ytor. Färgerna kommer fortfarande från den
 * redigerbara Archive Profile-paletten.
 */

body.jfa-design-preset-modern
.jfa-photo-overview-card,

body.jfa-design-preset-modern
.jfa-tree-person {
    box-shadow:
        var(--jfa-shadow-sm);
}


/*
 * =========================================================
 * N14 SECOND FRONTEND PRESET LAYER
 * =========================================================
 *
 * Översiktssidor:
 *
 *   Fotografier
 *   Personer
 *   Fotoalbum
 *   Arkiv
 *
 * Legacy påverkas inte.
 *
 * Viktigt:
 * secondary är inte automatiskt lämplig som textfärg.
 * Neutral har medvetet en ljus sekundärfärg. Interaktiv text
 * använder därför den mörkare primary-derived action-färgen.
 * =========================================================
 */

body.jfa-page:not(.jfa-design-preset-legacy) {
    --jfa-action:
        var(--jfa-color-primary);

    --jfa-action-strong:
        var(--jfa-pink-dark);

    --jfa-action-soft:
        color-mix(
            in srgb,
            var(--jfa-color-primary) 10%,
            var(--jfa-surface)
        );

    --jfa-secondary-soft:
        color-mix(
            in srgb,
            var(--jfa-color-secondary) 13%,
            var(--jfa-surface)
        );

    --jfa-accent-soft:
        color-mix(
            in srgb,
            var(--jfa-color-accent) 11%,
            var(--jfa-surface)
        );

    --jfa-on-action:
        #fff;
}


/*
 * Gemensamma rubriker och tomlägen.
 */

body.jfa-page:not(.jfa-design-preset-legacy)
:is(
    .jfa-section-kicker,
    .jfa-overview-kicker
) {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-overview-header h1 {
    color:
        var(--jfa-navy);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-overview-intro {
    color:
        var(--jfa-muted);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-overview-result-count {
    color:
        var(--jfa-muted);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-overview-empty {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        var(--jfa-surface);

    box-shadow:
        var(--jfa-shadow-sm);
}


/*
 * Profilernas rubrikproportioner.
 */

body.jfa-design-preset-neutral
.jfa-overview-header h1 {
    letter-spacing:
        -0.035em;
}


body.jfa-design-preset-classic
.jfa-overview-header h1 {
    line-height:
        1.04;

    letter-spacing:
        -0.018em;
}


body.jfa-design-preset-modern
.jfa-overview-header h1 {
    letter-spacing:
        -0.05em;
}


/*
 * ---------------------------------------------------------
 * FOTOGRAFIER – kvarvarande legacydetaljer
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-filters .button {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-action);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-filters .button:hover,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-filters .button:focus {
    background:
        var(--jfa-action-strong);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview
.jfa-filter-reset {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview-people a {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-action-soft);

    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview-source {
    border-color:
        var(--jfa-border);

    color:
        var(--jfa-muted);
}


/*
 * ---------------------------------------------------------
 * PERSONER
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-filters {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        color-mix(
            in srgb,
            var(--jfa-surface-soft) 62%,
            var(--jfa-surface)
        );

    box-shadow:
        var(--jfa-shadow-sm);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-search-field input {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius-sm);

    background:
        var(--jfa-surface);

    color:
        var(--jfa-text);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-search-field input:focus {
    border-color:
        var(--jfa-color-accent);

    outline:
        3px solid
        color-mix(
            in srgb,
            var(--jfa-color-accent) 18%,
            transparent
        );
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-overview-card {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        var(--jfa-surface);

    box-shadow:
        var(--jfa-shadow-sm);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-overview-card:hover {
    border-color:
        color-mix(
            in srgb,
            var(--jfa-action) 30%,
            var(--jfa-border)
        );

    box-shadow:
        var(--jfa-shadow-hover);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-overview-portrait {
    background:
        linear-gradient(
            145deg,
            var(--jfa-secondary-soft),
            var(--jfa-accent-soft)
        );
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-overview-card.no-portrait
.jfa-person-overview-portrait
.dashicons {
    background:
        var(--jfa-action-soft);

    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-overview-lifespan {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-overview-cta {
    color:
        var(--jfa-action-strong);
}


@media (max-width: 700px) {

    body.jfa-page:not(.jfa-design-preset-legacy)
    .jfa-person-overview-card {
        border-radius:
            var(--jfa-radius);
    }
}


/*
 * ---------------------------------------------------------
 * FOTOALBUM
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-overview-card {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        var(--jfa-surface);

    box-shadow:
        var(--jfa-shadow-sm);

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-overview-card:hover {
    transform:
        translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--jfa-action) 30%,
            var(--jfa-border)
        );

    box-shadow:
        var(--jfa-shadow-hover);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-overview-image {
    background:
        var(--jfa-surface-soft);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-overview-image
.dashicons {
    color:
        var(--jfa-muted);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-cover-count {
    border-radius:
        var(--jfa-radius-button);

    background:
        color-mix(
            in srgb,
            var(--jfa-navy) 90%,
            transparent
        );

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-overview-body h2 a {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-overview-meta {
    color:
        var(--jfa-muted);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-overview-count {
    color:
        var(--jfa-navy);
}


/*
 * ---------------------------------------------------------
 * ARKIVÖVERSIKT
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-filters {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        color-mix(
            in srgb,
            var(--jfa-surface) 96%,
            transparent
        );

    box-shadow:
        var(--jfa-shadow-sm);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-filters
.jfa-filter-field label {
    color:
        var(--jfa-navy);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-filters
:is(
    input,
    select
) {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius-sm);

    background:
        var(--jfa-surface);

    color:
        var(--jfa-text);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-filters
:is(
    input,
    select
):focus {
    border-color:
        var(--jfa-color-accent);

    outline:
        3px solid
        color-mix(
            in srgb,
            var(--jfa-color-accent) 18%,
            transparent
        );

    box-shadow:
        none;
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-filters .button {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-action);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-filters .button:hover,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-filters .button:focus {
    background:
        var(--jfa-action-strong);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-overview
.jfa-filter-reset {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-card {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        var(--jfa-surface);

    box-shadow:
        var(--jfa-shadow-sm);

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-card:hover {
    transform:
        translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--jfa-action) 30%,
            var(--jfa-border)
        );

    box-shadow:
        var(--jfa-shadow-hover);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-card-preview {
    background:
        linear-gradient(
            135deg,
            var(--jfa-action-soft),
            var(--jfa-accent-soft)
        );

    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-card-preview
.dashicons {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-card-file-badge {
    border-radius:
        var(--jfa-radius-button);

    background:
        color-mix(
            in srgb,
            var(--jfa-navy) 92%,
            transparent
        );

    color:
        var(--jfa-on-action);

    box-shadow:
        var(--jfa-shadow-sm);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-type-pill {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-action-soft);

    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-card-body h2 a {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-card-meta,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-card-label,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-card-source {
    color:
        var(--jfa-muted);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-person-pill {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-secondary-soft);

    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-person-pill:hover,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-person-pill:focus {
    background:
        var(--jfa-action-soft);

    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-card-source {
    border-color:
        var(--jfa-border);
}


@media (max-width: 620px) {

    body.jfa-page:not(.jfa-design-preset-legacy)
    .jfa-archive-filters,

    body.jfa-page:not(.jfa-design-preset-legacy)
    .jfa-archive-card {
        border-radius:
            var(--jfa-radius);
    }
}


/*
 * ---------------------------------------------------------
 * PROFILSKILLNADER – ÖVERSIKTER
 * ---------------------------------------------------------
 *
 * Classic:
 *   flatare, redaktionell, mindre kortlyft.
 *
 * Modern:
 *   tydligare separation och mer bildkortskänsla.
 */

body.jfa-design-preset-classic
:is(
    .jfa-photo-overview-card,
    .jfa-person-overview-card,
    .jfa-album-overview-card,
    .jfa-archive-card,
    .jfa-photo-filters,
    .jfa-person-filters,
    .jfa-archive-filters
) {
    box-shadow:
        0 1px 2px rgb(35 42 49 / .025),
        0 4px 12px rgb(35 42 49 / .035);
}


body.jfa-design-preset-classic
:is(
    .jfa-photo-overview-card,
    .jfa-person-overview-card,
    .jfa-album-overview-card,
    .jfa-archive-card
):hover {
    transform:
        translateY(-1px);
}


body.jfa-design-preset-modern
:is(
    .jfa-photo-overview-card,
    .jfa-person-overview-card,
    .jfa-album-overview-card,
    .jfa-archive-card
) {
    box-shadow:
        var(--jfa-shadow-sm);
}


body.jfa-design-preset-modern
:is(
    .jfa-photo-overview-card,
    .jfa-person-overview-card,
    .jfa-album-overview-card,
    .jfa-archive-card
):hover {
    transform:
        translateY(-3px);

    box-shadow:
        var(--jfa-shadow-hover);
}


/*
 * =========================================================
 * N14 OVERVIEW CONTRAST POLISH
 * =========================================================
 *
 * Besökta länkar ska inte göra centrala namn och actions
 * blekare. Arkivets navigationsstruktur och innehåll ska
 * behålla samma visuella hierarki oavsett browser history.
 *
 * Legacy påverkas inte.
 * =========================================================
 */


/*
 * ---------------------------------------------------------
 * PERSONÖVERSIKT
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-overview-body h2 a,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-overview-body h2 a:visited {
    color:
        var(--jfa-navy);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-overview-body h2 a:hover,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-overview-body h2 a:focus {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-overview-cta,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-overview-cta:visited {
    color:
        var(--jfa-action-strong);
}


/*
 * ---------------------------------------------------------
 * FOTO / ALBUM / ARKIV – visited får inte ändra hierarkin
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview-body h2 a,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview-body h2 a:visited,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-overview-body h2 a,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-overview-body h2 a:visited,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-card-body h2 a,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-card-body h2 a:visited {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview-people a,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-overview-people a:visited,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-person-pill,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-person-pill:visited {
    color:
        var(--jfa-action-strong);
}


/*
 * ---------------------------------------------------------
 * SLÄKTTRÄD
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-person-name,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-person-name:visited {
    color:
        var(--jfa-navy);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-person
:is(
    .jfa-tree-relation,
    .jfa-tree-dates,
    .jfa-tree-person-dates
) {
    color:
        var(--jfa-muted);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-person a,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-person a:visited {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-chart {
    --jfa-tree-line:
        color-mix(
            in srgb,
            var(--jfa-color-accent) 24%,
            var(--jfa-border)
        );
}


/*
 * Neutral ska vara extra återhållsam.
 */

body.jfa-design-preset-neutral
.jfa-tree-chart {
    --jfa-tree-line:
        color-mix(
            in srgb,
            var(--jfa-color-accent) 18%,
            var(--jfa-border)
        );
}


/*
 * =========================================================
 * N14 THIRD FRONTEND PRESET LAYER
 * =========================================================
 *
 * Enskilda innehållsvyer och formulär:
 *
 *   Person
 *   Foto
 *   Album
 *   Dokument / arkivpost
 *   Bidra och övriga JFA-formulär
 *
 * Legacy påverkas inte.
 * =========================================================
 */


/*
 * Gemensamma tillbaka-länkar.
 */

body.jfa-page:not(.jfa-design-preset-legacy)
:is(
    .jfa-profile-back,
    .jfa-back-link,
    .jfa-archive-back
),

body.jfa-page:not(.jfa-design-preset-legacy)
:is(
    .jfa-profile-back,
    .jfa-back-link,
    .jfa-archive-back
):visited {
    color:
        var(--jfa-action-strong);
}


/*
 * Gemensamma innehållskort.
 */

body.jfa-page:not(.jfa-design-preset-legacy)
:is(
    .jfa-person > .jfa-card,
    .jfa-photo-single > .jfa-card,
    .jfa-archive-page .jfa-card
) {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        var(--jfa-surface);

    box-shadow:
        var(--jfa-shadow-sm);
}


/*
 * Visuella informationsetiketter.
 */

body.jfa-page:not(.jfa-design-preset-legacy)
:is(
    .jfa-profile-kicker,
    .jfa-section-kicker,
    .jfa-archive-kicker,
    .jfa-archive-section-kicker,
    .jfa-archive-info-label
) {
    color:
        var(--jfa-action-strong);
}


/*
 * ---------------------------------------------------------
 * PERSONSIDA
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-hero {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius-lg);

    background:
        radial-gradient(
            circle at 90% 10%,
            color-mix(
                in srgb,
                var(--jfa-color-primary) 7%,
                transparent
            ),
            transparent 34%
        ),
        radial-gradient(
            circle at 78% 88%,
            color-mix(
                in srgb,
                var(--jfa-color-accent) 7%,
                transparent
            ),
            transparent 36%
        ),
        var(--jfa-surface);

    box-shadow:
        var(--jfa-shadow-sm);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-portrait img {
    border-radius:
        calc(
            var(--jfa-radius-lg) - 4px
        );

    background:
        var(--jfa-surface-soft);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-lifespan {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-fact {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius-sm);

    background:
        color-mix(
            in srgb,
            var(--jfa-surface-soft) 55%,
            var(--jfa-surface)
        );
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-relations-card::before {
    background:
        linear-gradient(
            to bottom,
            var(--jfa-color-primary),
            var(--jfa-color-secondary),
            var(--jfa-color-accent)
        );
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-relations-card a,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-relations-card a:visited {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-timeline
.jfa-timeline {
    border-color:
        var(--jfa-border);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-timeline-item::before {
    border-color:
        var(--jfa-surface);

    background:
        var(--jfa-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-card-image {
    border-radius:
        var(--jfa-radius-sm);

    background:
        var(--jfa-surface-soft);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-link-card {
    background:
        linear-gradient(
            110deg,
            var(--jfa-accent-soft),
            var(--jfa-secondary-soft)
        ) !important;
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-link-card .button {
    border-radius:
        var(--jfa-radius-button);
}


@media (max-width: 700px) {

    body.jfa-page:not(.jfa-design-preset-legacy)
    .jfa-hero {
        border-radius:
            var(--jfa-radius-lg);
    }

    body.jfa-page:not(.jfa-design-preset-legacy)
    .jfa-person > .jfa-card {
        border-radius:
            var(--jfa-radius);
    }
}


/*
 * ---------------------------------------------------------
 * ENSKILT FOTO
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-header {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        linear-gradient(
            135deg,
            var(--jfa-surface) 0%,
            color-mix(
                in srgb,
                var(--jfa-action-soft) 55%,
                var(--jfa-surface)
            ) 58%,
            color-mix(
                in srgb,
                var(--jfa-accent-soft) 55%,
                var(--jfa-surface)
            ) 100%
        );

    box-shadow:
        var(--jfa-shadow-sm);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-header h1 {
    color:
        var(--jfa-navy);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-meta {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-main-image {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        var(--jfa-surface);

    box-shadow:
        var(--jfa-shadow-sm);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-main-image > a {
    border-radius:
        var(--jfa-radius-sm);

    background:
        var(--jfa-surface-soft);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-download .button,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-download .button:visited {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-action);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-download .button:hover,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-download .button:focus {
    background:
        var(--jfa-action-strong);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-single > .jfa-card li a,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-photo-single > .jfa-card li a:visited {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-action-soft);

    color:
        var(--jfa-action-strong);
}


@media (max-width: 620px) {

    body.jfa-page:not(.jfa-design-preset-legacy)
    :is(
        .jfa-photo-header,
        .jfa-photo-main-image,
        .jfa-photo-single > .jfa-card
    ) {
        border-radius:
            var(--jfa-radius);
    }
}


/*
 * ---------------------------------------------------------
 * ENSKILT ALBUM
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-header {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        linear-gradient(
            135deg,
            var(--jfa-surface) 0%,
            color-mix(
                in srgb,
                var(--jfa-action-soft) 55%,
                var(--jfa-surface)
            ) 58%,
            color-mix(
                in srgb,
                var(--jfa-accent-soft) 55%,
                var(--jfa-surface)
            ) 100%
        );

    box-shadow:
        var(--jfa-shadow-sm);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-meta,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-people a,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-people a:visited,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-download a,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-download a:visited {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-description,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-source {
    color:
        var(--jfa-muted);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-count {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-accent-soft);

    color:
        var(--jfa-teal-dark);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-viewer {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius-lg);

    background:
        var(--jfa-surface);

    box-shadow:
        var(--jfa-shadow-sm);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-main {
    border-radius:
        var(--jfa-radius);

    background:
        var(--jfa-surface-soft);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-controls .button {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-action);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-controls .button:hover,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-controls .button:focus {
    background:
        var(--jfa-action-strong);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-people {
    border-radius:
        var(--jfa-radius-sm);

    background:
        var(--jfa-secondary-soft);

    color:
        var(--jfa-muted);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-thumbnail {
    border-radius:
        var(--jfa-radius-sm);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-thumbnail.is-active {
    border-color:
        var(--jfa-action);

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--jfa-action) 14%,
            transparent
        );
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-album-thumbnail img {
    border-radius:
        calc(
            var(--jfa-radius-sm) - 2px
        );
}


@media (max-width: 620px) {

    body.jfa-page:not(.jfa-design-preset-legacy)
    :is(
        .jfa-album-header,
        .jfa-album-viewer
    ) {
        border-radius:
            var(--jfa-radius);
    }

    body.jfa-page:not(.jfa-design-preset-legacy)
    .jfa-album-main {
        border-radius:
            var(--jfa-radius-sm);
    }
}


/*
 * ---------------------------------------------------------
 * DOKUMENT / ARKIVPOST
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
:is(
    .jfa-archive-header,
    .jfa-archive-page .jfa-card
) {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius-lg);

    background:
        var(--jfa-surface);

    box-shadow:
        var(--jfa-shadow-sm);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-header {
    background:
        linear-gradient(
            135deg,
            var(--jfa-action-soft) 0%,
            var(--jfa-surface) 52%,
            var(--jfa-accent-soft) 100%
        );
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-header h1,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page .jfa-card h2 {
    color:
        var(--jfa-navy);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-type-pill {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-action-soft);

    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-fact {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius-sm);

    background:
        color-mix(
            in srgb,
            var(--jfa-surface) 78%,
            transparent
        );
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-fact span {
    color:
        var(--jfa-muted);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-fact strong {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-prose,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-download-all p,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-document-caption {
    color:
        var(--jfa-text);
}


body.jfa-page:not(.jfa-design-preset-legacy)
:is(
    .jfa-archive-download-button,
    .jfa-document-nav-button
) {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-action);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
:is(
    .jfa-archive-download-button,
    .jfa-document-nav-button
):hover,

body.jfa-page:not(.jfa-design-preset-legacy)
:is(
    .jfa-archive-download-button,
    .jfa-document-nav-button
):focus {
    background:
        var(--jfa-action-strong);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-part-count {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-accent-soft);

    color:
        var(--jfa-teal-dark);
}


body.jfa-page:not(.jfa-design-preset-legacy)
:is(
    .jfa-document-image-link,
    .jfa-document-pdf,
    .jfa-document-video,
    .jfa-document-generic
) {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        var(--jfa-surface-soft);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-document-generic .dashicons {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-page-status {
    color:
        var(--jfa-navy);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-page-thumb {
    border-radius:
        var(--jfa-radius-sm);

    color:
        var(--jfa-navy);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-page-thumb:hover {
    border-color:
        color-mix(
            in srgb,
            var(--jfa-action) 24%,
            var(--jfa-border)
        );
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-page-thumb.is-active {
    border-color:
        var(--jfa-action);

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--jfa-action) 14%,
            transparent
        );
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-page-thumb :is(
    img,
    .dashicons
) {
    background:
        var(--jfa-surface-soft);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-page-thumb .dashicons {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-person-pill,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-person-pill:visited {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-secondary-soft);

    color:
        var(--jfa-action-strong);
}


/*
 * ---------------------------------------------------------
 * BIDRA + FORMULÄR
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-contribution-header::before {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-contribution-header > p + p {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-accent-soft);

    color:
        var(--jfa-teal-dark);
}


body.jfa-page:not(.jfa-design-preset-legacy)
:is(
    .jfa-contribution-card,
    .jfa-story-form,
    .jfa-identification-form,
    .jfa-review-request
) {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius-lg);

    background:
        var(--jfa-surface);

    box-shadow:
        var(--jfa-shadow-sm);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-review-request {
    border-left-color:
        var(--jfa-color-secondary);
}


body.jfa-page:not(.jfa-design-preset-legacy)
form.jfa-form :where(
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="date"],
    select,
    textarea
) {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius-sm);

    background:
        var(--jfa-surface);

    color:
        var(--jfa-text);
}


body.jfa-page:not(.jfa-design-preset-legacy)
form.jfa-form :where(
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="date"],
    select,
    textarea
):focus {
    border-color:
        var(--jfa-color-accent);

    outline:
        3px solid
        color-mix(
            in srgb,
            var(--jfa-color-accent) 18%,
            transparent
        );

    box-shadow:
        none;
}


body.jfa-page:not(.jfa-design-preset-legacy)
form.jfa-form :where(
    input,
    textarea
)::placeholder {
    color:
        var(--jfa-muted);
}


body.jfa-page:not(.jfa-design-preset-legacy)
form.jfa-form input[type="file"] {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        linear-gradient(
            135deg,
            var(--jfa-secondary-soft),
            var(--jfa-accent-soft)
        );

    color:
        var(--jfa-muted);
}


body.jfa-page:not(.jfa-design-preset-legacy)
form.jfa-form input[type="file"]::file-selector-button {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-action);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
form.jfa-form input[type="file"]::file-selector-button:hover {
    background:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
form.jfa-form button[type="submit"] {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-action);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
form.jfa-form button[type="submit"]:hover,

body.jfa-page:not(.jfa-design-preset-legacy)
form.jfa-form button[type="submit"]:focus {
    background:
        var(--jfa-action-strong);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-review-request
form.jfa-form
button[type="submit"] {
    border-color:
        var(--jfa-border);

    background:
        var(--jfa-secondary-soft);

    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-review-request
form.jfa-form
button[type="submit"]:hover {
    border-color:
        var(--jfa-action);

    background:
        var(--jfa-action-soft);

    color:
        var(--jfa-action-strong);
}


/*
 * ---------------------------------------------------------
 * PROFILKARAKTÄR – SINGLE VIEWS
 * ---------------------------------------------------------
 */

body.jfa-design-preset-classic
:is(
    .jfa-hero,
    .jfa-photo-header,
    .jfa-photo-main-image,
    .jfa-album-header,
    .jfa-album-viewer,
    .jfa-archive-header,
    .jfa-archive-page .jfa-card,
    .jfa-person > .jfa-card,
    .jfa-contribution-card,
    .jfa-story-form,
    .jfa-identification-form,
    .jfa-review-request
) {
    box-shadow:
        0 1px 2px rgb(35 42 49 / .025),
        0 4px 12px rgb(35 42 49 / .035);
}


body.jfa-design-preset-modern
:is(
    .jfa-hero,
    .jfa-photo-main-image,
    .jfa-album-viewer,
    .jfa-archive-page .jfa-card,
    .jfa-contribution-card,
    .jfa-story-form,
    .jfa-identification-form
) {
    box-shadow:
        var(--jfa-shadow-sm);
}


/*
 * =========================================================
 * N14 ARCHIVE DOWNLOAD COLOR POLISH
 * =========================================================
 *
 * archive.css laddas efter det gemensamma presetlagret och
 * har äldre selectors med samma specificitet. Arkivpostens
 * download-actions får därför ett explicit archive-page-
 * scope så presetfärgen alltid vinner för nya profiler.
 *
 * Legacy påverkas inte.
 * =========================================================
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-archive-download-all
a.jfa-archive-download-button,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-archive-download-all
a.jfa-archive-download-button:visited,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-document-download
a,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-document-download
a:visited {
    border-color:
        var(--jfa-action);

    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-action);

    color:
        var(--jfa-on-action);

    box-shadow:
        none;
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-archive-download-all
a.jfa-archive-download-button:hover,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-archive-download-all
a.jfa-archive-download-button:focus,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-document-download
a:hover,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-document-download
a:focus {
    border-color:
        var(--jfa-action-strong);

    background:
        var(--jfa-action-strong);

    color:
        var(--jfa-on-action);
}


/*
 * Föregående / nästa.
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-document-nav-button {
    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-action);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-document-nav-button:hover:not(:disabled),

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-document-nav-button:focus:not(:disabled) {
    background:
        var(--jfa-action-strong);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-document-nav-button:disabled {
    background:
        color-mix(
            in srgb,
            var(--jfa-muted) 16%,
            var(--jfa-surface)
        );

    color:
        var(--jfa-muted);

    box-shadow:
        none;
}


/*
 * Miniatyrmarkering och länkar längst ned ska inte falla
 * tillbaka till legacy-lila/rosa efter besök.
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-page-thumb.is-active {
    border-color:
        var(--jfa-action);

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--jfa-action) 14%,
            transparent
        );
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-archive-person-pill,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-archive-person-pill:visited {
    background:
        var(--jfa-secondary-soft);

    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-archive-info-grid a,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-archive-page
.jfa-archive-info-grid a:visited {
    color:
        var(--jfa-action-strong);
}


/*
 * =========================================================
 * N14 PERSON MATERIAL COLOUR POLISH
 * =========================================================
 *
 * Personens foto- och arkivmaterial ska använda samma
 * semantiska färg- och kortsystem som övriga Family Archive.
 *
 * Legacy påverkas inte.
 * =========================================================
 */


/*
 * ---------------------------------------------------------
 * FOTOGRAFIER PÅ PERSONSIDAN
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person
.jfa-photo-card-info h3 a,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person
.jfa-photo-card-info h3 a:visited {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person
.jfa-photo-card-info h3 a:hover,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person
.jfa-photo-card-info h3 a:focus {
    color:
        var(--jfa-navy);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person
.jfa-photo-card-info p {
    color:
        var(--jfa-muted);
}


/*
 * ---------------------------------------------------------
 * ARKIVMATERIAL PÅ PERSONSIDAN
 * ---------------------------------------------------------
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-archive-item {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius);

    background:
        var(--jfa-surface);

    box-shadow:
        var(--jfa-shadow-sm);

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-archive-item:hover {
    transform:
        translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--jfa-action) 28%,
            var(--jfa-border)
        );

    box-shadow:
        var(--jfa-shadow-hover);
}


/*
 * Legacy använder ceriserosa #c82d72 här.
 * Presets använder arkivets semantiska accent.
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-archive-item::before {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-archive-item h3 a,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-archive-item h3 a:visited {
    color:
        var(--jfa-action-strong);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-archive-item h3 a:hover,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-archive-item h3 a:focus {
    color:
        var(--jfa-navy);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-person-archive-meta {
    color:
        var(--jfa-muted);
}


/*
 * Profilskillnader.
 */

body.jfa-design-preset-classic
.jfa-person-archive-item {
    box-shadow:
        0 1px 2px rgb(35 42 49 / .025),
        0 4px 12px rgb(35 42 49 / .035);
}


body.jfa-design-preset-classic
.jfa-person-archive-item:hover {
    transform:
        translateY(-1px);
}


body.jfa-design-preset-modern
.jfa-person-archive-item:hover {
    transform:
        translateY(-3px);
}


@media (max-width: 620px) {

    body.jfa-page:not(.jfa-design-preset-legacy)
    .jfa-person-archive-item {
        border-radius:
            var(--jfa-radius);
    }
}


/*
 * =========================================================
 * N14 TREE SELECTOR STATE POLISH
 * =========================================================
 *
 * tree.css har legacy-rosa/lila för button focus/hover och
 * select focus. Nya designprofiler ska aldrig falla tillbaka
 * till dessa färger under submit eller tangentbordsfokus.
 *
 * Legacy påverkas inte.
 * =========================================================
 */


/*
 * Startpersonsval.
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-selector select {
    border-color:
        var(--jfa-border);

    border-radius:
        var(--jfa-radius-sm);

    background:
        var(--jfa-surface);

    color:
        var(--jfa-text);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-selector select:focus,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-selector select:focus-visible {
    border-color:
        var(--jfa-color-accent);

    outline:
        0;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--jfa-color-accent) 18%,
            transparent
        );
}


/*
 * Visa-knappen.
 *
 * Focus och active behåller grundfärgen så ett submit inte
 * ger någon tillfällig färgblinkning.
 */

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-selector .button {
    border:
        0;

    border-radius:
        var(--jfa-radius-button);

    background:
        var(--jfa-action);

    color:
        var(--jfa-on-action);

    transition:
        background-color 120ms ease,
        box-shadow 120ms ease;
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-selector .button:focus,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-selector .button:focus-visible,

body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-selector .button:active {
    background:
        var(--jfa-action);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-selector .button:hover {
    background:
        var(--jfa-action-strong);

    color:
        var(--jfa-on-action);
}


body.jfa-page:not(.jfa-design-preset-legacy)
.jfa-tree-selector .button:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--jfa-color-accent) 38%,
            white
        );

    outline-offset:
        3px;
}