html, body {
    font-family: Archivo, Helvetica, Arial, sans-serif;
}

a {
    color: var(--mud-palette-primary);
    text-underline-offset: 3px;
}

/* The Fight to FIRE design system v1.0 as the design canvas applies it (step R1): every number
   in IBM Plex Mono with tabular figures, explanations in Source Serif 4, small labels as mono
   eyebrows, hairlines instead of shadows. */
.num {
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-variant-numeric: tabular-nums;
}

.lead {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.hero-title {
    margin: 0 0 12px;
    font-size: clamp(34px, 6vw, 52px);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -.02em;
}

.page-title {
    margin: 0 0 12px;
    font-size: clamp(28px, 4.5vw, 40px);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.02em;
}

.eyebrow {
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2,
.mud-paper.mud-elevation-3,
.mud-paper.mud-elevation-4 {
    border: 1px solid var(--mud-palette-lines-default);
}

.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

.site-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 16px 48px;
    box-sizing: border-box;
}

.ftf-bar {
    background: #262523;
    color: #B5B0A6;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 16px;
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .ftf-bar a {
        color: #FCFBF8;
    }

.site-header {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.site-header-inner,
.site-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 32px;
    box-sizing: border-box;
}

.site-name {
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 500;
}

    .site-nav a {
        color: var(--mud-palette-text-secondary);
        text-decoration: none;
        padding: 10px 0;
        border-bottom: 2px solid transparent;
    }

        .site-nav a.active {
            color: var(--mud-palette-text-primary);
            border-bottom-color: #4E9E2F;
        }

.site-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.site-menu-button {
    display: none;
}

/* The theme switch and the admin link (Should 8: static, app.js cycles the theme). The icon shown
   is the visitor's choice, which app.js mirrors in data-theme-choice; "systeem" until it runs. */
.theme-switch,
.admin-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.theme-icon {
    display: none;
}

:root:not([data-theme-choice]) .theme-icon-systeem,
:root[data-theme-choice="systeem"] .theme-icon-systeem,
:root[data-theme-choice="licht"] .theme-icon-licht,
:root[data-theme-choice="donker"] .theme-icon-donker {
    display: inline-block;
}

/* On a phone: name, menu button and actions on one line; the menu opens below them. */
@media (max-width: 599px) {
    .site-header-inner {
        column-gap: 8px;
    }

    .site-actions {
        order: 2;
        gap: 0;
    }

    .site-menu-button {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 2px;
        background: transparent;
        color: var(--mud-palette-text-primary);
        font: 500 15px Archivo, Helvetica, Arial, sans-serif;
        order: 1;
        margin-left: auto;
    }

    /* Folded only when script can unfold it (App.razor sets "js"); without it the menu stays open. */
    .js .site-nav {
        display: none;
    }

    .site-nav {
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        gap: 0;
    }

        .js .site-nav.open {
            display: flex;
        }

        .site-nav a {
            padding: 12px 0;
            border-bottom: 1px solid var(--mud-palette-lines-default);
        }

            .site-nav a.active {
                border-bottom-color: #4E9E2F;
            }
}

.site-footer {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.site-footer-inner {
    justify-content: space-between;
    padding: 28px 16px 40px;
}

.site-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
}

    .site-footer-nav a {
        display: inline-block;
        padding: 12px 0;
    }

/* Before the app has loaded (step R0): no white flash for a visitor whose system is dark. */
@media (prefers-color-scheme: dark) {
    body:has(.loading-progress) {
        background: #1A1918;
        color: #FCFBF8;
    }
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

    /* The texts are attributes, so a crawler doesn't read them as the page's content. */
    #blazor-error-ui::before {
        content: attr(data-message) " ";
    }

    #blazor-error-ui .reload::after {
        content: attr(data-label);
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #C0521C;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

/* The overview of the design canvas (step R2c). Colours come from the theme, so light and dark
   both hold; green is a fill or a border only, its text colour is the theme's success ink. */
.section-title {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.section-note {
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 1px;
    background: var(--mud-palette-lines-default);
    border: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 48px;
}

.tile {
    background: var(--mud-palette-background);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tile-ok {
    border-top: 3px solid #4E9E2F;
}

    .tile-ok .eyebrow {
        color: var(--mud-palette-success);
    }

.tile-value {
    font-size: 28px;
    font-weight: 500;
}

.tile-note {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.overview {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.overview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.segmented {
    display: inline-flex;
    border: 1px solid var(--mud-palette-text-primary);
    border-radius: 2px;
}

    .segmented a {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        font: 500 14px Archivo, Helvetica, Arial, sans-serif;
        min-height: 44px;
        padding: 0 18px;
        border: 0;
        background: transparent;
        color: var(--mud-palette-text-primary);
        cursor: pointer;
    }

        .segmented a[aria-current="true"] {
            background: var(--mud-palette-text-primary);
            color: var(--mud-palette-background);
        }

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-grow {
    flex: 1 1 240px;
    max-width: 320px;
}

    .field input,
    .field select {
        font: 15px Archivo, Helvetica, Arial, sans-serif;
        min-height: 44px;
        padding: 0 12px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 2px;
        background: var(--mud-palette-background);
        color: var(--mud-palette-text-primary);
        box-sizing: border-box;
    }

.quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip,
.button-outline {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font: 500 14px Archivo, Helvetica, Arial, sans-serif;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 2px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

    .chip[aria-current="true"],
    .button-outline {
        border-color: var(--mud-palette-text-primary);
    }

    .chip[aria-current="true"] {
        background: var(--mud-palette-action-default-hover);
    }

.toolbar-end {
    margin-left: auto;
}

/* Without a chosen view the screen decides (Should 8: no JavaScript asks for the width any more):
   a phone gets the cards, a wider screen the table. */
.only-narrow {
    display: none;
}

@media (max-width: 599.98px) {
    .only-wide {
        display: none;
    }

    .only-narrow {
        display: block;
    }
}

.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 2px;
}

.data-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 960px;
}

    .data-table th,
    .data-table td {
        padding: 12px 8px;
        border-bottom: 1px solid var(--mud-palette-lines-default);
        text-align: right;
        white-space: nowrap;
        vertical-align: top;
    }

    .data-table th {
        padding: 0;
        font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
    }

        .data-table th a {
            all: unset;
            display: block;
            box-sizing: border-box;
            width: 100%;
            padding: 12px 8px;
            cursor: pointer;
            text-align: inherit;
        }

            .data-table th a:focus-visible {
                outline: 2px solid var(--mud-palette-primary);
                outline-offset: -2px;
            }

        .data-table th[aria-sort] {
            color: var(--mud-palette-text-primary);
        }

        .data-table th:last-child {
            padding: 12px;
        }

    .data-table .left {
        text-align: left;
    }

    .data-table td {
        font-size: 14px;
    }

    .data-table tbody tr:hover td {
        background: var(--mud-palette-action-default-hover);
    }

    .data-table .name {
        font-weight: 600;
        font-size: 15px;
        white-space: normal;
        min-width: 170px;
    }

        .data-table .name a {
            color: var(--mud-palette-text-primary);
            text-decoration: none;
        }

            .data-table .name a:hover {
                text-decoration: underline;
            }

    .data-table .strong {
        font-weight: 600;
    }

    .data-table .sub {
        display: block;
        margin-top: 2px;
        font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
        font-size: 11px;
        font-weight: 400;
        color: var(--mud-palette-text-secondary);
    }

        .data-table .sub.warn,
        .data-table .flag {
            color: var(--mud-palette-warning);
        }

    .data-table .muted {
        font-size: 13px;
        color: var(--mud-palette-text-secondary);
    }

    .data-table .status {
        font-size: 13px;
        white-space: normal;
        min-width: 90px;
    }

    .data-table .ok {
        color: var(--mud-palette-success);
    }

    .data-table .flag {
        font-weight: 600;
    }

/* The cards and the chart of the overview (step R3). Hairlines between the facts, as the tiles. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 16px;
}

.gvv-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
}

.gvv-card .sub {
    display: block;
    margin-top: 2px;
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-size: 11px;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

    .gvv-card .sub.warn,
    .gvv-card .flag {
        color: var(--mud-palette-warning);
    }

.gvv-card-head {
    padding: 14px 14px 10px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 8px;
}

.gvv-card-name {
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
}

    .gvv-card-name:hover {
        text-decoration: underline;
    }

.gvv-card-hero {
    text-align: right;
}

    .gvv-card-hero .num {
        font-size: 24px;
        font-weight: 500;
        line-height: 1;
    }

.gvv-card-facts {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--mud-palette-lines-default);
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .gvv-card-facts > div {
        background: var(--mud-palette-background);
        padding: 10px 14px;
    }

    .gvv-card-facts dt {
        font-size: 10px;
    }

    .gvv-card-facts dd {
        margin: 2px 0 0;
        font-size: 15px;
        font-weight: 500;
    }

    .gvv-card-facts .muted {
        font-size: 13px;
        font-weight: 400;
        color: var(--mud-palette-text-secondary);
    }

.range {
    position: relative;
    display: block;
    height: 4px;
    margin: 8px 5px 4px;
    background: var(--mud-palette-lines-default);
}

.range-mark {
    position: absolute;
    top: -3px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--mud-palette-text-primary);
}

.gvv-card-foot {
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
}

    .gvv-card-foot .ok {
        color: var(--mud-palette-success);
    }

    .gvv-card-foot .flag {
        font-weight: 600;
    }

.scatter-figure {
    margin: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 2px;
    padding: 24px;
    max-width: 760px;
}

.scatter-title {
    margin: 4px 0 20px;
    font-size: 22px;
    font-weight: 600;
}

.scatter {
    position: relative;
    height: 340px;
    margin: 0 8px 32px 44px;
    border-left: 1px solid var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

.scatter-grid {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.scatter-ylabel,
.scatter-xlabel {
    position: absolute;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.scatter-ylabel {
    left: -44px;
    transform: translateY(-50%);
}

.scatter-xlabel {
    bottom: -24px;
    transform: translateX(-50%);
}

.scatter-point {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transform: translate(-5px, -50%);
    font-size: 11px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

    .scatter-point:hover .num,
    .scatter-point:focus-visible .num {
        text-decoration: underline;
    }

.scatter-figure .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mud-palette-text-secondary);
}

.scatter-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

    .scatter-legend > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

.band-low .dot {
    background: var(--mud-palette-success);
}

.band-mid .dot {
    background: var(--mud-palette-primary);
}

.band-high .dot {
    background: var(--mud-palette-error);
}

/* The detail page of the design canvas (step R4). */
.detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
}

    .detail-head .eyebrow a {
        color: inherit;
    }

.tile-grid-small {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    margin-top: -48px;
    border-top: 0;
}

.tile-small {
    padding: 14px 22px;
    gap: 4px;
}

    .tile-small .num {
        font-size: 20px;
        font-weight: 500;
    }

.detail-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 48px;
}

.detail-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    gap: 32px;
    align-items: start;
}

.sources-table {
    min-width: 760px;
}

    .sources-table th {
        padding: 12px 8px;
    }

    .sources-table .source {
        white-space: normal;
    }

.versions {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--mud-palette-lines-default);
}

    .versions li {
        position: relative;
        padding: 4px 0 20px 24px;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

        .versions li::before {
            content: "";
            position: absolute;
            left: -5px;
            top: 9px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--mud-palette-lines-default);
        }

        .versions li:first-child::before {
            background: #4E9E2F;
        }

        .versions li.deleted strong {
            color: var(--mud-palette-warning);
        }

    .versions .changes {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 18px;
        font-size: 13px;
        color: var(--mud-palette-text-secondary);
    }

        .versions .changes b {
            font-weight: 500;
            color: var(--mud-palette-text-primary);
        }

.versions .sub,
.documents .sub,
.sources-table .sub {
    display: block;
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.documents {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

    .documents li {
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .documents a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 14px 4px;
        min-height: 44px;
        box-sizing: border-box;
        color: var(--mud-palette-text-primary);
        text-decoration: none;
        font-weight: 500;
    }

        .documents a:hover {
            text-decoration: underline;
        }

/* A report note under its year in the dividend history (Must 4). */
.history-note {
    display: block;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.lead.small {
    font-size: 15px;
    max-width: 860px;
    margin: 0;
}

.reading-note {
    margin-top: 48px;
    padding: 24px 26px;
    border: 1px solid var(--mud-palette-lines-default);
    border-top: 3px solid #4E9E2F;
    border-radius: 2px;
    max-width: 860px;
}

    .reading-note p {
        font-family: 'Source Serif 4', Georgia, serif;
        font-size: 17px;
        line-height: 1.6;
        margin: 12px 0;
    }

    .reading-note a {
        font-weight: 600;
    }

/* The Methode page: explanations in the serif, at reading width. */
.method {
    max-width: 760px;
}

    .method .lead {
        margin: 0 0 40px;
    }

    .method p,
    .method li {
        font-family: 'Source Serif 4', Georgia, serif;
        font-size: 17px;
        line-height: 1.6;
    }

    .method p,
    .method ol {
        margin: 0;
    }

    /* The reset leaves a list no padding, so its numbers would hang into the page's gutter. */
    .method ol {
        padding-left: 1.6em;
    }

    .method li + li {
        margin-top: 8px;
    }