/* EMS Ambulance — marketingdashboard
 *
 * Huisstijl overgenomen van ems-ambulance.com:
 *   rood      #b91e33  accent, call-to-action, aandacht
 *   turquoise #8ccfd9  secundair, rustige markering
 *   donker    #263d42  koppen en tekst
 *   licht     #f7f8f8  paginavlak
 * Lettertype: Aller (Typekit khi3iem), zoals op de website.
 *
 * Ontwerp: licht en luchtig, één groot hoofdgetal, haarlijnen in plaats van
 * zware kaders, cijfers altijd in tabulaire cijfers.
 */

:root {
    --red: #b91e33;
    --red-deep: #97182a;
    --red-pale: #fbeef0;
    --aqua: #8ccfd9;
    --aqua-deep: #4b9dad;
    --aqua-pale: #eef8fa;
    --ink: #263d42;
    --ink-deep: #1a2c30;
    --body: #55686c;
    --muted: #7b8c8f;
    --faint: #9dabad;
    --paper: #f7f8f8;
    --card: #fff;
    --rule: #e4e8e8;
    --rule-soft: #eff2f2;
    --good: #1a7f63;
    --good-pale: #e7f4f0;
    --warn: #a97208;
    --warn-pale: #fbf3e3;
    --r: 12px;
    --r-sm: 8px;
    --shadow: 0 1px 2px rgba(38, 61, 66, .04), 0 10px 28px -16px rgba(38, 61, 66, .22);
    --shadow-lift: 0 2px 4px rgba(38, 61, 66, .05), 0 20px 42px -22px rgba(38, 61, 66, .3);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: aller, "Aller", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", helvetica, arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.022em; line-height: 1.18; color: var(--ink); }
a { color: var(--red); text-underline-offset: 3px; }

.eyebrow {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--red);
}

.figure { font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.03em; }

/* ---------- Kop ---------- */

.topbar {
    background: #fff;
    padding: 0 clamp(18px, 5vw, 56px);
    position: sticky; top: 0; z-index: 60;
    border-bottom: 1px solid var(--rule);
}

.topbar__inner {
    max-width: 1280px; margin: 0 auto; display: flex; align-items: center;
    gap: 30px; min-height: 76px; flex-wrap: wrap;
}

.topbar__logo img { height: 46px; display: block; }

.topbar__title {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--faint); padding-left: 26px;
    border-left: 1px solid var(--rule); font-weight: 700;
}

.topbar__nav { display: flex; gap: 28px; margin-left: auto; align-items: center; }

.topbar__nav a {
    color: var(--body); text-decoration: none; font-size: 15px;
    padding: 27px 0 25px; border-bottom: 3px solid transparent;
    transition: color .16s, border-color .16s;
}
.topbar__nav a:hover { color: var(--ink); }
.topbar__nav a.is-active { color: var(--ink); font-weight: 700; border-bottom-color: var(--red); }

.topbar__user {
    display: flex; align-items: center; gap: 14px; font-size: 13.5px;
    color: var(--muted); padding-left: 26px; border-left: 1px solid var(--rule);
}

.linkbtn {
    background: none; border: 0; color: var(--muted); cursor: pointer;
    font: inherit; font-size: 13.5px; padding: 0; text-decoration: underline;
    text-underline-offset: 3px; transition: color .16s;
}
.linkbtn:hover { color: var(--red); }

/* ---------- Hero ---------- */

.hero { background: #fff; border-bottom: 1px solid var(--rule); padding: 0 clamp(18px, 5vw, 56px) clamp(40px, 5vw, 60px); }

.hero__inner {
    max-width: 1280px; margin: 0 auto; padding-top: clamp(36px, 4.5vw, 54px);
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 80px); align-items: end;
}

.hero__eyebrow { margin-bottom: 20px; }

.hero__figure {
    font-size: clamp(46px, 8vw, 92px); font-weight: 700; line-height: .95;
    font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.045em;
    color: var(--ink);
}

.hero__caption { margin: 20px 0 0; font-size: 16.5px; color: var(--body); max-width: 46ch; }

.hero__accent { display: block; width: 68px; height: 5px; background: var(--red); margin-bottom: 26px; }

.hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; padding-bottom: 6px; }

