/**
 * Fund page — front end.
 *
 * Matches the approved Claude Design mockup (GOLY_Fund_Page_-_Signal.html,
 * plus the Clarity/light screenshot) rather than the earlier design-handoff
 * prototype. Two full palettes coexist: light "Clarity" (default) and dark
 * "Signal", toggled via [data-ssf-theme] on the .ssf-fund root — see
 * class-ssf-render.php and the theme's ssf_fund_theme filter. Both directions
 * share one layout (same markup, same class names); only color tokens and a
 * handful of theme-specific values (hero background, CTA band background)
 * differ between them.
 *
 * Scoped under .ssf-fund so nothing leaks into the theme. The theme supplies
 * header, nav and footer; this file styles fund content only.
 */

.ssf-fund {
	/* ---- Light "Clarity" tokens (default) --------------------------------
	 * ink/chip-active/rule/muted/pos/neg are pulled from the mockup's own
	 * component script (the `chip`, `stat` and `tone` helpers hardcode these
	 * exact values for the light theme), not guessed from the screenshot. */
	--ssf-ink: #1a1c22;
	--ssf-body: #4a4f57;
	--ssf-muted: #6b6f78;
	--ssf-note: #808285;
	--ssf-rule: #D6D7D9;
	--ssf-rule-soft: #EDEEEF;
	--ssf-wash: #F4F5F6;
	--ssf-page-bg: #ffffff;
	--ssf-panel-bg: #ffffff;
	--ssf-accent: #008fbd;
	--ssf-accent-deep: #005a9e;
	--ssf-accent-2: #00abba;
	--ssf-accent-3: #61328d;
	--ssf-pos: #316f51;
	--ssf-neg: #ac2a37;
	--ssf-hero-bg: #0a1030;
	--ssf-hero-text: #ffffff;
	--ssf-hero-text-2: #B9BEC9;
	--ssf-hero-muted: #8b93a6;
	--ssf-btn-fg: #ffffff;
	--ssf-disclosures-bg: #F4F5F6;
	--ssf-max: 1240px;
	--ssf-radius-pill: 999px;
	--ssf-radius-panel: 0;

	background: var(--ssf-page-bg);
	color: var(--ssf-ink);
	font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
}

/* ---- Dark "Signal" tokens ------------------------------------------------
 * Pulled directly from the approved mockup HTML (not approximated): panel
 * background #141a3a, page background #0a1030, accent #00abba, the teal
 * #2cbba7 used for its MKT/distribution-amount readouts, and pos/neg
 * #51bd8b/#e08a92 (the same "toneDark" values the mockup's own script
 * hardcodes for this theme). */
.ssf-fund[data-ssf-theme="dark"] {
	--ssf-ink: #EDEFF4;
	--ssf-body: #B9BEC9;
	--ssf-muted: #8b93a6;
	--ssf-note: #7F97A5;
	--ssf-rule: rgba(255, 255, 255, .1);
	--ssf-rule-soft: rgba(255, 255, 255, .07);
	--ssf-wash: #141a3a;
	--ssf-page-bg: #0a1030;
	--ssf-panel-bg: #141a3a;
	--ssf-accent: #00abba;
	--ssf-accent-deep: #00939f;
	--ssf-accent-2: #2cbba7;
	--ssf-accent-3: #61328d;
	--ssf-pos: #51bd8b;
	--ssf-neg: #e08a92;
	--ssf-hero-bg: #0a1030;
	--ssf-hero-text: #ffffff;
	--ssf-hero-text-2: #B9BEC9;
	--ssf-hero-muted: #8b93a6;
	--ssf-btn-fg: #0a1030;
	--ssf-disclosures-bg: #070b22;
}

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

.ssf-fund > * {
	padding-inline: max(clamp(16px, 5vw, 44px), calc((100% - var(--ssf-max)) / 2));
}

