/* The Ocean UI site's frame (www.plungeai.com/ui): the local nav under www's fixed bar (whose height is www's
   --pn-h, 0 on apps.plungeai.com), the sidebar (a <details> above the content under 900 px), the hero, the demo strip, the
   gallery cards, examples and code. Classes are prefixed us-; the parts inside are Ocean UI's and App UI's own. */

.us-nav {
	position: sticky;
	top: var(--pn-h, 0px);
	z-index: 30;
	height: 52px;
	margin-top: var(--pn-h, 0px);
	border-bottom: 1px solid var(--sep);
	background: color-mix(in srgb, var(--card) 80%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}
.us-nav-in {
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: var(--max-width);
	height: 100%;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.us-word {
	margin-right: 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2858;
	letter-spacing: -0.016em;
}
.us-tab {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 12px;
	border-radius: var(--radius-control);
	color: var(--text2);
	font-size: 14px;
	letter-spacing: -0.016em;
	transition: color var(--motion-fast) var(--ease);
}
.us-tab:hover,
.us-tab[aria-current] {
	color: var(--text);
}
.us-tab[aria-current] {
	font-weight: 600;
}
.us-nav-end {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

/* ── the stage: sidebar and content ── */
.us-stage {
	display: grid;
	grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
	gap: 32px;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 32px var(--gutter) 64px;
}
.us-solo {
	grid-template-columns: minmax(0, 1fr);
}
.us-main {
	min-width: 0;
	container-type: inline-size;
}
.us-main > .ak-screen {
	margin-top: 24px;
}
.us-main .u-link,
.us-links a {
	text-decoration: underline;
	text-decoration-color: var(--text3);
	text-underline-offset: 3px;
}
.us-main .u-link:hover,
.us-links a:hover {
	text-decoration-color: currentColor;
}
.us-side-w {
	min-width: 0;
}
.us-side {
	position: sticky;
	top: calc(var(--pn-h, 0px) + 68px);
	max-height: calc(100dvh - var(--pn-h, 0px) - 84px);
	overflow-y: auto;
}
.us-side-d {
	display: none;
}
.us-side-top {
	padding: 0 12px 12px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.016em;
}
.us-side-list + .us-side-h {
	padding-top: 16px;
}
.us-side-h {
	padding: 0 12px 8px;
	color: var(--text2);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3334;
	letter-spacing: -0.01em;
}
.us-side-list a {
	display: flex;
	align-items: center;
	height: 36px;
	padding: 0 12px;
	border-radius: var(--radius-control);
	color: var(--text2);
	font-size: 14px;
	letter-spacing: -0.016em;
	transition-property: background-color, color;
	transition-duration: var(--motion-fast);
	transition-timing-function: var(--ease);
}
.us-side-list a:hover {
	background: var(--hover);
	color: var(--text);
}
.us-side-list a[aria-current] {
	background: var(--nav-lit);
	color: var(--ring);
	font-weight: 600;
}

/* ── page heads ── */
.us-main > .u-crumb {
	margin-bottom: 16px;
}
.us-head h1 {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.1429;
	letter-spacing: 0.007em;
}
.us-sub {
	max-width: 760px;
	margin-top: 8px;
	color: var(--text2);
	font-size: 17px;
	line-height: 1.4706;
	letter-spacing: -0.022em;
}
.us-eyebrow {
	margin-bottom: 8px;
	color: var(--text2);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3334;
	letter-spacing: -0.01em;
}
.us-count-line,
.us-note {
	color: var(--text2);
	font-size: 14px;
	line-height: 1.4286;
	letter-spacing: -0.016em;
}
.us-count-line {
	margin: 16px 0 24px;
}
.us-note {
	margin: 4px 0 12px;
}
.us-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 16px 0 8px;
}

/* ── the home ── */
.us-hero {
	padding: 40px 0 24px;
	text-align: center;
}
.us-pill {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	background: var(--raised);
	color: var(--text);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3334;
	letter-spacing: -0.01em;
}
.us-hero h1 {
	margin-top: 16px;
	font-size: 48px;
	font-weight: 600;
	line-height: 1.0835;
	letter-spacing: -0.003em;
}
.us-lede {
	max-width: 640px;
	margin: 16px auto 0;
	color: var(--text2);
	font-size: 21px;
	line-height: 1.381;
	letter-spacing: 0.011em;
}
.us-cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}
.us-band {
	min-width: 0;
	margin-top: 48px;
}
.us-band-h {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.us-band-h h2,
.us-section h2 {
	margin-bottom: 8px;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.1905;
	letter-spacing: 0.011em;
}
.us-band-h h2 {
	font-size: 24px;
	line-height: 1.1667;
	letter-spacing: 0.009em;
}
.us-strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(280px, 340px);
	gap: 16px;
	padding-bottom: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}
.us-strip > li {
	scroll-snap-align: start;
}
.us-strip:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}
.us-count {
	justify-content: center;
	gap: 16px;
	padding: 24px;
}
.us-count p {
	font-size: 17px;
	line-height: 1.4706;
	letter-spacing: -0.022em;
}
.us-count b {
	font-weight: 600;
}

