/* The sport stops: five squares on the rule under the masthead.
   Shared by the NBA page and the soccer page. Needs the :root colour tokens
   and --gutter from the page's own stylesheet. A stop that is open is a link;
   a stop that is not open yet is plain text with a dashed square, never a
   dead link. */

.sportline {
	display: flex;
	padding: 0 var(--gutter);
	border-bottom: 1px solid var(--rule);
}

.sportline .stop {
	position: relative;
	flex: 0 0 136px;
	min-height: 48px;
	padding: 14px 8px 8px 0;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--paper);
	line-height: 1.3;
}

.sportline .stop .pt {
	position: absolute;
	left: 0;
	top: -7px;
	width: 12px;
	height: 12px;
	background: var(--ink);
	border: 2px solid var(--paper);
}

.sportline .stop.off .pt {
	border: 1px dashed var(--steel);
}

.sportline .stop[aria-current="page"] .pt {
	background: var(--paper);
}

.sportline .stop .nm {
	font-weight: 500;
}

.sportline .stop.off .nm {
	color: var(--steel);
}

.sportline .stop[aria-current="page"] .nm {
	font-weight: 600;
}

.sportline .stop .st {
	color: var(--steel);
	font-size: 12px;
}

.sportline a.stop:hover .nm {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sportline a.stop:focus-visible {
	outline: 2px solid var(--paper);
	outline-offset: -2px;
}

@media (max-width: 767px) {
	.sportline .stop {
		flex: 1 1 0;
		min-width: 0;
	}
}