/* ==========================================================================
   TS Ikigai Finder - front-end styles
   Everything is scoped under .ts-ikigai so it does not collide with the theme.
   ========================================================================== */

.ts-ikigai {
	--ik-love:    #ec4899;
	--ik-love-bg: #fbcfe8;
	--ik-good:    #ca8a04;
	--ik-good-bg: #fef08a;
	--ik-needs:   #2563eb;
	--ik-needs-bg:#bfdbfe;
	--ik-paid:    #059669;
	--ik-paid-bg: #a7f3d0;
	--ik-indigo:  #4f46e5;
	--ik-ink:     #1f2937;
	--ik-muted:   #64748b;
	--ik-line:    #e2e8f0;
	--ik-radius:  20px;

	max-width: 800px;
	margin: 0 auto;
	color: var(--ik-ink);
	font-family: inherit;
	line-height: 1.5;
}

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

/* ── Cards / layout ─────────────────────────────────────────────────────── */

/* Outer shell — carries the card chrome (aligned with the brand design
   system "tool-card") and clips the gradient toolbar's top corners. The
   per-screen .ts-ikigai__card panels render flush inside it. */
.ts-ikigai__shell {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(17, 24, 39, .06);
}

/* Persistent branded tool header */
.ts-ikigai__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 32px 20px;
	background: linear-gradient(135deg, #2A1E30 0%, #4A3550 100%);
}
.ts-ikigai__toolbar-left { display: flex; align-items: center; gap: 12px; }
.ts-ikigai__toolbar-icon {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(255, 255, 255, .15);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 11px;
}
.ts-ikigai__toolbar-icon svg { width: 22px; height: 22px; }
.ts-ikigai__toolbar-meta { display: flex; flex-direction: column; gap: 2px; }
.ts-ikigai__toolbar-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #D5C6D7;
}
.ts-ikigai__toolbar-title {
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -.015em;
	line-height: 1.2;
}
.ts-ikigai__toolbar-pill {
	flex-shrink: 0;
	background: #F0553F;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
}

/* Per-screen body panel — chrome now lives on .ts-ikigai__shell above. */
.ts-ikigai__card {
	padding: clamp(20px, 4vw, 44px);
}

.ts-ikigai__header {
	text-align: center;
	margin-bottom: 18px;
}

.ts-ikigai__header h2 {
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 800;
	margin: 0 0 10px;
	color: #1e1b4b;
}