/* ── gallery cards ── */
.us-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 16px;
}
.us-wide {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
}
.us-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--radius-card);
	background: var(--card);
}
.us-demo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.us-demo > * {
	min-width: 0;
	max-width: 100%;
}
/* parts that fill a line take the whole row; buttons, badges and the like sit side by side */
.us-demo > :is(.ak-screen, .us-console, .us-shot, .u-grid, .u-chart, .u-kpis, .u-kpi, .u-card, .u-field, .u-alert, .u-progress, .u-skel, .u-empty, .u-markdown, .u-tabs, .u-coll, .us-frame, .us-note) {
	flex: 1 1 100%;
}
.us-card > .us-demo {
	flex: none;
	align-content: safe center;
	justify-content: safe center;
	height: 240px;
	padding: 20px;
	overflow: hidden;
	background: var(--surface);
	container-type: inline-size;
}
.us-card > .us-demo td {
	white-space: nowrap;
}
.us-demo .u-input {
	min-width: 0;
	max-width: 100%;
}
.us-card > .us-demo > .us-frame {
	height: 200px;
}
.us-card-t {
	flex: 1;
	padding: 16px 20px 20px;
}
.us-card-t h2,
.us-card-t h3,
.us-screen h3 {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2354;
	letter-spacing: -0.022em;
}
.us-card-t p,
.us-screen p {
	margin-top: 4px;
	color: var(--text2);
	font-size: 14px;
	line-height: 1.4286;
	letter-spacing: -0.016em;
}
.us-card-t .us-meta {
	font-size: 12px;
	line-height: 1.3334;
	letter-spacing: -0.01em;
}
.us-card-t a:hover {
	color: var(--ring);
}
.us-screens {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 16px;
}
.us-screen {
	padding: 20px;
}
.us-screen p {
	flex: 1;
	margin-bottom: 12px;
}

/* ── a component's page ── */
.us-section {
	margin-top: 40px;
}
.us-preview {
	padding: 24px;
	overflow-x: auto;
	border-radius: var(--radius-card);
	background: var(--surface);
	container-type: inline-size;
}
.us-preview .us-demo > :is(.u-kpi, .u-card, .u-field, .u-progress) {
	flex: 0 1 420px;
}
.us-preview .us-demo > .u-alert {
	flex: 0 1 640px;
}
.us-code {
	position: relative;
	margin-top: 8px;
}
.us-code pre {
	padding: 16px 88px 16px 20px;
	overflow-x: auto;
	border-radius: var(--radius-card);
	background: var(--card);
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.5;
}
.us-code .u-copy {
	position: absolute;
	top: 8px;
	right: 8px;
}
.us-note code,
.us-main td code {
	padding: 2px 6px;
	border-radius: var(--radius-control);
	background: var(--raised);
	color: var(--text);
	font-family: var(--mono);
	font-size: 12px;
	white-space: nowrap;
}
.us-list {
	padding-left: 20px;
	list-style: disc;
}
.us-list li + li {
	margin-top: 8px;
}
.us-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-top: 8px;
}
.us-frame {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
	border-radius: var(--radius-card);
	background: var(--page);
}
.us-inert {
	margin-bottom: 8px;
	overflow-x: auto;
}
/* a table's sticky head sits under the local nav; inside a preview (its own scroll region) it stays in place, and a
   form's sticky actions stay where the form puts them */
