/*
 * OTW-1 — Ordertune Mirror CSS
 *
 * Hand-curated. Kein Tailwind, kein Build-Step. Spiegelt das visuelle
 * Vokabular von t1.ordertune.com auf das WordPress-Theme: kompakte KPI-Cards,
 * Strategy-Tiles in einem Matrix-Grid, Locked-Cards mit Plain-Text-Label und
 * Inter-Typo (Uncode-Theme stellt Inter bereits).
 *
 * Memory: feedback_no_emojis_ever.md.
 */

/*
 * Color-Strategie: Cards + Locked-Boxen haben fixierte LIGHT-MODE-Farben
 * (weisser Background, dunkler Text), damit sie auf Dark-Theme-Pages
 * wie eine "Newspaper-Insel" wirken — immer lesbar, kein Theme-Erraten.
 *
 * Section-Titles, Breadcrumb, Prose und alle Text-Elemente AUSSERHALB
 * von Cards nutzen `color: inherit` und adoptieren damit die Theme-
 * Foreground-Color. Funktioniert auf Light- und Dark-Themes ohne
 * Theme-Detection-Hack.
 */

:root {
	--ot-card-fg-1: #0d0d0d;
	--ot-card-fg-2: #404040;
	--ot-card-fg-3: #757575;
	--ot-card-bg: #ffffff;
	--ot-locked-bg: #f4f4f3;
	--ot-border: #e5e5e5;
	--ot-border-strong: #d0d0d0;
	--ot-accent: #c8ff00;
	--ot-accent-dim: #e3ff75;
	--ot-up: #1f9d55;
	--ot-down: #c0392b;
	--ot-cta-bg: #0d0d0d;
	--ot-cta-fg: #ffffff;
	--ot-cta-bg-hover: #333333;
	--ot-radius-sm: 6px;
	--ot-radius-md: 10px;
	--ot-radius-lg: 14px;
	--ot-shadow-card: 0 1px 2px rgba(15, 15, 15, 0.04);

	/* OTW-5 Container-Width: matches WP-Theme limited content width (Uncode = 1440 px).
	   Override per Theme via :root { --ot-content-max-width: 1280px; } */
	--ot-content-max-width: 1440px;

	/* OTW-5 Tier-Color-Slots: hex codes copied from t1.ordertune.com/.../tier-line-legend.tsx
	   (TIER_LINE_HEX) so the same tier renders in the same color on tool + marketing. */
	--ot-tier-slot-0: #c8ff00;  /* Primary tier — neon lime */
	--ot-tier-slot-1: #e6e7e8;  /* Secondary — light neutral */
	--ot-tier-slot-2: #9aa0a6;  /* Tertiary — mid neutral */
	--ot-tier-slot-3: #666666;  /* Quaternary — dark neutral */
	--ot-tier-slot-4: #4d4d4d;  /* Overflow — darker neutral */
	--ot-nasdaq-line: #999999;  /* NASDAQ-100 dashed line */
}

/* Legacy aliases — alte Selektoren referenzierten --ot-fg-1/2/3 + --ot-bg-*. */
:root {
	--ot-fg-1: var(--ot-card-fg-1);
	--ot-fg-2: var(--ot-card-fg-2);
	--ot-fg-3: var(--ot-card-fg-3);
	--ot-bg-card: var(--ot-card-bg);
	--ot-bg-locked: var(--ot-locked-bg);
}

.ot-perf-metrics,
.ot-strategy-grid-section,
.ot-strategy-detail {
	font-family: Inter, "Inter var", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--ot-fg-1);
	max-width: var(--ot-content-max-width, 1440px);
	margin-left: auto;
	margin-right: auto;
	padding: 8px 0;
}

/* ─── KPI Grid (Performance Metrics + Detail KPIs) ─────────────── */

.ot-kpi-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (min-width: 640px) {
	.ot-kpi-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ot-kpi-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.ot-kpi-card,
.ot-locked-card {
	background: var(--ot-bg-card);
	border: 1px solid var(--ot-border);
	border-radius: var(--ot-radius-md);
	padding: 14px 14px 12px;
	box-shadow: var(--ot-shadow-card);
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 96px;
}

.ot-kpi-label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ot-fg-3);
}

.ot-kpi-value {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--ot-fg-1);
	font-variant-numeric: tabular-nums;
}

.ot-kpi-sublabel {
	font-size: 11px;
	color: var(--ot-fg-3);
	margin-top: 2px;
}

.ot-kpi-empty {
	font-size: 14px;
	font-weight: 500;
	color: var(--ot-fg-3);
}

/* ─── Locked Card ──────────────────────────────────────────────── */

.ot-locked-card {
	background: var(--ot-bg-locked);
	position: relative;
}

.ot-locked-label .ot-locked-tier {
	color: var(--ot-fg-2);
	font-weight: 600;
}

.ot-locked-value {
	color: transparent;
	position: relative;
	user-select: none;
}

.ot-locked-blurred {
	filter: blur(6px);
	color: var(--ot-fg-2);
	display: inline-block;
}

.ot-locked-cta {
	font-size: 12px;
	color: var(--ot-fg-2);
	text-decoration: none;
	border-bottom: 1px solid var(--ot-border);
	padding-bottom: 1px;
	margin-top: 4px;
	display: inline-block;
}

.ot-locked-cta:hover,
.ot-locked-cta:focus {
	color: var(--ot-fg-1);
	border-bottom-color: var(--ot-fg-1);
}

/* ─── Performance Filters (OTW-5) ──────────────────────────────── */

.ot-perf-filters {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 24px 0 16px;
	padding: 16px;
	background: rgba(0, 0, 0, 0.02);
	border-radius: var(--ot-radius-lg);
	color: inherit;
}

@media (min-width: 1024px) {
	.ot-perf-filters {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 18px;
	}
}

