/**
 * Raseedna — layout and components.
 *
 * Contains no colour, font, radius or spacing literals: every value comes from
 * assets/css/tokens.css, so swapping the identity never touches this file.
 *
 * Written with CSS logical properties throughout (inline-start, margin-block,
 * inline-size), so the same rules serve RTL and LTR and no rtl.css is needed.
 */

/* ---------------------------------------------------------------------- */
/* Base                                                                    */
/* ---------------------------------------------------------------------- */

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

body {
	margin: 0;
	background: var( --rs-canvas );
	color: var( --rs-ink );
	font-family: var( --rs-font-body );
	font-size: var( --rs-step-0 );
	line-height: var( --rs-leading );
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var( --rs-font-display );
	line-height: var( --rs-leading-tight );
	margin-block: 0 var( --rs-space-3 );
	text-wrap: balance;
}

p {
	margin-block: 0 var( --rs-space-4 );
}

a {
	color: var( --rs-primary );
	text-underline-offset: 0.2em;
}

img {
	max-inline-size: 100%;
	block-size: auto;
}

:focus-visible {
	outline: 3px solid var( --rs-accent );
	outline-offset: 3px;
	border-radius: var( --rs-radius-sm );
}

.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.rs-skip {
	position: absolute;
	inset-inline-start: -9999px;
	z-index: 100;
}

.rs-skip:focus {
	inset-inline-start: var( --rs-space-4 );
	inset-block-start: var( --rs-space-4 );
	padding: var( --rs-space-3 ) var( --rs-space-4 );
	background: var( --rs-surface );
	border-radius: var( --rs-radius-sm );
	box-shadow: var( --rs-shadow );
}

.rs-container {
	inline-size: min( 100% - ( var( --rs-space-5 ) * 2 ), var( --rs-container ) );
	margin-inline: auto;
}

.rs-main > section {
	padding-block: var( --rs-space-8 );
}

.rs-section__title {
	font-size: var( --rs-step-3 );
	margin-block-end: var( --rs-space-6 );
}

.rs-prose {
	max-inline-size: var( --rs-container-narrow );
	margin-inline: auto;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */

.rs-btn,
.rc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --rs-space-2 );
	padding: var( --rs-space-3 ) var( --rs-space-5 );
	border: 1px solid transparent;
	border-radius: var( --rs-radius-sm );
	font-family: var( --rs-font-body );
	font-size: var( --rs-step-0 );
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background var( --rs-transition ), border-color var( --rs-transition ), transform var( --rs-transition );
}

.rs-btn--primary,
.rc-btn {
	background: var( --rs-primary );
	color: #fff;
}

.rs-btn--primary:hover,
.rc-btn:hover {
	background: var( --rs-primary-dark );
}

.rs-btn--ghost,
.rc-btn--ghost {
	background: transparent;
	border-color: var( --rs-border );
	color: var( --rs-ink );
}

.rs-btn--ghost:hover,
.rc-btn--ghost:hover {
	border-color: var( --rs-primary );
	color: var( --rs-primary );
}

.rs-btn--soft {
	background: color-mix( in srgb, var( --rs-chapter, var( --rs-primary ) ) 12%, transparent );
	color: var( --rs-chapter, var( --rs-primary ) );
}

.rs-btn--soft:hover {
	background: color-mix( in srgb, var( --rs-chapter, var( --rs-primary ) ) 20%, transparent );
}

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */

.rs-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background: color-mix( in srgb, var( --rs-surface ) 88%, transparent );
	backdrop-filter: blur( 10px );
	border-block-end: 1px solid var( --rs-border );
}

.rs-header__inner {
	display: flex;
	align-items: center;
	gap: var( --rs-space-5 );
	min-block-size: 72px;
}

.rs-logo {
	font-family: var( --rs-font-display );
	font-size: var( --rs-step-1 );
	font-weight: 700;
	color: var( --rs-ink );
	text-decoration: none;
}

.rs-header__brand {
	margin-inline-end: auto;
}

.rs-header__toggle {
	display: none;
	padding: var( --rs-space-2 );
	background: none;
	border: 1px solid var( --rs-border );
	border-radius: var( --rs-radius-sm );
	cursor: pointer;
}