.us-main .u-table thead {
	top: calc(var(--pn-h, 0px) + 53px);
}
.us-main :is(.us-demo, .us-preview, .us-inert) .u-table thead {
	position: static;
}
:is(.us-demo, .us-inert) .ak-form-a {
	position: static;
	background: none;
}
.us-try {
	margin-bottom: 16px;
}

/* ── the native face: two snapshots, the page's theme shows one ── */
.us-native {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}
[data-theme="light"] .us-dark,
:root:not([data-theme="light"]) .us-light {
	display: none;
}
.us-card > .us-demo > .us-native {
	max-height: 100%;
	object-fit: contain;
}
.us-mac {
	display: flex;
	justify-content: center;
}
.us-uses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
	gap: 16px;
}
.us-face {
	margin-bottom: 4px;
	color: var(--text2);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.016em;
}
.us-main > .u-alert {
	margin-top: 24px;
}
/* ── screens: the Ocean app's pictures, the console's stage ── */
.us-shot {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}
.us-card > .us-demo > .us-shot {
	height: 100%;
	object-fit: cover;
	object-position: top left;
}
.us-console {
	flex: 1 1 100%;
	min-width: 0;
}
.us-full {
	margin-top: 24px;
}

/* ── narrow screens: one column, the sidebar a <details> above the content ── */
@media (max-width: 899px) {
	.us-nav-in {
		padding: 0 16px;
	}
	.us-stage {
		grid-template-columns: minmax(0, 1fr);
		padding: 24px 16px 48px;
	}
	.us-side {
		display: none;
	}
	.us-side-d {
		display: block;
		border-radius: var(--radius-card);
		background: var(--card);
	}
	.us-side-d summary {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 16px;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: -0.016em;
		cursor: pointer;
	}
	.us-side-d .us-side-list {
		padding: 0 8px 8px;
	}
}
@media (max-width: 733px) {
	.us-tab {
		padding: 0 8px;
	}
	.us-lede {
		font-size: 19px;
		line-height: 1.4211;
		letter-spacing: 0.012em;
	}
}
/* under 640 px: display type 28 px, code and inline code at 14 px, the props table as stacked rows */
@media (max-width: 639px) {
	.us-hero {
		padding-top: 24px;
	}
	.us-hero h1 {
		font-size: 28px;
		line-height: 1.1429;
		letter-spacing: 0.007em;
	}
	.us-code pre,
	.us-note code,
	.us-main td code {
		font-size: 14px;
	}
	.us-code pre {
		padding-right: 20px;
	}
	.us-code {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 4px;
	}
	.us-code pre {
		align-self: stretch;
	}
	.us-code .u-copy {
		position: static;
	}
	.us-props thead {
		display: none;
	}
	.us-props tr {
		display: grid;
		gap: 4px;
		padding: 12px 0;
	}
	.us-props td {
		padding: 0;
		border: 0;
	}
	.us-props td[data-label]::before {
		content: attr(data-label) " ";
		color: var(--text2);
	}
}
@media (pointer: coarse) {
	.us-tab,
	.us-side-list a {
		min-height: 44px;
	}
	.us-word,
	.us-links a,
	.us-card-t h2 a,
	.us-card-t h3 a,
	.us-main :is(.us-try, .us-count, .us-screen, .us-band-h, .us-actions) a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
	.us-nav {
		background: var(--card);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}