.ts-ikigai__lead {
	color: var(--ik-muted);
	font-size: 1.05rem;
	max-width: 620px;
	margin: 0 auto;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.ts-ikigai__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: none;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	border-radius: 999px;
	padding: 13px 26px;
	color: #fff;
	background: var(--ik-indigo);
	transition: transform .12s ease, opacity .12s ease, background .2s ease;
}
.ts-ikigai__btn:hover { background: #4338ca; }

/* Final CTA (Reveal My Ikigai) + intro CTA (Start Your Journey) — brand coral,
   so the two "big moment" actions stand out; the per-step Next/Add buttons keep
   the plum base above. */
.ts-ikigai__btn--final { background: #F0553F; }
.ts-ikigai__btn--final:hover { background: #D6412C; }
.ts-ikigai__btn:active { transform: scale(.96); }
.ts-ikigai__btn:disabled { opacity: .45; cursor: not-allowed; }

.ts-ikigai__btn--ghost {
	background: transparent;
	color: var(--ik-muted);
	border-radius: 10px;
	padding: 10px 16px;
	font-weight: 600;
}
.ts-ikigai__btn--ghost:hover { background: #f1f5f9; color: var(--ik-ink); }

.ts-ikigai__btn--sm { padding: 9px 18px; font-size: .9rem; }

/* Nav / submit buttons are standardised to the brand coral (base .ts-ikigai__btn
   above); the per-category colour still identifies each step via the progress
   bar, icon and tags — but not the button, so every step's button matches. */

/* ── Intro Venn (animated) ──────────────────────────────────────────────── */

.ts-ikigai__intro-venn {
	width: 240px;
	height: 240px;
	margin: 0 auto 24px;
	position: relative;
}
.ts-ikigai__intro-venn span {
	position: absolute;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	mix-blend-mode: multiply;
	opacity: .75;
	animation: ts-ik-breathe 4s ease-in-out infinite;
}
.ts-ikigai__intro-venn .ik-c1 { background: var(--ik-love-bg);  top: 0;   left: 45px; animation-delay: 0s; }
.ts-ikigai__intro-venn .ik-c2 { background: var(--ik-needs-bg); top: 45px;left: 90px; animation-delay: .4s; }
.ts-ikigai__intro-venn .ik-c3 { background: var(--ik-paid-bg);  top: 90px;left: 45px; animation-delay: .8s; }
.ts-ikigai__intro-venn .ik-c4 { background: var(--ik-good-bg);  top: 45px;left: 0;    animation-delay: 1.2s; }

@keyframes ts-ik-breathe {
	0%, 100% { transform: scale(1); opacity: .72; }
	50%      { transform: scale(1.06); opacity: .9; }
}

/* ── Progress bar ───────────────────────────────────────────────────────── */

.ts-ikigai__progress {
	height: 8px;
	background: #eef2ff;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 28px;
}
.ts-ikigai__progress > i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	transition: width .5s ease;
}

/* ── Question step ──────────────────────────────────────────────────────── */

.ts-ikigai__icon {
	width: 60px; height: 60px;
	border-radius: 16px;
	display: flex; align-items: center; justify-content: center;
	font-size: 28px;
	margin-bottom: 18px;
}
.ts-ikigai__icon[data-accent="love"]    { background: var(--ik-love-bg); }
.ts-ikigai__icon[data-accent="goodAt"]  { background: var(--ik-good-bg); }
.ts-ikigai__icon[data-accent="needs"]   { background: var(--ik-needs-bg); }
.ts-ikigai__icon[data-accent="paidFor"] { background: var(--ik-paid-bg); }

.ts-ikigai__q { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; margin: 0 0 6px; }
.ts-ikigai__sub { color: var(--ik-muted); margin: 0 0 22px; }

.ts-ikigai__form { display: flex; gap: 10px; margin-bottom: 16px; }
.ts-ikigai__input {
	flex: 1;
	border: 2px solid var(--ik-line);
	background: #f8fafc;
	border-radius: 12px;
	padding: 12px 16px;
	font: inherit;
	font-size: 1.05rem;
	transition: border-color .2s, background .2s;
}
.ts-ikigai__input:focus { outline: none; border-color: var(--ik-indigo); background: #fff; }

/* Example chips */
.ts-ikigai__examples { margin-bottom: 20px; }
.ts-ikigai__examples-label { font-size: .85rem; color: var(--ik-muted); margin-bottom: 8px; }
.ts-ikigai__chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-ikigai__chip {
	cursor: pointer;
	border: 1px solid #c7d2fe;
	background: #fff;
	color: #4338ca;
	border-radius: 999px;
	padding: 6px 14px;
	font: inherit;
	font-size: .85rem;
	transition: background .15s, border-color .15s;
}
.ts-ikigai__chip:hover { background: #eef2ff; border-color: var(--ik-indigo); }

/* "+" chip that opens the full example list */
.ts-ikigai__examples { position: relative; }
.ts-ikigai__chip--more {
	font-weight: 700;
	line-height: 1;
	border-style: dashed;
	min-width: 34px;
	text-align: center;
}
.ts-ikigai__chip--more[aria-expanded="true"] {
	background: var(--ik-indigo);
	border-color: var(--ik-indigo);
	color: #fff;
}

/* Dropdown panel listing every remaining example */
.ts-ikigai__exdropdown {
	margin-top: 10px;
	padding: 10px;
	border: 1px solid #c7d2fe;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(30, 27, 75, .12);
	max-height: 220px;
	overflow-y: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ts-ikigai__exoption {
	cursor: pointer;
	border: 1px solid var(--ik-line);
	background: #f8fafc;
	color: #1e1b4b;
	border-radius: 999px;
	padding: 6px 14px;
	font: inherit;
	font-size: .85rem;
	transition: background .15s, border-color .15s;
}
.ts-ikigai__exoption:hover { background: #eef2ff; border-color: var(--ik-indigo); }
.ts-ikigai__exdropdown-empty {
	width: 100%;
	text-align: center;
	color: var(--ik-muted);
	font-style: italic;
	padding: 8px;
}

/* Answer tags */
.ts-ikigai__tags { display: flex; flex-wrap: wrap; gap: 10px; min-height: 34px; }
.ts-ikigai__empty {
	width: 100%;
	text-align: center;
	padding: 22px;
	border: 2px dashed var(--ik-line);
	border-radius: 14px;
	color: var(--ik-muted);
	font-style: italic;
}
.ts-ikigai__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	border: 1px solid transparent;
	animation: ts-ik-pop .25s ease;
}
.ts-ikigai__tag[data-accent="love"]    { background: var(--ik-love-bg); color: #9d174d; border-color: #f9a8d4; }
.ts-ikigai__tag[data-accent="goodAt"]  { background: var(--ik-good-bg); color: #854d0e; border-color: #fde047; }
.ts-ikigai__tag[data-accent="needs"]   { background: var(--ik-needs-bg);color: #1e3a8a; border-color: #93c5fd; }
.ts-ikigai__tag[data-accent="paidFor"] { background: var(--ik-paid-bg); color: #065f46; border-color: #6ee7b7; }
.ts-ikigai__tag button {
	border: none; background: none; cursor: pointer;
	font-size: 1rem; line-height: 1; color: inherit; opacity: .6; padding: 0;
}
.ts-ikigai__tag button:hover { opacity: 1; }

@keyframes ts-ik-pop {
	from { opacity: 0; transform: scale(.8); }
	to   { opacity: 1; transform: scale(1); }
}

.ts-ikigai__nav {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--ik-line);
}

/* ── Result ─────────────────────────────────────────────────────────────── */

.ts-ikigai__result-head { text-align: center; margin-bottom: 26px; }
.ts-ikigai__result-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin: 0 0 10px; }
.ts-ikigai__result-head p { color: var(--ik-muted); max-width: 640px; margin: 0 auto; }

.ts-ikigai__diagram { width: 100%; max-width: 560px; margin: 0 auto; display: block; }
.ts-ikigai__diagram svg { width: 100%; height: auto; }

.ts-ikigai__venn-circle { transition: opacity .35s ease, transform .35s ease; transform-box: fill-box; transform-origin: center; }
.ts-ikigai__venn-circle.is-active { opacity: .92; transform: scale(1.04); }

.ts-ikigai__label, .ts-ikigai__inter, .ts-ikigai__center-txt { cursor: pointer; user-select: none; }
.ts-ikigai__inter { font-weight: 700; }

.ts-ikigai__insight {
	margin-top: 22px;
	background: #f8fafc;
	border: 1px solid var(--ik-line);
	border-radius: 16px;
	padding: 22px;
	min-height: 120px;
	display: flex; align-items: center; justify-content: center;
	text-align: center;
}
.ts-ikigai__insight h3 { margin: 0 0 8px; font-size: 1.15rem; }
.ts-ikigai__insight p { margin: 0; color: #334155; }
.ts-ikigai__insight .ik-hint { color: var(--ik-muted); font-style: italic; }

/* Reading section */
.ts-ikigai__reading { margin-top: 28px; }
.ts-ikigai__reading h3 { text-align: center; font-size: 1.4rem; margin: 0 0 6px; }
.ts-ikigai__statement {
	background: #1e1b4b; color: #e0e7ff;
	border-radius: 16px; padding: 20px 24px;
	text-align: center; font-size: 1.08rem; font-style: italic;
	margin: 16px 0 22px;
}
.ts-ikigai__inter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ts-ikigai__inter-card { background: #fff; border: 1px solid var(--ik-line); border-radius: 14px; padding: 16px 18px; }
.ts-ikigai__inter-card h4 { margin: 0 0 4px; font-size: 1.05rem; }
.ts-ikigai__inter-card .ik-formula { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ik-muted); }
.ts-ikigai__inter-card p { margin: 8px 0 0; color: #334155; font-size: .95rem; }

/* Answers summary */
.ts-ikigai__summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 26px; }
.ts-ikigai__summary-card { border: 2px solid var(--ik-line); border-radius: 16px; padding: 16px; }
.ts-ikigai__summary-card[data-accent="love"]    { background: #fdf2f8; border-color: #fbcfe8; }
.ts-ikigai__summary-card[data-accent="goodAt"]  { background: #fefce8; border-color: #fef08a; }
.ts-ikigai__summary-card[data-accent="needs"]   { background: #eff6ff; border-color: #bfdbfe; }
.ts-ikigai__summary-card[data-accent="paidFor"] { background: #ecfdf5; border-color: #a7f3d0; }
.ts-ikigai__summary-card h4 { margin: 0 0 10px; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.ts-ikigai__summary-card ul { margin: 0; padding-left: 18px; }
.ts-ikigai__summary-card li { margin-bottom: 4px; font-size: .92rem; }

/* Archetype hero */
.ts-ikigai__archetype {
	text-align: center;
	background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
	border: 1px solid #e0e7ff;
	border-radius: var(--ik-radius);
	padding: clamp(22px, 4vw, 36px);
	margin-bottom: 22px;
}
.ts-ikigai__archetype-eyebrow {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ik-indigo);
	margin-bottom: 8px;
}
.ts-ikigai__archetype-name {
	font-size: clamp(1.8rem, 5vw, 2.6rem);
	font-weight: 800;
	color: #1e1b4b;
	line-height: 1.1;
}
.ts-ikigai__archetype-tagline {
	font-size: 1.1rem;
	color: #475569;
	margin-top: 8px;
}
.ts-ikigai__archetype-rarity {
	display: inline-block;
	margin-top: 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #e0e7ff;
	font-size: .9rem;
	font-weight: 600;
	color: #4338ca;
}
.ts-ikigai__archetype-people,
.ts-ikigai__archetype-careers {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid #e0e7ff;
}
.ts-ikigai__archetype-people-lead,
.ts-ikigai__archetype-careers-lead {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6366f1;
	margin-bottom: 12px;
}
.ts-ikigai__archetype-names {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.ts-ikigai__archetype-name-chip,
.ts-ikigai__archetype-career-chip {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 600;
}
.ts-ikigai__archetype-name-chip {
	background: #fff;
	border: 1px solid #e0e7ff;
	color: #1e1b4b;
}
.ts-ikigai__archetype-career-chip {
	background: #eef2ff;
	border: 1px solid #c7d2fe;
	color: #4338ca;
}

/* AI deep-dive */
.ts-ikigai__ai {
	margin-top: 28px;
	background: #eef2ff;
	border: 1px solid #c7d2fe;
	border-radius: 16px;
	padding: clamp(18px, 3vw, 26px);
}
.ts-ikigai__ai h3 { margin: 0 0 6px; font-size: 1.3rem; text-align: center; color: #1e1b4b; }
.ts-ikigai__ai-lead { margin: 0 auto 16px; text-align: center; color: var(--ik-muted); max-width: 560px; }
.ts-ikigai__ai-prompt {
	width: 100%;
	border: 1px solid var(--ik-line);
	border-radius: 12px;
	padding: 14px;
	font: inherit;
	font-size: .9rem;
	line-height: 1.45;
	background: #fff;
	color: var(--ik-ink);
	resize: vertical;
	min-height: 170px;
}
.ts-ikigai__ai-prompt:focus { outline: none; border-color: var(--ik-indigo); }
.ts-ikigai__ai-tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }

/* Share row */
.ts-ikigai__share { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }

/* ── Misc ───────────────────────────────────────────────────────────────── */

/* Honeypot: present in the DOM for bots, invisible + unreachable for humans.
   Intentionally NOT display:none (some bots skip those). */
.ts-ikigai__hp {
	position: absolute !important;
	left: -9999px !important;
	top: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Intro privacy notice */
.ts-ikigai__privacy {
	margin: 16px auto 0;
	max-width: 460px;
	font-size: .82rem;
	color: var(--ik-muted);
}
.ts-ikigai__privacy a { color: var(--ik-indigo); text-decoration: underline; }

/* Persistent footer (attribution + privacy link) */
.ts-ikigai-foot {
	max-width: 800px;
	margin: 14px auto 0;
	text-align: center;
	font-size: .8rem;
	color: var(--ik-muted);
}
.ts-ikigai-foot a { color: var(--ik-indigo); text-decoration: underline; }

.ts-ikigai__error { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.ts-ikigai__reload {
	border: 1px solid #fca5a5; background: #fff; color: #b91c1c; cursor: pointer;
	font: inherit; font-size: .85rem; font-weight: 600; border-radius: 8px; padding: 4px 10px; margin-left: 6px;
}
.ts-ikigai__reload:hover { background: #fef2f2; }
.ts-ikigai__center { text-align: center; }
.ts-ikigai__fade { animation: ts-ik-fade .5s ease both; }

@keyframes ts-ik-fade {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Confetti */
.ts-ikigai__confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 9999; }
.ts-ikigai__confetti i {
	position: absolute; top: -5%; width: 10px; height: 10px; border-radius: 2px; opacity: .85;
	animation: ts-ik-fall linear forwards;
}
@keyframes ts-ik-fall {
	0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
	100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

@media (max-width: 600px) {
	.ts-ikigai__form { flex-direction: column; }
	.ts-ikigai__btn { width: 100%; justify-content: center; }
	.ts-ikigai__nav .ts-ikigai__btn--ghost { width: auto; }
	.ts-ikigai__toolbar { padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.ts-ikigai__intro-venn span,
	.ts-ikigai__confetti i,
	.ts-ikigai__fade,
	.ts-ikigai__tag { animation: none !important; }
}