.hstat { border-top: 2px solid var(--rule); padding-top: 15px; }

.hstat__label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; color: var(--faint); margin-bottom: 9px;
}

.hstat__value {
    font-size: clamp(23px, 2.7vw, 30px); font-weight: 700; line-height: 1.05;
    font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.032em;
}

.hstat__meta { margin-top: 8px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.trend { font-weight: 700; font-variant-numeric: tabular-nums; }
.trend--up { color: var(--good); }
.trend--down { color: var(--red); }
.trend--flat { color: var(--muted); }

/* ---------- Pagina ---------- */

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 56px) 96px; }
.wrap--top { padding-top: clamp(40px, 5vw, 56px); }

.section { margin-top: clamp(46px, 5.5vw, 72px); }
.section:first-child { margin-top: 0; }

.section__head { margin-bottom: 22px; max-width: 72ch; }
.section__head h2 { font-size: clamp(21px, 2.5vw, 26px); margin-top: 9px; }
.section__head p { margin: 10px 0 0; color: var(--body); font-size: 15px; }

.section__headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.section__headrow .section__head { margin-bottom: 0; }

.panel { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); }

.stamp { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* ---------- De keten ---------- */

.chain { padding: 32px clamp(20px, 3vw, 34px) 28px; }

.chain__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 2vw, 28px); }

.link { position: relative; }

.link::after {
    content: ""; position: absolute; top: 32px; right: calc(-1 * clamp(10px, 2vw, 28px) / 2 - 3px);
    width: 6px; height: 6px; border-top: 1.5px solid var(--rule);
    border-right: 1.5px solid var(--rule); transform: rotate(45deg);
}
.link:last-child::after { display: none; }

.link__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: var(--faint); margin-bottom: 11px; }

.link__value {
    font-size: clamp(21px, 2.5vw, 29px); font-weight: 700; line-height: 1.05;
    font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.035em;
}
.link--out .link__value { color: var(--red); }

.link__note { margin-top: 8px; font-size: 13px; color: var(--muted); min-height: 3.1em; }

.link__meter { margin-top: 14px; height: 4px; background: var(--rule-soft); border-radius: 2px; overflow: hidden; }
.link__meter span { display: block; height: 100%; background: var(--aqua); border-radius: 2px; }
.link--out .link__meter span { background: var(--red); }

.chain__foot {
    margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule-soft);
    display: flex; gap: clamp(20px, 4vw, 50px); flex-wrap: wrap; font-size: 13.5px; color: var(--muted);
}
.chain__foot b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- Signalen ---------- */

.signals { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }

.signal {
    background: var(--card); padding: 26px clamp(20px, 3vw, 32px);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px;
    align-items: start; transition: background .16s;
}
.signal:hover { background: #fcfdfd; }

.signal__mark { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 9px; vertical-align: 1px; }
.signal--critical .signal__mark { background: var(--red); }
.signal--warning .signal__mark { background: var(--warn); }
.signal--good .signal__mark { background: var(--good); }
.signal--info .signal__mark { background: var(--aqua-deep); }

.signal__top { display: flex; align-items: baseline; gap: 13px; flex-wrap: wrap; margin-bottom: 9px; }
.signal__kind { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.signal--critical .signal__kind { color: var(--red); }
.signal--warning .signal__kind { color: var(--warn); }
.signal--good .signal__kind { color: var(--good); }
.signal--info .signal__kind { color: var(--aqua-deep); }

.signal__when { font-size: 12.5px; color: var(--faint); margin-left: auto; white-space: nowrap; }
.signal__cat { font-size: 12.5px; color: var(--faint); }

.signal__title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 9px; line-height: 1.3; }
.signal__text { margin: 0; color: var(--body); font-size: 15px; max-width: 78ch; }

.signal__metric { text-align: right; min-width: 122px; padding-left: 26px; border-left: 1px solid var(--rule-soft); }
.signal__metric strong {
    display: block; font-size: clamp(26px, 3vw, 33px); font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.038em; color: var(--ink);
}
.signal--critical .signal__metric strong { color: var(--red); }
.signal--good .signal__metric strong { color: var(--good); }
.signal__metric span {
    display: block; margin-top: 9px; font-size: 11px; color: var(--faint);
    text-transform: uppercase; letter-spacing: .11em; font-weight: 700;
}

/* ---------- Maandvergelijking ---------- */

.months { padding: 32px clamp(20px, 3vw, 34px) 26px; }

.months__chart { display: flex; align-items: flex-end; gap: clamp(6px, 1.4vw, 18px); height: 232px; }

.mcol { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.mcol__bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; flex: 1; padding-bottom: 10px; }

.mcol__bar { flex: 1; max-width: 15px; min-height: 2px; border-radius: 2px 2px 0 0; }
.mcol__bar--0 { background: #dde4e5; }
.mcol__bar--1 { background: var(--aqua); }
.mcol__bar--2 { background: var(--red); }

.mcol__label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
    color: var(--muted); border-top: 1px solid var(--rule); width: 100%; text-align: center; padding-top: 9px;
}

.months__legend { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; margin-top: 22px; font-size: 13.5px; color: var(--body); }
.months__legend i { display: inline-block; width: 20px; height: 5px; border-radius: 2px; margin-right: 9px; vertical-align: 1px; }
.months__note { margin-left: auto; color: var(--faint); font-size: 13px; }

/* ---------- Tabellen ---------- */

.tablewrap { overflow-x: auto; border-radius: var(--r); }

table { width: 100%; border-collapse: collapse; background: var(--card); font-size: 14.5px; min-width: 680px; }

thead th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
    color: var(--faint); font-weight: 700; padding: 16px 20px 13px;
    border-bottom: 2px solid var(--ink); white-space: nowrap;
}