.ot-perf-filter-group {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ot-perf-filter-label {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: inherit;
	opacity: 0.55;
}

.ot-perf-filter-pills {
	display: inline-flex;
	gap: 4px;
	padding: 3px;
	background: rgba(0, 0, 0, 0.06);
	border-radius: 999px;
}

.ot-perf-pill {
	padding: 5px 11px;
	font-size: 12px;
	font-weight: 500;
	color: inherit;
	opacity: 0.65;
	border-radius: 999px;
	text-decoration: none;
	background: transparent;
	transition: background 100ms ease, opacity 100ms ease;
}

.ot-perf-pill:hover,
.ot-perf-pill:focus {
	opacity: 1;
}

.ot-perf-pill-active {
	opacity: 1;
	background: var(--ot-card-bg);
	color: var(--ot-card-fg-1);
	box-shadow: 0 1px 2px rgba(15, 15, 15, 0.08);
}

.ot-perf-filter-tabs-group {
	margin-left: auto;
}

.ot-perf-filter-tabs {
	display: inline-flex;
	border-bottom: 1px solid currentColor;
	gap: 0;
}

.ot-perf-tab {
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 500;
	color: inherit;
	opacity: 0.5;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	text-decoration: none;
}

.ot-perf-tab:hover,
.ot-perf-tab:focus {
	opacity: 0.8;
}

.ot-perf-tab-active {
	opacity: 1;
	border-bottom-color: var(--ot-accent);
}

/* Tier-Pills Bar */

.ot-perf-tier-bar {
	margin: 12px 0 24px;
	padding: 14px 16px;
	background: rgba(0, 0, 0, 0.02);
	border-radius: var(--ot-radius-lg);
}

.ot-perf-tier-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.ot-tier-pill-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ot-tier-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 500;
	color: inherit;
	opacity: 0.55;
	border: 1px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
	background: transparent;
	transition: opacity 100ms ease, background 100ms ease;
}

.ot-tier-pill:hover,
.ot-tier-pill:focus {
	opacity: 1;
}

.ot-tier-pill-selected {
	opacity: 1;
	background: rgba(200, 255, 0, 0.08);
	border-color: rgba(200, 255, 0, 0.6);
}

.ot-tier-pill-primary {
	background: rgba(200, 255, 0, 0.18);
	border-color: var(--ot-accent);
}

.ot-tier-pill-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.ot-tier-pill-dot-dashed {
	border: 1px dashed currentColor;
	background: transparent !important;
}

.ot-tier-pill-make-primary {
	font-size: 11px;
	color: inherit;
	opacity: 0.6;
	text-decoration: underline;
}

.ot-tier-pill-make-primary:hover {
	opacity: 1;
}

.ot-tier-pill-primary-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ot-accent);
}

/* Compare Card (vs NASDAQ) */

.ot-perf-block-header {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 24px;
}

@media (min-width: 1024px) {
	.ot-perf-block-header {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
}

.ot-perf-block-header-titlebar {
	flex: 1 1 auto;
}

.ot-compare-card {
	flex: 0 0 auto;
	padding: 14px 20px;
	background: var(--ot-card-bg);
	border: 1px solid var(--ot-border);
	border-radius: var(--ot-radius-md);
	color: var(--ot-card-fg-1);
	box-shadow: var(--ot-shadow-card);
	min-width: 220px;
}

.ot-compare-card-label {
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ot-card-fg-3);
	margin-bottom: 4px;
}

.ot-compare-card-value {
	font-size: 22px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.ot-compare-up {
	color: var(--ot-up);
}

.ot-compare-down {
	color: var(--ot-down);
}

.ot-compare-card-meta {
	font-size: 11px;
	color: var(--ot-card-fg-3);
	margin-top: 4px;
}

/* Strategy Attribution Table */

.ot-perf-attribution {
	margin-top: 32px;
	background: var(--ot-card-bg);
	color: var(--ot-card-fg-1);
	border: 1px solid var(--ot-border);
	border-radius: var(--ot-radius-lg);
	padding: 24px;
	box-shadow: var(--ot-shadow-card);
}

.ot-perf-attribution .ot-detail-section-title {
	margin-top: 0;
	color: var(--ot-card-fg-1);
}

.ot-attribution-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.ot-attribution-table th,
.ot-attribution-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--ot-border);
	color: var(--ot-card-fg-1);
}

.ot-attribution-table th {
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ot-card-fg-3);
	font-weight: 500;
}

/* OTW-5 v1.5.0 (2026-06-08) — Sortable column headers for Win Rate + Contribution */
.ot-attr-sort-link {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	font-weight: inherit;
	min-height: 24px;
	cursor: pointer;
	transition: color 0.15s ease;
}
.ot-attr-sort-link:hover {
	color: var(--ot-card-fg-1);
}
.ot-attr-sort-link:focus-visible {
	color: var(--ot-card-fg-1);
	outline: 2px solid var(--ot-card-fg-1);
	outline-offset: 2px;
	border-radius: 2px;
}
.ot-attr-sort-link-active {
	color: var(--ot-card-fg-1);
	font-weight: 600;
}
.ot-attr-sort-arrow {
	font-size: 10px;
	margin-left: 1px;
}

.ot-attribution-strategy-link {
	color: var(--ot-card-fg-1);
	text-decoration: none;
	font-weight: 600;
}

.ot-attribution-strategy-link:hover {
	color: var(--ot-card-fg-2);
	text-decoration: underline;
}

.ot-attribution-locked-cell {
	color: var(--ot-card-fg-3);
}

.ot-attribution-locked-blur {
	display: inline-block;
	filter: blur(5px);
	color: var(--ot-card-fg-2);
	font-weight: 500;
	margin-right: 6px;
	user-select: none;
}

.ot-attribution-locked-label {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ot-card-fg-3);
}

/* ─── Performance Block (OTW-4) ────────────────────────────────── */

.ot-perf-block {
	max-width: var(--ot-content-max-width, 1440px);
	margin: 0 auto;
	padding: 8px 0;
	font-family: Inter, "Inter var", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: inherit;
}

.ot-perf-block-header {
	margin-bottom: 24px;
}

.ot-perf-block-title {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 6px;
	color: inherit;
}

.ot-perf-block-subtitle {
	font-size: 14px;
	color: inherit;
	opacity: 0.65;
	margin: 0;
}

.ot-perf-block-chart-section {
	margin-top: 28px;
}

.ot-perf-block-chart-header {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 12px;
}

