/* Instellingen › AI-kosten (verbruik, grafieken en maandbudget van de AI), prefix ak- — 1-10-2026 */

/* ── Eigen tokens ────────────────────────────────────────────────────────────────────────────── */
.ak-root {
  --ak-planning: #2a78d6;
  --ak-chat: #eb6834;
  --ak-navy: var(--brand-accent, #1F2A60);
  --ak-tekst: var(--text, #1A1A1B);
  --ak-tekst-2: var(--text-2, #6B6B70);
  --ak-zacht: #7d7c86;
  --ak-rand: var(--border, #E4E4E7);
  --ak-raster: #ECEDF1;
  --ak-vlak: #F5F6FA;
  --ak-hover: rgba(31, 42, 96, .05);
  --ak-focus: var(--brand-accent, #1F2A60);
  --ak-goed: #15803D;
  --ak-goed-vlak: #E7F6E7;
  --ak-let: #D97706;
  --ak-let-vlak: #FEF4DC;
  --ak-let-tekst: #6e4700;
  --ak-kritiek: #d03b3b;
  --ak-kritiek-vlak: #FDECEC;
  --ak-kritiek-tekst: #b42f2f;
  --ak-kop: 'Manrope', 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

.ak-ic { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle; }
.ak-verborgen {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Kaarten ─────────────────────────────────────────────────────────────────────────────────── */
.ak-body { padding-bottom: 16px; min-width: 0; }
.ak-root .card-head { flex-wrap: wrap; gap: 2px 12px; }
.ak-root h3 { font-size: 13.5px; font-weight: 700; color: var(--ak-tekst); }
.ak-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ak-zacht);
}
.ak-root .hint.ak-dollar { font-size: 12px; color: var(--ak-tekst-2); line-height: 1.5; margin: 12px 0 0; }

/* Kleur per bron: een rechthoekje, zoals de staven. */
.ak-sleutel { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--ak-zacht); }
.ak-sleutel.is-planning { background: var(--ak-planning); }
.ak-sleutel.is-chat { background: var(--ak-chat); }
.ak-sleutel.is-gestreept {
  background: repeating-linear-gradient(135deg, var(--ak-chat) 0 2px, color-mix(in srgb, var(--ak-chat) 25%, white) 2px 4px);
}

/* meldingen */
.ak-melding {
  display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 10px 12px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.5;
}
.ak-melding > .ak-ic { width: 16px; height: 16px; margin-top: 1px; }
.ak-melding.is-let { background: var(--ak-let-vlak); color: var(--ak-let-tekst); border: 1px solid #f4dca0; }
.ak-melding.is-fout { background: var(--ak-kritiek-vlak); color: var(--ak-kritiek-tekst); border: 1px solid #f3c6c6; margin-bottom: 12px; }
.ak-melding > span { flex: 1; min-width: 0; }
.ak-link-knop {
  flex: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.ak-link-knop:focus-visible { outline: 2px solid var(--ak-focus); outline-offset: 2px; border-radius: 3px; }

/* ── 1. Deze maand: totaal, verdeling en kerncijfers ─────────────────────────────────────────── */
.ak-kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px 28px; align-items: start; margin-bottom: 20px; }
.ak-totaal { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ak-held {
  font-family: var(--ak-kop); font-size: 48px; font-weight: 800; letter-spacing: -1.3px; line-height: 1.05; color: var(--ak-navy);
}
.ak-verdeling {
  display: flex; gap: 2px; height: 10px; margin: 10px 0 8px; border-radius: 99px; overflow: hidden; background: var(--ak-raster);
}
.ak-verdeling-seg { flex: 1 1 0; min-width: 3px; }
.ak-verdeling-seg.is-planning { background: var(--ak-planning); }
.ak-verdeling-seg.is-chat { background: var(--ak-chat); }
.ak-bronnen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ak-bronnen li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ak-tekst-2); }
.ak-bronnen li > span { flex: 1; min-width: 0; }
.ak-bronnen b { color: var(--ak-tekst); font-variant-numeric: tabular-nums; }
.ak-bronnen small { width: 38px; text-align: right; font-size: 12px; color: var(--ak-zacht); font-variant-numeric: tabular-nums; }

.ak-cijfers { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ak-cijfers > div {
  min-width: 0; padding: 11px 13px 12px; border-radius: 12px; background: var(--ak-vlak); border: 1px solid #EDEEF3;
  display: flex; flex-direction: column; gap: 1px;
}
.ak-cijfers dt { font-size: 11.5px; font-weight: 600; color: var(--ak-tekst-2); }
.ak-cijfers dd { margin: 0; font-family: var(--ak-kop); font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--ak-tekst); }
.ak-cijfers small { font-size: 11.5px; line-height: 1.4; color: var(--ak-zacht); }

.ak-grafiek-kop { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; }
.ak-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ak-legenda li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ak-tekst-2); }

.ak-noot { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--ak-tekst-2); }
.ak-noot .ak-sleutel { margin-top: 3px; }

/* ── Gestapelde kolommen ─────────────────────────────────────────────────────────────────────── */
.ak-grafiek {
  --ak-hoogte: 180px;
  display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: var(--ak-hoogte) auto; column-gap: 8px;
  padding-top: 8px;
}
.ak-as-y { position: relative; grid-row: 1; grid-column: 1; min-width: 30px; }
.ak-as-y span {
  position: absolute; right: 0; transform: translateY(50%); font-size: 10.5px; line-height: 1; color: var(--ak-zacht);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ak-plot { position: relative; grid-row: 1; grid-column: 2; min-width: 0; }
.ak-raster { position: absolute; inset: 0; pointer-events: none; }
.ak-raster span { position: absolute; left: 0; right: 0; height: 1px; background: var(--ak-raster); }
.ak-raster span:first-child { background: #D9DBE3; }
.ak-kolommen { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--ak-n), minmax(0, 1fr)); }
.ak-kolom {
  position: relative; height: 100%; min-width: 0; display: flex; align-items: flex-end; justify-content: center;
  margin: 0; padding: 0; border: 0; border-radius: 6px 6px 0 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
  transition: background .12s;
}
.ak-kolom:hover,
.ak-kolom.is-actief { background: var(--ak-hover); }
.ak-kolom.is-nadruk { background: rgba(31, 42, 96, .035); }
.ak-kolom.is-nadruk.is-actief,
.ak-kolom.is-nadruk:hover { background: rgba(31, 42, 96, .07); }
.ak-kolom:focus { outline: none; }
.ak-kolom:focus-visible { outline: 2px solid var(--ak-focus); outline-offset: -2px; }
.ak-kolom.is-leeg { cursor: default; align-items: flex-end; }
/* Dagen die nog komen: een stip op de basislijn, zodat de maand compleet oogt. */
.ak-kolom.is-leeg::after { content: ""; width: 3px; height: 3px; margin-bottom: 3px; border-radius: 50%; background: #D3D5DE; }
/* Maand waarvan de planning-agent al is opgeruimd: een gestippelde basislijn, geen staaf van $0. */
.ak-kolom.is-onbekend::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; border-top: 2px dashed #C9CCD8; pointer-events: none;
}

.ak-staaf { width: min(24px, 62%); display: flex; flex-direction: column; gap: 2px; }
.ak-grafiek.is-dicht .ak-staaf { width: min(16px, 70%); }
.ak-seg { flex: 1 1 0; min-height: 1px; transition: filter .12s; }
.ak-seg.is-planning { background: var(--ak-planning); }
.ak-seg.is-chat { background: var(--ak-chat); }
.ak-staaf > .ak-seg:first-child { border-radius: 4px 4px 0 0; }
.ak-grafiek.is-dicht .ak-staaf > .ak-seg:first-child { border-radius: 3px 3px 0 0; }
.ak-kolom.is-actief .ak-seg,
.ak-kolom:hover .ak-seg { filter: brightness(1.1) saturate(1.05); }

.ak-as-x {
  grid-row: 2; grid-column: 2; display: grid; grid-template-columns: repeat(var(--ak-n), minmax(0, 1fr));
  padding-top: 6px; min-width: 0;
}
.ak-as-x span { min-width: 0; text-align: center; font-size: 10.5px; line-height: 1.2; color: var(--ak-zacht); white-space: nowrap; overflow: visible; }
.ak-as-x span.is-nadruk { color: var(--ak-tekst); font-weight: 700; }

/* tooltip: naast de kolom, nooit eroverheen */
.ak-tip {
  position: absolute; top: 4px; z-index: 3; width: max-content; max-width: min(230px, 70%);
  display: flex; flex-direction: column; gap: 3px; padding: 9px 11px 10px; border-radius: 11px;
  background: #fff; border: 1px solid var(--ak-rand); box-shadow: 0 8px 24px -10px rgba(26, 26, 27, .28);
  font-size: 12px; line-height: 1.35; color: var(--ak-tekst-2); pointer-events: none;
}
.ak-tip-kop { font-size: 12px; font-weight: 700; color: var(--ak-tekst); margin-bottom: 2px; }
.ak-tip-rij { display: flex; align-items: center; gap: 7px; }
.ak-tip-rij b { color: var(--ak-tekst); font-variant-numeric: tabular-nums; }
.ak-tip-rij b.is-onbekend { font-weight: 600; color: var(--ak-zacht); }
.ak-tip-lijn { flex: none; width: 12px; height: 3px; border-radius: 2px; background: var(--ak-zacht); }
.ak-tip-lijn.is-planning { background: var(--ak-planning); }
.ak-tip-lijn.is-chat { background: var(--ak-chat); }
.ak-tip-som { margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--ak-raster); }
.ak-tip-som b { color: var(--ak-tekst); font-variant-numeric: tabular-nums; }
.ak-tip-regel { font-size: 11.5px; color: var(--ak-zacht); }

@media (prefers-reduced-motion: no-preference) {
  .ak-staaf { transform-origin: bottom; animation: ak-groei .55s cubic-bezier(.2, .8, .2, 1) both; }
  .ak-tip { animation: ak-in .12s ease-out; }
}
@keyframes ak-groei { from { transform: scaleY(0); } }
@keyframes ak-in { from { opacity: 0; } }

/* tabelweergave */
.ak-tabel { margin-top: 12px; }
.ak-tabel summary {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ak-navy);
  cursor: pointer; border-radius: 6px; list-style-position: inside;
}
.ak-tabel summary:focus-visible { outline: 2px solid var(--ak-focus); outline-offset: 2px; }
.ak-tabel-schuif { margin-top: 8px; max-height: 280px; overflow: auto; border: 1px solid var(--ak-rand); border-radius: 10px; }
.ak-tabel table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ak-tabel th,
.ak-tabel td { padding: 6px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--ak-raster); font-variant-numeric: tabular-nums; }
.ak-tabel thead th { position: sticky; top: 0; background: #FAFAFB; font-size: 11.5px; font-weight: 700; color: var(--ak-tekst-2); }
.ak-tabel th[scope="row"],
.ak-tabel thead th:first-child { text-align: left; font-weight: 600; color: var(--ak-tekst); }
.ak-tabel tbody tr:last-child th,
.ak-tabel tbody tr:last-child td { border-bottom: 0; }
.ak-tabel tr.is-nadruk th,
.ak-tabel tr.is-nadruk td { background: #F7F8FC; }

/* ── 2. Maandbudget AI Agent-chat ────────────────────────────────────────────────────────────── */
.ak-budget { scroll-margin-top: 90px; }
.ak-budget.is-op { border-color: #f3c6c6; }
/* Via de link uit de chat (#kaart-ai-budget): de kaart licht even op. */
@media (prefers-reduced-motion: no-preference) {
  .ak-budget:target { animation: ak-doel 2.4s ease-out .3s 1; }
}
@keyframes ak-doel {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent, #1F2A60) 35%, transparent); }
  100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--brand-accent, #1F2A60) 0%, transparent); }
}

.ak-budget-meter { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 18px; margin-bottom: 14px; }
.ak-ring { position: relative; width: 112px; height: 112px; }
.ak-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ak-ring-spoor { fill: none; stroke: #EEF0FA; stroke-width: 11; }
.ak-ring.is-vrij .ak-ring-spoor { stroke: #E4E5EC; stroke-dasharray: 1.4 2.2; stroke-width: 9; }
.ak-ring-boog { fill: none; stroke-width: 11; stroke-linecap: round; stroke: var(--ak-navy); transition: stroke-dasharray .5s cubic-bezier(.2, .8, .2, 1), stroke .2s; }
.ak-ring.is-let .ak-ring-boog { stroke: var(--ak-let); }
.ak-ring.is-op .ak-ring-boog { stroke: var(--ak-kritiek); }
@media (prefers-reduced-motion: no-preference) {
  .ak-ring-boog { animation: ak-teken 1s cubic-bezier(.2, .8, .2, 1) .15s backwards; }
}
@keyframes ak-teken { from { stroke-dasharray: 0 100; } }
.ak-ring-grens { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }
.ak-ring-midden { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ak-ring-midden b { font-family: var(--ak-kop); font-size: 25px; font-weight: 800; letter-spacing: -.6px; line-height: 1; color: var(--ak-tekst); }
.ak-ring-midden b span { font-size: 14px; margin-left: 1px; color: var(--ak-tekst-2); }
.ak-ring-midden b.is-tekst { font-size: 13px; letter-spacing: 0; line-height: 1.25; max-width: 70px; color: var(--ak-tekst-2); }
.ak-ring-midden small { margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ak-zacht); }
.ak-ring.is-let .ak-ring-midden b { color: #8a5a00; }
.ak-ring.is-op .ak-ring-midden b { color: var(--ak-kritiek-tekst); }

.ak-budget-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ak-budget-bedrag { font-family: var(--ak-kop); font-size: 28px; font-weight: 800; letter-spacing: -.7px; line-height: 1.1; color: var(--ak-navy); }
.ak-budget.is-op .ak-budget-bedrag { color: var(--ak-kritiek-tekst); }
.ak-budget-van { font-size: 12.5px; color: var(--ak-tekst-2); font-variant-numeric: tabular-nums; }
.ak-status {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 3px 10px 3px 7px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700; line-height: 1.35;
}
.ak-status .ak-ic { width: 13px; height: 13px; }
.ak-status.is-ok { background: var(--ak-goed-vlak); color: var(--ak-goed); }
.ak-status.is-vrij { background: #EEF0FA; color: var(--ak-navy); }
.ak-status.is-let { background: var(--ak-let-vlak); color: var(--ak-let-tekst); box-shadow: inset 0 0 0 1px #f4dca0; }
.ak-status.is-op { background: var(--ak-kritiek-vlak); color: var(--ak-kritiek-tekst); box-shadow: inset 0 0 0 1px #f3c6c6; }

.ak-uitleg { list-style: none; margin: 0 0 14px; padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; border-radius: 12px; background: var(--ak-vlak); }
.ak-uitleg li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.5; color: var(--ak-tekst-2); }
.ak-uitleg b { color: var(--ak-tekst); }
.ak-uitleg-icoon { flex: none; width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: #EEF0FA; color: var(--ak-navy); }
.ak-uitleg-icoon .ak-ic { width: 13px; height: 13px; }
.ak-uitleg-icoon.is-zoek { background: color-mix(in srgb, var(--ak-planning) 12%, white); color: #1d5fae; }

.ak-budget-bewerk { border-top: 1px solid var(--ak-rand); padding-top: 14px; }
.ak-budget-bewerk label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--ak-tekst); }
.ak-budget-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ak-budget-veld {
  display: inline-flex; align-items: center; gap: 4px; flex: 1 1 130px; min-width: 120px; max-width: 200px; height: 36px; padding: 0 11px;
  border-radius: 10px; border: 1px solid var(--ak-rand); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.ak-budget-veld:focus-within { border-color: var(--ak-navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ak-navy) 14%, transparent); }
.ak-budget-veld.is-fout { border-color: var(--ak-kritiek); }
.ak-budget-veld.is-fout:focus-within { box-shadow: 0 0 0 3px rgba(208, 59, 59, .14); }
.ak-budget-veld > span { font-family: var(--ak-kop); font-weight: 800; color: var(--ak-tekst-2); }
.ak-budget-veld input {
  flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-family: var(--ak-kop); font-size: 15px; font-weight: 800; color: var(--ak-tekst); font-variant-numeric: tabular-nums;
}
.ak-budget-veld input::placeholder { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ak-zacht); }
.ak-budget-veld.is-vrij > span { opacity: .4; }
.ak-budget-veld small { flex: none; font-size: 11px; color: var(--ak-zacht); white-space: nowrap; }

/* snelkeuzes: rustige segmentknop, zelfde gewicht als btn-ghost */
.ak-segment { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 10px; border: 1px solid var(--ak-rand); background: #F4F5F8; }
.ak-segment button {
  border: 0; border-radius: 8px; background: transparent; padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ak-tekst-2); cursor: pointer; transition: background .15s, color .15s;
}
.ak-segment button:hover { color: var(--ak-tekst); }
.ak-segment button[aria-pressed="true"] { background: #fff; color: var(--ak-navy); box-shadow: 0 1px 2px rgba(26, 26, 27, .08); }
.ak-segment button:disabled { opacity: .5; cursor: progress; }
.ak-segment button:focus-visible { outline: 2px solid var(--ak-focus); outline-offset: 1px; }
.ak-budget-hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ak-zacht); }
.ak-budget-hint.is-fout { color: var(--ak-kritiek-tekst); font-weight: 600; }

.ak-budget-voet { justify-content: flex-end; }
.ak-opgeslagen { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ak-goed); }
.ak-opgeslagen .ak-ic { width: 14px; height: 14px; }
.ak-root .btn-primary[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ak-root .btn-primary[aria-disabled="true"]:hover { background: var(--brand-accent); border-color: var(--brand-accent); }
.ak-root .btn-primary:focus-visible { outline: 2px solid var(--ak-focus); outline-offset: 2px; }

/* ── 3. Per maand ────────────────────────────────────────────────────────────────────────────── */
.ak-mini-cijfers { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 14px; }
.ak-mini-cijfers > div { display: flex; flex-direction: column; gap: 2px; }
.ak-mini-cijfers b { font-family: var(--ak-kop); font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--ak-tekst); }
.ak-mini-cijfers small { font-size: 11.5px; color: var(--ak-zacht); }

/* ── 4. Gemiddeld, duurste gesprekken en modellen ────────────────────────────────────────────── */
.ak-drie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px 26px; }
.ak-blok { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ak-blok h3 small { margin-left: 4px; font-size: 11.5px; font-weight: 500; color: var(--ak-zacht); }

.ak-gem { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 12px; background: var(--ak-vlak); border: 1px solid #EDEEF3; }
.ak-gem .ak-sleutel { margin-top: 7px; }
.ak-gem > div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ak-gem b { font-family: var(--ak-kop); font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--ak-tekst); }
.ak-gem span { font-size: 12.5px; color: var(--ak-tekst-2); }
.ak-gem small { font-size: 11.5px; line-height: 1.4; color: var(--ak-zacht); }

.ak-gesprekken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ak-gesprekken li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 10px;
  padding: 9px 11px; border-radius: 12px; border: 1px solid var(--ak-rand); background: #fff;
}
.ak-gesprek-nr {
  width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; color: var(--ak-navy); background: #EEF0FA;
}
.ak-gesprek-tekst { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ak-gesprek-tekst a {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; color: var(--ak-navy);
  border-radius: 4px;
}
.ak-gesprek-tekst a .ak-ic { width: 12px; height: 12px; opacity: .6; }
.ak-gesprek-tekst a:hover { text-decoration: underline; text-underline-offset: 2px; }
.ak-gesprek-tekst a:focus-visible { outline: 2px solid var(--ak-focus); outline-offset: 2px; }
.ak-gesprek-klant { font-size: 12.5px; color: var(--ak-tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-gesprek-tekst small { font-size: 11.5px; color: var(--ak-zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-gesprek-balk { display: block; height: 4px; margin-top: 6px; border-radius: 99px; background: var(--ak-raster); overflow: hidden; }
.ak-gesprek-balk span { display: block; height: 100%; border-radius: 99px; background: var(--ak-navy); opacity: .75; }
.ak-gesprek-bedrag { font-family: var(--ak-kop); font-size: 15px; font-weight: 800; color: var(--ak-tekst); font-variant-numeric: tabular-nums; padding-top: 1px; }

.ak-modellen { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ak-modellen > div { padding: 11px 13px; border-radius: 12px; background: var(--ak-vlak); border: 1px solid #EDEEF3; }
.ak-modellen dt { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--ak-tekst-2); }
.ak-modellen dd { margin: 3px 0 0; display: flex; flex-direction: column; gap: 1px; }
.ak-modellen dd b { font-size: 14px; color: var(--ak-tekst); }
.ak-modellen dd small { font-size: 11.5px; line-height: 1.4; color: var(--ak-zacht); }

/* ── Smalle kaart ──────────────────────────────────────────────────────────────────────────────
   Op de breedte van de kaart, niet van het scherm: een kaart staat soms in een halve kolom, en de zijbalk van de
   backoffice neemt op een telefoon al ruimte in. */
.ak-root > .card { container-type: inline-size; }
@container (max-width: 980px) {
  .ak-drie { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ak-drie > .ak-blok:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
}
@container (max-width: 640px) {
  .ak-kop { grid-template-columns: minmax(0, 1fr); }
  .ak-held { font-size: 36px; }
  .ak-drie { grid-template-columns: minmax(0, 1fr); }
  .ak-grafiek { --ak-hoogte: 150px; }
  .ak-tip { max-width: min(200px, 78%); }
}
@container (max-width: 400px) {
  .ak-cijfers { grid-template-columns: minmax(0, 1fr); }
  .ak-budget-meter { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
  .ak-ring { width: 92px; height: 92px; }
  .ak-ring-midden b { font-size: 21px; }
  .ak-budget-bedrag { font-size: 24px; }
  .ak-budget-veld { max-width: none; }
  .ak-grafiek.is-dicht .ak-staaf { width: 80%; }
}
@media (forced-colors: active) {
  .ak-seg, .ak-verdeling-seg, .ak-sleutel, .ak-tip-lijn { forced-color-adjust: none; }
  .ak-kolom:focus-visible { outline-color: Highlight; }
}