.ssf-fund h1,
.ssf-fund h2,
.ssf-fund h3,
.ssf-fund h4 {
	font-family: inherit;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
	color: var(--ssf-ink);
}

.ssf-fund p {
	margin: 0 0 0.75rem;
	text-wrap: pretty;
}

/* ---- Hero ----------------------------------------------------------------
 * Signal's hero sits on a dark navy panel (#0a1030) regardless of the page
 * theme — Clarity's own screenshot shows the same dark hero band above a
 * light page, so --ssf-hero-bg is intentionally NOT swapped per theme. */

.ssf-hero {
	background: var(--ssf-hero-bg);
	color: var(--ssf-hero-text);
	padding-block: clamp(40px, 5.8vw, 76px) clamp(32px, 5vw, 56px);
	margin-bottom: 0;
}

.ssf-hero > * {
	max-width: none;
	padding-inline: 0;
}

.ssf-eyebrow {
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ssf-hero-muted);
	margin-bottom: 26px;
}

.ssf-hero__top {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px 48px;
	align-items: end;
	padding-bottom: 34px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

@media (max-width: 640px) {
	.ssf-hero__top {
		grid-template-columns: 1fr;
		text-align: left;
	}
	.ssf-hero__nav {
		text-align: left !important;
	}
}

.ssf-ticker {
	font-weight: 800;
	font-size: clamp(52px, 15vw, 150px);
	line-height: 0.78;
	letter-spacing: -0.055em;
	color: var(--ssf-hero-text);
}

.ssf-legal-name {
	font-weight: 600;
	font-size: clamp(19px, 3.4vw, 26px);
	letter-spacing: -0.01em;
	color: var(--ssf-hero-text-2);
	margin: 16px 0 0;
}

.ssf-hero__nav {
	text-align: right;
}

.ssf-hero__nav-label {
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ssf-hero-muted);
	margin: 0 0 8px;
}

.ssf-hero__nav-value {
	font-weight: 700;
	font-size: clamp(30px, 6.5vw, 60px);
	line-height: 0.9;
	letter-spacing: -0.035em;
	color: var(--ssf-hero-text);
	margin: 0;
}

.ssf-hero__nav-sub {
	font-size: 13px;
	color: var(--ssf-accent-2);
	margin: 8px 0 0;
}

.ssf-statement {
	font-weight: 600;
	font-size: clamp(23px, 4.8vw, 38px);
	line-height: 1.18;
	letter-spacing: -0.03em;
	color: var(--ssf-hero-text);
	margin: 38px 0 0;
	max-width: 34ch;
}

.ssf-hl {
	color: var(--ssf-accent-2);
}

.ssf-support {
	font-size: 16px;
	line-height: 1.62;
	color: var(--ssf-hero-text-2);
	margin: 24px 0 0;
	max-width: 62ch;
}

.ssf-herostats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1px;
	background: var(--ssf-page-bg);
	border: 1px solid rgba(255, 255, 255, .1);
	margin: 32px 0 0;
}

.ssf-herostat {
	background: var(--ssf-panel-bg);
	border: 1px solid rgba(255, 255, 255, .1);
	padding: 20px 18px;
}

.ssf-herostat dt {
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ssf-hero-muted);
	margin-bottom: 10px;
	line-height: 1.4;
}

.ssf-herostat dd {
	margin: 0;
}

.ssf-herostat__v {
	font-weight: 700;
	font-size: clamp(19px, 3.4vw, 26px);
	letter-spacing: -0.02em;
	color: var(--ssf-hero-text);
}

.ssf-herostat__n {
	font-size: 12px;
	color: var(--ssf-hero-text-2);
	margin-top: 4px;
}

.ssf-cta--hero {
	padding: 0;
	margin-top: 32px;
	max-width: none;
}

/* ---- Sections -------------------------------------------------------------
 * Below the hero, sections sit on the page background (white for Clarity,
 * navy for Signal) with hairline rules — the mockup does not repeat the dark
 * hero panel for every section. */