@media (min-width: 768px) {
	.ot-perf-block-chart-header {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

.ot-perf-block-chart-header .ot-detail-section-title {
	color: inherit;
}

/* Flush variant: no padding on top because header sits above */
.ot-equity-section-flush {
	margin: 0;
	padding: 18px 18px 12px;
}

.ot-perf-block-recent-trades {
	margin-top: 32px;
	background: var(--ot-card-bg);
	color: var(--ot-card-fg-1);
	border: 1px solid var(--ot-border);
	border-radius: var(--ot-radius-lg);
	padding: 24px;
	box-shadow: var(--ot-shadow-card);
}

.ot-perf-block-recent-trades .ot-detail-section-title {
	margin-top: 0;
	color: var(--ot-card-fg-1);
}

.ot-trade-return-up {
	color: var(--ot-up);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ot-trade-return-down {
	color: var(--ot-down);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ─── Strategy Hub Header (OTW-2) ──────────────────────────────── */

.ot-strategy-hub-header {
	margin-bottom: 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ot-strategy-hub-titlebar {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ot-strategy-hub-title {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
	color: inherit;
}

.ot-strategy-hub-subtitle {
	font-size: 15px;
	color: inherit;
	opacity: 0.7;
	line-height: 1.5;
	max-width: 680px;
	margin: 0;
}

.ot-strategy-hub-controls {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
	/* OTW-9: CLS-Reservation fuer mobile Stack (Filter + Sort vertical). */
	min-height: 44px;
}

@media (min-width: 768px) {
	.ot-strategy-hub-controls {
		/* OTW-9: zwei Flex-Zonen — links Filter (grow + wrap), rechts Sort (no-shrink). */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
	}
}

.ot-strategy-classification-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	/* OTW-9: nimmt verfuegbaren Platz im Desktop-Layout. */
	flex-grow: 1;
	min-width: 0;
}

.ot-classification-pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 500;
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 100ms ease, background 100ms ease;
}

.ot-classification-pill:hover,
.ot-classification-pill:focus {
	opacity: 1;
}

.ot-classification-pill-active {
	opacity: 1;
	background: var(--ot-accent);
	color: var(--ot-card-fg-1);
	border-color: var(--ot-accent);
}

.ot-strategy-sort {
	/* OTW-9: no-shrink + baseline-zentriert mit Filter-Bar. */
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: inherit;
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.ot-strategy-sort {
		/* OTW-9: Mobile-Stack — Sort sitzt full-width unter Filter-Pills. */
		width: 100%;
	}
}

.ot-strategy-sort-label {
	opacity: 0.6;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	flex-shrink: 0;
}

/* OTW-9: visueller Wrapper um natives <select>. Container haelt Border +
 * Padding + Caret-SVG; das <select> selbst hat `appearance: none` und sitzt
 * full-width im Wrapper. Caret-SVG ist absolut positioniert und pointer-
 * events-deaktiviert, damit Klicks immer am nativen Control landen.
 * `max-width: 200px` haelt die rechte Kante visuell auf Grid-Card-Kante.
 */
.ot-sort-control {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 100%;
	max-width: 200px;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.ot-sort-control {
		/* OTW-9: Mobile darf voller breit werden — Container haelt Caret-Position. */
		max-width: none;
		flex: 1;
	}
}

.ot-strategy-sort-select {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.4;
	padding: 6px 32px 6px 14px;
	border-radius: 999px;
	border: 1px solid currentColor;
	background-color: transparent;
	color: inherit;
	background-image: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	min-height: 32px;
}

.ot-strategy-sort-select:focus-visible {
	outline: 2px solid var(--ot-accent);
	outline-offset: 2px;
}

.ot-sort-caret {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: 0.6;
	transition: opacity 100ms ease, color 100ms ease;
}

.ot-sort-control:hover .ot-sort-caret,
.ot-sort-control:focus-within .ot-sort-caret {
	opacity: 1;
	color: var(--ot-accent);
}

.ot-strategy-hub-count {
	font-size: 12px;
	color: inherit;
	opacity: 0.55;
	margin: 0;
}

.ot-strategy-grid-empty-filter {
	padding: 60px 20px;
	text-align: center;
	color: inherit;
	opacity: 0.7;
	font-size: 14px;
}

.ot-strategy-grid-empty-filter a {
	color: inherit;
	text-decoration: underline;
}

/* ─── Strategy Grid ────────────────────────────────────────────── */

.ot-strategy-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 768px) {
	.ot-strategy-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ot-strategy-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ot-strategy-tile {
	display: block;
	background: var(--ot-bg-card);
	border: 1px solid var(--ot-border);
	border-radius: var(--ot-radius-lg);
	padding: 18px;
	color: var(--ot-fg-1);
	text-decoration: none;
	box-shadow: var(--ot-shadow-card);
	transition: border-color 120ms ease, transform 120ms ease;
}

.ot-strategy-tile:hover,
.ot-strategy-tile:focus {
	border-color: var(--ot-fg-2);
	transform: translateY(-1px);
}

.ot-tile-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}

.ot-tile-title {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
}

.ot-tile-new {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--ot-accent);
	color: var(--ot-fg-1);
	padding: 2px 6px;
	border-radius: 99px;
}

.ot-tile-pills {
	display: flex;
	gap: 6px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.ot-pill {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 500;
	padding: 3px 8px;
	border-radius: 99px;
	background: var(--ot-bg-locked);
	color: var(--ot-fg-2);
	border: 1px solid var(--ot-border);
}

.ot-pill-classification {
	background: var(--ot-bg-locked);
}

.ot-pill-side-long {
	border-color: var(--ot-up);
	color: var(--ot-up);
}

.ot-pill-side-short {
	border-color: var(--ot-down);
	color: var(--ot-down);
}

.ot-tile-thesis {
	font-size: 13px;
	color: var(--ot-fg-2);
	line-height: 1.4;
	margin-bottom: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ot-tile-kpis {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.ot-tile-kpi-label {
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ot-fg-3);
}

.ot-tile-kpi-value {
	font-size: 19px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ot-tile-spark {
	flex-shrink: 0;
}

.ot-tile-locked-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding-top: 10px;
	border-top: 1px dashed var(--ot-border);
}

.ot-tile-locked-mini {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ot-tile-locked-label {
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ot-fg-3);
}

.ot-tile-locked-value {
	font-size: 15px;
	font-weight: 600;
	color: var(--ot-fg-2);
	filter: blur(5px);
	user-select: none;
}

.ot-tile-locked-tier {
	font-size: 10px;
	font-weight: 500;
	color: var(--ot-fg-3);
}

/* ─── Sparkline ────────────────────────────────────────────────── */

.ot-sparkline {
	display: block;
}

.ot-sparkline path {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ot-sparkline-up path {
	stroke: var(--ot-up);
}

.ot-sparkline-down path {
	stroke: var(--ot-down);
}

.ot-sparkline-empty {
	background: var(--ot-bg-locked);
	border-radius: var(--ot-radius-sm);
}

/* ─── Updated Label ────────────────────────────────────────────── */

.ot-updated-label {
	font-size: 11px;
	color: var(--ot-fg-3);
	margin-top: 14px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ─── Chart Frame (iframe wrapper) ─────────────────────────────── */

.ot-chart-frame {
	background: transparent;
	margin: 18px 0;
	border-radius: var(--ot-radius-md);
	overflow: hidden;
}

/* ─── Strategy Detail Page ─────────────────────────────────────── */

.ot-strategy-detail-page {
	max-width: var(--ot-content-max-width, 1440px);
	margin: 0 auto;
	padding: 24px 20px 60px;
}

.ot-detail-breadcrumb {
	font-size: 12px;
	color: inherit;
	opacity: 0.6;
	margin-bottom: 14px;
}

.ot-detail-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.ot-detail-breadcrumb a:hover {
	opacity: 1;
	text-decoration: underline;
}

.ot-detail-breadcrumb span {
	margin: 0 6px;
}

.ot-detail-hero {
	margin-bottom: 28px;
	color: inherit;
}

.ot-detail-title {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
	color: inherit;
}

.ot-detail-pills {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.ot-detail-thesis {
	font-size: 17px;
	color: inherit;
	opacity: 0.85;
	line-height: 1.45;
	max-width: 680px;
	margin: 0;
}

.ot-detail-section-title {
	font-size: 18px;
	font-weight: 600;
	margin: 32px 0 14px;
	color: inherit;
}

.ot-detail-prose {
	color: inherit;
	opacity: 0.85;
	line-height: 1.6;
	max-width: 680px;
}

.ot-detail-prose p {
	margin: 0 0 12px;
}

/* Trade-Tabelle als Light-Mode-Card (sieht auf Light + Dark Themes konsistent aus). */
.ot-detail-trades {
	background: var(--ot-card-bg);
	color: var(--ot-card-fg-1);
	border: 1px solid var(--ot-border);
	border-radius: var(--ot-radius-lg);
	padding: 20px;
	box-shadow: var(--ot-shadow-card);
}

.ot-detail-trades .ot-detail-section-title {
	margin-top: 0;
	color: var(--ot-card-fg-1);
}

.ot-trades-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.ot-trades-table th,
.ot-trades-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--ot-border);
	color: var(--ot-card-fg-1);
}

.ot-trades-table th {
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ot-card-fg-3);
	font-weight: 500;
}

.ot-trades-footnote {
	font-size: 12px;
	color: var(--ot-card-fg-3);
	margin-top: 10px;
}

.ot-detail-locked-block {
	background: var(--ot-locked-bg);
	color: var(--ot-card-fg-1);
	border: 1px solid var(--ot-border);
	border-radius: var(--ot-radius-lg);
	padding: 24px;
	margin-top: 36px;
}

.ot-detail-locked-block .ot-detail-section-title {
	margin-top: 0;
	color: var(--ot-card-fg-1);
}

.ot-detail-locked-copy {
	font-size: 15px;
	color: var(--ot-card-fg-2);
	line-height: 1.5;
	max-width: 620px;
	margin: 0 0 14px;
}

.ot-detail-locked-cta {
	display: inline-block;
	background: var(--ot-cta-bg);
	color: var(--ot-cta-fg);
	font-size: 14px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: var(--ot-radius-sm);
	text-decoration: none;
}

.ot-detail-locked-cta:hover,
.ot-detail-locked-cta:focus {
	background: var(--ot-cta-bg-hover);
	color: var(--ot-cta-fg);
}

/* ─── Sexy Black Equity Curve Section (OTW-3, OTW-4) ─────────────── */

.ot-equity-section {
	background: #0d0d0d;
	color: #f5f5f5;
	border-radius: var(--ot-radius-lg);
	padding: 28px 24px 20px;
	margin: 24px 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.ot-equity-section .ot-detail-section-title {
	margin: 0 0 6px;
	color: #f5f5f5;
	font-size: 20px;
}

.ot-equity-meta {
	font-size: 13px;
	color: rgba(245, 245, 245, 0.6);
	margin-bottom: 18px;
	font-variant-numeric: tabular-nums;
}

.ot-equity-meta strong {
	color: var(--ot-accent);
	font-weight: 600;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

/* Range-Toggle pill bar above chart. */
.ot-equity-range-toggle {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 999px;
	margin-bottom: 18px;
}

.ot-equity-range-pill {
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: rgba(245, 245, 245, 0.6);
	text-decoration: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: background 100ms ease, color 100ms ease;
}

.ot-equity-range-pill:hover,
.ot-equity-range-pill:focus {
	color: #f5f5f5;
}

.ot-equity-range-pill.ot-equity-range-pill-active {
	background: rgba(200, 255, 0, 0.12);
	color: var(--ot-accent);
	box-shadow: inset 0 0 0 1px rgba(200, 255, 0, 0.3);
}

.ot-equity-svg-wrap {
	width: 100%;
	overflow: hidden;
}

.ot-equity-svg {
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
	display: block;
	background: transparent;
}

.ot-equity-svg .ot-equity-area {
	stroke: none;
}

.ot-equity-svg .ot-equity-line {
	fill: none;
	stroke: var(--ot-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ot-equity-svg .ot-equity-grid {
	stroke: rgba(245, 245, 245, 0.08);
	stroke-width: 1;
	stroke-dasharray: 3 4;
}

.ot-equity-svg .ot-equity-tick {
	fill: rgba(245, 245, 245, 0.55);
	font-size: 11px;
	font-family: Inter, system-ui, sans-serif;
	font-variant-numeric: tabular-nums;
}

.ot-equity-svg-empty {
	min-height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(245, 245, 245, 0.55);
	font-size: 13px;
	background: rgba(255, 255, 255, 0.03);
	border-radius: var(--ot-radius-md);
}

/* ─── Empty / Fallback States ──────────────────────────────────── */

.ot-perf-metrics-empty,
.ot-strategy-grid-empty,
.ot-strategy-detail-empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--ot-fg-3);
	font-size: 14px;
}

/* ─── Keyboard-Focus (WCAG 2.4.7) ──────────────────────────────── */

.ot-strategy-tile:focus-visible,
.ot-locked-cta:focus-visible,
.ot-detail-locked-cta:focus-visible,
.ot-detail-breadcrumb a:focus-visible {
	outline: 2px solid var(--ot-fg-1);
	outline-offset: 2px;
}

/* ─── Touch Targets (WCAG 2.5.5) ───────────────────────────────── */

@media (pointer: coarse) {
	.ot-detail-locked-cta {
		padding-top: 12px;
		padding-bottom: 12px;
		min-height: 44px;
	}
	.ot-locked-cta {
		padding: 8px 0;
		min-height: 24px;
	}
}

/* ─── Reduced Motion (WCAG 2.3.3) ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.ot-strategy-tile {
		transition: none;
	}
	.ot-strategy-tile:hover,
	.ot-strategy-tile:focus {
		transform: none;
	}
}

/* ─── Print ────────────────────────────────────────────────────── */

@media print {
	.ot-chart-frame,
	.ot-detail-locked-block,
	.ot-locked-card,
	.ot-tile-locked-row {
		display: none;
	}
	.ot-strategy-detail,
	.ot-perf-metrics,
	.ot-strategy-grid-section {
		max-width: 100%;
	}
}

/* ───────────────────────────────────────────────────────────────────
 * OTW-6 — Pricing-Page Tier × Strategy Matrix
 * ─────────────────────────────────────────────────────────────────── */

.ot-tier-matrix {
	width: 100%;
	max-width: var(--ot-content-max-width, 1440px);
	margin: 0 auto;
	padding: 32px 0;
	color: var(--ot-card-fg-1);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.ot-tier-matrix-header {
	margin-bottom: 24px;
	text-align: left;
}

.ot-tier-matrix-title {
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--ot-card-fg-1);
}

.ot-tier-matrix-subtitle {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ot-card-fg-2);
	margin: 0;
	max-width: 680px;
}

.ot-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* Desktop table */
/*
 * Bug-Fix (Plugin v1.6.2, 2026-06-08): Mobile-Stack-Default `display: flex`
 * MUSS vor der Desktop-Media-Query stehen. Stand vorher in v1.6.0/1.6.1
 * weiter unten in der Datei NACH dem `@media (min-width: 768px)`-Block, das
 * spätere Default überschrieb die Media-Query → Mobile-Cards wurden auch
 * auf Desktop sichtbar. Klassischer CSS-Cascading-Order-Bug.
 */
/* OTW-8 v1.11.0 — Mobile-Stack ersatzlos entfernt. Eine einzige Matrix-
 * Tabelle rendert auf jedem Viewport. Auf <768px sitzt die Tabelle in
 * einem horizontal scrollbaren Container mit sticky-first-column, damit
 * die Strategy-Spalte beim horizontalen Scrollen sichtbar bleibt. */
.ot-tier-matrix-table-wrap {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	min-height: 480px;
}

.ot-tier-matrix-table {
	width: 100%;
	min-width: 720px; /* OTW-8: verhindert Tabellen-Zerquetschung unter 720px — Container scrollt stattdessen */
	border-collapse: separate;
	border-spacing: 0;
	background: var(--ot-card-bg);
	border: 1px solid var(--ot-border);
	border-radius: var(--ot-radius-md);
	overflow: hidden;
}

/* OTW-8 — Sticky-First-Column: Strategy-Spalte bleibt beim horizontalen
 * Scroll auf Mobile sichtbar, damit User immer weiss, welche Strategy er
 * gerade in Tier-Spalten vergleicht. */
.ot-tier-matrix-table thead th:first-child,
.ot-tier-matrix-table tbody td:first-child,
.ot-tier-matrix-table tbody th:first-child,
.ot-tier-matrix-table tfoot td:first-child {
	position: sticky;
	left: 0;
	background: var(--ot-card-bg);
	z-index: 2;
}

.ot-tier-matrix-table thead th:first-child {
	background: var(--ot-locked-bg);
	z-index: 3;
}

.ot-tier-matrix-table th,
.ot-tier-matrix-table td {
	padding: 14px 16px;
	text-align: left;
	border-bottom: 1px solid var(--ot-border);
	font-size: 14px;
	vertical-align: middle;
}

.ot-tier-matrix-table thead th {
	background: var(--ot-locked-bg);
	font-weight: 600;
	font-size: 13px;
	text-align: center;
	border-bottom: 2px solid var(--ot-border-strong);
}

.ot-tier-matrix-th-strategy {
	text-align: left !important;
	min-width: 240px;
}

.ot-tier-matrix-th-tier {
	display: table-cell;
	vertical-align: middle;
	min-width: 140px;
}

.ot-tier-matrix-th-popular {
	background: linear-gradient(180deg, var(--ot-accent-dim) 0%, var(--ot-locked-bg) 80%);
	position: relative;
}

.ot-tier-matrix-popular-pill {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ot-card-fg-1);
	background: var(--ot-accent);
	padding: 2px 8px;
	border-radius: 999px;
	margin-bottom: 6px;
}

.ot-tier-matrix-tier-name {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--ot-card-fg-1);
}

.ot-tier-matrix-tier-price {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--ot-card-fg-2);
	margin-top: 2px;
}

.ot-tier-matrix-row-strategy {
	font-weight: 500;
	text-align: left !important;
}

.ot-tier-matrix-strategy-link {
	color: var(--ot-card-fg-1);
	text-decoration: none;
	font-weight: 600;
}

.ot-tier-matrix-strategy-link:hover,
.ot-tier-matrix-strategy-link:focus-visible {
	text-decoration: underline;
	color: var(--ot-card-fg-1);
}
.ot-tier-matrix-strategy-link:focus-visible {
	outline: 2px solid var(--ot-card-fg-1);
	outline-offset: 2px;
	border-radius: 2px;
}

.ot-tier-matrix-strategy-name {
	display: block;
	line-height: 1.3;
}

.ot-tier-matrix-strategy-meta {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin-top: 6px;
	font-weight: 400;
	font-size: 11px;
}

.ot-tier-matrix-strategy-class {
	color: var(--ot-card-fg-3);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ot-tier-matrix-cell-included,
.ot-tier-matrix-cell-excluded {
	text-align: center;
	min-height: 44px;
}

.ot-tier-matrix-cell-included {
	color: var(--ot-up);
}

.ot-check {
	display: inline-block;
	vertical-align: middle;
}

.ot-tier-matrix-table tbody tr:last-child th,
.ot-tier-matrix-table tbody tr:last-child td {
	border-bottom: 1px solid var(--ot-border-strong);
}

.ot-tier-matrix-tfoot-spacer {
	background: var(--ot-locked-bg);
}

.ot-tier-matrix-tfoot-cta {
	text-align: center;
	background: var(--ot-locked-bg);
	padding: 18px 12px;
}

/* OTW-8 v1.11.0 — Accent-Filled Tier-CTA. Vorher war es eine
 * `background: var(--ot-cta-bg)` (schwarz) + `color: var(--ot-cta-fg)`
 * (weiss) Variante — die Theme-Cascade `.style-light a { color: rgb(48,49,51); }`
 * (Uncode-Theme, Specifity 0,1,1) hat aber den weissen Plugin-color
 * uebersteuert, was zu dark-gray-text-on-near-black-background fuehrte
 * (Contrast ~1.5:1, WCAG AA fail — User-Brief 2026-06-08 hat das explizit
 * als unreadable kritisiert). Same Cascade-Problem wie BUG H-1 in
 * OTW-11b (auf .ot-detail-locked-cta). Selbe Loesung: Accent-Filled lime
 * background macht die foreground-color-Frage von der Theme-Cascade
 * irrelevant. Plus defensive higher-specificity (0,2,0) damit die
 * color-Resolution under our control bleibt. */
.ot-tier-cta,
.ot-tier-matrix .ot-tier-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	background: var(--ot-accent);
	color: var(--ot-card-fg-1);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--ot-radius-sm);
	transition: background-color 0.15s ease;
	white-space: nowrap;
}

.ot-tier-cta:hover,
.ot-tier-cta:focus,
.ot-tier-matrix .ot-tier-cta:hover,
.ot-tier-matrix .ot-tier-cta:focus {
	background: color-mix(in srgb, var(--ot-accent) 88%, white 12%);
	color: var(--ot-card-fg-1);
	text-decoration: none;
}

.ot-tier-cta:focus-visible {
	outline: 2px solid var(--ot-card-fg-1);
	outline-offset: 2px;
}

.ot-tier-matrix-unavailable,
.ot-tier-matrix-empty {
	min-height: 240px;
}

.ot-tier-matrix-unavailable p,
.ot-tier-matrix-empty p {
	font-size: 14px;
	color: var(--ot-card-fg-3);
}

@media (prefers-reduced-motion: reduce) {
	.ot-tier-cta {
		transition: none;
	}
}

/* OTW-8 v1.11.0 — Compact cell-padding + sticky-column shadow auf <768 px,
 * damit die Matrix-Tabelle auf Mobile lesbar bleibt ohne dass die Sticky-
 * First-Column ueber den Tier-Content quetscht. */
@media (max-width: 768px) {
	.ot-tier-matrix-table th,
	.ot-tier-matrix-table td {
		padding: 8px 12px;
		font-size: 13px;
	}
	.ot-tier-matrix-table thead th {
		font-size: 12px;
	}
	.ot-tier-matrix-tier-name {
		font-size: 14px;
	}
	.ot-tier-matrix-tier-price {
		font-size: 11px;
	}
	.ot-tier-matrix-th-strategy {
		min-width: 200px;
	}
	.ot-tier-matrix-th-tier {
		min-width: 120px;
	}
	/* Sticky-First-Column bekommt einen kleinen Schatten nach rechts damit
	 * der User erkennt, dass dahinter ein horizontal-scrollbarer Bereich ist. */
	.ot-tier-matrix-table thead th:first-child,
	.ot-tier-matrix-table tbody td:first-child,
	.ot-tier-matrix-table tbody th:first-child,
	.ot-tier-matrix-table tfoot td:first-child {
		box-shadow: 4px 0 6px -4px rgba(15, 15, 15, 0.18);
	}
}

/* ───────────────────────────────────────────────────────────────────
 * OTW-7 — Strategy-Detail Client-Side Mode-Toggle
 * ─────────────────────────────────────────────────────────────────── */

.ot-detail-mode-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	margin: 16px 0 12px;
	background: rgba(0, 0, 0, 0.04);
	border-radius: 999px;
	width: fit-content;
}