tbody td { padding: 15px 20px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fcfdfd; }

tfoot td { padding: 15px 20px; border-top: 2px solid var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.name { font-weight: 600; }
.dim { color: var(--muted); }
.strong { font-weight: 700; }

.chip { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.chip--good { color: var(--good); background: var(--good-pale); }
.chip--ok { color: var(--aqua-deep); background: var(--aqua-pale); }
.chip--warn { color: var(--warn); background: var(--warn-pale); }
.chip--bad { color: var(--red); background: var(--red-pale); }

.meter { height: 6px; background: var(--rule-soft); border-radius: 3px; overflow: hidden; min-width: 64px; }
.meter span { display: block; height: 100%; background: var(--aqua); border-radius: 3px; }
.meter--red span { background: var(--red); }

/* ---------- Login ---------- */

.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--paper); }

.login__card {
    width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--rule);
    border-radius: var(--r); padding: 42px 38px 32px; box-shadow: var(--shadow-lift);
}

.login__logo { display: block; height: 54px; margin: 0 auto 30px; }
.login__card h1 { font-size: 22px; text-align: center; margin-bottom: 7px; }
.login__card p.sub { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 30px; }

label { display: block; font-size: 11px; font-weight: 700; margin-bottom: 8px; color: var(--faint); text-transform: uppercase; letter-spacing: .12em; }

