/**
 * framework/tabs.
 *
 * Every value here is measured off the live policy page rather than chosen:
 * the tab is 13.5px on 2.025px of tracking in a 13.5/27 box, which is what
 * makes it 42px tall, and the strip pulls down one pixel so its underline
 * lands on the panel's own border instead of beside it.
 */

.vk-tabs__list {
	display: flex;
	flex-wrap: nowrap;
	margin: 0 0 -1px;
	padding: 0;
	list-style: none;
}

.vk-tabs__tab {
	box-sizing: border-box;
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	padding: 13.5px 27px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 400;
	/* 13.5px, not a ratio: with the 13.5/27 padding and the 1px
	   underline this is what makes the tab exactly 42px tall. */
	line-height: 13.5px;
	letter-spacing: 2.025px;
	text-transform: uppercase;
	/* Live's inactive tab is the same black at half strength, not a grey. */
	color: rgba(0, 0, 0, 0.5);
	cursor: pointer;
	white-space: nowrap;
}

.vk-tabs__tab.is-active {
	color: #000;
	border-bottom-color: #000;
}

.vk-tabs__tab:hover {
	color: #000;
}

.vk-tabs__panel {
	/* Stated, not inherited. The page gets border-box from core's front-end
	   styles; the editor canvas does not carry those, and drew the panel
	   content-box — 1256 wide against the page's 1200, with every line in it
	   54px longer. */
	box-sizing: border-box;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #fff;
	padding: 27px;
	font-size: 18px;
	line-height: 1.4;
	color: #000;
}

/* Size and leading come from the measured type scale, which already carries
   live's own steps; only the rhythm between them belongs to the panel. The
   sizes below are the fallback for hand-authored content that arrives with no
   scale class of its own. */
/* 54px above every heading but the first. It reads as a big number because it
   collapses against the 21px under the paragraph before it rather than adding
   to it, so the gap between a section and the next is 54px, not 75. Leaving it
   out ran the panel 199px short of live across seven headings. */
.vk-tabs__panel > h4,
.vk-tabs__panel > h3,
.vk-tabs__panel > h2 {
	font-size: 30.852px;
	font-weight: 700;
	line-height: 1.4;
	color: #272727;
	margin: 53.99px 0 15.426px;
}

.vk-tabs__panel > p,
.vk-tabs__panel > ul,
.vk-tabs__panel > ol {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0 0 21px;
}

/* The scale classes set their own size but no spacing, so pin the rhythm to
   the panel regardless of which class the composer chose. */
.vk-tabs__panel > [class*="fw-type--"] {
	margin: 53.99px 0 15.426px;
}

.vk-tabs__panel > :first-child {
	margin-top: 0;
}

.vk-tabs__panel > [class*="fw-text--"] {
	margin: 0 0 21px;
}

.vk-tabs__panel > :last-child {
	margin-bottom: 0;
}