/* ─── Supervision Landing ────────────────────────────────────────── */

.supervision-landing,
.supervision-landing * {
	font-family: "Brandon Grotesque", sans-serif !important;
}

.supervision-landing {
	max-width: none;
	margin: 0;
}

.supervision-landing ul,
.supervision-landing ol,
.supervision-landing li {
	margin-left: 0 !important;
	margin-inline-start: 0 !important;
	padding-left: 0 !important;
	padding-inline-start: 0 !important;
	list-style: none;
}

.supervision-toolbar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-bottom: 10px;
}

.supervision-docs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1rem;
	min-width: 0;
	margin: 0;
}

.supervision-landing a.supervision-doc,
.supervision-landing span.supervision-doc {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: #374151;
	text-decoration: none;
}

.supervision-landing a.supervision-doc:hover {
	color: #053326;
}

.supervision-doc__icon {
	width: 0.875rem;
	height: 0.875rem;
	flex: none;
}

.supervision-header {
	margin-bottom: 2rem;
}

.supervision-header h2 {
	margin: 0;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: #111827;
}

.supervision-meta {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: #6b7280;
}

.supervision-meta a {
	font-weight: 500;
	color: #4f46e5;
	text-decoration: none;
}

.supervision-meta a:hover {
	color: #4338ca;
}

