/* ==========================================================================
   PortfolioTree — design tokens
   The palette is derived from the logo's own gradient stops so the mark,
   the chrome and the accents all sit in one hue family.
   ========================================================================== */

:root {
	/* Brand — taken verbatim from images/logo.svg */
	--brand-green: #46795d;                 /* gradient, light stop */
	--brand-deep:  #204039;                 /* gradient, dark stop  */

	/* Bark — the canvas. Same hue family, driven down in lightness. */
	--bark-900: hsl(167 30% 5%);            /* page background      */
	--bark-800: hsl(167 26% 8%);            /* surface              */
	--bark-700: hsl(163 22% 12%);           /* raised surface       */
	--bark-600: hsl(160 18% 18%);           /* hairline border      */
	--bark-500: hsl(155 16% 27%);           /* strong border        */

	/* Moss — the text ramp. A faint green cast keeps it organic, not grey. */
	--moss-400: hsl(150 10% 62%);           /* muted / meta         */
	--moss-200: hsl(150 14% 84%);           /* body copy            */
	--moss-050: hsl(150 20% 96%);           /* headings             */

	/* Leaf — accents, stepped up from --brand-green for dark-background contrast */
	--leaf-400: hsl(147 30% 50%);
	--leaf-300: hsl(147 38% 62%);           /* links                */
	--leaf-200: hsl(147 45% 74%);           /* bright accent        */

	/* Alarm — the one hue outside the family, because a problem must not read
	   as decoration. .form-error already used these values inline. */
	--alarm-500: hsl(0 40% 40%);            /* borders              */
	--alarm-300: hsl(0 55% 72%);            /* problem text         */

	--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	--radius-sm: .375rem;
	--radius:    .5rem;
	--radius-lg: .75rem;

	--measure: 68ch;
	--content-width: 72rem;
	/* Data views are wider than prose. Named so the header can match it. */
	--workbench-width: 92rem;
	--header-height: 4.25rem;

	color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--moss-200);
	background: var(--bark-900);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* A single soft canopy of light behind the top of the page. */
body::before {
	content: '';
	position: fixed;
	inset: 0 0 auto 0;
	height: 40rem;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(60rem 26rem at 50% -6rem, hsl(147 40% 30% / .38), transparent 70%),
		radial-gradient(34rem 18rem at 88% 2rem, hsl(167 45% 22% / .30), transparent 70%);
}

body > * { position: relative; z-index: 1; }

h1, h2, h3, h4, h5, h6 {
	color: var(--moss-050);
	font-weight: 650;
	letter-spacing: -.03em;
	line-height: 1.15;
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.15rem; }

a {
	color: var(--leaf-300);
	text-decoration-color: hsl(147 38% 62% / .35);
	text-underline-offset: .18em;
	transition: color .15s ease, text-decoration-color .15s ease;
}

a:hover { color: var(--leaf-200); text-decoration-color: currentColor; }

:focus-visible {
	outline: 2px solid var(--leaf-300);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

hr {
	border: 0;
	border-top: 1px solid var(--bark-600);
	margin: 3rem 0;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Tracked-out monospace kicker — the signature small-label treatment. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--font-mono);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--leaf-300);
	margin: 0 0 1.25rem;
}

.eyebrow::before {
	content: '';
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var(--leaf-300);
	box-shadow: 0 0 0 .2rem hsl(147 38% 62% / .18);
}

.lede {
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--moss-200);
	max-width: var(--measure);
}

.muted { color: var(--moss-400); }

.mono {
	font-family: var(--font-mono);
	font-size: .95em;
	letter-spacing: -.01em;
}

/* ==========================================================================
   Site header
   ========================================================================== */

body > header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--header-height);
	border-bottom: 1px solid var(--bark-600);
	background: hsl(167 30% 5% / .72);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
}

body > header > nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: 100%;
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* The header and footer bracket main but cannot inherit its width, so they have
   to ask what page they are wrapping. Without this the logo sits 10rem inside
   the content edge on every workbench page, because they stop at
   --content-width while the page runs to --workbench-width. Browsers without
   :has() fall back to the narrower cap, which is the old behaviour rather than
   a broken one. */
