/*
 * Teams (in-house web teams) — page-specific override layer over the inline
 * desktop spec (desktop >=1280 is the binding inline design, untouched).
 * Rebuilt for design round 7 from "V5 Release/Teams.dc.html": the style-hover
 * attributes become .nf-* classes and the .rsp-* responsive layer
 * (1279/1023/767). Globals (hpRise, grain, data-rev, scrollbar) come from
 * tokens.css/site.css.
 */

/* Light-page scrollbar (overrides the global dark one while this CSS is loaded). */
::-webkit-scrollbar-track { background: #ece6f6; }
::-webkit-scrollbar-thumb { background: #cabfe4; border-radius: 8px; border: 3px solid #ece6f6; }

/* Button + link hovers (translated from style-hover). */
.nf-mint { transition: background .16s ease; }
.nf-mint:hover { background: #35c98a; }
.nf-violet { transition: background .16s ease; }
.nf-violet:hover { background: #8a7af5; }
.nf-seeall { transition: background .16s ease, border-color .16s ease; }
.nf-seeall:hover { background: rgba(109,93,243,0.07); border-color: #6D5DF3; }
.rev-btn { transition: background .16s ease, color .16s ease; }
.rev-btn:hover { background: #6D5DF3; color: #fff; }

/* ===== RESPONSIVE OVERRIDE LAYER · desktop (>=1280px) is the inline spec =====
 * Split sections stack with the visual card SECOND. On #signoff the card is
 * authored FIRST (left column at desktop), so it needs pushing below the prose
 * when the grid collapses. */
@media (max-width: 1279px) {
	.rsp-hero { padding-left: 32px !important; padding-right: 32px !important; }
	.rsp-sec { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (max-width: 1023px) {
	.rsp-hero { padding-left: 24px !important; padding-right: 24px !important; padding-top: 150px !important; }
	.rsp-sec { padding-left: 24px !important; padding-right: 24px !important; }
	.rsp-split { grid-template-columns: 1fr !important; gap: 36px !important; }
	.rsp-visual { order: 2; }
	.rsp-tiles3 { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-strip { gap: 10px 18px !important; }
}
@media (max-width: 767px) {
	[data-mascot][style*="absolute"] { display: none !important; }
	.rsp-hero { padding-left: 16px !important; padding-right: 16px !important; padding-top: 124px !important; padding-bottom: 56px !important; }
	.rsp-sec { padding-left: 16px !important; padding-right: 16px !important; padding-top: 60px !important; padding-bottom: 60px !important; }
	.rsp-tiles3 { grid-template-columns: 1fr !important; }
	.rsp-tiles4 { grid-template-columns: 1fr !important; }
	.rsp-url { width: 100% !important; }
}

/* Responsive sweep (Sep 2026): a stacked `1fr` track grows to its content's
 * min width; the #requests visual held it at ~365px on a 375 phone, past the
 * 16px gutter. minmax(0,1fr) lets the stack shrink to the column. */
@media (max-width: 1023px) {
	.rsp-split { grid-template-columns: minmax(0, 1fr) !important; }
	.rsp-split > * { min-width: 0; }
}

/* Responsive sweep, pass 2: in the #requests list the status chip
 * ("Waiting for sign-off") will not shrink, which squeezed the request text to
 * ~50px on small phones. There the chip drops under the text, lined up with it
 * (30px avatar + 11px gap), and the source/department line may wrap. */
@media (max-width: 479px) {
	.tm-reqrow { flex-wrap: wrap; }
	/* the text column claims the rest of the line (it has a 0 flex-basis inline),
	 * otherwise it shrinks to nothing instead of pushing the chip down */
	.tm-reqrow > div { flex: 1 1 calc(100% - 41px) !important; }
	.tm-reqrow > span:last-child { margin-left: 41px; }
	.tm-reqrow > div > span:last-child { flex-wrap: wrap; }
}