/**
 * VIYA Self-Injection Guide widget.
 * Brand palette per DESIGN.md: plum #45234C, lavender #C6AEFF,
 * violet #7F6EF9, magenta #C40CB3, pink #FF88E6.
 */
.vsig {
	--vsig-deep: #45234C;
	--vsig-light: #C6AEFF;
	--vsig-violet: #7F6EF9;
	--vsig-magenta: #C40CB3;
	--vsig-pink: #FF88E6;
	--vsig-skew: -27deg;
	background: #FAF9FF;
	color: var(--vsig-deep);
	font-family: "Pathway Extreme", ui-sans-serif, system-ui, sans-serif;
	padding: 1rem;
	isolation: isolate;
	max-width: 48rem;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.vsig { padding: 2rem; }
}

.vsig .vsig-title,
.vsig .vsig-subtitle,
.vsig .vsig-h2,
.vsig .vsig-h3 {
	font-family: "Instrument Serif", serif;
	font-weight: 400;
	margin: 0;
}

/* Header */
.vsig-header { text-align: center; margin-bottom: 3rem; }
.vsig-title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-style: italic; line-height: 1.1; }
.vsig-subtitle { color: var(--vsig-magenta); font-size: clamp(1.5rem, 3vw, 1.9rem); font-style: italic; margin-top: .5rem; }
.vsig-rule { height: 1px; width: 6rem; background: var(--vsig-light); margin: 1.5rem auto .5rem; }
.vsig-eyebrow { text-transform: uppercase; letter-spacing: .15em; font-size: .7rem; font-weight: 800; opacity: .6; }

/* Tabs */
.vsig-tabs-wrap { position: sticky; top: 1rem; z-index: 40; display: flex; justify-content: center; margin-bottom: 2rem; }
.vsig-tabs {
	background: rgba(255, 255, 255, .85);
	backdrop-filter: blur(12px);
	padding: .5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .25rem;
	border: 1px solid rgba(198, 174, 255, .25);
	box-shadow: 0 20px 40px -20px rgba(69, 35, 76, .25);
	transform: skewX(var(--vsig-skew));
}
.vsig-tab {
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	font-size: .8rem;
	font-weight: 700;
	color: rgba(69, 35, 76, .6);
	padding: .6rem 1.25rem;
	transition: background .2s, color .2s;
}
.vsig-tab span { display: inline-block; transform: skewX(calc(var(--vsig-skew) * -1)); }
.vsig-tab:hover { background: rgba(198, 174, 255, .12); }
.vsig-tab.is-active { background: var(--vsig-magenta); color: #fff; }

/* Panels & cards */
.vsig-panel[hidden] { display: none; }
.vsig-card {
	background: #fff;
	border: 1px solid rgba(198, 174, 255, .3);
	box-shadow: 0 25px 50px -25px rgba(69, 35, 76, .15);
	padding: 1.5rem;
}
@media (min-width: 768px) { .vsig-card { padding: 3rem; } }
.vsig-card-dark { background: var(--vsig-deep); color: #fff; border: 0; }
.vsig-card-dark .vsig-h2 { color: #fff; }
.vsig-h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 1.5rem; }
.vsig-h3 { font-size: 1.4rem; margin-bottom: .75rem; }
.vsig-cols { display: grid; gap: 2rem; }
@media (min-width: 768px) { .vsig-cols { grid-template-columns: 1fr 1fr; gap: 3rem; } }

/* Steps */
.vsig-step { display: none; }
.vsig-step.is-active { display: block; animation: vsig-fade .35s ease-out; }
@keyframes vsig-fade { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.vsig-step-count { font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .2em; color: var(--vsig-magenta); }
.vsig-step-title { font-family: "Instrument Serif", serif; font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.25rem); margin: .25rem 0 1.5rem; }
.vsig-step-body { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .vsig-step-body { grid-template-columns: 1fr 1fr; } }
.vsig-step-figure {
	background: #FDFBFF;
	border: 1px solid rgba(198, 174, 255, .2);
	box-shadow: inset 0 2px 8px rgba(69, 35, 76, .05);
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}
.vsig-step-figure svg, .vsig-step-img { width: 100%; height: 100%; object-fit: contain; }
.vsig-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.vsig-points li { position: relative; padding-left: 2.25rem; font-size: 1.05rem; line-height: 1.6; font-weight: 500; color: rgba(69, 35, 76, .85); }
.vsig-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 1.35rem;
	height: 1.35rem;
	background: var(--vsig-magenta);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4 12 14.01l-3-3"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4 12 14.01l-3-3"/></svg>') center / contain no-repeat;
}

/* Step nav */
.vsig-step-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(198, 174, 255, .2); }
.vsig-btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: .75rem 1.5rem; transition: all .2s; }
.vsig-btn:disabled { opacity: .2; cursor: default; }
.vsig-btn-ghost { background: transparent; color: rgba(69, 35, 76, .6); }
.vsig-btn-ghost:not(:disabled):hover { background: rgba(198, 174, 255, .12); }
.vsig-btn-solid { background: var(--vsig-deep); color: #fff; box-shadow: 0 10px 20px -10px rgba(69, 35, 76, .4); }
.vsig-btn-solid:not(:disabled):hover { background: var(--vsig-magenta); }
.vsig-progress { display: flex; gap: .4rem; }
.vsig-dot { height: .5rem; width: .5rem; background: rgba(198, 174, 255, .3); transition: all .4s; }
.vsig-dot.is-active { width: 3rem; background: var(--vsig-magenta); }

/* Sites */
.vsig-site { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 2rem; }
.vsig-site-figure { width: 8rem; height: 8rem; flex-shrink: 0; background: #FDFBFF; border: 1px solid rgba(198, 174, 255, .2); }
.vsig-site p { margin: 0; color: rgba(69, 35, 76, .75); line-height: 1.6; }
.vsig-warning { display: block; margin-top: .5rem; color: var(--vsig-magenta); }
.vsig-aside { background: rgba(127, 110, 249, .05); border: 1px solid rgba(127, 110, 249, .1); padding: 2rem; }
.vsig-violet { color: var(--vsig-violet); }
.vsig-magenta { color: var(--vsig-magenta); }
.vsig-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .9rem; }
.vsig-list li { position: relative; padding-left: 1.25rem; line-height: 1.6; color: rgba(69, 35, 76, .85); }
.vsig-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: .5rem; }
.vsig-list-violet li::before { background: var(--vsig-violet); }
.vsig-list-magenta li::before { background: var(--vsig-magenta); }
.vsig-list-pink li::before { background: var(--vsig-pink); }