.ssf-section {
	padding-block: clamp(32px, 4.9vw, 64px);
	border-bottom: 1px solid var(--ssf-rule);
}

.ssf-section:last-of-type {
	border-bottom: 0;
}

.ssf-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.ssf-section__head h2,
.ssf-section > h2 {
	font-size: clamp(19px, 3.4vw, 26px);
	font-weight: 700;
	letter-spacing: -0.025em;
}

.ssf-asof {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ssf-note);
	margin: 0;
}

/* Performance's "Return" column (NAV / Market Price) is much shorter than
   Holdings' name column, which otherwise naturally compresses the numeric
   columns into an evenly-spaced cluster via the table's default
   content-based auto-layout. With that much leftover width to distribute
   across only 5 short, similar-length data columns, auto-layout can split
   it unevenly rather than evenly — fixed-layout with one explicit column
   width (the rest share the remainder equally) gives predictable, even
   spacing regardless of content length. Scoped to this table specifically
   so Holdings' own (intentionally content-driven, wider) name column is
   unaffected. */
.ssf-table--perf {
	table-layout: fixed;
}
.ssf-table--perf th:first-child,
.ssf-table--perf td:first-child {
	width: 140px;
}
/* .ssf-table thead th's left-align has higher specificity (1 class + 2 type
   selectors) than plain .ssf-num (1 class alone), so a numeric column's
   header stayed forced left even with .ssf-num applied, while its data
   cells below — with no competing thead-specific rule to out-rank .ssf-num
   — correctly went right. That's exactly why the headers and the numbers
   under them didn't line up. This is scoped to .ssf-table--perf specifically
   (not every .ssf-num header everywhere) since Holdings' own left-align
   override is already specific enough to apply uniformly there with no
   equivalent mismatch to fix. */
.ssf-table--perf thead th.ssf-num {
	text-align: right;
}

/* Holdings' numeric columns (Market value %, Market value, Shares) default
   to right-aligned, matching standard financial-table convention — this
   overrides that specifically for Holdings per request, without affecting
   Performance or Distributions, which also use .ssf-num for their own
   numeric columns. */
.ssf-table--holdings .ssf-num {
	text-align: left;
}

.ssf-download {
	margin: 0 0 14px;
}
.ssf-download a {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--ssf-accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}
.ssf-download a:hover {
	opacity: 0.8;
}

/* ---- Distribution calendar modal ------------------------------------------- */

.ssf-cal-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
	background: none;
	border: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--ssf-accent);
	cursor: pointer;
}
.ssf-cal-trigger:hover {
	opacity: 0.8;
}

.ssf-cal-modal {
	width: min(900px, calc(100vw - 48px));
	max-height: min(80vh, 760px);
	padding: 0;
	border: none;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	color: var(--ssf-ink);
	background: var(--ssf-page-bg);
}
.ssf-cal-modal::backdrop {
	background: rgba(10, 10, 20, 0.55);
}
.ssf-cal-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--ssf-rule);
	position: sticky;
	top: 0;
	background: inherit;
}
.ssf-cal-modal__head h2 {
	margin: 0;
	font-size: 1.1rem;
}
.ssf-cal-modal__close {
	flex: none;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: var(--ssf-wash, rgba(0, 0, 0, 0.05));
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	color: var(--ssf-ink);
	cursor: pointer;
}
.ssf-cal-modal__body {
	padding: 20px 24px 28px;
	overflow-y: auto;
}
.ssf-table--cal th:first-child,
.ssf-table--cal td:first-child {
	white-space: nowrap;
}
.ssf-cal-notes {
	margin: 20px 0 0;
	padding-left: 20px;
	font-size: 13.5px;
	color: var(--ssf-body);
}
.ssf-cal-notes li {
	margin-bottom: 6px;
}
.ssf-cal-rules {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--ssf-note);
	line-height: 1.7;
}
.ssf-cal-subhead {
	margin: 24px 0 10px;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ssf-ink);
}

