/* P19.24 scoped style segment: 08-product-experience.css */

/* R52.19 product navigation and long-form product-page experience. */

/* Primary navigation: six top-level choices, product routes preserved in one dropdown. */
.nav .menu-item-has-children { position: relative; }
.nav .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 6px; }
.nav .menu-item-has-children > a::after { content: "⌄"; font-size: .72em; line-height: 1; opacity: .58; }
.nav .current-menu-ancestor > a { background: var(--soft); color: var(--accent); }
.nav .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 9px);
	left: 0;
	z-index: 70;
	min-width: 230px;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: rgba(255, 255, 255, .98);
	box-shadow: 0 18px 46px rgba(6, 24, 43, .14);
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}
/* Keep the desktop visual air gap without creating a dead hover zone between the trigger and submenu. */
@media (min-width: 1121px) {
	.nav .sub-menu::before {
		content: "";
		position: absolute;
		left: -6px;
		right: -6px;
		top: -12px;
		height: 12px;
	}
}
.nav .menu-item-has-children:hover > .sub-menu,
.nav .menu-item-has-children:focus-within > .sub-menu { display: flex; }
.nav .sub-menu li { width: 100%; }
.nav .sub-menu li > a,
.nav .sub-menu li:last-child > a {
	display: block;
	width: 100%;
	padding: 9px 10px;
	background: transparent;
	color: #263d50;
	font-size: .86rem;
	font-weight: 650;
}
.nav .sub-menu li > a:hover,
.nav .sub-menu li > a:focus-visible,
.nav .sub-menu li.current-menu-item > a,
.nav .sub-menu li > a[aria-current="page"] { background: var(--soft); color: var(--accent); }

