/*
 * Outliyr Interventions — base design tokens shared by single + archive.
 * Light mode only. Outliyr never uses dark mode — all tokens are flat colors.
 */

:root {
	color-scheme: light;

	--oi-accent: #3DA5FF;
	--oi-accent-rgb: 61, 165, 255;

	--oi-bg:          #ffffff;
	--oi-bg-raised:   #f7fafc;
	--oi-bg-sunken:   #eef2f7;
	--oi-border:      #e2e8f0;
	--oi-border-soft: #edf2f7;

	--oi-text:      #1a202c;
	--oi-text-soft: #4a5568;
	--oi-text-dim:  #718096;
	--oi-text-faint:#94a3b8;

	--oi-tier-top:     linear-gradient(135deg, #16a34a, #15803d);
	--oi-tier-strong:  linear-gradient(135deg, #22c55e, #16a34a);
	--oi-tier-worth:   linear-gradient(135deg, #65a30d, #4d7c0f);
	--oi-tier-neutral: linear-gradient(135deg, #ca8a04, #a16207);
	--oi-tier-caution: linear-gradient(135deg, #ea580c, #c2410c);
	--oi-tier-skip:    linear-gradient(135deg, #dc2626, #b91c1c);

	--oi-up: #16a34a;
	--oi-up-bg: #dcfce7;
	--oi-down: #dc2626;
	--oi-down-bg: #fee2e2;

	--oi-radius: 5px;
	--oi-radius-sm: 3px;
	--oi-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .04);
	--oi-shadow-strong: 0 4px 20px rgba(15, 23, 42, .1);

	--oi-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--oi-font-mono: "SF Mono", Menlo, Consolas, monospace;

	--oi-max-width: 1050px;
	--oi-content-width: 720px;
}

body.oi-single-intervention,
body.oi-archive-intervention {
	background: var(--oi-bg);
	color: var(--oi-text);
	font-family: var(--oi-font);
	-webkit-font-smoothing: antialiased;
}

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

/* ── Referral gate banner ────────────────────────────────────────── */
.oi-gate-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1rem;
	background: var(--oi-bg-raised);
	border: 1px solid var(--oi-border);
	border-radius: var(--oi-radius-sm);
}

.oi-gate-text {
	font-size: 0.9rem;
	color: var(--oi-text-soft);
}

.oi-gate-cta {
	white-space: nowrap;
	font-weight: 600;
	color: var(--oi-accent);
	text-decoration: none;
}

.oi-gate-cta:hover {
	text-decoration: underline;
}

/* ── Early access badge ──────────────────────────────────────────── */
.oi-early-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.15em 0.5em;
	margin-left: 0.5rem;
	background: var(--oi-accent, #3DA5FF);
	color: #fff;
	border-radius: var(--oi-radius-sm, 3px);
	vertical-align: middle;
}

.oi-early-teaser {
	max-width: 600px;
	margin: 4rem auto;
	text-align: center;
}

.oi-early-teaser h1 {
	margin-bottom: 2rem;
}

/* ── Early-access embargo teaser + gated content ─────────────────── */

/* When the main container is embargoed AND not unlocked client-side,
   hide the full article. The teaser (rendered above the article) stays
   visible. JS removes .oi-embargoed from the main element when the
   reader's referral tier meets the required threshold, revealing the
   gated content without a server round-trip. */
.oi-report-main.oi-embargoed .oi-gated-content { display: none; }
.oi-report-main:not(.oi-embargoed) .oi-embargo,
.oi-report-main:not(.oi-embargoed) .oi-embargo-teaser { display: none; }


.oi-embargo {
	max-width: 775px;
	margin: 5rem auto;
	padding: 2rem 2.75rem 2.75rem;
	background: var(--oi-bg-raised);
	border: 1px solid var(--oi-border);
	border-radius: 5px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 12px 40px -16px rgba(15, 23, 42, 0.08);
	position: relative;
	overflow: hidden;
	animation: oi-embargo-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Editorial accent rail on the left edge */
.oi-embargo::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 100%;
	background: linear-gradient(180deg, #3DA5FF 0%, rgba(61, 165, 255, 0.2) 100%);
}

/* Subtle corner ornament to signal "this is under wraps" */
.oi-embargo::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 120px;
	height: 120px;
	background: radial-gradient(circle at 100% 0%, rgba(61, 165, 255, 0.06) 0%, transparent 60%);
	pointer-events: none;
}

@keyframes oi-embargo-in {
	0%   { opacity: 0; transform: translateY(8px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* ── Eyebrow ──────────────────────────────────────── */
.oi-embargo__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.75rem;
}

.oi-embargo__pulse {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #3DA5FF;
	box-shadow: 0 0 0 0 rgba(61, 165, 255, 0.4);
	animation: oi-embargo-pulse 2s ease-in-out infinite;
}

@keyframes oi-embargo-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(61, 165, 255, 0.5); }
	70%  { box-shadow: 0 0 0 8px rgba(61, 165, 255, 0);   }
	100% { box-shadow: 0 0 0 0   rgba(61, 165, 255, 0);   }
}

.oi-embargo__eyebrow-text {
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oi-text-soft, #64748b);
}

/* ── Title ──────────────────────────────────────── */
.oi-embargo__title {
	font-family: var(--oi-font);
	font-weight: 700;
	font-size: clamp(2.1rem, 5.2vw, 3.2rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 1.4rem;
	color: var(--oi-text, #0f172a);
	text-wrap: balance;
}

/* ── Summary ──────────────────────────────────────── */
.oi-embargo__summary {
	font-family: inherit;
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--oi-text-soft, #475569);
	margin: 0 0 2.25rem;
	max-width: 65ch;
}

/* ── Score + Tier meta row ──────────────────────────────────────── */
.oi-embargo__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2.25rem;
	padding: 1.5rem 0;
	border-top: 1px solid var(--oi-border, #e2e8f0);
	border-bottom: 1px solid var(--oi-border, #e2e8f0);
	margin-bottom: 2.25rem;
}

.oi-embargo__meta-cell {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.oi-embargo__meta-label {
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oi-text-dim, #94a3b8);
}

.oi-embargo__score {
	font-family: var(--oi-font);
	font-weight: 600;
	font-size: 2.35rem;
	line-height: 1;
	color: var(--oi-text, #0f172a);
	user-select: none;
	display: flex;
	align-items: baseline;
	gap: 0.2rem;
}

.oi-embargo__score-blur {
	display: inline-block;
	filter: blur(9px);
	-webkit-filter: blur(9px);
}

.oi-embargo__score-denom {
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--oi-text-dim, #94a3b8);
	letter-spacing: 0;
}

.oi-embargo__tier {
	align-self: end;
	padding: 0.55rem 0.95rem;
	background: var(--oi-bg, #f8fafc);
	border: 1px solid var(--oi-border, #e2e8f0);
	border-radius: 4px;
	user-select: none;
	width: fit-content;
	max-width: 100%;
}

.oi-embargo__tier-blur {
	display: inline-block;
	filter: blur(4px);
	-webkit-filter: blur(4px);
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--oi-text-soft, #475569);
	letter-spacing: 0.04em;
}

/* ── Unlock countdown ──────────────────────────────────────── */
.oi-embargo__unlock {
	margin-bottom: 2.25rem;
}

.oi-embargo__unlock-label {
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oi-text-dim, #94a3b8);
	margin-bottom: 0.45rem;
}

.oi-embargo__unlock-value {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
}

.oi-embargo__unlock-num {
	font-family: var(--oi-font);
	font-weight: 600;
	font-size: 3.2rem;
	line-height: 1;
	color: var(--oi-text, #0f172a);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.oi-embargo__unlock-unit {
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--oi-text-soft, #475569);
	letter-spacing: -0.005em;
}

.oi-embargo__unlock-date {
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	font-size: 0.88rem;
	color: var(--oi-text-dim, #94a3b8);
	margin-top: 0.35rem;
}

.oi-embargo__unlock-alt {
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	font-size: 0.92rem;
	color: var(--oi-text-soft, #475569);
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--oi-border, #e2e8f0);
	line-height: 1.55;
}

.oi-embargo__unlock-or {
	color: var(--oi-text-dim, #94a3b8);
	font-style: italic;
}

.oi-embargo__unlock-refer {
	font-weight: 600;
	color: var(--oi-text, #0f172a);
}

.oi-embargo__unlock-instant {
	color: var(--oi-text-soft, #475569);
}

/* ── Inline referral block (shown when profile exists) ────────────── */
.oi-embargo__profile {
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.4rem;
	background: var(--oi-bg, #f8fafc);
	border: 1px solid var(--oi-border, #e2e8f0);
	border-radius: 4px;
}

.oi-embargo__profile-stat {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	margin-bottom: 1rem;
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

.oi-embargo__profile-count {
	font-family: var(--oi-font);
	font-weight: 600;
	font-size: 2rem;
	line-height: 1;
	color: var(--oi-text, #0f172a);
	font-variant-numeric: tabular-nums;
}

.oi-embargo__profile-count-label {
	font-size: 0.92rem;
	color: var(--oi-text-soft, #475569);
}

.oi-embargo__profile-link-label {
	display: block;
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oi-text-dim, #94a3b8);
	margin-bottom: 0.45rem;
}

.oi-embargo__profile-link-row {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}

.oi-embargo__profile-link-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--oi-border, #e2e8f0);
	border-radius: 4px;
	background: #fff;
	color: var(--oi-text, #0f172a);
	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
	font-size: 0.85rem;
	line-height: 1.3;
}

.oi-embargo__profile-link-input:focus {
	outline: 2px solid #3DA5FF;
	outline-offset: 1px;
}

.oi-embargo__profile-copy {
	flex: 0 0 auto;
	padding: 0.6rem 1.1rem;
	background: #3DA5FF;
	color: #fff;
	border: 1px solid #3DA5FF;
	border-radius: 4px;
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.oi-embargo__profile-copy:hover {
	background: #2b8fe6;
	border-color: #2b8fe6;
}

.oi-embargo__profile-copy-status {
	display: block;
	margin-top: 0.55rem;
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	font-size: 0.82rem;
	color: #15803d;
	min-height: 1em;
}

/* ── Retake (demoted when profile exists) ──────────────────── */
.oi-embargo__cta-primary.oi-embargo__cta--retake {
	background: transparent;
	border: none;
	color: var(--oi-text-dim, #94a3b8) !important;
	padding: 0.5rem 0;
	font-size: 0.85rem;
	font-weight: 500;
	justify-content: flex-start;
	gap: 0.35rem;
	box-shadow: none;
}
.oi-embargo__cta-primary.oi-embargo__cta--retake:hover {
	background: transparent;
	border: none;
	color: var(--oi-text-soft, #475569) !important;
	box-shadow: none;
	transform: none;
	text-decoration: underline;
}
.oi-embargo__cta-primary.oi-embargo__cta--retake .oi-embargo__cta-arrow {
	font-size: 0.85rem;
}

/* ── CTAs ──────────────────────────────────────── */
.oi-embargo__cta {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.oi-embargo__cta-primary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.95rem 1.4rem;
	background: #3DA5FF;
	color: #ffffff !important;
	text-decoration: none !important;
	border: 1px solid #3DA5FF;
	border-radius: 4px;
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	font-size: 0.98rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background 0.2s ease;
	cursor: pointer;
}

.oi-embargo__cta-primary:hover {
	background: #2b8fe6;
	border-color: #2b8fe6;
	transform: translateY(-1px);
	box-shadow: 0 10px 26px -10px rgba(61, 165, 255, 0.55);
}

.oi-embargo__cta-arrow {
	font-size: 1.1rem;
	font-weight: 400;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.oi-embargo__cta-primary:hover .oi-embargo__cta-arrow {
	transform: translateX(4px);
}

/* Secondary CTA styling (second in the stack) */
.oi-embargo__cta-primary + .oi-embargo__cta-primary {
	background: transparent;
	color: var(--oi-text, #0f172a) !important;
	border-color: var(--oi-border, #e2e8f0);
}

.oi-embargo__cta-primary + .oi-embargo__cta-primary:hover {
	background: var(--oi-bg, #f8fafc);
	border-color: var(--oi-text-dim, #94a3b8);
	box-shadow: none;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 640px) {
	.oi-embargo {
		padding: 2.25rem 1.75rem 2rem;
		margin: 1.25rem 1rem;
	}
	.oi-embargo__meta {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
	.oi-embargo__score { font-size: 2rem; }
	.oi-embargo__unlock-num { font-size: 2.5rem; }
}

/* Dark mode support — CSS vars already flip, but tier pill needs help */
@media (prefers-color-scheme: dark) {
	.oi-embargo {
		box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 12px 40px -16px rgba(0,0,0,0.5);
	}
}

/* ── Tried-it toggle ─────────────────────────────────────────────── */
.oi-col-tried { width: 2.5rem; text-align: center; }
.oi-tried-label { cursor: pointer; }
.oi-tried-check { display: none; }
.oi-tried-icon {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	line-height: 1.5rem;
	text-align: center;
	border: 1px solid var(--oi-border, #d1d5db);
	border-radius: var(--oi-radius-sm, 3px);
	color: transparent;
	font-size: 0.85rem;
	transition: all 0.15s;
}
.oi-tried-check:checked + .oi-tried-icon {
	background: var(--oi-up, #16a34a);
	border-color: var(--oi-up, #16a34a);
	color: #fff;
}
.oi-row--tried .oi-col-name a { opacity: 0.5; }

/* ── Next Steps panel ────────────────────────────────────────────── */
.oi-next-steps {
	margin-top: 2rem;
	padding: 1.5rem;
	background: var(--oi-bg-raised, #f9fafb);
	border: 1px solid var(--oi-border, #e5e7eb);
	border-radius: var(--oi-radius-sm, 3px);
}
.oi-next-steps-title { margin: 0 0 0.25rem; font-size: 1.1rem; }
.oi-next-steps-intro { margin: 0 0 1rem; font-size: 0.9rem; color: var(--oi-text-soft, #4b5563); }
.oi-next-steps-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.75rem;
}
.oi-next-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.75rem 1rem;
	background: var(--oi-bg, #fff);
	border: 1px solid var(--oi-border, #e5e7eb);
	border-radius: var(--oi-radius-sm, 3px);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s;
}
.oi-next-card:hover { border-color: var(--oi-accent, #ea580c); }
.oi-next-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}
.oi-next-name { font-weight: 500; }
.oi-next-score { font-weight: 700; color: var(--oi-up, #16a34a); }
.oi-next-rationale {
	display: block;
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--oi-text-soft, #4b5563);
}

/* ── Profile card section ────────────────────────────────────────── */
.oi-profile-card-section {
	margin-top: 2rem;
	padding: 1.5rem;
	background: var(--oi-bg-raised, #f9fafb);
	border: 1px solid var(--oi-border, #e5e7eb);
	border-radius: var(--oi-radius-sm, 3px);
}
.oi-profile-card-title { margin: 0 0 0.25rem; font-size: 1.1rem; }
.oi-profile-card-desc { margin: 0 0 1rem; font-size: 0.9rem; color: var(--oi-text-soft, #4b5563); }
.oi-profile-card-btn {
	padding: 0.5rem 1.25rem;
	background: var(--oi-accent, #3DA5FF);
	color: #fff;
	border: none;
	border-radius: var(--oi-radius-sm, 3px);
	font-weight: 600;
	cursor: pointer;
}
.oi-profile-card-btn:hover { opacity: 0.9; }
.oi-profile-card-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.oi-profile-card-preview { margin-top: 1rem; }
.oi-profile-card-actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.75rem;
}
.oi-profile-card-actions button {
	padding: 0.4rem 1rem;
	background: var(--oi-bg, #fff);
	border: 1px solid var(--oi-border, #e5e7eb);
	border-radius: var(--oi-radius-sm, 3px);
	cursor: pointer;
	font-size: 0.85rem;
}
.oi-profile-card-actions button:hover {
	border-color: var(--oi-accent, #3DA5FF);
}