/* ---- Fund Details & Documents ----------------------------------------------- */

.ssf-table--details th:first-child,
.ssf-table--details td:first-child {
	width: 44%;
}

.ssf-manager-bio {
	margin-top: 18px;
	padding: 18px 20px;
	background: var(--ssf-wash);
	border-radius: 8px;
}
.ssf-manager-bio__name {
	margin: 0 0 8px;
	font-weight: 700;
	color: var(--ssf-ink);
}
.ssf-manager-bio ul {
	margin: 0;
	padding-left: 18px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ssf-body);
}
.ssf-manager-bio li {
	margin-bottom: 4px;
}

.ssf-doc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 24px;
}
.ssf-doc-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ssf-rule-soft);
}
.ssf-doc-list svg {
	flex: none;
	color: var(--ssf-note);
}
.ssf-doc-list a {
	color: var(--ssf-accent);
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
}
.ssf-doc-list a:hover {
	text-decoration: underline;
}
@media (max-width: 560px) {
	.ssf-doc-list {
		grid-template-columns: 1fr;
	}
}

.ssf-note {
	font-size: 11.5px;
	line-height: 1.7;
	color: var(--ssf-note);
	margin: 20px 0 0;
}

.ssf-empty {
	border: 1px solid var(--ssf-rule);
	background: var(--ssf-wash);
	padding: 20px 22px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ssf-muted);
	margin: 0;
}

.ssf-empty strong {
	color: var(--ssf-ink);
}

.ssf-warn {
	border-left: 3px solid #c9a227;
	background: #fdf8e8;
	padding: 0.75rem 1rem;
	font-size: 0.8125rem;
	color: #6b5a1c;
}

.ssf-warn--inline {
	margin-top: 0.625rem;
}

/* ---- Key stats ------------------------------------------------------------ */

.ssf-keystats-wrap {
	padding-top: 30px;
}

.ssf-keystats {
	display: grid;
	grid-template-columns: repeat(var(--ssf-cols, 6), minmax(0, 1fr));
	gap: 1px;
	background: var(--ssf-rule);
	border: 1px solid var(--ssf-rule);
	margin: 0 0 28px;
}

@media (max-width: 900px) {
	.ssf-keystats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.ssf-keystats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ssf-keystat {
	background: var(--ssf-panel-bg);
	padding: 20px 18px;
}

.ssf-keystat dt {
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ssf-note);
	margin-bottom: 10px;
	line-height: 1.4;
}

.ssf-keystat dd {
	margin: 0;
	font-size: clamp(19px, 3.4vw, 26px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ssf-ink);
}

/* ---- Charts ---------------------------------------------------------------
 * A sharp panel (no radius), matching every other data panel on the page —
 * only buttons, chips and badges are pill-shaped in this design. */

.ssf-chart {
	border: 1px solid var(--ssf-rule);
	background: var(--ssf-panel-bg);
	padding: 26px 24px 18px;
	min-height: 260px;
}

.ssf-chart__svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
	touch-action: none;
}

.ssf-legend {
	display: flex;
	gap: 1.125rem;
	flex-wrap: wrap;
	margin-bottom: 0.875rem;
}

.ssf-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ssf-ink);
}

.ssf-legend__item.is-off {
	color: var(--ssf-muted);
}

.ssf-legend__swatch {
	width: 18px;
	height: 3px;
	border-radius: 2px;
}

/* ---- Objective / explainer ("One dollar, two jobs" / "Follow every $100") */

.ssf-objective {
	padding-top: clamp(23px, 3.4vw, 44px);
}

.ssf-objective > h2 {
	font-size: clamp(22px, 4.4vw, 34px);
	margin-bottom: 26px;
}

.ssf-objective__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

@media (max-width: 880px) {
	.ssf-objective__grid {
		grid-template-columns: 1fr;
	}
}