.supervision-notice {
	margin-top: 1rem;
	padding: 1rem;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.supervision-notice--success {
	background-color: #f0fdf4;
	color: #166534;
}

.supervision-section {
	margin-bottom: 2rem;
}

.supervision-section h3 {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: #111827;
}

/* ─── Session count ─────────────────────────────────────────────── */

.supervision-stats {
	margin: 0;
	text-align: right;
}

.supervision-stats__audio {
	margin-left: 1rem;
}

/* ─── Go / No-Go Panel ─────────────────────────────────────────── */

.supervision-go-nogo {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: #fefce8;
	border-radius: 0.375rem;
}

.supervision-go-nogo h3 {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: #854d0e;
}

.supervision-go-nogo p {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: #a16207;
}

.supervision-go-nogo__actions {
	display: flex;
	gap: 0.75rem;
}

/* ─── Buttons ───────────────────────────────────────────────────── */

.supervision-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	border-radius: 0.375rem;
	cursor: pointer;
	border: none;
	text-decoration: none;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.supervision-landing .supervision-btn--approve,
.supervision-landing a.supervision-btn--approve,
.supervision-landing .supervision-btn--approve:hover,
.supervision-landing a.supervision-btn--approve:hover,
.supervision-landing .supervision-btn--approve:focus {
	background-color: #053326 !important;
	color: #fff !important;
	text-decoration: none;
}

.supervision-landing .supervision-btn--approve:hover,
.supervision-landing a.supervision-btn--approve:hover {
	background-color: #02120d !important;
	color: #fff !important;
}

.supervision-landing .supervision-btn--deny,
.supervision-landing .supervision-btn--secondary,
.supervision-landing .supervision-btn--deny:hover,
.supervision-landing .supervision-btn--secondary:hover,
.supervision-landing .supervision-btn--deny:focus,
.supervision-landing .supervision-btn--secondary:focus {
	background-color: #fff !important;
	color: #111827 !important;
	box-shadow: 0 0 0 1px rgb(17 24 39 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.supervision-landing .supervision-btn--deny:hover,
.supervision-landing .supervision-btn--secondary:hover {
	background-color: #f3f4f6 !important;
	color: #111827 !important;
}

/* ─── Workspace ─────────────────────────────────────────────────── */

.supervision-workspace {
	container-type: inline-size;
	container-name: supervision;
	padding: 1.5rem;
	background: #fff;
}

.supervision-cases-panel {
	max-width: none;
	min-width: 0;
}

.supervision-workspace--split {
	display: grid;
	grid-template-columns: minmax(15.5rem, 18.5rem) minmax(0, 1fr);
	align-items: stretch;
}

.supervision-workspace--split .supervision-cases-panel {
	max-width: none;
	padding: 0.25rem 1.25rem 1.5rem 0;
	border-right: 1px solid #e5e7eb;
}

.supervision-detail-panel {
	min-width: 0;
}

.supervision-workspace--split .supervision-detail-panel {
	padding: 0.25rem 0 1.5rem 1.5rem;
}

.supervision-detail__back {
	display: none;
	margin-bottom: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: #4f46e5;
	text-decoration: none;
}

.supervision-detail__back:hover {
	color: #4338ca;
}

.supervision-landing .feed-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.supervision-landing .feed-header h2 {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 1rem !important;
	line-height: 1.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0;
	color: #111827 !important;
}

.supervision-landing .feed-header--sub {
	margin-top: 1.25rem;
}

.supervision-landing .feed-header--case h2 {
	font-size: 1.5rem !important;
	line-height: 2rem !important;
}

.supervision-landing button.feed-header__action {
	flex: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: 0.75rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: #053326;
	cursor: pointer;
}

.supervision-landing button.feed-header__action:hover {
	color: #02120d;
	background: transparent;
}

.supervision-empty {
	margin: 0.75rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid #e5e7eb;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: #6b7280;
}

/* ─── Cases list ────────────────────────────────────────────────── */

.deploy-list {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	border-top: 1px solid #e5e7eb;
}

.supervision-landing a.deploy-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 0.25rem;
	border-bottom: 1px solid #f3f4f6;
	color: inherit;
	text-decoration: none;
}

.supervision-landing a.deploy-row:hover,
.supervision-landing a.deploy-row--active,
.supervision-landing a.deploy-row--active:hover {
	background: transparent;
}

.deploy-row__body {
	min-width: 0;
	flex: 1 1 auto;
}

.deploy-row__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.deploy-row__name {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	min-width: 0;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: #111827;
}

.deploy-row__primary {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.deploy-row__slash {
	color: #9ca3af;
	font-weight: 500;
}

.deploy-row__secondary {
	flex: none;
	color: #6b7280;
	font-weight: 500;
}

.deploy-row__meta {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-top: 0.5rem;
	padding-left: 1.75rem;
	min-width: 0;
	font-size: 0.75rem;
	line-height: 1.25rem;
	color: #6b7280;
}

.deploy-row__meta p {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.deploy-row__bullet {
	width: 0.125rem;
	height: 0.125rem;
	flex: none;
	fill: #6b7280;
}

.deploy-row__chevron {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	color: #9ca3af;
}

.deploy-list--thin a.deploy-row {
	padding: 0.75rem 0.25rem;
}

.status-dot {
	display: flex;
	flex: none;
	padding: 0.25rem;
	border-radius: 9999px;
}

.status-dot span {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
}

.status-dot--draft {
	background: rgb(156 163 175 / 0.2);
}

.status-dot--draft span {
	background: #9ca3af;
}

.status-dot--submitted {
	background: rgb(234 179 8 / 0.22);
}

.status-dot--submitted span {
	background: #eab308;
}

.status-dot--reviewed {
	background: rgb(34 197 94 / 0.2);
}

.status-dot--reviewed span {
	background: #22c55e;
}

.env-pill {
	display: inline-flex;
	flex: none;
	align-items: center;
	border-radius: 9999px;
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	white-space: nowrap;
}

.env-pill--draft {
	background: #f9fafb;
	color: #4b5563;
	box-shadow: inset 0 0 0 1px rgb(107 114 128 / 0.16);
}

.env-pill--submitted {
	background: #eef2ff;
	color: #4338ca;
	box-shadow: inset 0 0 0 1px rgb(67 56 202 / 0.12);
}

.env-pill--reviewed {
	background: #f0fdf4;
	color: #15803d;
	box-shadow: inset 0 0 0 1px rgb(22 163 74 / 0.16);
}

/* ─── Session Doc Callout ───────────────────────────────────────── */

.session-doc-callout,
.session-awaiting-review {
	margin: 1rem 0 0;
	padding: 1rem;
	border-radius: 0.375rem;
}

.session-doc-callout {
	background: #eff6ff;
}

.session-awaiting-review {
	background: #fefce8;
}

.session-doc-callout h4,
.session-awaiting-review h4 {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
}

.session-doc-callout h4 {
	color: #1e40af;
}

.session-awaiting-review h4 {
	color: #854d0e;
}

.session-doc-callout p,
.session-awaiting-review p {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.session-doc-callout p {
	color: #1d4ed8;
}

.session-awaiting-review p {
	color: #a16207;
}

.supervision-landing a.session-doc-callout__link {
	display: inline-flex;
	margin-top: 0.75rem;
	padding: 0.375rem 0.5rem;
	border-radius: 0.375rem;
	background: transparent;
	color: #1e40af;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	text-decoration: none;
}

.supervision-landing a.session-doc-callout__link:hover {
	background: #dbeafe;
	color: #1e40af;
}

.session-doc-callout__unavailable {
	color: #854d0e;
	margin-bottom: 0;
}

/* ─── Case single + sessions ────────────────────────────────────── */

.supervision-back {
	margin-bottom: 1rem;
}

.supervision-back a {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: #4f46e5;
	text-decoration: none;
}

.supervision-back a:hover {
	color: #4338ca;
}

.desc-list {
	margin: 0;
	border-top: 1px solid #f3f4f6;
}

.desc-list__row {
	display: grid;
	grid-template-columns: minmax(7.5rem, 34%) minmax(0, 1fr);
	gap: 1rem;
	padding: 1rem 1.5rem;
}

.desc-list__row + .desc-list__row {
	border-top: 1px solid #f3f4f6;
}

.desc-list dt {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5rem;
	font-weight: 500;
	color: #111827;
}

.desc-list dd {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: #374151;
}

.desc-list__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
}

.supervision-landing .desc-list a {
	font-weight: 500;
	color: #4f46e5;
	text-decoration: none;
}

.supervision-landing .desc-list a:hover {
	color: #4338ca;
}

.case-detail__facts {
	margin-top: 0.35rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #e5e7eb;
}

.case-detail__meta {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: #6b7280;
}

.case-detail__files {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.75rem;
	margin-top: 0.35rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.case-detail__files span {
	color: #6b7280;
}

.supervision-landing .case-detail__files a {
	font-weight: 600;
	color: #4f46e5;
	text-decoration: none;
}

.supervision-landing .case-detail__files a:hover {
	color: #4338ca;
}

.activity-list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	border-top: 1px solid #e5e7eb;
}

.activity-item {
	padding: 1rem 0;
	border-bottom: 1px solid #f3f4f6;
}

.activity-item__row {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.activity-avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	background: #f3f4f6;
	color: #374151;
	font-size: 0.75rem;
	line-height: 1;
	font-weight: 600;
}

.activity-avatar--submitted {
	background: #e0e7ff;
	color: #3730a3;
}

.activity-avatar--reviewed {
	background: #dcfce7;
	color: #166534;
}

.activity-item__main {
	min-width: 0;
	flex: 1 1 auto;
}

.activity-item__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.activity-item__status {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.5rem;
}

.activity-item__name {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: #111827;
}

.activity-item__time {
	flex: none;
	font-size: 0.75rem;
	line-height: 1.25rem;
	color: #6b7280;
}

.activity-item__desc {
	margin: 0.125rem 0 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: #6b7280;
}

.session-disclosure > summary {
	list-style: none;
	cursor: pointer;
}

.session-disclosure > summary::-webkit-details-marker {
	display: none;
}

.session-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.session-work {
	padding: 0.75rem 0 0 2.75rem;
}

.session-work__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	padding-top: 0.25rem;
}

.supervision-landing .session-work__links a {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: #4f46e5;
	text-decoration: none;
}

.supervision-landing .session-work__links a:hover {
	color: #4338ca;
}

.session-work__empty {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: #6b7280;
}

.session-work__form {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid #f3f4f6;
}

.supervision-new-case {
	border-top: 1px solid #f3f4f6;
	background: #fff;
}

.supervision-new-case summary {
	padding: 1rem 1.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: #4f46e5;
	cursor: pointer;
}

.supervision-new-case summary:hover {
	background: #f9fafb;
}

.supervision-modal {
	width: min(40rem, calc(100% - 2rem));
	max-width: 40rem;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 0.75rem;
	background: #fff;
	color: #111827;
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.supervision-modal::backdrop {
	background: rgb(17 24 39 / 0.45);
}

.supervision-modal__body {
	padding: 1.5rem;
}

.supervision-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.supervision-modal__header h3 {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: #111827;
}

.supervision-modal__close {
	border: 0;
	background: transparent;
	color: #6b7280;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.supervision-modal__note {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: #374151;
}

.supervision-modal__note a {
	font-weight: 500;
	color: #4f46e5;
	text-decoration: none;
}

.supervision-modal__note a:hover {
	color: #4338ca;
}

@media (max-width: 860px) {
	.supervision-cases-panel {
		max-width: none;
	}

	.supervision-workspace {
		padding: 1.25rem;
	}

	.supervision-toolbar {
		grid-template-columns: 1fr;
	}

	.supervision-stats {
		text-align: left;
	}

	.supervision-workspace--split {
		display: block;
	}

	.supervision-workspace--split .supervision-cases-panel {
		display: none;
		position: static;
		padding: 0;
		border-right: 0;
	}

	.supervision-workspace--split .supervision-detail-panel {
		padding: 0;
	}

	.supervision-detail__back {
		display: inline-block;
	}
}