.mk-tabs { --n: 4; --num: #f0505f; --num-on: #bc2026; --dot: #c9a15a; --panel: #fff; }

.mk-tablist { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 10px; align-items: stretch; }

.mk-tabs .mk-tab {
	display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; align-content: center;
	text-align: left; padding: 15px 20px; margin-bottom: 10px;
	border-radius: 12px; background: var(--mk-navy); color: #fff;
	transition: background 0.25s, margin 0.25s, padding 0.25s, border-radius 0.25s;
}
.mk-tab__n { font: 500 12px var(--mk-mono); letter-spacing: 0.14em; color: var(--num); }
.mk-tab__n.is-plus { font: 400 20px/1 var(--mk-font); letter-spacing: 0; }
.mk-tab__t { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.mk-tabs .mk-tab:hover, .mk-tabs .mk-tab:focus { background: color-mix(in srgb, var(--mk-navy) 82%, #6aa0c8); color: #fff; }

/* FOLDER: the selected tab turns white and joins the panel; ONE outline runs round both. */
.mk-tabs .mk-tab[aria-selected='true'],
.mk-tabs .mk-tab[aria-selected='true']:hover,
.mk-tabs .mk-tab[aria-selected='true']:focus {
	position: relative; z-index: 1;
	background: var(--panel); color: var(--mk-navy);
	margin-bottom: -1.5px; padding-bottom: 26.5px; border-radius: 12px 12px 0 0;
	box-shadow: inset 1.5px 0 0 var(--mk-navy), inset -1.5px 0 0 var(--mk-navy), inset 0 1.5px 0 var(--mk-navy);
}
.mk-tab[aria-selected='true'] .mk-tab__n { color: var(--num-on); }

.mk-panel { background: var(--panel); border: 1.5px solid var(--mk-navy); border-radius: var(--mk-r); box-shadow: 0 24px 60px rgba(37, 63, 82, 0.08); }
.mk-panel.join-first { border-top-left-radius: 0; }
.mk-panel.join-last { border-top-right-radius: 0; }
.mk-pane { padding: 38px 48px 44px; }
.mk-pane[hidden] { display: none; }
.mk-pane.is-on { animation: mk-pane-in 0.4s ease; }
@keyframes mk-pane-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.mk-pane__intro { font-size: 17.5px; line-height: 1.6; color: var(--mk-navy); max-width: 980px; margin-bottom: 30px; }
.mk-pane__top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; font: 500 12px var(--mk-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-steel); }
.mk-tabs .mk-all { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--mk-navy); border-bottom: 1px solid rgba(37, 63, 82, 0.26); padding-bottom: 2px; }
.mk-tabs .mk-all:hover, .mk-tabs .mk-all:focus { color: var(--mk-navy); border-color: var(--mk-navy); }

.mk-row { border-top: 1px solid #c9d6e0; }
.mk-pane > .mk-row:last-child { border-bottom: 1px solid #c9d6e0; }
.mk-row summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: center; padding: 17px 4px; }
.mk-row summary::-webkit-details-marker { display: none; }
.mk-row__t { font-size: 18px; font-weight: 600; color: var(--mk-navy); letter-spacing: -0.01em; line-height: 1.3; }
.mk-row summary:hover .mk-row__t { color: #34536b; }
.mk-row--plain { padding: 18px 4px; }
.mk-pm { grid-column: 2; position: relative; width: 16px; height: 16px; }
.mk-pm::before, .mk-pm::after { content: ''; position: absolute; left: 0; top: 7.25px; width: 16px; height: 1.5px; background: var(--mk-navy); transition: transform 0.3s; }
.mk-pm::after { transform: rotate(90deg); }
.mk-row[open] .mk-pm::after { transform: rotate(0); }
.mk-tasks { list-style: none; columns: 3; column-gap: 32px; margin: 0; padding: 0 4px 20px; }
.mk-tasks li { break-inside: avoid; position: relative; padding-left: 16px; font-size: 15px; line-height: 1.45; color: var(--mk-gray); margin-bottom: 5px; }
.mk-tasks li::before { content: ''; position: absolute; left: 1px; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--dot); }
.mk-row__note { font-size: 13.5px; color: var(--mk-steel); font-weight: 500; margin: -8px 4px 20px; line-height: 1.5; }
.mk-tasks + .mk-row__note { margin-top: 0; }

@media (max-width: 1080px) { .mk-pane { padding: 32px 30px; } .mk-tasks { columns: 2; } }
@media (max-width: 760px) {
	.mk-tablist { grid-template-columns: 1fr 1fr; }
	.mk-tabs .mk-tab, .mk-tabs .mk-tab[aria-selected='true'] { margin-bottom: 0; padding: 13px 14px; border-radius: 12px; }
	.mk-tabs .mk-tab[aria-selected='true'], .mk-tabs .mk-tab[aria-selected='true']:hover, .mk-tabs .mk-tab[aria-selected='true']:focus { box-shadow: inset 0 0 0 1.5px var(--mk-navy); }
	.mk-tab__t { font-size: 15.5px; }
	.mk-panel, .mk-panel.join-first, .mk-panel.join-last { border-radius: var(--mk-r); margin-top: 10px; }
	.mk-pane { padding: 28px 22px; }
	.mk-row__t { font-size: 16.5px; }
	.mk-tasks { columns: 1; }
}
@media (prefers-reduced-motion: reduce) { .mk-pane.is-on { animation: none; } }