/* Product mockups (siteMockup) — portal look: light canvas, white cards, teal kickers,
   small type, pill tags. Prefix: .mk- */

.mk { --mk-canvas: #F6F9FF; --mk-line: var(--color-border, #DDE7F7); --mk-ink: var(--color-text-primary, #071A3D); --mk-muted: var(--color-text-muted, #5A6A84);
    background: var(--mk-canvas); color: var(--color-text-secondary, #40516B); font-size: 12.5px; line-height: 1.45; font-variant-numeric: tabular-nums; max-width: 1200px; position: relative; }
.mk * { box-sizing: border-box; }

/* Portal bar (no user, no organisation) */
.mk-app { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--mk-line); min-width: 0; }
.mk-logo { height: 24px; width: auto; flex: none; }
.mk-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--mk-muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-crumbs span:last-child { color: var(--mk-ink); }
.mk-crumb-sep { color: var(--color-border-strong, #C9D6EE); }
.mk-env { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; color: var(--color-brand-teal, #087F8C); background: var(--color-surface-cyan, #E9FBFD); border-radius: 999px; padding: 3px 9px; }

.mk-body { padding: 18px; }
.mk-note { font-size: 11.5px; color: var(--mk-muted); padding: 0 18px 14px; }
.mk-compact .mk-body { padding: 14px; }

/* Head */
.mk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.mk-head-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mk-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-brand-teal, #087F8C); }
.mk-title { font-size: 19px; line-height: 1.2; font-weight: 750; color: var(--mk-ink); letter-spacing: -.01em; margin-top: 3px; }
.mk-title-sm { font-size: 16px; }
.mk-sub, .mk-muted { color: var(--mk-muted); }
.mk-sub { margin-top: 3px; }
.mk-muted { font-size: 11.5px; }
.mk-label { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-muted); margin: 0 0 8px; }
.mk-nowrap { white-space: nowrap; }
.mk p { margin: 0; }

/* Buttons, tags, chips (presentational spans) */
.mk-btn { display: inline-flex; align-items: center; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mk-btn-primary { background: var(--color-primary, #1E5BFF); color: #fff; box-shadow: 0 4px 10px rgba(30, 91, 255, .22); }
.mk-btn-ghost { background: #fff; color: var(--mk-ink); border: 1px solid var(--mk-line); }
.mk .s-mock-tag-violet { background: var(--color-surface-violet, #F5F3FF); color: var(--color-ai-accent, #7C3AED); }
.mk .s-mock-tag-teal { background: var(--color-surface-cyan, #E9FBFD); color: var(--color-brand-teal, #087F8C); }
.mk-tagrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mk-chip { display: inline-block; margin-right: 6px; padding: 3px 10px; border-radius: 999px; background: var(--color-surface-blue, #EAF2FF); color: var(--color-primary, #1E5BFF); font-weight: 700; font-size: 11.5px; }

/* Tabs */
.mk-tabs { display: flex; gap: 4px; padding: 5px; background: #fff; border: 1px solid var(--mk-line); border-radius: 12px; margin-bottom: 14px; overflow: hidden; flex-wrap: wrap; }
.mk-tab { padding: 6px 11px; border-radius: 8px; font-weight: 700; color: var(--mk-ink); font-size: 12px; white-space: nowrap; }
.mk-tab.is-active { background: var(--color-surface-blue, #EAF2FF); color: var(--color-primary, #1E5BFF); }
.mk-tabpanel { background: #fff; border: 1px solid var(--mk-line); border-radius: 14px; padding: 16px; }

/* Counters */
.mk-counters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.mk-counters-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mk-counter { background: #fff; border: 1px solid var(--mk-line); border-radius: 12px; padding: 10px 12px; border-top: 3px solid var(--color-primary, #1E5BFF); min-width: 0; }
.mk-counter span { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-counter b { display: block; font-size: 20px; color: var(--mk-ink); margin-top: 2px; }
.mk-counter-high { border-top-color: var(--color-error, #DC2626); }
.mk-counter-limited, .mk-counter-amber { border-top-color: var(--color-warning, #F59E0B); }
.mk-counter-minimal, .mk-counter-green { border-top-color: var(--color-success, #16A34A); }
.mk-counter-under, .mk-counter-grey { border-top-color: var(--color-border-strong, #C9D6EE); }
.mk-counter-teal { border-top-color: var(--color-brand-teal, #087F8C); }
.mk-counter.is-active { box-shadow: 0 0 0 2px var(--color-primary, #1E5BFF); }

/* Filters */
.mk-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mk-select, .mk-search { background: #fff; border: 1px solid var(--mk-line); border-radius: 8px; padding: 5px 28px 5px 10px; font-weight: 600; color: var(--mk-ink); position: relative; min-width: 0; }
.mk-select small { display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mk-muted); }
.mk-select::after { content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--mk-muted); border-bottom: 1.5px solid var(--mk-muted); transform: translateY(-70%) rotate(45deg); }
.mk-search { color: var(--mk-muted); font-weight: 500; display: flex; align-items: center; padding-left: 28px; margin-left: auto; }
.mk-search::before { content: ""; position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; border: 1.5px solid var(--mk-muted); border-radius: 50%; transform: translateY(-60%); }
.mk-search-wide { margin-left: 0; width: 100%; padding-top: 8px; padding-bottom: 8px; }

/* Tables (scroll inside the frame on small screens) */
.mk-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fff; border: 1px solid var(--mk-line); border-radius: 12px; }
.mk-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mk-table-wide { min-width: 860px; }
.mk .mk-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--mk-muted); font-weight: 700; padding: 9px 10px; border-bottom: 1px solid var(--mk-line); white-space: nowrap; background: #FBFCFF; }
.mk .mk-table td { padding: 9px 10px; border-bottom: 1px solid var(--mk-line); vertical-align: top; color: var(--color-text-secondary, #40516B); }
.mk .mk-table tr:last-child td { border-bottom: 0; }
.mk .mk-table td strong { color: var(--mk-ink); font-weight: 700; }

/* Split layouts */
.mk-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; align-items: start; }
.mk-split-filters { grid-template-columns: 200px minmax(0, 1fr); }
.mk-panel { background: #fff; border: 1px solid var(--mk-line); border-radius: 14px; padding: 14px; }
.mk-panel-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.mk-panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.mk-dl { margin: 0 0 12px; display: grid; gap: 8px; }
.mk-dl div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.mk-dl dt { font-size: 11px; font-weight: 700; color: var(--mk-muted); }
.mk-dl dd { margin: 0; color: var(--mk-ink); }
.mk-dl-grid { grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 0; }
.mk-dl-grid div { grid-template-columns: 1fr; gap: 2px; }

.mk-applist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mk-applist li { display: flex; justify-content: space-between; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; padding: 8px 10px; }
.mk-applist li.is-active { border-color: var(--color-primary, #1E5BFF); box-shadow: 0 0 0 2px rgba(30, 91, 255, .15); }
.mk-applist strong { color: var(--mk-ink); }
.mk-applist-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }

.mk-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mk-mini { border: 1px solid var(--mk-line); border-radius: 10px; padding: 9px 10px; background: var(--mk-canvas); }
.mk-mini b { display: block; color: var(--mk-ink); margin-top: 2px; }

/* Library list */
.mk-filterpanel { background: #fff; border: 1px solid var(--mk-line); border-radius: 14px; padding: 12px; }
.mk-fgroup { border-top: 1px solid var(--mk-line); padding: 9px 0 4px; }
.mk-fgroup-title { font-weight: 700; color: var(--mk-ink); margin-bottom: 4px; }
.mk-fgroup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.mk-fgroup li { display: flex; align-items: center; gap: 7px; }
.mk-check { width: 12px; height: 12px; border: 1.5px solid var(--color-border-strong, #C9D6EE); border-radius: 3px; flex: none; background: #fff; }
.mk-fgroup li.is-checked { color: var(--mk-ink); font-weight: 700; }
.mk-fgroup li.is-checked .mk-check { background: var(--color-primary, #1E5BFF); border-color: var(--color-primary, #1E5BFF); box-shadow: inset 0 0 0 2px #fff; }
.mk-count { margin-left: auto; color: var(--mk-muted); font-size: 11px; }
.mk-searchrow { margin-bottom: 8px; display: flex; }
.mk-resultbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.mk-uclist { display: grid; gap: 8px; }
.mk-uc { background: #fff; border: 1px solid var(--mk-line); border-radius: 12px; padding: 11px 13px; }
.mk-uc-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.mk-uc-title { font-weight: 750; color: var(--mk-ink); font-size: 13.5px; margin: 3px 0 2px; }
.mk-uc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mk-scores { display: flex; gap: 5px; flex-wrap: wrap; }
.mk-metric { font-size: 11.5px; color: var(--mk-muted); }
.mk-metric b { color: var(--color-brand-teal, #087F8C); }

/* Scores */
.mk-score { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--mk-ink); background: var(--mk-canvas); border: 1px solid var(--mk-line); border-radius: 999px; padding: 2px 8px 2px 2px; white-space: nowrap; }
.mk-score b { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10.5px; }
.mk-score-1 b { background: var(--color-score-1, #D94232); }
.mk-score-2 b { background: var(--color-score-2, #ED7B21); }
.mk-score-3 b { background: var(--color-score-3, #E7AD12); color: var(--mk-ink); }
.mk-score-4 b { background: var(--color-score-4, #78A846); }
.mk-score-5 b { background: var(--color-score-5, #3F8D57); }
.mk-scorelist { display: grid; gap: 6px; justify-items: start; }

/* Use case detail */
.mk-detail { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 12px; align-items: start; }
.mk-detail-main, .mk-detail-side { display: grid; gap: 12px; }
.mk-block { position: relative; background: #fff; border: 1px solid var(--mk-line); border-radius: 12px; padding: 12px 14px; }
.mk-block > .mk-scroll { border: 0; border-radius: 0; margin: 0 -4px; }
.mk-cappath { display: grid; gap: 4px; }
.mk-cappath .mk-crumb-sep { display: none; }
.mk-cap { display: flex; gap: 6px; align-items: baseline; color: var(--mk-ink); font-weight: 600; }
.mk-cap small, .mk-tree-name small { font-size: 9.5px; font-weight: 800; color: var(--color-primary, #1E5BFF); background: var(--color-surface-blue, #EAF2FF); border-radius: 4px; padding: 1px 4px; flex: none; }
.mk-cap-l2 { padding-left: 10px; }
.mk-cap-l3 { padding-left: 20px; }
.mk-marker { position: absolute; top: -11px; right: -11px; width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary, #1E5BFF); color: #fff; font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(30, 91, 255, .22), 0 4px 10px rgba(7, 26, 61, .22); z-index: 2; }
.mk-use-case-detail .mk-body { padding-right: 24px; }

/* Matrix */
.mk-matrix-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 14px; align-items: start; }
.mk-matrix { display: grid; grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: auto 20px; gap: 6px; background: #fff; border: 1px solid var(--mk-line); border-radius: 14px; padding: 12px; }
.mk-matrix-y { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 11px; font-weight: 700; color: var(--mk-muted); }
.mk-matrix-x { grid-column: 2; text-align: center; font-size: 11px; font-weight: 700; color: var(--mk-muted); }
.mk-matrix-plot { position: relative; aspect-ratio: 3 / 2; border-left: 1.5px solid var(--color-border-strong, #C9D6EE); border-bottom: 1.5px solid var(--color-border-strong, #C9D6EE);
    background: linear-gradient(var(--mk-line), var(--mk-line)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--mk-line), var(--mk-line)) 0 50% / 100% 1px no-repeat,
    linear-gradient(to right, rgba(124, 58, 237, .05) 50%, rgba(22, 163, 74, .07) 50%) 0 0 / 100% 50% no-repeat, linear-gradient(to right, var(--mk-canvas) 50%, rgba(30, 91, 255, .05) 50%) 0 100% / 100% 50% no-repeat; }
.mk-q { position: absolute; font-size: 11px; font-weight: 800; letter-spacing: .02em; padding: 6px 8px; }
.mk-q-tl { left: 0; top: 0; color: var(--color-ai-accent, #7C3AED); }
.mk-q-tr { right: 0; top: 0; color: var(--color-success-strong, #15803D); }
.mk-q-bl { left: 0; bottom: 0; color: var(--mk-muted); }
.mk-q-br { right: 0; bottom: 0; color: var(--color-primary, #1E5BFF); }
.mk-dot { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 5px; z-index: 1; }
.mk-dot b, .mk-legend b { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10.5px; font-weight: 800; flex: none; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(7, 26, 61, .2); }
.mk-dot em { display: none; }
.mk-dot-green b, b.mk-dot-green { background: var(--color-success, #16A34A); }
.mk-dot-violet b, b.mk-dot-violet { background: var(--color-ai-accent, #7C3AED); }
.mk-dot-blue b, b.mk-dot-blue { background: var(--color-primary, #1E5BFF); }
.mk-dot-grey b, b.mk-dot-grey { background: #8090A8; }
.mk-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 11.5px; color: var(--mk-ink); }
.mk-legend li { display: flex; gap: 7px; align-items: center; }
.mk-toggle { display: inline-flex; background: #fff; border: 1px solid var(--mk-line); border-radius: 9px; padding: 3px; font-size: 11px; font-weight: 700; color: var(--mk-ink); }
.mk-toggle span { padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.mk-toggle .mk-toggle-on { background: var(--color-surface-blue, #EAF2FF); color: var(--color-primary, #1E5BFF); }

/* Status view */
.mk-statusrow { background: #fff; border: 1px solid var(--mk-line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.mk-statusrow-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.mk-statusrow strong { color: var(--mk-ink); }
.mk-reason { margin-top: 7px; border: 1px solid var(--mk-line); background: var(--mk-canvas); border-radius: 8px; padding: 7px 10px; color: var(--mk-ink); }
.mk-reason-label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--color-error-strong, #B91C1C); margin-bottom: 2px; }

/* Capability tree */
.mk-tree, .mk-tree ul { list-style: none; margin: 0; padding: 0; }
.mk-tree { background: #fff; border: 1px solid var(--mk-line); border-radius: 14px; padding: 8px 12px; }
.mk-tree ul { padding-left: 18px; border-left: 1.5px solid var(--mk-line); margin-left: 8px; }
.mk-tree-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 22px; gap: 10px; align-items: center; padding: 5px 0; }
.mk-tree-name { display: flex; gap: 6px; align-items: baseline; color: var(--mk-ink); min-width: 0; }
.mk-tree-l1 > .mk-tree-row .mk-tree-name { font-weight: 750; font-size: 13px; }
.mk-tree-l2 > .mk-tree-row .mk-tree-name { font-weight: 650; }
.mk-capbar { height: 8px; border-radius: 999px; background: var(--color-chart-faint, #E5ECF7); overflow: hidden; }
.mk-capbar i { display: block; height: 100%; border-radius: 999px; background: var(--color-primary, #1E5BFF); }
.mk-tree-l2 .mk-capbar i { background: var(--color-secondary-accent, #12B3C7); }
.mk-tree-l3 .mk-capbar i { background: var(--color-brand-teal, #087F8C); }
.mk-capcount { text-align: right; color: var(--mk-ink); }

/* Entry form */
.mk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; background: #fff; border: 1px solid var(--mk-line); border-radius: 14px; padding: 14px; }
.mk-field { display: grid; gap: 4px; min-width: 0; }
.mk-field-wide { grid-column: 1 / -1; }
.mk-field-label { font-size: 11px; font-weight: 700; color: var(--mk-ink); }
.mk-input { border: 1px solid var(--color-border-strong, #C9D6EE); border-radius: 8px; padding: 7px 10px; background: #fff; color: var(--mk-ink); min-width: 0; }
.mk-textarea { min-height: 52px; }
.mk-form-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* Dilemma */
.mk-dilemma { background: #fff; border: 1px solid var(--mk-line); border-radius: 16px; padding: 16px; max-width: 720px; margin: 0 auto; }
.mk-dilemma-top { display: flex; justify-content: space-between; gap: 10px; }
.mk-progress { height: 5px; background: var(--color-chart-faint, #E5ECF7); border-radius: 999px; margin: 8px 0 12px; overflow: hidden; }
.mk-progress i { display: block; height: 100%; background: var(--color-primary, #1E5BFF); }
.mk-dilemma p { margin: 0 0 8px; color: var(--color-text-secondary, #40516B); font-size: 12.5px; }
.mk-dilemma .mk-dilemma-q { color: var(--mk-ink); font-weight: 700; font-size: 13.5px; }
.mk-options { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.mk-options li { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--mk-line); border-radius: 10px; padding: 8px 10px; }
.mk-options li strong { display: block; color: var(--mk-ink); }
.mk-options li.is-selected { border-color: var(--color-primary, #1E5BFF); background: var(--color-surface-blue, #EAF2FF); }
.mk-radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--color-border-strong, #C9D6EE); flex: none; margin-top: 2px; background: #fff; }
.mk-options li.is-selected .mk-radio { border: 4px solid var(--color-primary, #1E5BFF); }

/* Responsive */
@media (max-width: 1023px) {
    .mk-counters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mk-matrix-wrap { grid-template-columns: minmax(0, 1fr); }
    .mk-legend { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .mk { font-size: 12px; }
    .mk-body { padding: 12px; }
    .mk-app { padding: 8px 12px; gap: 10px; }
    .mk-crumbs { display: none; }
    .mk-head { flex-direction: column; gap: 8px; }
    .mk-head-right { justify-content: flex-start; }
    .mk-title { font-size: 16px; }
    .mk-counters, .mk-counters-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .mk-counter { padding: 8px; }
    .mk-counter span { font-size: 9.5px; }
    .mk-counter b { font-size: 17px; }
    .mk-split, .mk-split-filters, .mk-detail { grid-template-columns: minmax(0, 1fr); }
    .mk-split-filters .mk-split-side { display: none; }
    .mk-search { margin-left: 0; }
    .mk-dl div { grid-template-columns: 1fr; gap: 0; }
    .mk-dl-grid { grid-template-columns: 1fr; }
    .mk-cards3 { grid-template-columns: 1fr; }
    .mk-legend { grid-template-columns: 1fr; }
    .mk-tree-row { grid-template-columns: minmax(0, 1fr) 60px 18px; }
    .mk-tree ul { padding-left: 10px; margin-left: 4px; }
    .mk-form { grid-template-columns: 1fr; }
    .mk-q { font-size: 9.5px; padding: 4px 5px; }
    .mk-marker { width: 22px; height: 22px; font-size: 11.5px; top: -9px; right: -9px; }
    .mk-use-case-detail .mk-body { padding-right: 16px; }
}

/* ── Portfolio-overzicht (hero /platform) ─────────────────────────────── */
.mk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.mk-kpi { background: #fff; border: 1px solid var(--mk-line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.mk-kpi span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-kpi b { display: block; font-size: 22px; line-height: 1.15; font-weight: 800; color: var(--mk-ink); margin-top: 4px; letter-spacing: -.01em; }
.mk-kpi em { display: block; font-style: normal; font-size: 11px; color: var(--mk-muted); }
.mk-kpi:first-child b { color: var(--color-primary, #1E5BFF); }
.mk-overview-panel { padding: 12px 14px 4px; }
.mk-overview-panel .mk-label { margin-top: 0; }
.mk-portfolio-overview .mk-score { padding: 2px; }
.mk-portfolio-overview .mk-table td { vertical-align: middle; }
.mk-portfolio-overview .mk-table tr:last-child td { border-bottom: 0; }
@media (max-width: 767px) {
    .mk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .mk-kpi b { font-size: 18px; }
}

/* ── Readiness: dimensies en voorwaarden (/platform/readiness) ────────── */
.mk-bigscore { font-size: 26px; font-weight: 800; color: var(--mk-ink); line-height: 1; white-space: nowrap; }
.mk-bigscore small { font-size: 12px; font-weight: 600; color: var(--mk-muted); margin-left: 3px; }
.mk-bigscore-low { color: #B4232C; }
.mk-dims-label { display: flex; justify-content: space-between; margin-top: 12px; }
.mk-dims { display: grid; gap: 2px; }
.mk-dim { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 30px 54px; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 12px; }
.mk-dim.is-active { background: #fff; box-shadow: 0 0 0 1px var(--mk-line), 0 6px 16px rgba(7, 26, 61, .08); }
.mk-dim-name { color: var(--mk-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-dim-bar { height: 8px; border-radius: 99px; background: var(--mk-line); overflow: hidden; }
.mk-dim-bar i { display: block; height: 100%; border-radius: 99px; }
.mk-dim-bar i.mk-score-1 { background: var(--color-score-1, #D94232); }
.mk-dim-bar i.mk-score-2 { background: var(--color-score-2, #ED7B21); }
.mk-dim-bar i.mk-score-3 { background: var(--color-score-3, #E7AD12); }
.mk-dim-bar i.mk-score-4 { background: var(--color-score-4, #78A846); }
.mk-dim-bar i.mk-score-5 { background: var(--color-score-5, #3F8D57); }
.mk-dim b { color: var(--mk-ink); text-align: right; font-variant-numeric: tabular-nums; }
.mk-dim .mk-muted { text-align: right; font-size: 11px; white-space: nowrap; }
.mk-gap { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #FFF4F2; border: 1px solid #F6C9C3; font-size: 12px; }
.mk-gap strong { display: block; color: var(--mk-ink); font-size: 13.5px; margin: 2px 0 1px; }
.mk-conds { display: grid; gap: 6px; }
.mk-cond-level { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-muted); margin: 6px 0 0; }
.mk-cond { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: start; background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; padding: 8px 10px; font-size: 12px; line-height: 1.4; }
.mk-cond .s-mock-tag { justify-self: start; }
.mk-cond strong { color: var(--mk-ink); font-weight: 650; }
.mk-cond .mk-muted { font-size: 11px; margin-top: 1px; }
/* Twee mockups naast elkaar: zelfde hoogte. */
.p-shot-pair { align-items: stretch; }
.p-shot-pair > .mk { height: 100%; display: flex; flex-direction: column; }
.p-shot-pair > .mk .mk-body { flex: 1 1 auto; }
@media (max-width: 767px) {
    .mk-dim { grid-template-columns: minmax(0, 1fr) 60px 26px; }
    .mk-dim .mk-muted { display: none; }
}

/* ── Workforce: één rol (hero /platform/workforce) ────────────────────── */
.mk-shiftgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mk-shift { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 12.5px; line-height: 1.4; color: var(--mk-ink); }
.mk-shift li { position: relative; padding-left: 20px; }
.mk-shift li::before { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; font-size: 11px; font-weight: 800; line-height: 14px; text-align: center; }
.mk-shift-less li::before { content: "−"; background: #FDE8E6; color: #B4232C; }
.mk-shift-more li::before { content: "+"; background: #E3F5E9; color: #23764A; }
.mk-wf-row { margin-top: 10px; }
.mk-wf-row .mk-tagrow { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-wf-owner { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; }
.mk-wf-owner strong { display: block; color: var(--mk-ink); font-size: 13.5px; }
@media (max-width: 767px) {
    .mk-shiftgrid { grid-template-columns: minmax(0, 1fr); }
}