/**
 * FairScope Portal — "banker's-green ledger".
 *
 * Direction: the visual language of the accountant's own world — ledger
 * green, brass, engraved-certificate capitals, ruled paper. A deep pine
 * masthead frames the portal like a bound ledger cover; content sits on
 * white cards over a paper wash.
 *
 * Signature: the accountant's DOUBLE RULE. In bookkeeping, a double
 * underline beneath a figure means "totaled — final". Agreed amounts
 * carry it (.fsp-final).
 *
 * Type: Marcellus (one weight, enqueued with swap) for the wordmark,
 * headings, and figures; system stack for body — the page paints
 * instantly and the display face swaps in.
 *
 * Scoped entirely under .fsp so nothing leaks into the active theme.
 */

.fsp {
	--fsp-ink: #14201b;
	--fsp-muted: #5d6d64;
	--fsp-pine: #0c4b3c;
	--fsp-pine-deep: #083527;
	--fsp-pine-mist: #cfe0d6;   /* light-on-dark text in the masthead */
	--fsp-sea: #e9f2ec;         /* tint wash */
	--fsp-paper: #f4f6f2;       /* page wash behind cards */
	--fsp-card: #ffffff;
	--fsp-line: #dde5dd;
	--fsp-brass: #a87b22;
	--fsp-brass-wash: #f6efdd;
	--fsp-err: #a63a2b;
	--fsp-err-wash: #f9ece8;

	--fsp-display: "Marcellus", "Iowan Old Style", Georgia, serif;
	--fsp-shadow: 0 1px 2px rgba(20, 32, 27, 0.05), 0 6px 18px -8px rgba(20, 32, 27, 0.14);

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
	color: var(--fsp-ink);
	line-height: 1.55;
	max-width: 640px;
	margin: 0 auto;
}

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

/* The shell sits on a paper wash so cards read as documents on a desk. */
.fsp-shell {
	background: var(--fsp-paper);
	border: 1px solid var(--fsp-line);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--fsp-shadow);
}

.fsp-main {
	padding: 1.5rem;
	animation: fsp-rise 240ms ease both;
}

@keyframes fsp-rise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* ----- Masthead: the ledger cover ----- */

.fsp-mast {
	background:
		linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.12)),
		var(--fsp-pine);
	color: #fff;
	padding: 1.4rem 1.5rem 1.1rem;
}

.fsp-mast-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.fsp-brand { display: grid; gap: 0.1rem; }

.fsp-wordmark {
	font-family: var(--fsp-display);
	font-size: 1.5rem;
	letter-spacing: 0.06em;
	line-height: 1.1;
}

/* The single brass rule under the wordmark — the double rule is reserved
   for agreed figures, so the brand carries the open half of the motif. */
.fsp-brand::after {
	content: "";
	width: 2.6rem;
	height: 2px;
	background: var(--fsp-brass);
	margin-top: 0.4rem;
}

.fsp-brand-sub {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--fsp-pine-mist);
}

.fsp-who {
	font-size: 0.85rem;
	color: var(--fsp-pine-mist);
	max-width: 16em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ----- Progress rail: a fine stepper inside the band ----- */

.fsp-rail {
	display: flex;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fsp-pine-mist);
}

.fsp-rail li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
}

/* hairline connectors between steps */
.fsp-rail li + li::before {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.22);
	margin: 0 0.5rem;
	min-width: 0.5rem;
}

.fsp-rail li:last-child { flex: 0 0 auto; }

.fsp-rail-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	background: transparent;
	flex: none;
}

