:root {
	--bg: #f1f1ed;
	--surface: #fbfbf8;
	--surface-strong: #ffffff;
	--text: #11120f;
	--muted: #63665e;
	--quiet: #8b8f85;
	--line: rgba(17, 18, 15, 0.16);
	--line-soft: rgba(17, 18, 15, 0.08);
	--accent: #86bd1f;
	--accent-bright: #b8ff40;
	--accent-ink: #11120f;
	--critical: #b42c2c;
	--warning: #8a6512;
	--info: #2c5f92;
	--page: min(1220px, calc(100% - 80px));
	--header-height: 66px;
	color-scheme: light;
}

:root[data-theme="dark"] {
	--bg: #050505;
	--surface: #0b0b0b;
	--surface-strong: #11110f;
	--text: #f0f0ed;
	--muted: rgba(240, 240, 237, 0.62);
	--quiet: rgba(240, 240, 237, 0.4);
	--line: rgba(255, 255, 255, 0.16);
	--line-soft: rgba(255, 255, 255, 0.08);
	--accent: #b8ff40;
	--accent-bright: #b8ff40;
	--accent-ink: #090909;
	--critical: #ff7c70;
	--warning: #e6bd65;
	--info: #83b7ed;
	color-scheme: dark;
}

* {
	box-sizing: border-box;
	letter-spacing: 0;
	margin: 0;
	padding: 0;
}