.ot-detail-mode-tab {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 500;
	color: inherit;
	opacity: 0.65;
	border-radius: 999px;
	text-decoration: none;
	background: transparent;
	transition: opacity 120ms ease, background-color 120ms ease;
	cursor: pointer;
}

.ot-detail-mode-tab:hover {
	opacity: 1;
	text-decoration: none;
}

.ot-detail-mode-tab:focus-visible {
	outline: 2px solid var(--ot-card-fg-1);
	outline-offset: 2px;
}

.ot-detail-mode-tab-active {
	opacity: 1;
	background: var(--ot-card-bg);
	color: var(--ot-card-fg-1);
	box-shadow: 0 1px 2px rgba(15, 15, 15, 0.08);
}

.ot-detail-chart-container {
	position: relative;
	min-height: 360px;
}

.ot-detail-chart-host {
	position: relative;
	min-height: 360px;
}

.ot-detail-tooltip {
	position: absolute;
	background: var(--ot-card-fg-1);
	color: var(--ot-card-bg);
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 4px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 80ms ease;
	z-index: 10;
	transform: translate(-50%, 0);
	white-space: nowrap;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ot-detail-tooltip-date {
	display: block;
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.7;
}

.ot-detail-tooltip-value {
	display: block;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Histogram bars (Monthly Signals) */

.ot-detail-histogram .ot-detail-bar {
	fill: var(--ot-card-fg-2);
	transition: fill 100ms ease;
}

.ot-detail-histogram .ot-detail-bar:hover {
	fill: var(--ot-card-fg-1);
}

.ot-detail-histogram .ot-detail-bar-current {
	fill: var(--ot-accent);
}

.ot-detail-histogram .ot-detail-bar-current:hover {
	fill: var(--ot-accent);
	opacity: 0.85;
}

/* FOMO under monthly-signals mode */

.ot-detail-signals-fomo {
	margin-top: 16px;
	padding: 16px 18px;
	background: var(--ot-locked-bg);
	border: 1px solid var(--ot-border);
	border-radius: var(--ot-radius-md);
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.ot-detail-signals-fomo-copy {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ot-card-fg-2);
}

.ot-detail-signals-fomo-copy strong {
	color: var(--ot-card-fg-1);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.ot-detail-mode-tab,
	.ot-detail-tooltip,
	.ot-detail-histogram .ot-detail-bar {
		transition: none;
	}
}

/* ───────────────────────────────────────────────────────────────────
 * OTW-10 — Strategy-Detail Chart Parity R2
 *
 * Filter-Bar lives OUTSIDE the dark `.ot-detail-chart-frame`. The frame
 * is canvas-only (SVG + tooltip layer). Header + chart-purpose copy +
 * FOMO banner sit on the page-theme background (light).
 *
 * Plugin v1.9.0 (2026-06-08).
 * ─────────────────────────────────────────────────────────────────── */

.ot-detail-strategy-chart {
	margin: 24px 0;
}

.ot-detail-chart-header {
	margin: 0 0 16px;
}

.ot-detail-chart-header .ot-detail-section-title {
	margin: 0 0 6px;
	font-size: 22px;
	color: inherit;
}

.ot-detail-chart-meta {
	margin: 0 0 12px;
	font-size: 14px;
	color: inherit;
	opacity: 0.78;
	font-variant-numeric: tabular-nums;
}

.ot-detail-chart-meta strong {
	font-weight: 600;
	font-size: 16px;
	color: var(--ot-card-fg-1);
	font-variant-numeric: tabular-nums;
}

.ot-detail-chart-purpose {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.55;
	color: inherit;
	opacity: 0.78;
	max-width: 880px;
}

.ot-detail-chart-purpose-sizing {
	color: var(--ot-card-fg-1);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ── Filter Bar ─────────────────────────────────────────────────── */

.ot-detail-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: center;
	padding: 14px 16px;
	margin: 0 0 16px;
	background: var(--ot-card-bg);
	border: 1px solid var(--ot-border);
	border-radius: var(--ot-radius-md);
	color: var(--ot-card-fg-1);
}

.ot-detail-filter-group {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.ot-detail-filter-group[hidden] {
	display: none;
}

.ot-detail-filter-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ot-card-fg-3);
}

.ot-detail-filter-pills {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 3px;
	background: rgba(15, 15, 15, 0.04);
	border-radius: 999px;
}

.ot-detail-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 28px;
	padding: 4px 10px;
	border: 0;
	background: transparent;
	color: var(--ot-card-fg-2);
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	border-radius: 999px;
	cursor: pointer;
	transition: background 100ms ease, color 100ms ease;
}