.ssf-objective p {
	font-size: clamp(16px, 1.8vw, 18px);
	font-weight: 400;
	line-height: 1.6;
	color: var(--ssf-body);
	max-width: 62ch;
}

.ssf-objective p + p {
	margin-top: 1em;
}

.ssf-callout {
	border-left: 0;
	padding: 0;
}

.ssf-callout h3 {
	display: none; /* the mockup renders this copy as one flowing paragraph, not a separate labelled title */
}

.ssf-callout p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ssf-muted);
}

.ssf-explainer {
	border: 1px solid var(--ssf-rule);
	background: var(--ssf-panel-bg);
	padding: clamp(24px, 3.7vw, 32px) clamp(20px, 3vw, 30px);
	margin-top: 26px;
}

.ssf-explainer h3 {
	font-size: clamp(17px, 2.9vw, 22px);
	font-weight: 700;
	margin-bottom: 28px;
	color: var(--ssf-ink);
}

.ssf-stephead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.ssf-stepno {
	font-size: 11px;
	letter-spacing: 0.12em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ssf-ink);
}

.ssf-stepnote {
	font-size: 12.5px;
	color: var(--ssf-muted);
}

/* Bars sit in one track: a row totals 100% or less, so nothing overflows. */
.ssf-bars {
	display: flex;
	gap: 2px;
	height: 62px;
	max-width: 100%;
	margin-bottom: 26px;
}

.ssf-bar {
	flex-shrink: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 18px;
	color: #fff;
	overflow: hidden;
}

.ssf-bar--0 { background: var(--ssf-accent-deep); }
.ssf-bar--1 { background: #0173b5; }
.ssf-bar--2 { background: var(--ssf-accent); }
.ssf-bar--3 { background: var(--ssf-accent-2); }

.ssf-bar__amt {
	font-size: clamp(17px, 2.9vw, 22px);
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
}

.ssf-bar__lab {
	font-size: 13px;
	opacity: 0.92;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ssf-barnote {
	font-size: 11.5px;
	letter-spacing: 0.06em;
	color: var(--ssf-muted);
	margin: -18px 0 26px;
	text-align: right;
}

.ssf-outcomes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1px;
	background: var(--ssf-rule);
	border: 1px solid var(--ssf-rule);
}

.ssf-outcomes li {
	background: var(--ssf-panel-bg);
	padding: 18px 20px;
}

.ssf-outcomes strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--ssf-ink);
	margin-bottom: 4px;
}

.ssf-outcomes span {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ssf-muted);
}

/* ---- Components (Bond / Gold / Commodity, etc.) --------------------------- */

.ssf-components {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px;
	background: var(--ssf-rule);
	border: 1px solid var(--ssf-rule);
	border-top: 1px solid var(--ssf-rule);
}

.ssf-component {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--ssf-panel-bg);
	padding: 28px 26px;
	border-bottom: 0;
}

.ssf-component__no {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--ssf-accent);
	width: 100%;
}

.ssf-component h4 {
	font-size: clamp(17px, 2.8vw, 21px);
	font-weight: 700;
	color: var(--ssf-ink);
	letter-spacing: -0.02em;
}

.ssf-component__role {
	display: inline-flex;
	align-self: flex-start;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ssf-accent);
	border: 1px solid var(--ssf-rule);
	border-radius: var(--ssf-radius-pill);
	padding: 4px 9px;
}

.ssf-component p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ssf-muted);
	flex: 1;
}

.ssf-component__held {
	font-size: 13px;
	color: var(--ssf-body);
}

.ssf-component__out {
	border-top: 1px solid var(--ssf-rule);
	padding-top: 14px;
}

.ssf-component__out strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--ssf-ink);
	margin-bottom: 3px;
}

.ssf-component__out span {
	display: block;
	font-size: 13px;
	color: var(--ssf-muted);
}

/* ---- Tables ----------------------------------------------------------------- */