.rs-header__toggle-bars,
.rs-header__toggle-bars::before,
.rs-header__toggle-bars::after {
	display: block;
	inline-size: 22px;
	block-size: 2px;
	background: var( --rs-ink );
	transition: transform var( --rs-transition );
}

.rs-header__toggle-bars::before,
.rs-header__toggle-bars::after {
	content: "";
	position: relative;
}

.rs-header__toggle-bars::before {
	inset-block-start: -7px;
}

.rs-header__toggle-bars::after {
	inset-block-start: 5px;
}

.rs-nav {
	display: flex;
	align-items: center;
	gap: var( --rs-space-5 );
}

.rs-nav__list {
	display: flex;
	align-items: center;
	gap: var( --rs-space-5 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-nav__list a,
.rs-nav__link {
	color: var( --rs-ink );
	font-size: var( --rs-step--1 );
	font-weight: 600;
	text-decoration: none;
}

.rs-nav__list a:hover,
.rs-nav__link:hover {
	color: var( --rs-primary );
}

.rs-nav__account {
	display: flex;
	align-items: center;
	gap: var( --rs-space-4 );
	padding-inline-start: var( --rs-space-5 );
	border-inline-start: 1px solid var( --rs-border );
}

.rs-nav__link--quiet {
	color: var( --rs-ink-soft );
	font-weight: 500;
}

@media ( max-width: 900px ) {
	.rs-header__toggle {
		display: block;
	}

	.rs-nav {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: var( --rs-space-4 );
		padding: var( --rs-space-5 );
		background: var( --rs-surface );
		border-block-end: 1px solid var( --rs-border );
		box-shadow: var( --rs-shadow );
	}

	.rs-nav[hidden] {
		display: none;
	}

	.rs-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: var( --rs-space-4 );
	}

	.rs-nav__account {
		flex-wrap: wrap;
		padding-inline-start: 0;
		padding-block-start: var( --rs-space-4 );
		border-inline-start: 0;
		border-block-start: 1px solid var( --rs-border );
	}
}

/* ---------------------------------------------------------------------- */
/* Progress bar                                                            */
/* ---------------------------------------------------------------------- */

.rs-progressbar {
	background: var( --rs-surface );
	border-block-end: 1px solid var( --rs-border );
}

.rs-progressbar__inner {
	display: flex;
	align-items: center;
	gap: var( --rs-space-4 );
	padding-block: var( --rs-space-3 );
	font-size: var( --rs-step--1 );
}

.rs-progressbar__track {
	flex: 1;
	block-size: 6px;
	border-radius: 999px;
	background: var( --rs-border );
	overflow: hidden;
}

.rs-progressbar__fill {
	display: block;
	block-size: 100%;
	background: var( --rs-primary );
	transition: inline-size var( --rs-transition );
}

.rs-progressbar__value {
	font-weight: 700;
	color: var( --rs-primary );
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */

.rs-hero {
	background: var( --rs-surface );
	border-block-end: 1px solid var( --rs-border );
}

.rs-hero__inner {
	display: grid;
	gap: var( --rs-space-7 );
	align-items: center;
}

@media ( min-width: 900px ) {
	.rs-hero__inner {
		grid-template-columns: 1.1fr 0.9fr;
	}
}

.rs-hero__eyebrow {
	margin-block-end: var( --rs-space-2 );
	color: var( --rs-primary );
	font-size: var( --rs-step--1 );
	font-weight: 700;
	letter-spacing: 0.04em;
}

.rs-hero__title {
	font-size: var( --rs-step-4 );
	margin-block-end: var( --rs-space-4 );
}

.rs-hero__subtitle {
	font-size: var( --rs-step-1 );
	color: var( --rs-ink-soft );
}

.rs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --rs-space-3 );
	margin-block-start: var( --rs-space-5 );
}

/* ---------------------------------------------------------------------- */
/* Growth line — the signature motif                                       */
/* ---------------------------------------------------------------------- */

.rs-growth {
	position: relative;
	margin: 0;
	padding: var( --rs-space-6 ) var( --rs-space-5 ) var( --rs-space-7 );
	background: var( --rs-canvas );
	border-radius: var( --rs-radius-lg );
}

.rs-growth__svg {
	display: block;
	inline-size: 100%;
	block-size: 180px;
	overflow: visible;
}

.rs-growth__track {
	fill: none;
	stroke: var( --rs-primary );
	stroke-width: 0.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	opacity: 0.35;
}