.ot-detail-pill:hover {
	color: var(--ot-card-fg-1);
}

.ot-detail-pill:focus-visible {
	outline: 2px solid var(--ot-card-fg-1);
	outline-offset: 2px;
}

.ot-detail-pill.ot-detail-pill-active {
	background: var(--ot-card-bg);
	color: var(--ot-card-fg-1);
	box-shadow: 0 1px 2px rgba(15, 15, 15, 0.08);
}

/* Locked sizing pills — visible but non-interactive */
.ot-detail-pill.ot-detail-pill-locked {
	opacity: 0.55;
	cursor: not-allowed;
	color: var(--ot-card-fg-3);
}

.ot-detail-pill.ot-detail-pill-locked:hover {
	opacity: 0.55;
	color: var(--ot-card-fg-3);
}

.ot-detail-pill.ot-detail-pill-locked.ot-detail-pill-active {
	background: transparent;
	box-shadow: none;
}

.ot-detail-pill-lock-glyph {
	display: inline-flex;
	align-items: center;
	color: currentColor;
	line-height: 0;
}

/* Mode tabs (inside filter-bar) */
.ot-detail-filter-mode {
	flex: 1 1 auto;
}

.ot-detail-filter-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 3px;
	background: rgba(15, 15, 15, 0.04);
	border-radius: 999px;
}