.fsp-rail li.is-done { color: #fff; }
.fsp-rail li.is-done .fsp-rail-dot {
	background: var(--fsp-brass);
	border-color: var(--fsp-brass);
}

.fsp-rail li.is-now { color: #fff; font-weight: 700; }
.fsp-rail li.is-now .fsp-rail-dot {
	background: #fff;
	border-color: #fff;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}

/* ----- Cards ----- */

.fsp-card {
	background: var(--fsp-card);
	border: 1px solid var(--fsp-line);
	border-radius: 12px;
	padding: 1.6rem;
	box-shadow: var(--fsp-shadow);
}

.fsp-card--center { text-align: center; }

.fsp-card h2,
.fsp-bar h2 {
	font-family: var(--fsp-display);
	font-weight: 400;
	letter-spacing: 0.01em;
}

.fsp-card h2 { margin: 0 0 0.6rem; font-size: 1.45rem; line-height: 1.25; }

.fsp-card h3 {
	margin: 1.4rem 0 0.5rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fsp-muted);
}

/* ----- Tabs ----- */

.fsp-tabs {
	display: flex;
	gap: 0.25rem;
	margin-bottom: 1.35rem;
	border-bottom: 1px solid var(--fsp-line);
}

.fsp-tab {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 0.55rem 0.85rem;
	font: inherit;
	font-size: 0.92rem;
	color: var(--fsp-muted);
	cursor: pointer;
	transition: color 120ms ease;
}

.fsp-tab:hover { color: var(--fsp-ink); }

.fsp-tab.is-active {
	color: var(--fsp-pine);
	font-weight: 600;
	border-bottom-color: var(--fsp-brass);
}

/* ----- Forms ----- */

/* Elements toggled via the `hidden` attribute (e.g. the amount row in
   pre-agreed mode) must actually hide, even when their own selector (like
   .fsp-form label's display:grid) would otherwise outrank the browser's
   built-in [hidden]{display:none} rule. */
.fsp [hidden] {
	display: none !important;
}

.fsp-form { display: grid; gap: 1rem; }

.fsp-form label {
	display: grid;
	gap: 0.35rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.fsp-form small {
	font-weight: 400;
	color: var(--fsp-muted);
}

.fsp-form input,
.fsp-form select,
.fsp-form textarea {
	font: inherit;
	font-size: 1rem;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--fsp-line);
	border-radius: 9px;
	background: #fff;
	color: var(--fsp-ink);
	width: 100%;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.fsp-form input:focus,
.fsp-form select:focus,
.fsp-form textarea:focus {
	outline: none;
	border-color: var(--fsp-pine);
	box-shadow: 0 0 0 3px var(--fsp-sea);
}

.fsp-btn:focus-visible,
.fsp-tab:focus-visible,
.fsp-item:focus-visible,
.fsp-drop:focus-visible {
	outline: 2px solid var(--fsp-pine);
	outline-offset: 2px;
}

/* Money input: the $ sits inside the field; figures are tabular. */
.fsp-money {
	display: flex;
	align-items: center;
	border: 1px solid var(--fsp-line);
	border-radius: 9px;
	background: #fff;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.fsp-money:focus-within {
	border-color: var(--fsp-pine);
	box-shadow: 0 0 0 3px var(--fsp-sea);
}

.fsp-money span {
	padding: 0 0 0 0.8rem;
	color: var(--fsp-muted);
	font-family: var(--fsp-display);
}

.fsp-money input {
	border: 0;
	box-shadow: none !important;
	font-family: var(--fsp-display);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.fsp-money input:focus { border: 0; }

/* ----- Buttons ----- */

.fsp-btn {
	appearance: none;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	padding: 0.7rem 1.25rem;
	border-radius: 9px;
	border: 1px solid var(--fsp-pine);
	background: var(--fsp-pine);
	color: #fff;
	cursor: pointer;
	transition: background-color 120ms ease, transform 80ms ease, box-shadow 120ms ease;
	box-shadow: 0 1px 2px rgba(8, 53, 39, 0.25);
}

.fsp-btn:hover:not(:disabled) { background: var(--fsp-pine-deep); }
.fsp-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }

.fsp-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.fsp-btn--ghost {
	background: transparent;
	color: var(--fsp-pine);
	box-shadow: none;
}

.fsp-btn--ghost:hover:not(:disabled) {
	background: var(--fsp-sea);
	color: var(--fsp-pine-deep);
}

.fsp-btn--danger {
	color: var(--fsp-err);
	border-color: var(--fsp-err);
}

.fsp-btn--danger:hover:not(:disabled) {
	background: var(--fsp-err-wash);
	color: var(--fsp-err);
}

.fsp-row {
	display: flex;
	gap: 0.6rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 1rem;
}

/* ----- Messages ----- */

.fsp-error {
	background: var(--fsp-err-wash);
	color: var(--fsp-err);
	border-left: 3px solid var(--fsp-err);
	border-radius: 6px;
	padding: 0.65rem 0.85rem;
	font-size: 0.86rem;
	margin-bottom: 1rem;
}

.fsp-error:empty,
.fsp-error[hidden] { display: none; }

.fsp-flash {
	border-radius: 6px;
	padding: 0.65rem 0.85rem;
	font-size: 0.86rem;
	margin: 1.25rem 1.5rem 0;
	animation: fsp-rise 240ms ease both;
}

.fsp-flash--ok {
	background: var(--fsp-sea);
	color: var(--fsp-pine-deep);
	border-left: 3px solid var(--fsp-pine);
}

.fsp-flash--err {
	background: var(--fsp-err-wash);
	color: var(--fsp-err);
	border-left: 3px solid var(--fsp-err);
}

.fsp-hint {
	font-size: 0.82rem;
	color: var(--fsp-muted);
	margin: 0.85rem 0 0;
}

.fsp-hint a { color: var(--fsp-pine); }

.fsp-hint--ok { color: var(--fsp-pine-deep); font-weight: 600; }

/* ----- THE SIGNATURE: the accountant's double rule -----
   A double underline beneath a figure means "totaled — final". Only
   agreed amounts ever carry it. */

.fsp-final {
	font-family: var(--fsp-display);
	font-variant-numeric: tabular-nums;
	border-bottom: 3px double currentColor;
	padding-bottom: 1px;
}

/* ----- Home: bar + engagement list ----- */

.fsp-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.fsp-bar h2 { margin: 0; font-size: 1.35rem; }
.fsp-bar--tight { margin-bottom: 0.85rem; }
.fsp-bar a {
	font-size: 0.85rem;
	color: var(--fsp-pine);
	text-decoration: none;
}
.fsp-bar a:hover { text-decoration: underline; }

.fsp-list { display: grid; gap: 0.6rem; }

.fsp-item {
	appearance: none;
	font: inherit;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.95rem 1.1rem;
	background: var(--fsp-card);
	border: 1px solid var(--fsp-line);
	border-radius: 12px;
	cursor: pointer;
	color: var(--fsp-ink);
	box-shadow: var(--fsp-shadow);
	transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.fsp-item:hover {
	border-color: var(--fsp-pine);
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(20, 32, 27, 0.06), 0 10px 24px -10px rgba(20, 32, 27, 0.18);
}

/* Waiting on the client: a brass ledger-margin edge. */
.fsp-item.is-action { border-left: 3px solid var(--fsp-brass); }

.fsp-item-main { display: grid; gap: 0.15rem; min-width: 0; }
.fsp-item-main strong { font-size: 0.98rem; }
.fsp-item-main small { color: var(--fsp-muted); font-size: 0.76rem; }

.fsp-item-side {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	flex: none;
}

.fsp-amount {
	font-family: var(--fsp-display);
	font-size: 1.02rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

.fsp-badge {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: 99px;
	background: var(--fsp-paper);
	border: 1px solid var(--fsp-line);
	color: var(--fsp-muted);
	white-space: nowrap;
}

.fsp-badge.is-ok {
	background: var(--fsp-sea);
	border-color: transparent;
	color: var(--fsp-pine-deep);
}

.fsp-badge.is-pending {
	background: var(--fsp-brass-wash);
	border-color: transparent;
	color: #7c5a15;
}

.fsp-badge.is-action {
	background: var(--fsp-pine);
	border-color: var(--fsp-pine);
	color: #fff;
}

.fsp-badge.is-muted { opacity: 0.65; }

/* ----- Dropzone + upload queue ----- */

.fsp-drop {
	border: 1.5px dashed #b9c8bd;
	border-radius: 12px;
	padding: 1.5rem 1.25rem;
	text-align: center;
	cursor: pointer;
	background: var(--fsp-paper);
	transition: border-color 120ms ease, background-color 120ms ease;
}

.fsp-drop p { margin: 0.15rem 0; }
.fsp-drop .fsp-hint { margin-top: 0.25rem; }

.fsp-drop:hover,
.fsp-drop.is-over,
.fsp-drop:focus-visible {
	border-color: var(--fsp-pine);
	background: var(--fsp-sea);
	outline: none;
}

.fsp-link {
	color: var(--fsp-pine);
	text-decoration: underline;
}

.fsp-queue { display: grid; gap: 0.4rem; }

.fsp-file {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 0.15rem 0.6rem;
	padding: 0.55rem 0.75rem;
	background: var(--fsp-card);
	border: 1px solid var(--fsp-line);
	border-radius: 9px;
	font-size: 0.85rem;
}

.fsp-file.is-bad {
	border-color: var(--fsp-err);
	background: var(--fsp-err-wash);
}

.fsp-file-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.fsp-file-meta {
	color: var(--fsp-muted);
	font-size: 0.76rem;
	white-space: nowrap;
}

.fsp-file.is-bad .fsp-file-meta { color: var(--fsp-err); }

.fsp-file-x {
	appearance: none;
	border: 0;
	background: none;
	font-size: 1rem;
	line-height: 1;
	color: var(--fsp-muted);
	cursor: pointer;
	padding: 0.1rem 0.3rem;
	border-radius: 5px;
}

.fsp-file-x:hover { color: var(--fsp-err); background: var(--fsp-err-wash); }

.fsp-prog {
	grid-column: 1 / -1;
	height: 3px;
	border-radius: 3px;
	background: var(--fsp-line);
	overflow: hidden;
}

.fsp-prog-bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--fsp-pine);
	transition: width 160ms ease;
}

/* ----- Detail: notes + documents ----- */

.fsp-note {
	margin: 0;
	font-size: 0.9rem;
	white-space: pre-wrap;
	color: var(--fsp-ink);
	background: var(--fsp-paper);
	border-left: 3px solid var(--fsp-line);
	border-radius: 0 8px 8px 0;
	padding: 0.6rem 0.85rem;
}

.fsp-docs { display: grid; gap: 0.4rem; }

.fsp-doc {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.55rem 0.8rem;
	background: var(--fsp-card);
	border: 1px solid var(--fsp-line);
	border-radius: 9px;
	font-size: 0.88rem;
	color: var(--fsp-pine);
	text-decoration: none;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.fsp-doc:hover {
	border-color: var(--fsp-pine);
	background: var(--fsp-sea);
}

.fsp-doc span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.fsp-doc small { color: var(--fsp-muted); white-space: nowrap; }

/* ----- Negotiation thread: ledger entries ----- */

.fsp-thread {
	display: grid;
	gap: 0.55rem;
	margin: 0.5rem 0 0.9rem;
}

.fsp-msg {
	display: grid;
	gap: 0.15rem;
	max-width: 80%;
	padding: 0.7rem 0.9rem;
	border-radius: 12px;
	font-size: 0.9rem;
	box-shadow: 0 1px 2px rgba(20, 32, 27, 0.05);
}

.fsp-msg strong {
	font-family: var(--fsp-display);
	font-weight: 400;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
}

.fsp-msg small {
	color: var(--fsp-muted);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.fsp-msg--them {
	background: var(--fsp-paper);
	border: 1px solid var(--fsp-line);
	border-bottom-left-radius: 4px;
	justify-self: start;
}

.fsp-msg--me {
	background: var(--fsp-sea);
	border: 1px solid transparent;
	border-bottom-right-radius: 4px;
	justify-self: end;
	text-align: right;
}

.fsp-msg--me small { color: var(--fsp-pine-deep); }

.fsp-msg-note {
	font-size: 0.84rem;
	white-space: pre-wrap;
}

.fsp-msg.is-sending { opacity: 0.55; }

/* Response actions: big, thumb-friendly, one tap each */

.fsp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin: 0.9rem 0;
}

.fsp-actions .fsp-btn { flex: 1 1 auto; }

.fsp-counter {
	margin: 0.5rem 0 0.9rem;
	padding: 1rem;
	background: var(--fsp-paper);
	border: 1px solid var(--fsp-line);
	border-radius: 10px;
}

/* ----- Small screens ----- */

@media (max-width: 520px) {
	.fsp-rail { font-size: 0; }              /* dots + connectors only… */
	.fsp-rail li { gap: 0; }
	.fsp-rail li.is-now { font-size: 0.68rem; gap: 0.4rem; } /* …except the current step */
	.fsp-main { padding: 1rem; }
	.fsp-card { padding: 1.15rem; }
	.fsp-mast { padding: 1.15rem 1rem 0.95rem; }
	.fsp-flash { margin: 1rem 1rem 0; }
	.fsp-item-side { flex-direction: column; align-items: flex-end; gap: 0.3rem; }
}

@media (prefers-reduced-motion: reduce) {
	.fsp *,
	.fsp-main,
	.fsp-flash {
		transition: none !important;
		animation: none !important;
	}
}

/* ===== v1.3: monthly offer ribbon =====
   A quiet, factual band in the brand's brass — urgency stated like a
   ledger note, not an infomercial. Numbers come from real agreements. */

.fsp-ribbon {
	background: var(--fsp-brass-wash);
	color: #7c5a15;
	border-bottom: 1px solid rgba(168, 123, 34, 0.25);
	padding: 0.55rem 1.5rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-align: center;
}

.fsp-ribbon.is-full {
	background: var(--fsp-sea);
	color: var(--fsp-pine-deep);
	border-bottom-color: rgba(12, 75, 60, 0.2);
	text-transform: none;
	letter-spacing: 0.01em;
	font-weight: 600;
	font-size: 0.82rem;
}

@media (max-width: 520px) {
	.fsp-ribbon { padding: 0.5rem 1rem; }
}

/* ===== v1.4: pre-agreed-price fast track =====
   For clients who've already settled a price outside the portal — a
   distinct brass tag (never the negotiation green, since nothing has
   actually been agreed IN the portal yet) plus a segmented toggle on the
   New Engagement form so the fast path is as visible as the standard one. */

.fsp-badge--brass {
	background: var(--fsp-brass-wash);
	border-color: transparent;
	color: #7c5a15;
}

.fsp-mode-tabs {
	margin-bottom: 1.1rem;
}

.fsp-mode-tabs .fsp-tab {
	flex: 1 1 auto;
	text-align: center;
	font-weight: 600;
}

@media (max-width: 520px) {
	.fsp-mode-tabs { flex-wrap: wrap; }
	.fsp-mode-tabs .fsp-tab { flex: 1 1 100%; }
}