html {
	background: var(--bg);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	min-width: 320px;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

button,
a,
input,
select {
	font: inherit;
}

button {
	color: inherit;
	cursor: pointer;
}

a {
	color: inherit;
	text-decoration: none;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

[hidden] {
	display: none !important;
}

.page-shell {
	margin-inline: auto;
	width: var(--page);
}

.portal-header {
	backdrop-filter: blur(14px);
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	border-bottom: 1px solid var(--line-soft);
	height: var(--header-height);
	position: sticky;
	top: 0;
	z-index: 20;
}

.portal-header__inner {
	align-items: center;
	display: grid;
	grid-template-columns: auto 1fr auto;
	height: 100%;
	margin-inline: auto;
	width: var(--page);
}

.wordmark {
	font-size: 21px;
	font-weight: 650;
}

.header-context {
	border-left: 1px solid var(--line);
	color: var(--muted);
	font-size: 12px;
	margin-left: 14px;
	padding-left: 14px;
}

.header-actions {
	align-items: center;
	display: flex;
	gap: 12px;
}

.project-switcher {
	align-items: center;
	display: flex;
	gap: 8px;
}

.project-switcher > span {
	color: var(--quiet);
	font-size: 10px;
	text-transform: uppercase;
}

.project-switcher select {
	appearance: none;
	background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2363665e' stroke-width='2'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center;
	border: 1px solid var(--line);
	border-radius: 3px;
	color: var(--text);
	font-size: 12px;
	height: 34px;
	max-width: 260px;
	min-width: 180px;
	padding: 0 32px 0 11px;
}

.project-switcher select:disabled {
	cursor: wait;
	opacity: 0.62;
}

.theme-switch,
.filter-switch {
	align-items: center;
	border: 1px solid var(--line);
	border-radius: 3px;
	display: inline-flex;
	min-height: 34px;
	padding: 3px;
}

.theme-switch {
	justify-self: end;
	width: max-content;
}

.theme-switch button,
.filter-switch button {
	background: transparent;
	border: 0;
	border-radius: 2px;
	color: var(--muted);
	font-size: 12px;
	min-height: 26px;
	padding: 0 10px;
}

:root[data-theme="light"] .theme-switch [data-theme-choice="light"],
:root[data-theme="dark"] .theme-switch [data-theme-choice="dark"],
.filter-switch button.is-active {
	background: var(--text);
	color: var(--bg);
}

.sign-out {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: 12px;
	padding: 5px 0 3px;
}

.state-panel {
	display: flex;
	flex-direction: column;
	gap: 18px;
	justify-content: center;
	margin-inline: auto;
	min-height: calc(100svh - var(--header-height));
	width: var(--page);
}

.state-panel h1 {
	font-size: 42px;
	font-weight: 400;
	line-height: 1.08;
	max-width: 620px;
}

.state-panel > p:not(.eyebrow) {
	color: var(--muted);
	max-width: 560px;
}

.loading-line {
	background: var(--line);
	display: block;
	height: 2px;
	overflow: hidden;
	position: relative;
	width: 200px;
}

.loading-line::after {
	animation: loading 1.3s ease-in-out infinite;
	background: var(--accent);
	content: "";
	height: 100%;
	left: -55%;
	position: absolute;
	top: 0;
	width: 55%;
}

@keyframes loading {
	to { left: 100%; }
}

.text-link {
	border-bottom: 1px solid currentColor;
	font-size: 14px;
	padding-bottom: 2px;
	width: max-content;
}

.eyebrow,
dt,
.summary-label {
	color: var(--quiet);
	font-size: 11px;
	text-transform: uppercase;
}

.project-intro {
	padding-block: 72px 58px;
}

.project-intro__status {
	align-items: center;
	color: var(--muted);
	display: flex;
	font-size: 12px;
	gap: 9px;
	margin-bottom: 22px;
	text-transform: uppercase;
}

.status-dot {
	background: var(--accent);
	border-radius: 50%;
	height: 7px;
	width: 7px;
}

.project-intro h1 {
	font-size: 52px;
	font-weight: 350;
	line-height: 1.03;
	max-width: 980px;
}

.project-summary {
	color: var(--muted);
	font-size: 17px;
	margin-top: 24px;
	max-width: 820px;
}

.project-summary:empty {
	display: none;
}

.project-meta {
	border-top: 1px solid var(--line);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 48px;
	padding-top: 18px;
}

.project-meta > div {
	border-left: 1px solid var(--line-soft);
	min-height: 62px;
	padding-left: 18px;
}

.project-meta > div:first-child {
	border-left: 0;
	padding-left: 0;
}

dd {
	font-size: 14px;
	margin-top: 7px;
}

.metrics-band {
	background: var(--surface);
	border-bottom: 1px solid var(--line-soft);
	border-top: 1px solid var(--line-soft);
}

.metrics-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 178px;
	padding: 28px 26px;
}

.metric + .metric {
	border-left: 1px solid var(--line);
}

.metric__value {
	font-size: 38px;
	font-weight: 350;
	line-height: 1;
}

.metric__label {
	font-size: 13px;
	font-weight: 600;
	margin-top: auto;
	padding-top: 30px;
}

.metric__note {
	color: var(--muted);
	font-size: 11px;
	margin-top: 4px;
}

.allocation-band {
	background: var(--surface-strong);
	border-bottom: 1px solid var(--line-soft);
}

.allocation-layout {
	display: grid;
	gap: 60px;
	grid-template-columns: minmax(240px, 0.75fr) 1.25fr;
	padding-block: 64px;
}

.allocation-layout h2 {
	font-size: 34px;
	font-weight: 400;
	margin-top: 8px;
}

.allocation-labels,
.allocation-row {
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(150px, 1.25fr) repeat(2, minmax(80px, 0.65fr)) minmax(110px, 0.85fr);
}

.allocation-labels {
	color: var(--quiet);
	font-size: 10px;
	padding: 0 14px 10px;
	text-transform: uppercase;
}

.allocation-list {
	list-style: none;
}

.allocation-row {
	align-items: center;
	border-top: 1px solid var(--line);
	min-height: 72px;
	padding: 13px 14px;
}

.allocation-row[data-period="current"] {
	box-shadow: inset 3px 0 0 var(--accent);
}

.allocation-row[data-period="future"] {
	color: var(--muted);
}

.allocation-month {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.allocation-month strong {
	font-size: 14px;
	font-weight: 600;
}

.allocation-month small {
	color: var(--quiet);
	font-size: 9px;
	text-transform: uppercase;
}

.allocation-value,
.allocation-balance {
	font-size: 13px;
	font-weight: 600;
}

.allocation-balance {
	color: var(--muted);
}

.allocation-balance[data-state="over"] {
	color: var(--critical);
}

.deliverables {
	padding-block: 82px;
}

.section-heading {
	align-items: end;
	display: flex;
	justify-content: space-between;
	margin-bottom: 38px;
}

.section-heading h2,
.contacts-layout h2 {
	font-size: 34px;
	font-weight: 400;
	margin-top: 8px;
}

.deliverable-labels,
.deliverable-summary {
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(260px, 2.5fr) 105px 92px 125px 76px 76px 24px;
}

.deliverable-labels {
	border-bottom: 1px solid var(--line);
	color: var(--quiet);
	font-size: 10px;
	padding: 0 16px 12px;
	text-transform: uppercase;
}

.deliverable-list,
.deliverable-file-list,
.contact-list {
	list-style: none;
}

.deliverable-item {
	border-bottom: 1px solid var(--line);
}

.deliverable-item details {
	width: 100%;
}

.deliverable-summary {
	align-items: center;
	cursor: pointer;
	list-style: none;
	min-height: 94px;
	padding: 15px 16px;
	transition: background 150ms ease;
}

.deliverable-summary::-webkit-details-marker {
	display: none;
}

.deliverable-summary:hover {
	background: var(--line-soft);
}

.deliverable-title {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.deliverable-title small {
	color: var(--quiet);
	font-size: 10px;
	text-transform: uppercase;
}

.deliverable-title strong {
	font-size: 15px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.status-pill,
.priority-pill {
	align-items: center;
	color: var(--muted);
	display: inline-flex;
	font-size: 11px;
	gap: 7px;
	width: max-content;
}

.status-pill::before,
.priority-pill::before {
	background: var(--quiet);
	border-radius: 50%;
	content: "";
	height: 6px;
	width: 6px;
}

.status-pill[data-status="In Progress"]::before { background: var(--accent); }
.status-pill[data-status="To Review"]::before { background: var(--info); }
.status-pill[data-status="Waiting on Input"]::before { background: var(--critical); }
.status-pill[data-status="Completed"]::before { background: var(--text); }
.priority-pill[data-priority="High"]::before { background: var(--critical); }
.priority-pill[data-priority="Medium"]::before { background: var(--warning); }
.priority-pill[data-priority="Low"]::before { background: var(--info); }

.deliverable-number {
	font-size: 13px;
	font-weight: 600;
}

.deliverable-toggle {
	color: var(--muted);
	font-size: 18px;
	font-weight: 300;
	text-align: right;
	transition: transform 180ms ease;
}

details[open] .deliverable-toggle {
	transform: rotate(45deg);
}

.deliverable-detail {
	background: var(--surface);
	border-top: 1px solid var(--line-soft);
	display: grid;
	gap: 0;
	grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.8fr) minmax(270px, 0.9fr);
	padding: 0 16px 34px;
}

.detail-section {
	min-width: 0;
	padding: 28px 24px 0 0;
}

.detail-section + .detail-section {
	border-left: 1px solid var(--line);
	padding-left: 24px;
}

.detail-section h3 {
	font-size: 12px;
	font-weight: 650;
	margin-bottom: 18px;
}

.detail-narrative {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-field--wide {
	grid-column: 1 / -1;
}

.detail-field > span {
	color: var(--quiet);
	font-size: 10px;
	text-transform: uppercase;
}

.detail-field p {
	color: var(--muted);
	font-size: 13px;
	margin-top: 6px;
	overflow-wrap: anywhere;
}

.score-grid,
.planning-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.score-grid > div,
.planning-grid > div {
	border-top: 1px solid var(--line);
	padding-top: 9px;
}

.score-grid dt,
.planning-grid dt {
	font-size: 9px;
}

.score-grid dd,
.planning-grid dd {
	font-size: 12px;
}

.planning-section > .detail-field {
	border-top: 1px solid var(--line);
	margin-top: 18px;
	padding-top: 12px;
}

.assignee-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	grid-column: 1 / -1;
	padding-top: 24px;
}

.assignee-links:empty {
	display: none;
}

.assignee-links a,
.contact-list a {
	border-bottom: 1px solid var(--line);
	font-size: 12px;
	padding-bottom: 2px;
}

.empty-state {
	color: var(--muted);
	padding: 48px 16px;
	text-align: center;
}

.contacts-layout {
	display: grid;
	gap: 60px;
	grid-template-columns: minmax(240px, 0.75fr) 1.25fr;
	padding-block: 64px;
}

.deliverable-files {
	border-top: 1px solid var(--line);
	grid-column: 1 / -1;
	margin-top: 26px;
	padding-top: 24px;
}

.deliverable-files h3 {
	font-size: 12px;
	font-weight: 650;
	margin-bottom: 6px;
}

.deliverable-file-list li {
	align-items: center;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 22px;
	grid-template-columns: 1fr auto;
	min-height: 92px;
	padding-block: 14px;
}

.deliverable-file-list li > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.deliverable-file-list strong {
	font-size: 14px;
	font-weight: 600;
}

.deliverable-file-list span,
.deliverable-file-list p {
	color: var(--muted);
	font-size: 12px;
}

.deliverable-file-list p {
	margin-top: 5px;
}

.deliverable-file-list button {
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 2px;
	font-size: 12px;
	height: 36px;
	min-width: 92px;
	padding: 0 12px;
}

.deliverable-file-list button:disabled {
	cursor: wait;
	opacity: 0.58;
}

.contacts-band {
	background: var(--surface-strong);
	border-bottom: 1px solid var(--line-soft);
}

.contact-list li {
	align-items: center;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr 1fr auto;
	min-height: 72px;
}

.contact-list strong {
	font-size: 14px;
	font-weight: 600;
}

.contact-list span {
	color: var(--muted);
	font-size: 12px;
}

.portal-footer {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
	min-height: 150px;
	padding-block: 48px;
}

.portal-footer > div {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.portal-footer strong {
	font-size: 17px;
}

.portal-footer span {
	color: var(--muted);
	font-size: 11px;
}

@media (max-width: 1040px) {
	:root { --page: calc(100% - 48px); }
	.deliverable-labels { display: none; }
	.deliverable-summary { grid-template-columns: minmax(0, 1fr) 105px 72px 125px 64px 64px 24px; }
	.deliverable-detail { grid-template-columns: 1fr 1fr; }
	.detail-narrative { grid-column: 1 / -1; }
	.score-section { border-left: 0 !important; padding-left: 0 !important; }
}

@media (max-width: 780px) {
	.project-switcher > span { display: none; }
	.project-switcher select { max-width: 210px; min-width: 150px; }
	.metrics-grid { grid-template-columns: repeat(2, 1fr); }
	.metric:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
	.metric:nth-child(4) { border-top: 1px solid var(--line); }
	.deliverable-summary { grid-template-columns: minmax(0, 1fr) 105px 78px 24px; }
	.priority-pill { grid-column: 2; grid-row: 1; }
	.status-pill { grid-column: 2 / 4; grid-row: 2; }
	.deliverable-number { color: var(--muted); grid-row: 2; }
	.deliverable-number.deliverable-score { grid-column: 3; grid-row: 1; }
	.deliverable-score::before { color: var(--quiet); content: "Score "; font-size: 10px; font-weight: 400; }
	.deliverable-estimate { display: none; }
	.deliverable-tracked { display: block; grid-column: 1; }
	.deliverable-tracked::after { color: var(--quiet); content: " tracked"; font-size: 10px; font-weight: 400; }
	.deliverable-toggle { grid-column: 4; grid-row: 1 / 3; }
	.deliverable-detail { grid-template-columns: 1fr; }
	.detail-section + .detail-section { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
	.allocation-layout, .contacts-layout { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	:root { --header-height: 60px; --page: calc(100% - 28px); }
	.portal-header__inner { grid-template-columns: auto 1fr auto; }
	.header-context { display: none; }
	.wordmark { font-size: 19px; }
	.header-actions { gap: 8px; }
	.project-switcher select { max-width: 138px; min-width: 112px; }
	.theme-switch button { padding-inline: 8px; }
	.sign-out { display: none; }
	.project-intro { padding-block: 48px 38px; }
	.project-intro h1 { font-size: 36px; }
	.project-summary { font-size: 15px; }
	.project-meta { gap: 20px; grid-template-columns: 1fr; margin-top: 34px; }
	.project-meta > div { border-left: 0; border-top: 1px solid var(--line-soft); min-height: 0; padding: 12px 0 0; }
	.project-meta > div:first-child { border-top: 0; }
	.metric { min-height: 145px; padding: 22px 16px; }
	.metric__value { font-size: 31px; }
	.metric__label { font-size: 12px; padding-top: 22px; }
	.allocation-layout { gap: 30px; padding-block: 46px; }
	.allocation-labels { display: none; }
	.allocation-row { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; padding-block: 16px; }
	.allocation-month { grid-column: 1 / -1; }
	.allocation-value::before { color: var(--quiet); content: attr(data-label) " "; font-size: 9px; font-weight: 400; text-transform: uppercase; }
	.allocation-balance { grid-column: 1 / -1; }
	.deliverables { padding-block: 58px; }
	.section-heading { align-items: flex-start; flex-direction: column; gap: 22px; }
	.section-heading h2, .allocation-layout h2, .contacts-layout h2 { font-size: 29px; }
	.deliverable-summary { gap: 8px; grid-template-columns: minmax(0, 1fr) 94px 72px 18px; min-height: 116px; padding-inline: 4px; }
	.deliverable-title strong { font-size: 14px; }
	.deliverable-detail { padding-inline: 4px; }
	.detail-narrative, .score-grid, .planning-grid { grid-template-columns: 1fr; }
	.detail-field--wide { grid-column: auto; }
	.contacts-layout { gap: 34px; padding-block: 48px; }
	.deliverable-file-list li { align-items: start; }
	.contact-list li { align-items: start; gap: 5px; grid-template-columns: 1fr auto; padding-block: 15px; }
	.contact-list span { grid-column: 1; }
	.contact-list a { grid-column: 2; grid-row: 1 / 3; }
	.state-panel h1 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}