body:has(main.workbench) > header > nav,
body:has(main.workbench) > footer > article { max-width: var(--workbench-width); }

body > header > nav > ul {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

#site-name {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--moss-050);
	text-decoration: none;
	user-select: none;
}

#site-name img {
	display: block;
	width: 2rem;
	height: 2rem;
}

#site-name:hover { color: var(--leaf-200); }

/* The trademark rides as a proper superscript instead of a negative-margin hack. */
[data-trademark]::after {
	content: '™';
	font-size: .55em;
	font-weight: 500;
	vertical-align: super;
	margin-left: .1em;
	color: var(--moss-400);
}

/* ==========================================================================
   Layout
   ========================================================================== */

main {
	display: block;
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

main > article {
	padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { max-width: var(--measure); }

.hero h1 { margin-bottom: 1.25rem; }

.hero .lede { margin-bottom: 2rem; }

.hero .actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 2rem 0 0;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
	background: linear-gradient(180deg, var(--bark-700), var(--bark-800));
	border: 1px solid var(--bark-600);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 4vw, 2.25rem);
}

.card + .card { margin-top: 1rem; }

/* Signature block: name + role, set apart from the prose. */
.signature {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--bark-600);
	list-style: none;
	padding-left: 0;
}

.signature .name {
	font-weight: 600;
	font-style: normal;
	color: var(--moss-050);
}

.signature .role {
	display: block;
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--moss-400);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem 1.15rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-sans);
	font-size: .9rem;
	font-weight: 550;
	letter-spacing: -.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.button:active { transform: translateY(1px); }

.button-primary {
	/* The logo's own gradient, top stop to bottom stop, on the primary action. */
	background: linear-gradient(160deg, var(--brand-green), var(--brand-deep));
	border-color: var(--leaf-400);
	color: var(--moss-050);
	box-shadow: 0 1px 0 hsl(147 45% 74% / .18) inset;
}

.button-primary:hover {
	background: var(--leaf-400);
	color: var(--bark-900);
}

.button-ghost {
	background: transparent;
	border-color: var(--bark-500);
	color: var(--moss-200);
}

.button-ghost:hover {
	border-color: var(--leaf-400);
	color: var(--leaf-200);
	background: hsl(147 30% 50% / .08);
}

/* ==========================================================================
   Prose — wraps the rendered Markdown of the legal pages
   ========================================================================== */

.prose {
	max-width: var(--measure);
	color: var(--moss-200);
}

.prose > :first-child { margin-top: 0; }

.prose h1 {
	font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
	margin-bottom: 1.5rem;
}

/* The legal documents skip h2 and run h1 → h3 → h4, so major sections are
   matched by role rather than by level: h2 and h3 both get the rule above
   them, h4 and below are sub-headings. */
.prose h2,
.prose h3 {
	font-size: 1.35rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--bark-600);
}

.prose h4,
.prose h5,
.prose h6 {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -.01em;
	margin-top: 2rem;
	color: var(--moss-050);
}

.prose ul, .prose ol { padding-left: 1.35rem; margin: 0 0 1.15rem; }
.prose li { margin-bottom: .45rem; }
.prose li::marker { color: var(--leaf-400); }

.prose strong { color: var(--moss-050); font-weight: 600; }

.prose code {
	font-family: var(--font-mono);
	font-size: .875em;
	padding: .15em .4em;
	border-radius: var(--radius-sm);
	background: var(--bark-700);
	border: 1px solid var(--bark-600);
	color: var(--leaf-200);
}

.prose blockquote {
	margin: 1.5rem 0;
	padding: .25rem 0 .25rem 1.25rem;
	border-left: 2px solid var(--brand-green);
	color: var(--moss-400);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: .9rem;
}

.prose th, .prose td {
	padding: .65rem .85rem;
	text-align: left;
	border-bottom: 1px solid var(--bark-600);
}

.prose thead th {
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--moss-400);
	border-bottom-color: var(--bark-500);
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
	margin-top: 4rem;
	border-top: 1px solid var(--bark-600);
	background: var(--bark-800);
}

footer > article {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2.5rem;
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 3rem 1.5rem 1.5rem;
}

footer h3 {
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--moss-400);
	margin-bottom: 1rem;
}

footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

footer ul ul { margin-top: .6rem; padding-left: 1rem; }

footer a {
	color: var(--moss-200);
	text-decoration: none;
}

footer a:hover { color: var(--leaf-200); }

footer p { font-size: .875rem; color: var(--moss-400); }

#disclaimers li { font-size: .875rem; color: var(--moss-400); line-height: 1.55; }

#copyright-notice {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bark-600);
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .04em;
	color: var(--moss-400);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 40rem) {
	body > header > nav { padding: 0 1rem; }
	main { padding: 0 1rem; }
	#site-name { font-size: 1rem; }
	.signature { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; }
}

/* ==========================================================================
   Auth pages
   ========================================================================== */

.auth {
	max-width: 26rem;
}

.auth h1 {
	font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
	margin-bottom: 1rem;
}

.auth .lede {
	font-size: 1.05rem;
	margin-bottom: 2rem;
}

.auth-form {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin: 0 0 1.75rem;
}

.auth-form label {
	font-family: var(--font-mono);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--moss-400);
	margin-top: .85rem;
}

.auth-form label:first-child { margin-top: 0; }

.auth-form input {
	width: 100%;
	padding: .7rem .85rem;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--moss-050);
	background: var(--bark-900);
	border: 1px solid var(--bark-500);
	border-radius: var(--radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-form input::placeholder { color: var(--moss-400); }

.auth-form input:focus {
	outline: none;
	border-color: var(--leaf-400);
	box-shadow: 0 0 0 3px hsl(147 30% 50% / .18);
}

/* :invalid matches before the field has been touched, which would paint an
   empty required field red on first paint. :user-invalid waits for interaction. */
.auth-form input:user-invalid {
	border-color: hsl(0 55% 60%);
}

.auth-form .button {
	margin-top: 1.25rem;
	justify-content: center;
}

.form-error {
	padding: .75rem 1rem;
	margin: 0 0 1.5rem;
	border: 1px solid hsl(0 40% 40%);
	border-left-width: 3px;
	border-radius: var(--radius);
	background: hsl(0 40% 40% / .12);
	color: hsl(0 60% 82%);
	font-size: .9rem;
}

/* The signed-out header carries no auth links by design; this is for the
   signed-in one. */
.session-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.session-actions form { margin: 0; }

.session-actions button {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--font-sans);
	font-size: .9rem;
	color: var(--moss-400);
	cursor: pointer;
}

.session-actions button:hover { color: var(--leaf-200); }

/* Account deletion is irreversible, so its control should not look like the
   primary action on the page. */
.button-danger {
	background: transparent;
	border-color: hsl(0 40% 42%);
	color: hsl(0 60% 78%);
}

.button-danger:hover {
	background: hsl(0 45% 40%);
	border-color: hsl(0 45% 52%);
	color: var(--moss-050);
}

.form-notice {
	padding: .75rem 1rem;
	margin: 0 0 1.5rem;
	border: 1px solid var(--bark-500);
	border-left-width: 3px;
	border-left-color: var(--leaf-400);
	border-radius: var(--radius);
	background: hsl(147 30% 50% / .10);
	color: var(--moss-200);
	font-size: .9rem;
}

.auth h2 {
	font-size: 1.15rem;
	margin-top: 2.5rem;
}

/* Active sessions on the settings page. */
.session-list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.session {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .85rem 1rem;
	border: 1px solid var(--bark-600);
	border-radius: var(--radius);
	background: var(--bark-800);
}

.session-current {
	border-color: var(--leaf-400);
}

.session-what {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

/* A user agent is long and arbitrary; it must not push the button off-screen. */
.session-what strong {
	color: var(--moss-050);
	font-size: .9rem;
	font-weight: 550;
	overflow-wrap: anywhere;
}

.session-what .muted {
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .04em;
}

.session-badge {
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: .65rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--leaf-300);
}

.session form { margin: 0; flex-shrink: 0; }
.session .button { padding: .4rem .8rem; font-size: .8rem; }
/* ==========================================================================
   Workbench — the composition editor and its results.
   Proposed additions to main_0009.css. Tokens come from main_0008.css.
   ========================================================================== */

.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- page frame --------------------------------------------------------- */