/* Timeline */
.vsig-timeline { position: relative; padding: 6rem 1rem 1rem; margin-bottom: 2.5rem; }
.vsig-timeline-marker { position: absolute; top: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 5; }
.vsig-timeline-flag { background: var(--vsig-deep); color: #fff; font-size: .55rem; font-weight: 900; text-transform: uppercase; letter-spacing: .15em; padding: .25rem .6rem; margin-bottom: .5rem; white-space: nowrap; }
.vsig-timeline-pin { width: 1.1rem; height: 1.1rem; background: #fff; border: 5px solid var(--vsig-deep); box-shadow: 0 2px 6px rgba(69, 35, 76, .3); }
.vsig-timeline-bar { position: relative; height: 1rem; background: rgba(198, 174, 255, .2); }
.vsig-zone { position: absolute; top: 0; height: 100%; border: 0; cursor: help; padding: 0; font: inherit; }
.vsig-zone-safe { left: 30%; right: 20%; background: rgba(127, 110, 249, .2); border-left: 2px solid rgba(127, 110, 249, .3); border-right: 2px solid rgba(127, 110, 249, .3); }
.vsig-zone-safe:hover { background: rgba(127, 110, 249, .3); }
.vsig-zone-stop { left: 80%; right: 0; background: rgba(196, 12, 179, .2); border-left: 2px solid rgba(196, 12, 179, .3); }
.vsig-zone-stop:hover { background: rgba(196, 12, 179, .3); }
.vsig-zone-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .55rem; font-weight: 900; text-transform: uppercase; letter-spacing: .2em; opacity: .4; }
.vsig-zone-safe .vsig-zone-text { color: var(--vsig-violet); }
.vsig-zone-stop .vsig-zone-text { color: var(--vsig-magenta); }
.vsig-zone-label-l, .vsig-zone-label-r { position: absolute; top: -2.2rem; font-size: .55rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; color: rgba(127, 110, 249, .6); }
.vsig-zone-label-l { left: 0; }
.vsig-zone-label-r { right: 0; }
.vsig-zone-stop .vsig-zone-label-r { color: rgba(196, 12, 179, .6); }
.vsig-tip { position: relative; margin-top: 1rem; background: rgba(69, 35, 76, .95); color: #fff; padding: 1rem 1.25rem; font-size: .9rem; text-align: center; max-width: 22rem; margin-left: auto; margin-right: auto; }
.vsig-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 2rem; font-size: .65rem; font-weight: 900; text-transform: uppercase; letter-spacing: .15em; color: rgba(69, 35, 76, .5); }
.vsig-legend span { display: flex; align-items: center; gap: .5rem; }
.vsig-swatch { width: 1.1rem; height: 1.1rem; display: inline-block; }
.vsig-swatch-early { background: rgba(198, 174, 255, .3); }
.vsig-swatch-ok { background: var(--vsig-violet); }
.vsig-swatch-stop { background: var(--vsig-magenta); }

/* Info cards */
.vsig-infocard { padding: 2rem; }
.vsig-infocard-violet { background: rgba(127, 110, 249, .05); border: 1px solid rgba(127, 110, 249, .1); }
.vsig-infocard-magenta { background: rgba(196, 12, 179, .05); border: 1px solid rgba(196, 12, 179, .1); }
.vsig-note { font-size: .85rem; font-style: italic; opacity: .5; margin: -1rem 0 1.25rem; }
.vsig-info-block { color: rgba(198, 174, 255, .9); line-height: 1.7; margin: 0 0 1.5rem; }
.vsig-info-block strong { display: block; color: #fff; font-family: "Instrument Serif", serif; font-weight: 400; font-size: 1.15rem; margin-bottom: .25rem; }
.vsig-tel { color: var(--vsig-magenta); font-weight: 700; text-decoration: none; }
.vsig-tel:hover { text-decoration: underline; }

/* Footer */
.vsig-footer { text-align: center; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(198, 174, 255, .2); }
.vsig-cta {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	color: var(--vsig-magenta);
	background: rgba(196, 12, 179, .05);
	border: 1px solid rgba(196, 12, 179, .1);
	padding: .85rem 1.5rem;
	font-family: "Instrument Serif", serif;
	font-style: italic;
	font-size: 1.1rem;
	text-decoration: none;
	transition: background .2s;
}
a.vsig-cta:hover { background: rgba(196, 12, 179, .1); }

@media (prefers-reduced-motion: reduce) {
	.vsig-step.is-active { animation: none; }
	.vsig * { transition-duration: 0s !important; }
}