/* Bench toggle (NASDAQ-100) */
.ot-detail-bench-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	padding: 6px 14px;
	border: 1px solid var(--ot-border-strong);
	border-radius: 999px;
	background: var(--ot-card-bg);
	color: var(--ot-card-fg-2);
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 120ms ease, color 120ms ease;
}

.ot-detail-bench-toggle:hover {
	color: var(--ot-card-fg-1);
	border-color: var(--ot-card-fg-1);
}

.ot-detail-bench-toggle:focus-visible {
	outline: 2px solid var(--ot-card-fg-1);
	outline-offset: 2px;
}

.ot-detail-bench-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1.5px dashed var(--ot-nasdaq-line);
	background: transparent;
	transition: background 120ms ease;
}

.ot-detail-bench-toggle.ot-detail-bench-toggle-on .ot-detail-bench-dot {
	background: var(--ot-nasdaq-line);
}

.ot-detail-bench-toggle.ot-detail-bench-toggle-on {
	color: var(--ot-card-fg-1);
	border-color: var(--ot-card-fg-1);
}

.ot-detail-bench-toggle.ot-detail-bench-toggle-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.ot-detail-bench-toggle.ot-detail-bench-toggle-disabled:hover {
	color: var(--ot-card-fg-2);
	border-color: var(--ot-border-strong);
}