.ssf-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ssf-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.ssf-table thead th {
	text-align: left;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ssf-note);
	padding: 13px 12px;
	border-top: 1px solid var(--ssf-rule);
	border-bottom: 1px solid var(--ssf-rule);
	white-space: nowrap;
}

.ssf-table tbody th {
	text-align: left;
	font-weight: 500;
	color: var(--ssf-ink);
}

.ssf-table td,
.ssf-table tbody th {
	padding: 14px 12px;
	border-bottom: 1px solid var(--ssf-rule-soft);
	vertical-align: top;
	color: var(--ssf-body);
}

.ssf-table th:first-child,
.ssf-table td:first-child {
	padding-left: 0;
}

.ssf-table th:last-child,
.ssf-table td:last-child {
	padding-right: 0;
}

.ssf-num {
	text-align: right;
	white-space: nowrap;
	color: var(--ssf-ink);
}

.ssf-pos { color: var(--ssf-pos); }
.ssf-neg { color: var(--ssf-neg); }

.ssf-perf__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	font-weight: 700;
	color: var(--ssf-ink);
	margin: 0 0 1.25rem;
}

.ssf-perf__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ssf-perf__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ssf-accent);
	flex: none;
}

/* Explicit left padding so this doesn't sit flush against the label
   immediately before it (e.g. "CUMULATIVE (%)AS OF ...") — the two need a
   visible gap, not just a difference in weight/color to separate them. */
.ssf-perf__asof {
	padding-left: 6px;
	font-weight: 400;
	color: var(--ssf-note);
	letter-spacing: 0.06em;
}

/* ---- Premium / discount ----------------------------------------------------- */

.ssf-periods {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.ssf-chip {
	font: inherit;
	font-size: 11px;
	letter-spacing: 0.08em;
	padding: 8px 14px;
	border-radius: var(--ssf-radius-pill);
	cursor: pointer;
	border: 1px solid var(--ssf-rule);
	background: transparent;
	color: var(--ssf-muted);
}

.ssf-chip[aria-selected="true"] {
	background: var(--ssf-ink);
	border-color: var(--ssf-ink);
	color: var(--ssf-page-bg);
}

.ssf-fund[data-ssf-theme="dark"] .ssf-chip[aria-selected="true"] {
	background: var(--ssf-accent);
	border-color: var(--ssf-accent);
	color: var(--ssf-hero-bg);
}

.ssf-premium__grid {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

@media (max-width: 880px) {
	.ssf-premium__grid {
		grid-template-columns: 1fr;
	}
}

.ssf-premstats {
	margin: 0;
	border-top: 1px solid var(--ssf-rule);
}

.ssf-premstat {
	display: flex;
	justify-content: space-between;
	gap: 0.875rem;
	padding: 13px 0;
	border-bottom: 1px solid var(--ssf-rule-soft);
}

.ssf-premstat dt {
	font-size: 13.5px;
	color: var(--ssf-muted);
}

.ssf-premstat dd {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	text-align: right;
	color: var(--ssf-ink);
}

.ssf-premstat dd.is-none {
	font-weight: 400;
	color: var(--ssf-note);
}

/* ---- Details ------------------------------------------------------------ */

.ssf-details {
	margin: 0;
	border-top: 1px solid var(--ssf-rule);
	columns: 2;
	column-gap: 3rem;
}

@media (max-width: 760px) {
	.ssf-details {
		columns: 1;
	}
}

.ssf-details__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 12px 0;
	border-bottom: 1px solid var(--ssf-rule-soft);
	break-inside: avoid;
}

.ssf-details dt {
	font-size: 13.5px;
	color: var(--ssf-muted);
}

.ssf-details dd {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	text-align: right;
	color: var(--ssf-ink);
}

/* ---- Fund Documents grid: NOT YET IMPLEMENTED ----------------------------
 * The mockup shows a "Fund Documents" PDF-tile grid beside Fund Details, but
 * schema.php has no docs/documents field and render.php never outputs one —
 * this isn't a styling gap, it's a missing admin field + render section.
 * Real follow-up work (a repeater field, matching the existing "details"
 * pattern), not something to fake with unused CSS here. */

/* ---- CTA ------------------------------------------------------------------ */

.ssf-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.5rem;
	flex-wrap: wrap;
}

