/* mkacties.css — MARKETING fase 1 · alleen tokens */
.mk-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.mk-h1 { margin: 4px 0 14px; }
.mk-blok { margin: 14px 0; }
.mk-fijn { font-size: .72rem; color: var(--ink3); }
.mk-taak { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-top: 1px solid var(--grijs); font-size: .78rem; }
.mk-taak i { color: var(--goed); font-style: normal; }
.mk-taak.is-af { color: var(--ink3); }
.mk-taak em { margin-left: auto; font-style: normal; font-size: .7rem; color: var(--ink3); }
.mk-signalen { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.mk-sig { padding: 8px 12px; border-radius: 8px; font-size: .76rem; }
.mk-sig.is-rood { background: var(--stop-t); color: var(--stop); }
.mk-sig.is-geel { background: var(--let-t); color: var(--let); }
.mk-wortel td.is-rood { color: var(--stop); font-weight: 700; }

/* ---- fase 2 · de kalender (gelift uit wireframe-marketing-kalender-v3) ---- */
.mkk-kaart { padding: 16px 18px; }
.mkk-kiez { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.mkk-tl { position: relative; border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; background: var(--kaart); }
.mkk-kop { display: flex; height: 22px; background: var(--rail); border-bottom: 1px solid var(--lijn); }
.mkk-kop span { flex: 1; font: 700 10px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink3); display: flex; align-items: center; justify-content: center; }
.mkk-kop span.is-nu { color: var(--accent-d); }
.mkk-net { position: absolute; inset: 0; display: flex; pointer-events: none; }
.mkk-net i { flex: 1; border-right: 1px solid var(--grijs); }
.mkk-baan { position: relative; height: 24px; border-top: 1px solid var(--grijs2); background: var(--kaart); }
.mkk-baan.is-rail { height: 26px; }
.mkk-groep { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px 3px; background: var(--rail); border-top: 1px solid var(--lijn); font-size: .74rem; font-weight: 700; }
.mkk-aant { font-weight: 400; font-size: .66rem; color: var(--ink3); }
.mkk-bar { position: absolute; top: 3px; bottom: 3px; min-width: 8px; border-radius: 5px; font-size: .62rem; color: #fff; display: flex; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap; cursor: pointer; }
.mkk-bar span { overflow: hidden; text-overflow: ellipsis; }
.mkk-bar.st-concept { background: var(--ink3); }
.mkk-bar.st-wacht { background: var(--let); }
.mkk-bar.st-gepland { background: var(--accent); }
.mkk-bar.st-klaar { background: var(--accent-d); }
.mkk-bar.st-loopt { background: var(--goed); }
.mkk-bar.st-af { background: var(--grijs2); color: var(--ink2); }
.mkk-bar.st-stop { background: var(--stop); }
.mkk-bar.is-als { outline: 2px dashed var(--accent); outline-offset: 1px; }
.mkk-sig { width: 7px; height: 7px; border-radius: 50%; background: var(--let-t); border: 1px solid #fff; flex: none; margin-right: 4px; }
.mkk-sig.is-rood { background: var(--stop-t); }
.mkk-dicht { position: absolute; top: 22px; bottom: 0; background: repeating-linear-gradient(45deg, transparent 0 6px, var(--let-t) 6px 10px); pointer-events: auto; z-index: 1; }
.mkk-nu { position: absolute; top: 22px; bottom: 0; width: 2px; background: var(--accent); z-index: 2; }
.mkk-rail { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; color: #fff; font-size: .6rem; display: flex; align-items: center; padding: 0 6px; overflow: hidden; }
.mkk-rail.is-ok { background: var(--accent); }
.mkk-rail.is-let { background: var(--let); }
.mkk-rail.is-stop { background: var(--stop); }
.mkk-leeg { padding: 20px; color: var(--ink3); font-size: .8rem; }
.mkk-fijn { font-size: .7rem; color: var(--ink3); margin: 10px 2px 0; }
.mkk-taak { display: flex; gap: 12px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--grijs); font-size: .8rem; }
.mkk-taak.is-laat > span:first-child { color: var(--stop); font-weight: 700; }
.mkk-taak > span:nth-child(2) { flex: 1; }

/* N4 (MARKETING-NAV §7) · de Budget-tab: begroot naast het grootboek */
.mkb-kaart { padding: 16px 18px; margin-top: 14px; }
.mkb-rij { display: grid; grid-template-columns: 80px 1fr 110px; gap: 12px; align-items: center; padding: 7px 0; font-size: .8rem; }
.mkb-rij .mono:first-child { color: var(--ink3); font-size: .68rem; }
.mkb-rij b { text-align: right; }
.mkb-balk { height: 12px; background: var(--grijs); border-radius: 99px; overflow: hidden; }
.mkb-balk i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.mkb-balk i.is-over { background: var(--let); }