.workbench {
	/* Wider than --content-width: this is a data view, not prose. */
	max-width: var(--workbench-width);
	margin: 0 auto;
	padding: 1.75rem 1.5rem 4rem;
}

.workbench-head {
	display: flex; align-items: flex-end; gap: 2rem; flex-wrap: wrap;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--bark-600);
}
.workbench-head h1 { margin: .15rem 0 0; font-size: 1.5rem; color: var(--moss-050); }
.workbench-head .eyebrow { margin: 0; }

/* What this composition is pinned to. Always visible: a number computed
   against a different vintage is a different number. */
.pinned { display: flex; gap: 1.75rem; margin: 0; flex-wrap: wrap; }
.pinned div { display: flex; flex-direction: column; gap: .1rem; }
.pinned dt {
	font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--moss-400);
}
.pinned dd { margin: 0; font-size: .9375rem; color: var(--moss-050); }

.workbench-actions { margin-left: auto; display: flex; gap: .625rem; }

.workbench-grid {
	display: grid;
	grid-template-columns: minmax(24rem, 30rem) 1fr;
	gap: 1.25rem;
	align-items: start;
	margin-top: 1.25rem;
}
@media (max-width: 68rem) {
	.workbench-grid { grid-template-columns: 1fr; }
}

/* --- panels ------------------------------------------------------------- */

.panel {
	background: var(--bark-800);
	border: 1px solid var(--bark-600);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.panel-head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	padding: .875rem 1rem;
	border-bottom: 1px solid var(--bark-600);
}
.panel-head h2 { margin: 0; font-size: .9375rem; color: var(--moss-050); font-weight: 600; }
.panel-head .muted { font-size: .75rem; }

/* --- tables ------------------------------------------------------------- */

.grid { width: 100%; border-collapse: collapse; font-size: .875rem; }
.grid th, .grid td { padding: .4375rem .75rem; text-align: left; }
.grid thead th {
	font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--moss-400); font-weight: 500;
	border-bottom: 1px solid var(--bark-600);
	padding-top: .625rem; padding-bottom: .625rem;
}
.grid tbody th { font-weight: 400; color: var(--moss-200); }
.grid tbody tr + tr th, .grid tbody tr + tr td { border-top: 1px solid var(--bark-700); }
.grid tbody tr:hover th, .grid tbody tr:hover td { background: var(--bark-700); }
/* Tabular figures so digits line up column-wise as values change. */
.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.grid .mono { font-family: var(--font-mono); font-size: .8125rem; }
.grid .dim { color: var(--moss-400); }
.grid tfoot th, .grid tfoot td {
	border-top: 1px solid var(--bark-500);
	color: var(--moss-050); font-weight: 600;
	padding-top: .5625rem; padding-bottom: .5625rem;
}

/* A short position reads differently at a glance, not only by its sign. */
.negative { color: var(--amber, hsl(35 55% 65%)); }

/* --- weight inputs ------------------------------------------------------ */

.weight {
	width: 6.5rem;
	padding: .3125rem .5rem;
	text-align: right;
	font-family: var(--font-mono); font-size: .8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--moss-050);
	background: var(--bark-900);
	border: 1px solid var(--bark-600);
	border-radius: var(--radius-sm);
}
.weight:focus { outline: 2px solid var(--leaf-400); outline-offset: 1px; border-color: transparent; }
.weight.negative { color: var(--amber, hsl(35 55% 65%)); }

.row-remove {
	width: 1.5rem; height: 1.5rem; line-height: 1;
	color: var(--moss-400); background: none;
	border: 1px solid transparent; border-radius: var(--radius-sm);
	cursor: pointer;
}
.row-remove:hover { color: var(--moss-050); border-color: var(--bark-500); }

.add-asset { padding: .75rem 1rem; border-top: 1px solid var(--bark-600); }
.add-asset select {
	width: 100%; padding: .4375rem .625rem;
	color: var(--moss-200); background: var(--bark-900);
	border: 1px solid var(--bark-600); border-radius: var(--radius-sm);
	font-family: var(--font-sans); font-size: .875rem;
}

/* --- segmented control -------------------------------------------------- */