/* Repeated product facts read as editorial points rather than a registry of cards. */
.product-detail-page .product-points { column-gap: 30px; row-gap: 0; }
.product-detail-page .product-points > .card:not(.operation-cluster-card):not(.headless-scope-path):not(.tiflow-boundary-card) {
	min-height: 0;
	padding: 22px 8px 18px 0;
	border: 0;
	border-top: 1px solid rgba(11, 31, 53, .13);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.product-detail-page .product-points > .card:not(.operation-cluster-card):not(.headless-scope-path):not(.tiflow-boundary-card) h3 { font-size: 1.16rem; }
.product-detail-page .section.dark .product-points > .card:not(.operation-cluster-card):not(.headless-scope-path):not(.tiflow-boundary-card),
.product-detail-page .headless-security-section .product-points > .card:not(.operation-cluster-card):not(.headless-scope-path):not(.tiflow-boundary-card) {
	border-top-color: rgba(255,255,255,.16);
	background: transparent;
}

/* Long product pages: compact sticky rail. At common desktop widths it becomes a horizontal strip; on wide desktops it moves to the right rail. */
.product-page-nav {
	position: sticky;
	top: 74px;
	z-index: 38;
	border-top: 1px solid rgba(217,229,235,.8);
	border-bottom: 1px solid rgba(217,229,235,.95);
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(14px);
}
body.admin-bar .product-page-nav { top: 106px; }
.product-page-nav__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	width: min(var(--max), calc(100% - 40px));
	min-height: 52px;
	margin-inline: auto;
	overflow-x: auto;
	scrollbar-width: none;
}
.product-page-nav__inner::-webkit-scrollbar { display: none; }
.product-page-nav__label {
	flex: 0 0 auto;
	color: #738899;
	font-size: .66rem;
	font-weight: 850;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.product-page-nav ul {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.product-page-nav li { margin: 0; }
.product-page-nav a {
	display: block;
	padding: 7px 9px;
	border-radius: 9px;
	color: #516a7d;
	font-size: .78rem;
	font-weight: 720;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
}
.product-page-nav a:hover,
.product-page-nav a:focus-visible,
.product-page-nav a[aria-current="location"] { background: #eaf4f4; color: var(--accent); }
.product-detail-page section[id] { scroll-margin-top: 142px; }

/* FHIR page: an architecture composition rather than another table/card registry. */
.fhir-boundary-section { background: linear-gradient(180deg,#fff 0%,#f7fbfc 100%); }
.fhir-boundary-map {
	display: grid;
	grid-template-columns: minmax(0,1fr) 44px minmax(0,1.15fr) 44px minmax(0,1fr);
	align-items: center;
	gap: 12px;
	margin-top: 34px;
}
.fhir-boundary-layer {
	min-height: 184px;
	padding: 26px;
	border: 1px solid #d8e5ea;
	border-radius: 24px;
	background: #fff;
}
.fhir-boundary-layer span,
.fhir-boundary-layer strong,
.fhir-boundary-layer small { display: block; }
.fhir-boundary-layer span { margin-bottom: 11px; color: #6a8191; font-size: .67rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.fhir-boundary-layer strong { font-size: 1.08rem; line-height: 1.38; }
.fhir-boundary-layer small { margin-top: 12px; color: #718695; line-height: 1.5; }
.fhir-boundary-core {
	border-color: rgba(8,127,140,.38);
	background: linear-gradient(145deg,#071d31,#0a3141);
	box-shadow: 0 20px 52px rgba(6,24,43,.14);
	color: #fff;
}
.fhir-boundary-core span { color: #70ddd0; }
.fhir-boundary-core small { color: #b8cbd7; }
.fhir-boundary-arrow { color: #0d8b96; font-size: 1.8rem; font-weight: 400; text-align: center; }
.fhir-boundary-principles {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 26px;
	margin-top: 34px;
}
.fhir-boundary-principles > div { padding-top: 18px; border-top: 1px solid #cfdde3; }
.fhir-boundary-principles span { display: block; margin-bottom: 10px; color: var(--accent); font-size: .7rem; font-weight: 900; letter-spacing: .08em; }
.fhir-boundary-principles strong { display: block; font-size: 1.08rem; }
.fhir-boundary-principles p { margin: 9px 0 0; color: var(--muted); }
.fhir-boundary-section .neutral-notice { margin-top: 30px; }

@media (min-width: 1560px) {
	.product-page-nav {
		position: fixed;
		top: 116px;
		right: max(18px, calc((100vw - 1560px) / 2));
		width: 170px;
		border: 0;
		background: transparent;
		backdrop-filter: none;
		opacity: 0;
		transform: translateY(8px);
		pointer-events: none;
		transition: opacity .18s ease, transform .18s ease;
	}
	body.admin-bar .product-page-nav { top: 148px; }
	.product-page-nav.is-rail-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
	.product-page-nav__inner {
		display: block;
		width: 170px;
		min-height: 0;
		padding: 14px;
		border: 1px solid rgba(217,229,235,.95);
		border-radius: 18px;
		background: rgba(255,255,255,.96);
		box-shadow: 0 14px 40px rgba(6,24,43,.08);
		overflow: visible;
	}
	.product-page-nav__label { display: block; margin: 0 0 9px 7px; }
	.product-page-nav ul { display: block; }
	.product-page-nav li + li { margin-top: 2px; }
	.product-page-nav a { padding: 7px; white-space: normal; }
	.product-detail-page section[id] { scroll-margin-top: 96px; }
}

@media (max-width: 1120px) {
	.nav .sub-menu {
		display: flex;
		position: static;
		min-width: 0;
		margin: 4px 0 6px 12px;
		padding: 2px 0 2px 12px;
		border: 0;
		border-left: 1px solid var(--line);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}
	.nav .menu-item-has-children > a::after { content: ""; }
	.nav .sub-menu li > a,
	.nav .sub-menu li:last-child > a { padding: 7px 9px; font-size: .82rem; }
}

@media (max-width: 820px) {
	.fhir-boundary-map { grid-template-columns: 1fr; }
	.fhir-boundary-arrow { transform: rotate(90deg); }
	.fhir-boundary-layer { min-height: 0; }
	.fhir-boundary-principles { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 680px) {
	.product-page-nav { top: 74px; }
	body.admin-bar .product-page-nav { top: 120px; }
	.product-page-nav__inner { width: calc(100% - 26px); gap: 10px; min-height: 48px; }
	.product-page-nav__label { display: none; }
	.product-page-nav a { padding-inline: 8px; font-size: .74rem; }
	.product-detail-page section[id] { scroll-margin-top: 132px; }
}