.rs-growth__steps {
	position: absolute;
	inset: var( --rs-space-6 ) var( --rs-space-5 ) var( --rs-space-7 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-growth__step {
	position: absolute;
	inset-inline-start: var( --rs-x );
	inset-block-start: var( --rs-y );
	inline-size: 10px;
	block-size: 10px;
	margin-inline-start: -5px;
	margin-block-start: -5px;
	border: 2px solid var( --rs-primary );
	border-radius: 50%;
	background: var( --rs-surface );
	transition: background var( --rs-transition ), transform var( --rs-transition );
}

.rs-growth__step.is-earned {
	background: var( --rs-accent );
	border-color: var( --rs-accent );
	transform: scale( 1.3 );
}

.rs-growth__label {
	position: absolute;
	inset-block-end: var( --rs-space-4 );
	inset-inline-start: var( --rs-space-5 );
	font-size: var( --rs-step--1 );
	color: var( --rs-ink-soft );
}

/* In RTL the line should climb toward the reading direction, not away from it. */
[dir="rtl"] .rs-growth__svg {
	transform: scaleX( -1 );
}

[dir="rtl"] .rs-growth__step {
	inset-inline-start: auto;
	inset-inline-end: var( --rs-x );
	margin-inline-start: 0;
	margin-inline-end: -5px;
}

/* ---------------------------------------------------------------------- */
/* Steps                                                                   */
/* ---------------------------------------------------------------------- */

.rs-steps__list {
	display: grid;
	gap: var( --rs-space-5 );
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

@media ( min-width: 760px ) {
	.rs-steps__list {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.rs-steps__item {
	padding: var( --rs-space-5 );
	background: var( --rs-surface );
	border: 1px solid var( --rs-border );
	border-radius: var( --rs-radius );
}

.rs-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	margin-block-end: var( --rs-space-3 );
	border-radius: 50%;
	background: var( --rs-primary );
	color: #fff;
	font-family: var( --rs-font-display );
	font-weight: 700;
}

.rs-steps__title {
	font-size: var( --rs-step-1 );
}

.rs-steps__text {
	margin: 0;
	color: var( --rs-ink-soft );
}

/* ---------------------------------------------------------------------- */
/* Grids and cards                                                         */
/* ---------------------------------------------------------------------- */

.rs-grid {
	display: grid;
	gap: var( --rs-space-5 );
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
}

@media ( min-width: 960px ) {
	.rs-grid--chapters {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.rs-chapter,
.rs-card {
	display: flex;
	flex-direction: column;
	gap: var( --rs-space-2 );
	padding: var( --rs-space-5 );
	background: var( --rs-surface );
	border: 1px solid var( --rs-border );
	border-radius: var( --rs-radius );
	transition: box-shadow var( --rs-transition ), transform var( --rs-transition );
}

.rs-chapter {
	border-block-start: 4px solid var( --rs-chapter, var( --rs-primary ) );
}

.rs-chapter--unlocked:hover,
.rs-chapter--completed:hover,
.rs-card:hover {
	box-shadow: var( --rs-shadow-lift );
	transform: translateY( -2px );
}

.rs-chapter--locked,
.rs-chapter--unavailable {
	background: transparent;
	border-style: dashed;
}

.rs-chapter--locked .rs-chapter__title,
.rs-chapter--unavailable .rs-chapter__title {
	color: var( --rs-ink-soft );
}

.rs-chapter--more {
	justify-content: center;
	text-align: center;
	background: color-mix( in srgb, var( --rs-primary ) 8%, transparent );
	border-color: transparent;
	border-block-start-color: var( --rs-accent );
}

.rs-chapter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --rs-space-3 );
}

.rs-chapter__number {
	font-family: var( --rs-font-display );
	font-size: var( --rs-step-2 );
	font-weight: 700;
	color: var( --rs-chapter, var( --rs-primary ) );
	opacity: 0.5;
}

.rs-chapter__status {
	padding: var( --rs-space-1 ) var( --rs-space-3 );
	border-radius: 999px;
	background: var( --rs-canvas );
	color: var( --rs-ink-soft );
	font-size: var( --rs-step--1 );
	font-weight: 600;
}

.rs-chapter__status--completed {
	background: color-mix( in srgb, var( --rs-success ) 14%, transparent );
	color: var( --rs-success );
}

.rs-chapter__status--unlocked {
	background: color-mix( in srgb, var( --rs-accent ) 20%, transparent );
	color: var( --rs-ink );
}

.rs-chapter__title {
	font-size: var( --rs-step-1 );
	margin-block-end: 0;
}

.rs-chapter__title a {
	color: inherit;
	text-decoration: none;
}

.rs-chapter__desc,
.rs-chapter__teaser {
	margin: 0;
	color: var( --rs-ink-soft );
	font-size: var( --rs-step--1 );
}

.rs-chapter__teaser {
	font-style: italic;
}

.rs-chapter__meter {
	display: flex;
	align-items: center;
	gap: var( --rs-space-3 );
	margin-block: var( --rs-space-3 ) 0;
	font-size: var( --rs-step--1 );
	color: var( --rs-ink-soft );
}

.rs-chapter__meter-track {
	flex: 1;
	block-size: 5px;
	border-radius: 999px;
	background: var( --rs-border );
	overflow: hidden;
}

.rs-chapter__meter-fill {
	display: block;
	block-size: 100%;
	background: var( --rs-chapter, var( --rs-primary ) );
}

.rs-chapter__cta {
	margin-block-start: auto;
	align-self: flex-start;
}

.rs-chapter--more .rs-chapter__cta {
	align-self: center;
}

/* ---------------------------------------------------------------------- */
/* Subscription                                                            */
/* ---------------------------------------------------------------------- */

.rs-subscribe {
	background: var( --rs-surface );
	border-block: 1px solid var( --rs-border );
}

.rs-subscribe__inner {
	display: grid;
	gap: var( --rs-space-6 );
	align-items: center;
}

@media ( min-width: 860px ) {
	.rs-subscribe__inner {
		grid-template-columns: 2fr 1fr;
	}
}

.rs-subscribe__price {
	display: flex;
	align-items: baseline;
	gap: var( --rs-space-2 );
	margin-block: var( --rs-space-4 );
}

.rs-subscribe__price strong {
	font-family: var( --rs-font-display );
	font-size: var( --rs-step-3 );
	color: var( --rs-primary );
}

.rs-subscribe__price span {
	color: var( --rs-ink-soft );
	font-size: var( --rs-step--1 );
}

.rs-subscribe__note {
	padding: var( --rs-space-5 );
	background: var( --rs-canvas );
	border-radius: var( --rs-radius );
	text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Chapter page and gates                                                  */
/* ---------------------------------------------------------------------- */

.rs-chapter-page__head {
	padding-block: var( --rs-space-7 );
	background: var( --rs-surface );
	border-block-end: 4px solid var( --rs-chapter, var( --rs-primary ) );
}

.rs-chapter-page__eyebrow {
	margin-block-end: var( --rs-space-2 );
	color: var( --rs-chapter, var( --rs-primary ) );
	font-weight: 700;
}

.rs-chapter-page__title {
	font-size: var( --rs-step-3 );
}

.rs-chapter-page__lead {
	max-inline-size: var( --rs-container-narrow );
	color: var( --rs-ink-soft );
	font-size: var( --rs-step-1 );
}

.rs-chapter-page__body {
	padding-block: var( --rs-space-7 );
}

.rs-gate {
	max-inline-size: var( --rs-container-narrow );
	margin-inline: auto;
	padding: var( --rs-space-6 );
	background: var( --rs-surface );
	border: 1px solid var( --rs-border );
	border-radius: var( --rs-radius );
	text-align: center;
}

.rs-gate--locked {
	border-style: dashed;
}

.rs-gate__title {
	font-size: var( --rs-step-2 );
}

.rs-gate__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --rs-space-3 );
	margin-block-end: 0;
}

.rs-quiz-wrap {
	max-inline-size: var( --rs-container-narrow );
	margin-inline: auto;
	margin-block-start: var( --rs-space-7 );
}

.rs-quiz-wrap__hint {
	color: var( --rs-ink-soft );
	font-size: var( --rs-step--1 );
}

.rs-chapter-next {
	max-inline-size: var( --rs-container-narrow );
	margin: var( --rs-space-7 ) auto 0;
	padding: var( --rs-space-5 );
	background: var( --rs-surface );
	border: 1px solid var( --rs-border );
	border-radius: var( --rs-radius );
}

.rs-chapter-next__label {
	margin-block-end: var( --rs-space-1 );
	color: var( --rs-ink-soft );
	font-size: var( --rs-step--1 );
}

.rs-chapter-next__title {
	font-size: var( --rs-step-1 );
}

.rs-chapter-next__hint {
	margin: 0;
	color: var( --rs-ink-soft );
	font-size: var( --rs-step--1 );
}

/* ---------------------------------------------------------------------- */
/* Pages, archives, 404                                                    */
/* ---------------------------------------------------------------------- */

.rs-page__head {
	padding-block: var( --rs-space-7 );
	background: var( --rs-surface );
	border-block-end: 1px solid var( --rs-border );
}

.rs-page__title {
	font-size: var( --rs-step-3 );
	margin-block-end: 0;
}

.rs-page__lead {
	max-inline-size: var( --rs-container-narrow );
	margin-block-start: var( --rs-space-3 );
	color: var( --rs-ink-soft );
}

.rs-page .rs-prose,
.rs-archive,
.rs-404 {
	padding-block: var( --rs-space-7 );
}

.rs-card__media img {
	border-radius: var( --rs-radius-sm );
}

.rs-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --rs-space-3 );
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */

.rs-footer {
	margin-block-start: var( --rs-space-8 );
	background: var( --rs-surface );
	border-block-start: 1px solid var( --rs-border );
}

.rs-footer__columns {
	display: grid;
	gap: var( --rs-space-6 );
	padding-block: var( --rs-space-7 );
}

@media ( min-width: 860px ) {
	.rs-footer__columns {
		grid-template-columns: 1.2fr 1fr 1fr;
	}
}

.rs-footer__about {
	color: var( --rs-ink-soft );
	font-size: var( --rs-step--1 );
}

.rs-footer__title {
	font-size: var( --rs-step-1 );
}

.rs-footer__list,
.rs-footer__contact,
.rs-social {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-footer__list li,
.rs-footer__contact li {
	margin-block-end: var( --rs-space-2 );
}

.rs-footer__list a {
	color: var( --rs-ink );
	text-decoration: none;
	font-size: var( --rs-step--1 );
}

.rs-footer__list a:hover {
	color: var( --rs-primary );
}

.rs-footer__contact {
	margin-block-start: var( --rs-space-4 );
	color: var( --rs-ink-soft );
	font-size: var( --rs-step--1 );
}

.rs-social {
	display: flex;
	flex-wrap: wrap;
	gap: var( --rs-space-3 );
	margin-block-start: var( --rs-space-4 );
}

.rs-social__link {
	font-size: var( --rs-step--1 );
	font-weight: 600;
}

.rs-footer__bar {
	padding-block: var( --rs-space-4 );
	border-block-start: 1px solid var( --rs-border );
	color: var( --rs-ink-soft );
	font-size: var( --rs-step--1 );
	text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Plugin markup adopting the theme identity                               */
/* ---------------------------------------------------------------------- */

.rc-activate,
.rc-dashboard,
.rc-goals,
.rc-certificate,
.rc-dictionary,
.rc-quiz {
	max-inline-size: var( --rs-container-narrow );
	margin-inline: auto;
	padding-block: var( --rs-space-6 );
}

.rc-journey {
	padding-block: var( --rs-space-6 );
}

.rc-step,
.rc-verify-notice,
.rc-goal {
	padding: var( --rs-space-5 );
	background: var( --rs-surface );
	border: 1px solid var( --rs-border );
	border-radius: var( --rs-radius );
	margin-block-end: var( --rs-space-4 );
}

.rc-question {
	padding-block: var( --rs-space-5 );
}

.rc-option {
	font-family: var( --rs-font-body );
	font-size: var( --rs-step-0 );
	transition: border-color var( --rs-transition ), background var( --rs-transition );
}

.rc-option:hover:not( [disabled] ) {
	border-color: var( --rs-primary );
	background: color-mix( in srgb, var( --rs-primary ) 6%, transparent );
}

.rc-cert {
	background: var( --rs-surface );
	border-radius: var( --rs-radius );
}

/* ---------------------------------------------------------------------- */
/* Motion                                                                  */
/* ---------------------------------------------------------------------- */

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