.segmented {
	display: flex; gap: .25rem; margin: .875rem 1rem 0; padding: .25rem;
	border: 1px solid var(--bark-600); border-radius: var(--radius);
	background: var(--bark-900);
}
.segmented label { flex: 1; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
	display: block; padding: .375rem .5rem; text-align: center;
	font-size: .8125rem; color: var(--moss-400);
	border-radius: var(--radius-sm); cursor: pointer;
}
.segmented label:hover span { color: var(--moss-200); }
.segmented input:checked + span { color: var(--bark-900); background: var(--leaf-300); font-weight: 600; }
.segmented input:focus-visible + span { outline: 2px solid var(--leaf-200); outline-offset: 2px; }

.method-note { margin: .625rem 1rem 0; font-size: .75rem; line-height: 1.5; }

/* --- results ------------------------------------------------------------ */

.results { display: flex; flex-direction: column; gap: 1.25rem; }

.metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1px;
	background: var(--bark-600);
	border: 1px solid var(--bark-600);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.metric {
	display: flex; flex-direction: column; gap: .3125rem;
	padding: .875rem 1rem;
	background: var(--bark-800);
}
.metric-label {
	font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--moss-400);
}
.metric-value {
	font-size: 1.375rem; line-height: 1.1; color: var(--moss-050);
	font-variant-numeric: tabular-nums;
}
.metric-value .unit { font-size: .875rem; color: var(--moss-400); margin-left: .0625rem; }
.metric .dim { color: var(--moss-400); font-size: .625rem; }

/* Unavailable is not zero: it renders as an em dash and says why on hover. */
.metric-value.unavailable { color: var(--moss-400); }

.bar-col { width: 8rem; }
.bar {
	display: block; height: .5rem; border-radius: 999px;
	width: var(--share);
	background: linear-gradient(90deg, var(--brand-green), var(--leaf-300));
}

.methodology { font-size: .8125rem; line-height: 1.6; margin: 0; }
.methodology a { color: var(--leaf-300); }

/* --- additions the ex ante pages need beyond the prototype -------------- */

.workbench-grid-wide { grid-template-columns: 1fr minmax(22rem, 28rem); }
@media (max-width: 68rem) { .workbench-grid-wide { grid-template-columns: 1fr; } }

.button-small { padding: .25rem .5rem; font-size: .75rem; }
.row-actions { text-align: right; }
.row-actions form { display: inline; }

.panel-note, .field-note {
	margin: 0; padding: .75rem 1rem;
	font-size: .75rem; line-height: 1.55;
	border-top: 1px solid var(--bark-700);
}
.field-note { border-top: 0; padding: .375rem 0 0; }

.empty { margin: 0; padding: 1.25rem 1rem; color: var(--moss-400); font-size: .875rem; }
.empty a { color: var(--leaf-300); }

.stacked-form { display: flex; flex-direction: column; gap: .875rem; padding: 1rem; }
/* min-width: 0 is load-bearing. A flex item defaults to min-width: auto, which
   refuses to shrink below its content's intrinsic width — and a text input's is
   about twenty characters. Chrome shrinks them anyway; Safari does not, so the
   second field in a row overflows its panel and crosses the border. */
.field { display: flex; flex-direction: column; gap: .3125rem; min-width: 0; }
.field-row { display: flex; gap: .875rem; }
.field-row .field { flex: 1; min-width: 0; }
.field label { font-size: .8125rem; color: var(--moss-400); }
.field input, .field select, .field textarea {
	padding: .4375rem .625rem;
	color: var(--moss-050); background: var(--bark-900);
	border: 1px solid var(--bark-600); border-radius: var(--radius-sm);
	font-family: var(--font-sans); font-size: .875rem;
}
.field textarea { font-family: var(--font-mono); font-size: .75rem; line-height: 1.5; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
	outline: 2px solid var(--leaf-400); outline-offset: 1px; border-color: transparent;
}
.form-actions { display: flex; justify-content: flex-end; }

/* An action row that is a direct child of .panel rather than of .stacked-form,
   which is where .form-actions gets its padding from. Without this the button
   sits flush against the panel's bottom and right edge. */
.panel-actions {
	display: flex; justify-content: flex-start;
	padding: 0 1rem 1.125rem;
}

