/**
 * The phase bar (js/phases.js): the projects' phases, and About's sections
 * on a phone (Corey, 2026-10-11). Moved here from css/case-studies.css so
 * both can load it.
 */

/* ---------------------------------------------------------------------------
   Phase bar

   Built by js/phases.js from the chips on the page. Fixed, not sticky:
   #content-wrapper is overflow:hidden, which stops any sticky descendant from
   ever sticking to the viewport. It slides in once the first phase reaches
   the top of the screen and out again past the last.

   The current phase is drawn as the page's own chip — the dark teal pill the
   Research and Ideation labels use — so the bar and the content share one
   vocabulary. The others are plain labels.
   --------------------------------------------------------------------------- */

.cs-phases {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10500;
	display: flex;
	justify-content: center;
	height: 46px;
	background-color: rgba( 255, 255, 255, .9 );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	border-bottom: 1px solid rgba( 0, 0, 0, .08 );
	transform: translateY( -100% );

	/* Sliding up by its own height only clears the viewport when the bar is
	   at top: 0. With the header showing it sits at 104px, and the same slide
	   parks it at 57-104px — behind the header, whose 50% black let the tabs
	   show through, looking stuck under it. So hiding also fades it out and,
	   once the slide is done, takes it out of view altogether. */
	opacity: 0;
	visibility: hidden;
	transition:
		transform .32s cubic-bezier( .22, .61, .36, 1 ),
		top .32s cubic-bezier( .22, .61, .36, 1 ),
		opacity .2s ease,
		visibility 0s linear .32s;
}

.cs-phases.is-visible {
	transform: none;
	opacity: 1;
	visibility: visible;
	transition:
		transform .32s cubic-bezier( .22, .61, .36, 1 ),
		top .32s cubic-bezier( .22, .61, .36, 1 ),
		opacity .2s ease,
		visibility 0s;
}

.cs-phases ol {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0 12px;
	list-style: none;
}

.cs-phases a {
	display: inline-block;
	padding: 6px 13px;
	border-radius: 999px;
	color: #555;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		background-color .25s ease,
		color .25s ease;
}

.cs-phases a:hover {
	color: #002927;
}

/* Phones: four phases — Discovery, Research, Ideation, Solution — ran 434px
   at the desktop setting. Tighter type, tracking and pads bring them to
   338px, inside 360; and the list scrolls sideways, without a scrollbar,
   should a page ever carry more than fits. */
@media only screen and ( max-width: 767px ) {

	.cs-phases ol {
		max-width: 100%;
		gap: 2px;
		padding: 0 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.cs-phases ol::-webkit-scrollbar {
		display: none;
	}

	/* Tabs spread across the full width, spare room shared equally between
	   them, so a short list (About's three) sits evenly rather than bunched
	   in the middle. A list that overflows has no spare room, and scrolls. */
	.cs-phases ol {
		flex: 1;
		justify-content: space-between;
	}

	.cs-phases li {
		flex: 1 0 auto;
		text-align: center;
	}

	/* A taller bar and fuller pills on a phone, so each tab is a comfortable
	   thumb target: the pill runs 36px tall, centred in its share of the
	   width. */
	.cs-phases {
		height: 52px;
	}

	.cs-phases li {
		display: flex;
		justify-content: center;
	}

	.cs-phases a {
		padding: 11px 9px;
		line-height: 14px;
		font-size: 12px;
		letter-spacing: .05em;
		white-space: nowrap;
	}

}

.cs-phases a[aria-current] {
	background-color: #002927;
	color: #fff;
}

/* The site header is fixed and returns on scroll-up, over a bar of its own.
   While it is showing, this bar sits flush under it, moving on the header's
   own timing; when it slides away the bar comes back to the top. 104px on
   desktop and 96px on the hamburger layout are the bar's heights from
   style.css, and .32s its timing. */
@media only screen and ( min-width: 1024px ) {

	body.header-stuck:not( .header-hidden ) .cs-phases {
		top: 104px;
	}

}

body.compact-menu.header-stuck:not( .header-hidden ) .cs-phases {
	top: 96px;
}

/* Phones: the header's bar is sized around the logo there (style.css,
   the chrome's inset either side of it — 102px at 375), so the tabs sit
   at its foot rather than 96px, which tucked them 6px under it; and a
   little more room over the tabs, 6px, so they are not pressed against
   the header's edge. */
@media only screen and ( max-width: 767px ) {
	body.compact-menu.header-stuck:not( .header-hidden ):not( .home ) .cs-phases {
		top: calc( var( --chrome-inset, 30px ) * 2 + var( --chrome-logo, 42px ) );
		padding-top: 6px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cs-phases,
	.cs-phases a {
		transition: none;
	}
}


/* About's tabs are for a phone, where its sections stack: side by side,
   from 1024px, the two columns are their own map. */
@media only screen and ( min-width: 1024px ) {
	body.page-id-565 .cs-phases {
		display: none;
	}
}