/**
 * Moore Health — Portal UI (coded product screen)
 *
 * Master prompt §10C and §16 section 6.
 *
 * Contains no real patient data. Built to look like an actual product
 * surface — real chrome, real sidebar, real status — so the dark section
 * carries weight without photography.
 *
 * @package MooreHealth
 */

.mh-pui {
	border-radius: var(--mh-radius-lg);
	overflow: hidden;
	background: var(--mh-pure-white);
	box-shadow:
		0 40px 90px rgba(0, 0, 0, 0.42),
		inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* ---------- chrome ---------- */

.mh-pui__chrome {
	display: flex;
	align-items: center;
	gap: var(--mh-space-3);
	padding: 0.7rem var(--mh-space-4);
	background: #f4f7fa;
	border-bottom: 1px solid var(--mh-border);
}

.mh-pui__dots {
	display: flex;
	gap: 0.35rem;
	flex-shrink: 0;
}

.mh-pui__dots span {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: #d3dbe4;
}

.mh-pui__url {
	flex: 1;
	padding: 0.2rem 0.7rem;
	border-radius: var(--mh-radius-pill);
	background: #fff;
	border: 1px solid var(--mh-border);
	font-size: 0.75rem;
	color: var(--mh-slate);
	text-align: center;
}

/* ---------- body ---------- */

.mh-pui__body {
	display: grid;
	grid-template-columns: 1fr;
	min-height: 20rem;
}

@media (min-width: 560px) {
	.mh-pui__body {
		grid-template-columns: 10.5rem minmax(0, 1fr);
	}
}

.mh-pui__side {
	display: none;
	padding: var(--mh-space-4);
	background: var(--mh-mist);
	border-right: 1px solid var(--mh-border);
}

@media (min-width: 560px) {
	.mh-pui__side {
		display: block;
	}
}

.mh-pui__brand {
	display: block;
	margin-bottom: var(--mh-space-4);
	font-family: var(--mh-font-display);
	font-size: 1rem;
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-ink);
}

.mh-pui__nav {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mh-pui__nav li {
	margin: 0;
	padding: 0.45rem 0.6rem;
	border-radius: var(--mh-radius-sm);
	font-size: 0.8125rem;
	font-weight: var(--mh-weight-medium);
	color: var(--mh-slate);
}

.mh-pui__nav li.is-active {
	background: var(--mh-blue);
	color: #fff;
	font-weight: var(--mh-weight-semibold);
}

.mh-pui__main {
	display: flex;
	flex-direction: column;
	gap: var(--mh-space-3);
	padding: var(--mh-space-4);
	background: var(--mh-pure-white);
}

.mh-pui__head {
	padding-bottom: var(--mh-space-3);
	border-bottom: 1px solid var(--mh-border);
}

.mh-pui__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: var(--mh-weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mh-slate);
}

.mh-pui__title {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--mh-font-display);
	font-size: 1.375rem;
	font-weight: var(--mh-weight-medium);
	color: var(--mh-ink);
}

.mh-pui__panel {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: var(--mh-space-3);
	border-radius: var(--mh-radius);
	border: 1px solid var(--mh-border);
	background: var(--mh-pure-white);
}

/* The one panel that should draw the eye. */
.mh-pui__panel--accent {
	border-color: transparent;
	background: linear-gradient(135deg, var(--mh-blue) 0%, #2f6dff 100%);
	box-shadow: 0 10px 26px rgba(22, 93, 255, 0.28);
}

.mh-pui__panel--accent .mh-pui__label {
	color: rgba(255, 255, 255, 0.78);
}

.mh-pui__value {
	font-size: 0.9375rem;
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-ink);
}

.mh-pui__panel--accent .mh-pui__value {
	color: #fff;
}

.mh-pui__value--sm {
	font-size: 0.875rem;
}

.mh-pui__chip {
	align-self: flex-start;
	padding: 0.15rem 0.55rem;
	border-radius: var(--mh-radius-pill);
	background: rgba(255, 255, 255, 0.22);
	font-size: 0.6875rem;
	font-weight: var(--mh-weight-semibold);
	color: #fff;
}

.mh-pui__row {
	display: grid;
	gap: var(--mh-space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mh-pui__from {
	font-size: 0.75rem;
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-blue);
}

.mh-pui__bar {
	display: block;
	height: 0.4rem;
	border-radius: var(--mh-radius-pill);
	background: var(--mh-mist);
}

.mh-pui__bar--short {
	width: 62%;
}

.mh-pui__track {
	display: flex;
	gap: 0.25rem;
	margin-top: 0.25rem;
}

.mh-pui__step {
	flex: 1;
	height: 0.25rem;
	border-radius: var(--mh-radius-pill);
	background: var(--mh-border);
}

.mh-pui__step.is-done {
	background: var(--mh-blue);
}

.mh-pui__step.is-current {
	background: var(--mh-blue-bright);
}