/* A weight box that the method computed rather than the user typed. */
.weight[readonly] { color: var(--moss-400); background: var(--bark-800); cursor: not-allowed; }

/* --- assumption set editor ---------------------------------------------- */

.workbench-grid-single { grid-template-columns: 1fr; }

/* The editor is a column of panels rather than a grid: the correlation matrix
   wants every pixel of width it can get. */
#assumption-editor { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.25rem; }
#assumption-editor .panel + .panel { margin-top: 0; }

/* Wide content scrolls inside its own box. A ten-asset matrix is eleven
   columns, and the page itself must never scroll sideways. */
.grid-scroll { overflow-x: auto; }

/* Rows are taller than a read-only table because each cell holds a control:
   .4375rem around an input leaves the focus ring nowhere to go. */
.assets-table th, .assets-table td { padding: .5rem .75rem; }
.assets-table td { vertical-align: top; }
.assets-table input { width: 100%; }
.assets-table td:first-child { min-width: 12rem; }
.assets-table .weight { max-width: 7rem; }
.assets-table .slug {
	display: block; font-size: .6875rem; margin-top: .3125rem;
}

.corr-table th[scope="row"] { white-space: nowrap; font-weight: 500; }
.corr-head {
	font-size: .6875rem; font-weight: 500; line-height: 1.2;
	max-width: 5rem; white-space: normal;
}
.corr-cell { padding: .3125rem; }
.corr-input { width: 4.75rem; text-align: right; }

/* The diagonal and the blank lower half are not controls, so they get centred
   in the space an input would occupy rather than sitting on the baseline. */
.corr-cell > span { display: inline-block; padding: .4375rem .25rem; }
.mirror { opacity: .45; }

/* A matrix is read by tracing a row to a column, which is hard when the row
   header has scrolled out of the box. */
.corr-table th[scope="row"] { position: sticky; left: 0; background: var(--bark-800); }
.corr-table tbody tr:hover th[scope="row"] { background: var(--bark-700); }

/* Sized to its contents rather than stretched to the panel. A four-column
   matrix spread across 90rem puts the number you are comparing an inch from the
   one you are comparing it to, and the grid stops reading as a grid. */
.corr-table { width: auto; }
.corr-table th, .corr-table td { white-space: nowrap; }

/* The name column absorbs the slack instead, so the numeric columns sit
   together at their natural width, and the headers keep their unit on the same
   line as the word it belongs to. */
.assets-table { table-layout: auto; }
.assets-table td:first-child, .assets-table th:first-child { width: 100%; }
.assets-table thead th { white-space: nowrap; }
/* Absorbing the slack is the cell's job, not the input's: a name box stretched
   across the panel invites a name nobody wants to read in a column header. */
.assets-table td:first-child input { max-width: 22rem; }

/* A cell whose value is part of a problem. The outline rather than a fill so
   the number stays readable. */
.cell-invalid .corr-input { outline: 2px solid var(--alarm-500); outline-offset: 1px; }
.row-problem input { border-color: var(--alarm-500); }
.cell-problem {
	display: block; margin-top: .25rem;
	font-size: .6875rem; color: var(--alarm-300);
}

.problems .empty.ok { color: var(--leaf-300); }
.problem-list {
	list-style: none; margin: 0; padding: .75rem 1rem;
	display: flex; flex-direction: column; gap: .5rem;
	font-size: .8125rem; line-height: 1.5;
}
.problem-list li { display: flex; gap: .625rem; align-items: baseline; }
.problem-list .mono { flex: 0 0 auto; font-size: .6875rem; min-width: 9rem; }

/* The editor's action row sits beside the panel note, so it keeps the note's
   left edge rather than the flush-right of a form's submit row. */
#assumption-editor .panel-actions { padding-top: .25rem; }

/* Focus has to be visible on a grid of small boxes, and the ring must not be
   clipped by the scrolling container. */
.corr-input:focus-visible, .assets-table input:focus-visible {
	outline: 2px solid var(--leaf-400); outline-offset: 1px; border-color: transparent;
}

.problem-summary {
	margin: 0; padding: .75rem 1rem .25rem;
	font-size: .8125rem; color: var(--alarm-300);
}