.ssf-cta--band {
	background: var(--ssf-hero-bg);
	background-image: radial-gradient(600px 260px at 90% 30%, rgba(215, 169, 74, .14), transparent 70%);
	color: var(--ssf-hero-text);
	border: 1px solid rgba(255, 255, 255, .14);
	padding: clamp(24px, 5vw, 40px) clamp(16px, 5vw, 44px);
	margin-block: clamp(32px, 4vw, 56px);
	margin-inline: auto;
	max-width: var(--ssf-max);
}

.ssf-cta--band h2 {
	font-size: clamp(21px, 3.9vw, 30px);
	font-weight: 700;
	letter-spacing: -0.025em;
	margin-bottom: 8px;
	color: var(--ssf-hero-text);
}

.ssf-cta--band p {
	color: var(--ssf-hero-text-2);
	font-size: 15.5px;
	margin: 0;
}

.ssf-cta__actions {
	margin: 0;
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.ssf-btn {
	display: inline-block;
	background: var(--ssf-accent);
	color: var(--ssf-btn-fg);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 26px;
	border-radius: var(--ssf-radius-pill);
	text-decoration: none;
}

.ssf-btn:hover,
.ssf-btn:focus {
	background: var(--ssf-accent-deep);
	color: var(--ssf-btn-fg);
}

/* ---- Disclosures ------------------------------------------------------------ */

.ssf-disclosures {
	background: var(--ssf-disclosures-bg);
	border-top: 1px solid var(--ssf-rule);
	max-width: none;
	padding-block: clamp(21px, 3.1vw, 40px);
}

/* A rule under the band as well, separating it from the site footer columns.
   .ssf-section:last-of-type removes the bottom border from a page's final
   section — which this usually is — so this needs the extra specificity to
   keep it. */
.ssf-section.ssf-disclosures {
	border-bottom: 1px solid var(--ssf-rule);
}

.ssf-disclosures > * {
	max-width: var(--ssf-max);
	margin-inline: auto;
}

.ssf-disclosures h2 {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 14px;
	color: var(--ssf-ink);
}

.ssf-disclosures p {
	font-size: 11.5px;
	line-height: 1.7;
	color: var(--ssf-note);
}

/* Bold / italic disclosure copy: keep weight and slant visible, and let bold
   read a step darker so emphasis survives the muted body colour. */
.ssf-disclosures strong,
.ssf-disclosures b {
	font-weight: 700;
	color: var(--ssf-body);
}
.ssf-disclosures em,
.ssf-disclosures i {
	font-style: italic;
}
.ssf-disclosures a {
	color: var(--ssf-accent);
}

/* Directly under another section: the previous section's bottom rule and this
   band's top rule are the same line — overlap them rather than doubling up. */
.ssf-section + .ssf-disclosures {
	margin-top: -1px;
}

/* ---- Print -------------------------------------------------------------- */

@media print {
	.ssf-fund {
		--ssf-max: none;
	}

	.ssf-periods,
	.ssf-legend {
		display: none;
	}

	.ssf-section {
		break-inside: avoid;
	}

	.ssf-table tr {
		break-inside: avoid;
	}

	.ssf-cta--band {
		background: none;
		color: var(--ssf-ink);
		border: 1px solid var(--ssf-rule);
	}

	.ssf-cta--band p {
		color: var(--ssf-muted);
	}
}

/* ---- Paragraph spacing, requested directly ---------------------------------- */

.ssf-fund p {
	margin: 10px 0 0.75rem;
	text-wrap: pretty;
}