/* No-JS fallback row */
.ot-detail-filter-noscript {
	width: 100%;
	font-size: 13px;
	color: var(--ot-card-fg-2);
}

.ot-detail-filter-noscript-row a {
	margin-right: 8px;
	text-decoration: underline;
}

/* ── Dark Chart Frame ───────────────────────────────────────────── */

.ot-detail-chart-frame {
	position: relative;
	background: #0d0d0d;
	color: #f5f5f5;
	border-radius: var(--ot-radius-lg);
	padding: 20px 16px 12px;
	min-height: 480px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.ot-detail-chart-frame .ot-detail-chart-host {
	position: relative;
	min-height: 400px;
}

/* Axis labels inside the dark chart-frame: bright white-ish for contrast */
.ot-detail-chart-frame .ot-equity-svg .ot-equity-axis-label {
	fill: rgba(245, 245, 245, 0.78);
	font-size: 11px;
	font-family: Inter, system-ui, sans-serif;
	font-variant-numeric: tabular-nums;
}

.ot-detail-chart-frame .ot-equity-svg .ot-equity-grid {
	stroke: rgba(245, 245, 245, 0.08);
	stroke-width: 1;
	stroke-dasharray: 3 4;
}

.ot-detail-chart-frame .ot-equity-svg .ot-equity-line {
	fill: none;
	stroke: var(--ot-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ot-detail-chart-frame .ot-equity-svg .ot-equity-area {
	fill: rgba(200, 255, 0, 0.18);
	stroke: none;
}

.ot-detail-chart-frame .ot-equity-svg .ot-equity-area-drawdown {
	fill: rgba(200, 255, 0, 0.18);
}

.ot-detail-chart-frame .ot-equity-svg .ot-equity-line-nasdaq {
	fill: none;
	stroke: var(--ot-nasdaq-line);
	stroke-width: 1.5;
	stroke-dasharray: 4 2;
	stroke-linecap: round;
}

.ot-detail-chart-frame .ot-equity-svg .ot-equity-area-nasdaq {
	fill: rgba(153, 153, 153, 0.08);
	stroke: none;
}

.ot-detail-chart-frame .ot-equity-svg .ot-equity-dot {
	fill: var(--ot-accent);
	stroke: rgba(0, 0, 0, 0.6);
	stroke-width: 1;
}

/* Availability marker: dashed vertical line at strategyAvailableFrom */
.ot-detail-chart-frame .ot-equity-svg .ot-detail-availability-marker {
	stroke: rgba(245, 245, 245, 0.35);
	stroke-width: 1;
	stroke-dasharray: 2 3;
}

/* Mode axis label badge bottom-right */
.ot-detail-chart-frame .ot-equity-axis-label-mode {
	position: absolute;
	bottom: 10px;
	right: 16px;
	font-size: 11px;
	color: rgba(245, 245, 245, 0.45);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ot-detail-chart-frame .ot-equity-svg-empty {
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(245, 245, 245, 0.55);
	font-size: 14px;
}

/* ── Monthly-Signals Histogram (Restyle) ─────────────────────────── */

.ot-detail-chart-frame .ot-detail-histogram .ot-detail-bar {
	fill: rgba(245, 245, 245, 0.30);
	transition: fill 100ms ease;
}

.ot-detail-chart-frame .ot-detail-histogram .ot-detail-bar:hover {
	fill: rgba(245, 245, 245, 0.55);
}

.ot-detail-chart-frame .ot-detail-histogram .ot-detail-bar-current {
	fill: var(--ot-accent);
}

.ot-detail-chart-frame .ot-detail-histogram .ot-detail-bar-current:hover {
	fill: var(--ot-accent);
	opacity: 0.85;
}

/* ── FOMO Banner — Light Card on Dark Page ───────────────────────── */

.ot-detail-signals-fomo {
	margin-top: 16px;
	padding: 18px 20px;
	background: var(--ot-card-bg);
	border: 1px solid var(--ot-border);
	border-radius: var(--ot-radius-md);
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
	color: var(--ot-card-fg-1);
}

.ot-detail-signals-fomo[hidden] {
	display: none;
}

.ot-detail-signals-fomo .ot-detail-signals-fomo-copy {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ot-card-fg-2);
}

.ot-detail-signals-fomo .ot-detail-signals-fomo-copy strong {
	color: var(--ot-card-fg-1);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ot-detail-fomo-cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: var(--ot-radius-sm);
	background: var(--ot-accent);
	color: var(--ot-card-fg-1);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 120ms ease;
}

.ot-detail-fomo-cta:hover,
.ot-detail-fomo-cta:focus {
	background: color-mix(in srgb, var(--ot-accent) 88%, white 12%);
	color: var(--ot-card-fg-1);
	text-decoration: none;
}

.ot-detail-fomo-cta:focus-visible {
	outline: 2px solid var(--ot-card-fg-1);
	outline-offset: 2px;
}

/* ── sr-only helper (paid-feature description target) ─────────────── */

.ot-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Mobile ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.ot-detail-filter-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.ot-detail-filter-group {
		flex-wrap: wrap;
	}
	.ot-detail-filter-mode {
		order: 3;
	}
	.ot-detail-filter-bench {
		order: 4;
		justify-content: flex-start;
	}
	.ot-detail-chart-frame {
		padding: 16px 10px 10px;
		min-height: 380px;
	}
	.ot-detail-chart-frame .ot-detail-chart-host {
		min-height: 320px;
	}
}

@media (pointer: coarse) {
	.ot-detail-pill,
	.ot-detail-mode-tab,
	.ot-detail-bench-toggle {
		min-height: 44px;
	}
	.ot-detail-fomo-cta {
		min-height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ot-detail-pill,
	.ot-detail-bench-toggle,
	.ot-detail-fomo-cta,
	.ot-detail-chart-frame .ot-detail-histogram .ot-detail-bar {
		transition: none;
	}
}

/* ───────────────────────────────────────────────────────────────────
 * OTW-11 — Performance-Block R2
 *
 * Drawdown-direction-fix: the multi-tier SVG now anchors the primary
 * tier's area path to y=0 in drawdown mode (above the curve). The
 * server-render emits an extra .ot-equity-area-drawdown class and
 * drops the gradient fill so this rule's solid accent shows through.
 *
 * Make-primary button: native <button> needs a reset so it visually
 * matches the legacy <a class="ot-tier-pill-make-primary"> styling.
 *
 * Plugin v1.10.0 (2026-06-08).
 * ─────────────────────────────────────────────────────────────────── */

/* OTW-11 §B Drawdown-Direction-Fix — area between y=0 (top) and curve. */
.ot-equity-svg .ot-equity-area.ot-equity-area-drawdown {
	fill: rgba(200, 255, 0, 0.18);
	stroke: none;
}

/* OTW-11 — <button class="ot-tier-pill-make-primary"> reset to match the
 * legacy <a> styling 1:1. WordPress themes often style buttons aggressively
 * (background, border, padding) so we strip the box-model and rely on the
 * existing .ot-tier-pill-make-primary <a>-styled rule for color + spacing. */
button.ot-tier-pill-make-primary {
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

button.ot-tier-pill-make-primary:hover,
button.ot-tier-pill-make-primary:focus-visible {
	color: var(--ot-card-fg-1);
	text-decoration: underline;
}

button.ot-tier-pill-make-primary:focus-visible {
	outline: 2px solid var(--ot-card-fg-1);
	outline-offset: 2px;
}

/* OTW-11 / OTW-11b — Accent-Filled CTA used by both the Live-Signals
 * Locked-Block CTAs on the Performance Block (`/trading-performance/`) and
 * the Strategy-Detail page (`/trading-strategies/{slug}/`).
 *
 * The original v1.5.x..v1.10.0 implementations reused `.ot-detail-locked-cta`
 * here, which left the CTA effectively invisible on production because the
 * Uncode theme's `.style-light a { color: rgb(48,49,51); }` rule (specificity
 * 0,1,1) won the cascade against our `.ot-detail-locked-cta { color: var(--ot-cta-fg); }`
 * (specificity 0,1,0). The CTA text rendered dark-gray on near-black background
 * (~1.5:1 contrast, WCAG AA fail). v1.10.1 (OTW-11b) switches the Locked-Block
 * CTAs to `.ot-perf-cta` to sidestep the cascade entirely — the high-luminance
 * lime accent background makes the dark-gray foreground color readable
 * regardless of which rule wins the cascade.
 *
 * Defensive: the selectors below target both wrapping contexts explicitly
 * (`.ot-strategy-detail .ot-perf-cta` and `.ot-perf-block .ot-perf-cta`) so
 * the rule's specificity (0,2,0) beats `.style-light a` (0,1,1) on the
 * `color` declaration too. Belt-and-suspenders against future cascade
 * changes. */
.ot-perf-cta,
.ot-strategy-detail .ot-perf-cta,
.ot-perf-block .ot-perf-cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: var(--ot-radius-sm);
	background: var(--ot-accent);
	color: var(--ot-card-fg-1);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 120ms ease;
}

.ot-perf-cta:hover,
.ot-perf-cta:focus,
.ot-strategy-detail .ot-perf-cta:hover,
.ot-strategy-detail .ot-perf-cta:focus,
.ot-perf-block .ot-perf-cta:hover,
.ot-perf-block .ot-perf-cta:focus {
	background: color-mix(in srgb, var(--ot-accent) 88%, white 12%);
	color: var(--ot-card-fg-1);
	text-decoration: none;
}

.ot-perf-cta:focus-visible {
	outline: 2px solid var(--ot-card-fg-1);
	outline-offset: 2px;
}

/* OTW-11 — accent-color underlined link inside the attribution footnote.
 * Keeps the call-to-action subtle but distinguishable from body text. */
.ot-perf-attribution .ot-trades-footnote a {
	color: var(--ot-card-fg-1);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ot-perf-attribution .ot-trades-footnote a:hover {
	text-decoration: none;
}

/* OTW-11 — KPI tile value transitions softly when JS swaps the value on
 * primary-tier-toggle. Respects prefers-reduced-motion. */
.ot-kpi-card [data-ot-kpi-value] {
	transition: opacity 100ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.ot-kpi-card [data-ot-kpi-value] {
		transition: none;
	}
}