input[type=email], input[type=password] {
    width: 100%; padding: 13px 15px; border: 1px solid var(--rule); border-radius: var(--r-sm);
    font: inherit; font-size: 15px; margin-bottom: 19px; background: #fbfcfc; color: var(--ink);
    transition: border-color .16s, box-shadow .16s, background .16s;
}
input:focus { outline: 0; border-color: var(--aqua-deep); box-shadow: 0 0 0 3px rgba(140, 207, 217, .32); background: #fff; }

.btn {
    width: 100%; padding: 14px 16px; background: var(--red); color: #fff; border: 0;
    border-radius: var(--r-sm); font: inherit; font-weight: 700; font-size: 15px;
    cursor: pointer; transition: background .16s;
}
.btn:hover { background: var(--red-deep); }

.alert { background: var(--red-pale); color: var(--red-deep); border-left: 3px solid var(--red); padding: 12px 15px; font-size: 13.5px; margin-bottom: 20px; border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.login__foot { text-align: center; color: var(--faint); font-size: 12px; margin: 26px 0 0; line-height: 1.6; }

/* ---------- Overig ---------- */

.empty { text-align: center; padding: 64px 24px; color: var(--muted); font-size: 15px; }

.pager { margin-top: 24px; font-size: 14px; }
.pager svg { width: 17px; height: 17px; }
.pager .flex { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pager a, .pager span { padding: 7px 12px; border-radius: var(--r-sm); text-decoration: none; color: var(--body); border: 1px solid var(--rule); background: #fff; }
.pager [aria-current=page] span { background: var(--red); color: #fff; border-color: var(--red); }

@media (max-width: 1000px) {
    .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 38px; }
    .chain__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
    .link::after { display: none; }
}

@media (max-width: 720px) {
    .signal { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .signal__metric { text-align: left; border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-soft); padding-top: 16px; }
    .topbar__title { display: none; }
    .topbar__nav { gap: 18px; }
    .chain__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
    .months__chart { height: 180px; }
    .mcol__label { font-size: 9.5px; letter-spacing: .04em; }
}

/* ---------- Mobiel: tabellen worden kaarten ---------- */

@media (max-width: 780px) {
    .tablewrap { overflow: visible; }

    table { min-width: 0; display: block; background: transparent; }
    thead { display: none; }
    tbody, tfoot { display: block; }

    tbody tr, tfoot tr {
        display: block; background: var(--card); border: 1px solid var(--rule);
        border-radius: var(--r); margin-bottom: 12px; padding: 6px 4px;
        box-shadow: var(--shadow);
    }
    tbody tr:hover td { background: transparent; }

    tbody td, tfoot td {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: 18px; padding: 9px 16px; border-bottom: 1px solid var(--rule-soft);
        text-align: left;
    }
    tbody tr td:last-child, tfoot tr td:last-child { border-bottom: 0; }

    /* De eerste cel is de titel van de kaart. */
    tbody td:first-child, tfoot td:first-child {
        font-size: 16px; font-weight: 700; padding-top: 12px;
        border-bottom: 1px solid var(--rule); margin-bottom: 4px;
    }
    tbody td:first-child::before, tfoot td:first-child::before { display: none; }

    td[data-label]::before {
        content: attr(data-label);
        font-size: 11px; font-weight: 700; text-transform: uppercase;
        letter-spacing: .1em; color: var(--faint); flex: 0 0 auto;
    }

    /* Cellen zonder label (zoals de balkjes) verbergen we op mobiel. */
    tbody td:not([data-label]):not(:first-child) { display: none; }

    tfoot td { font-weight: 700; }
    tfoot tr { border-color: var(--ink); }
}

@media (max-width: 560px) {
    .topbar__inner { min-height: 64px; gap: 14px; }
    .topbar__logo img { height: 38px; }
    .topbar__nav { gap: 14px; width: 100%; margin-left: 0; border-top: 1px solid var(--rule); }
    .topbar__nav a { padding: 12px 0 10px; font-size: 14px; border-bottom-width: 2px; }
    .topbar__user { margin-left: auto; padding-left: 14px; font-size: 12.5px; gap: 10px; }

    .hero__inner { padding-top: 30px; }
    .hero__figure { font-size: clamp(38px, 13vw, 56px); }
    .hero__caption { font-size: 15px; }
    .hero__stats { gap: 18px 14px; }
    .hstat__value { font-size: 21px; }
    .hstat__meta { font-size: 12px; }

    .chain { padding: 22px 18px 20px; }
    .chain__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .link { display: grid; grid-template-columns: 1fr auto; align-items: baseline;
            gap: 10px 16px; padding: 14px 0; border-top: 1px solid var(--rule-soft); }
    .link:first-child { border-top: 0; padding-top: 0; }
    .link__label { grid-column: 1; margin-bottom: 0; align-self: center; }
    .link__value { grid-column: 2; text-align: right; font-size: 22px; }
    .link__note { grid-column: 1 / -1; min-height: 0; margin-top: 0; font-size: 12.5px; }
    .link__meter { grid-column: 1 / -1; margin-top: 2px; }

    .signal { padding: 20px 18px; }
    .signal__title { font-size: 17px; }
    .signal__text { font-size: 14.5px; }

    .months { padding: 22px 14px 20px; }
    .months__chart { height: 150px; gap: 3px; }
    .mcol__bars { gap: 1.5px; }
    .mcol__bar { max-width: 8px; }
    .months__legend { gap: 14px; font-size: 12.5px; margin-top: 18px; }
    .months__note { margin-left: 0; flex-basis: 100%; }

    .section { margin-top: 40px; }
    .section__head h2 { font-size: 20px; }
    .wrap { padding-bottom: 64px; }
    .login__card { padding: 32px 24px 26px; }
}

/* ---------- Onderbouwing bij een signaal ---------- */

.evidence { margin-top: 16px; }

.evidence summary {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    font-size: 13px; font-weight: 700; color: var(--aqua-deep);
    padding: 7px 14px 7px 12px; border: 1px solid var(--rule);
    border-radius: 999px; background: #fff; list-style: none;
    transition: border-color .16s, color .16s, background .16s;
    user-select: none;
}
.evidence summary::-webkit-details-marker { display: none; }
.evidence summary:hover { border-color: var(--aqua-deep); background: var(--aqua-pale); }

.evidence__icon {
    width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid currentColor;
    position: relative; flex: 0 0 auto;
}
.evidence__icon::after {
    content: ""; position: absolute; left: 50%; top: 3px; width: 1.5px; height: 4px;
    background: currentColor; transform: translateX(-50%); transition: transform .18s;
}
.evidence__icon::before {
    content: ""; position: absolute; left: 50%; top: 3px; width: 4px; height: 1.5px;
    background: currentColor; transform: translateX(-50%); margin-top: 1.25px;
}
.evidence[open] summary { border-color: var(--aqua-deep); background: var(--aqua-pale); }
.evidence[open] .evidence__icon::after { transform: translateX(-50%) scaleY(0); }

.evidence__body {
    margin-top: 14px; padding: 18px 20px 16px; background: #fbfcfc;
    border: 1px solid var(--rule); border-radius: var(--r-sm);
}

.evidence__period { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.evidence__period strong { color: var(--ink); }

.evidence__table { width: 100%; min-width: 0; border-collapse: collapse; background: transparent; font-size: 14px; }
.evidence__table th {
    text-align: left; font-weight: 600; color: var(--ink); padding: 7px 0;
    border-bottom: 1px solid var(--rule-soft); font-size: 14px;
    text-transform: none; letter-spacing: 0; white-space: normal;
}
.evidence__table td { padding: 7px 0 7px 16px; border-bottom: 1px solid var(--rule-soft); }
.evidence__table tr:last-child th, .evidence__table tr:last-child td { border-bottom: 0; }
.evidence__table td.num { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.evidence__note { color: var(--muted); font-size: 13px; width: 45%; }

.evidence__source { margin: 14px 0 0; font-size: 12.5px; color: var(--faint); }

@media (max-width: 780px) {
    .evidence__table, .evidence__table tbody, .evidence__table tr,
    .evidence__table th, .evidence__table td { display: block; }
    .evidence__table tr {
        background: transparent; border: 0; border-bottom: 1px solid var(--rule-soft);
        border-radius: 0; margin: 0; padding: 10px 0; box-shadow: none;
    }
    .evidence__table tr:last-child { border-bottom: 0; }
    .evidence__table th { padding: 0 0 3px; border: 0; font-size: 13.5px; }
    .evidence__table td { padding: 0; border: 0; }
    .evidence__table td.num { font-size: 17px; }
    .evidence__note { width: auto; }
    .evidence__body { padding: 16px; }
}

/* ---------- Tooltips op grafiekelementen ---------- */

[data-tip] { position: relative; cursor: help; outline: none; }

[data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 10px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600;
    line-height: 1.45; letter-spacing: 0; text-transform: none;
    padding: 8px 12px; border-radius: var(--r-sm); white-space: nowrap;
    opacity: 0; pointer-events: none; z-index: 50;
    transition: opacity .14s ease, transform .14s ease;
    box-shadow: 0 6px 20px -6px rgba(38, 61, 66, .5);
}

[data-tip]::before {
    content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent; border-top-color: var(--ink);
    opacity: 0; pointer-events: none; z-index: 51;
    transition: opacity .14s ease, transform .14s ease;
}

[data-tip]:hover::after, [data-tip]:focus::after,
[data-tip]:hover::before, [data-tip]:focus::before {
    opacity: 1; transform: translateX(-50%) translateY(0);
}

/* Staven mogen hun eigen hoogte houden; alleen de kleur reageert. */
.mcol__bar { transition: filter .14s, box-shadow .14s; }
.mcol__bar:hover, .mcol__bar:focus { filter: brightness(1.12) saturate(1.1); box-shadow: 0 0 0 2px rgba(38, 61, 66, .12); }

.link__meter:hover span, .link__meter:focus span,
.meter:hover span, .meter:focus span { filter: brightness(1.1); }

.legend-swatch { display: inline-block; width: 20px; height: 5px; border-radius: 2px; margin-right: 9px; vertical-align: 1px; }

.trend[data-tip] { cursor: help; }

/* Bij de eerste en laatste kolom zou de tooltip buiten beeld vallen. */
.mcol:first-child [data-tip]::after { left: 0; transform: translateX(0) translateY(4px); }
.mcol:first-child [data-tip]:hover::after, .mcol:first-child [data-tip]:focus::after { transform: translateX(0) translateY(0); }
.mcol:last-child [data-tip]::after { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.mcol:last-child [data-tip]:hover::after, .mcol:last-child [data-tip]:focus::after { transform: translateX(0) translateY(0); }

@media (max-width: 780px) {
    [data-tip]::after { white-space: normal; min-width: 170px; max-width: 220px; }
}

/* ---------- Mobiel: niets mag buiten het scherm vallen ---------- */

html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100%; }

/* Grid- en flexkinderen mogen standaard niet krimpen; dat veroorzaakt overloop
   zodra de inhoud breder is dan de kolom. */
.hero__inner > *, .hero__stats > *, .chain__row > *, .signal > *,
.topbar__inner > *, .section__headrow > * { min-width: 0; }

.hstat__value, .link__value, .signal__title, .signal__text,
.chain__foot span, .months__legend span { overflow-wrap: anywhere; }

@media (max-width: 560px) {
    /* De navigatie krijgt een eigen regel en de gebruiker eronder, zodat er
       nooit horizontaal gescrold hoeft te worden. */
    .topbar__inner { flex-wrap: wrap; padding-bottom: 0; }
    .topbar__nav {
        order: 3; width: 100%; margin-left: 0; gap: 20px;
        border-top: 1px solid var(--rule); overflow-x: auto;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .topbar__nav::-webkit-scrollbar { display: none; }
    .topbar__nav a { white-space: nowrap; }
    .topbar__user {
        order: 2; margin-left: auto; padding-left: 0; border-left: 0;
        font-size: 12px; gap: 8px;
    }

    .stamp { white-space: normal; }
    .num { white-space: normal; }

    /* Ketenstap: label links, getal rechts, allebei met ruimte om te breken. */
    .link { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
    .link__value { font-size: 20px; }

    .hero__caption { font-size: 14.5px; }
    .hstat__meta { font-size: 11.5px; gap: 5px; }
}

@media (max-width: 400px) {
    .hero__stats { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .hero__figure { font-size: 40px; }
}

/* ---------- Dagbericht ---------- */

.daily {
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
    box-shadow: var(--shadow); padding: 26px clamp(20px, 3vw, 32px) 24px;
    margin-bottom: clamp(38px, 4.5vw, 56px); position: relative; overflow: hidden;
}

.daily::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--aqua); }

.daily__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.daily__head h2 { font-size: clamp(19px, 2.2vw, 23px); margin-top: 7px; }
.daily__compare { font-size: 13px; color: var(--faint); white-space: nowrap; }

.daily__summary { margin: 0 0 20px; font-size: 15.5px; color: var(--body); max-width: 88ch; }

.daily__stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 20px 26px; padding-top: 18px; border-top: 1px solid var(--rule-soft);
}

.dstat__label {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; color: var(--faint); margin-bottom: 7px;
}

.dstat__value {
    font-size: clamp(20px, 2.2vw, 25px); font-weight: 700; line-height: 1.08;
    font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.032em;
}
.dstat--accent .dstat__value { color: var(--red); }

.dstat__meta { margin-top: 6px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.daily__notes {
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule-soft);
    display: flex; gap: clamp(16px, 3vw, 38px); flex-wrap: wrap; font-size: 13.5px; color: var(--muted);
}
.daily__notes b { color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
    .daily { padding: 22px 18px 20px; }
    .daily__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
    .daily__compare { white-space: normal; }
}