/* Base, shared components and public pages. Workspace layout lives in shell.css. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--rj-header-height) + 24px); }
body { margin: 0; font: 400 16px/1.8 var(--rj-font); background: var(--rj-bg); color: var(--rj-text); -webkit-font-smoothing: antialiased; }
body, button, input, textarea, select { font-family: var(--rj-font); }
button, input, select, textarea { font-size: 1rem; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }
img, video, iframe { display: block; max-width: 100%; }
svg { flex-shrink: 0; vertical-align: middle; }
a { color: var(--rj-accent); text-decoration: none; transition: color .16s; }
a:hover { color: var(--rj-text); }
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--rj-accent); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0 0 .55em; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; }
ul { list-style: none; padding: 0; margin: 0; }
small { font-size: .8125rem; }
form { margin: 0; }
.container { width: min(var(--rj-container), calc(100% - 48px)); margin-inline: auto; }
.container-narrow { max-width: 800px; }
.muted { color: var(--rj-muted); }
.action-links, .user-management-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Shared controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 20px; border: 1px solid transparent; border-radius: var(--rj-radius-sm); font-size: .9375rem; font-weight: 700; line-height: 1.6; color: var(--rj-text); background: transparent; text-align: center; text-decoration: none; transition: background .16s, border-color .16s, color .16s, box-shadow .16s; }
.btn svg { width: 18px; height: 18px; }
.btn-primary, .btn-dark { color: #fff; background: var(--rj-primary); border-color: var(--rj-primary); box-shadow: var(--rj-shadow-button); }
.btn-primary:hover, .btn-dark:hover { color: #fff; background: var(--rj-primary-hover); border-color: var(--rj-primary-hover); box-shadow: var(--rj-shadow); }
.btn-outline { border-color: var(--rj-border); background: var(--rj-surface); }
.btn-outline:hover { border-color: var(--rj-accent); color: var(--rj-accent); background: var(--rj-primary-soft); box-shadow: var(--rj-shadow-button); }
.btn-ghost:hover { color: var(--rj-accent); background: var(--rj-primary-soft); }
.btn-danger { color: var(--rj-danger); background: var(--rj-danger-soft); border-color: var(--rj-danger); }
.btn-danger:hover { color: var(--rj-danger); filter: brightness(.95); }
.btn-sm { padding-inline: 14px; font-size: .875rem; }
.btn-lg { min-height: 48px; padding: 11px 24px; }
.btn-block { width: 100%; }
.btn:disabled, button:disabled { opacity: .55; cursor: not-allowed; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--rj-border); border-radius: var(--rj-radius-sm); background: var(--rj-surface); color: var(--rj-text); transition: background .16s, border-color .16s, color .16s, box-shadow .16s; }
.icon-button:hover { background: var(--rj-surface-2); border-color: var(--rj-accent); color: var(--rj-accent); box-shadow: var(--rj-shadow-button); }
.avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--rj-radius); background: var(--rj-icon-bg); border: 1px solid var(--rj-border); color: var(--rj-accent); font-size: 1.5rem; font-weight: 800; }
.avatar-sm { width: 44px; height: 44px; border-radius: var(--rj-radius-sm); font-size: 1rem; }
.card { min-width: 0; padding: 24px; background: var(--rj-surface); border: 1px solid var(--rj-border); border-radius: var(--rj-radius); box-shadow: var(--rj-shadow); }
.badge { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border: 1px solid var(--rj-border); border-radius: 8px; background: var(--rj-surface-2); color: var(--rj-muted); font-size: .8125rem; line-height: 1.7; font-weight: 600; white-space: nowrap; }
.badge-accent, .badge-coach, .badge-athlete { color: var(--rj-accent); background: var(--rj-primary-soft); }
.badge-active, .status-active, .status-completed { color: var(--rj-success); background: var(--rj-success-soft); }
.status-draft { color: var(--rj-warning); background: var(--rj-warning-soft); }
.status-archived { color: var(--rj-muted); }
.badge-floating { position: absolute; top: 12px; inset-inline-end: 12px; background: var(--rj-surface); }
.progress { height: 6px; overflow: hidden; border-radius: 99px; background: var(--rj-surface-2); }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--rj-accent); }

/* Page structure */
.section { padding-block: 64px; }
.section-tight { padding-top: 24px; }
.section-alt { background: var(--rj-bg-alt); border-block: 1px solid var(--rj-border); }
.section-head { max-width: 680px; margin: 0 auto 32px; text-align: center; }
.section-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; text-align: start; margin-bottom: 20px; }
.section-head.section-head-row { max-width: none; }
.section-head p, .section-head-row p { margin: 8px 0 0; color: var(--rj-muted); font-size: .875rem; }
.section-head-row h2 { margin: 0; font-size: 1.25rem; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { font-size: 2rem; margin: 4px 0 8px; }
.page-head > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.page-head p { color: var(--rj-muted); font-size: .875rem; margin: 0; }
.page-kicker, .home-updates-kicker { display: block; font-size: .8125rem; font-weight: 700; color: var(--rj-accent); margin-bottom: 8px; }
.page-hero { padding: 48px 0 24px; text-align: start; }
.page-hero h1 { font-size: 2rem; }
.lead { color: var(--rj-muted); font-size: 1.0625rem; max-width: 640px; }
.page-hero .lead { margin-bottom: 0; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font-size: .875rem; color: var(--rj-muted); }
.breadcrumbs a { color: var(--rj-muted); }
.breadcrumbs a:hover { color: var(--rj-accent); }
html[dir="ltr"] .icon-directional { transform: rotate(180deg); }
.empty-state { padding: 40px 24px; text-align: center; color: var(--rj-muted); background: var(--rj-surface); border: 1px dashed var(--rj-border); border-radius: var(--rj-radius); }
.empty-state h3 { color: var(--rj-text); }
.empty-state p:last-child { margin-bottom: 0; }
.empty-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: var(--rj-radius-sm); background: var(--rj-icon-bg); color: var(--rj-accent); }

/* Messages and form validation */
.messages { margin-block: 16px; }
.alert { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; margin-bottom: 16px; background: var(--rj-surface); border: 1px solid var(--rj-border); border-radius: var(--rj-radius-sm); font-size: .875rem; overflow-wrap: anywhere; }
.alert-success { color: var(--rj-success); background: var(--rj-success-soft); border-color: var(--rj-success); }
.alert-error, .alert-danger { color: var(--rj-danger); background: var(--rj-danger-soft); border-color: var(--rj-danger); }
.alert-warning { color: var(--rj-warning); background: var(--rj-warning-soft); border-color: var(--rj-warning); }
.alert-info { color: var(--rj-info); background: var(--rj-info-soft); border-color: var(--rj-info); }
.alert-close { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; background: transparent; color: inherit; border: 0; border-radius: 8px; font-size: 1.5rem; }
.impersonation-banner { flex-wrap: wrap; color: var(--rj-accent); background: var(--rj-primary-soft); border-color: var(--rj-accent); }
.error-summary { display: block; scroll-margin-top: calc(var(--rj-header-height) + 24px); }
.error-summary strong { display: block; margin-bottom: 8px; }
.error-summary ul { padding-inline-start: 20px; list-style: disc; }
.error-summary a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.error-summary li + li { margin-top: 4px; }

/* One form renderer across public pages and dashboards. */
.field { flex: 1; min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.field > label, .field > legend { display: block; width: 100%; margin-bottom: 8px; padding: 0; color: var(--rj-text); font-size: .875rem; font-weight: 600; }
.required-mark { color: var(--rj-accent); margin-inline-start: 4px; }
input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]), select, textarea { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--rj-control-border); border-radius: var(--rj-radius-sm); padding: 9px 12px; font-size: 16px; line-height: 1.6; color: var(--rj-text); background: var(--rj-bg); transition: border-color .16s, box-shadow .16s; }
input::placeholder, textarea::placeholder { color: var(--rj-muted); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--rj-accent); }
input[type="email"], input[type="tel"], input[type="url"] { direction: ltr; text-align: start; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--rj-accent); vertical-align: middle; }
input[type="file"] { font-size: .875rem !important; }
input[type="file"]::file-selector-button { padding: 6px 12px; margin-inline-end: 12px; border: 0; border-radius: 6px; color: var(--rj-text); background: var(--rj-surface-2); font: inherit; cursor: pointer; }
textarea { min-height: 128px; resize: vertical; }
select option { color: var(--rj-text); background: var(--rj-surface); }
.has-error :is(input, select, textarea) { border-color: var(--rj-danger) !important; }
.field-help, .field-error { display: block; font-size: .8125rem; line-height: 1.8; margin-top: 6px; }
.field-help { color: var(--rj-muted); overflow-wrap: anywhere; }
.field-help ul { list-style: disc; padding-inline-start: 20px; }
.field-error { color: var(--rj-danger); }
.field.is-checkbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.field.is-checkbox > label { width: auto; margin: 0; }
.field.is-checkbox :is(.field-help, .field-errors) { flex-basis: 100%; }
.field [role="radiogroup"], .field div[id]:has(input[type="radio"]) { display: grid; gap: 8px; }
.field div[id] > div label:has(input[type="radio"]) { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid var(--rj-control-border); border-radius: var(--rj-radius-sm); font-size: .875rem; cursor: pointer; }
.field div[id] > div label:has(input:checked) { border-color: var(--rj-accent); background: var(--rj-primary-soft); }
.password-input { display: flex; align-items: stretch; position: relative; }
.password-input input { padding-right: 102px !important; }
.password-toggle { position: absolute; inset: 1px 1px 1px auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 92px; padding: 0 10px; border: 0; border-radius: 0 11px 11px 0; color: var(--rj-muted); background: var(--rj-surface-2); font-size: .8125rem; }
.password-toggle:hover { color: var(--rj-accent); }
.password-toggle svg { width: 18px; height: 18px; }
.password-toggle span { display: inline-flex; }
.form-card { padding: 24px; }
.form-row { display: flex; gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.form-grid .field-wide, .form-grid .field:has(textarea), .form-grid .field:has(input[type="file"]) { grid-column: 1 / -1; }
.form-section-title { font-size: 1.125rem; padding-bottom: 12px; margin: 24px 0 20px; border-bottom: 1px solid var(--rj-border); }
.form-section-title:first-of-type { margin-top: 0; }
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Workout cards are shared by the homepage example and the real training plan. */
.session-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.session-grid > .empty-state { grid-column: 1 / -1; }
.session-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.session-card h4, .session-card h3 { margin: 0; font-size: 1.125rem; }
.session-day { display: block; color: var(--rj-accent); font-size: .8125rem; font-weight: 600; margin-bottom: 4px; }
.session-card.is-today { border-color: var(--rj-accent); }
.exercise-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--rj-border); }
.exercise-list li:last-child { border: 0; }
.exercise-name { min-width: 0; overflow-wrap: anywhere; font-size: .9375rem; font-weight: 600; }
.exercise-name small { display: block; font-weight: 400; color: var(--rj-muted); }
.exercise-meta { text-align: end; white-space: nowrap; flex-shrink: 0; }
.exercise-meta em { display: block; color: var(--rj-accent); font-size: 1rem; font-style: normal; font-weight: 700; }
.exercise-meta small { color: var(--rj-muted); }
.session-notes { margin: 16px 0; padding: 12px; background: var(--rj-bg); border-radius: var(--rj-radius-sm); color: var(--rj-muted); font-size: .875rem; }
.session-card > .btn { margin-top: 12px; }
.rest-day { text-align: center; padding: 32px; }
.rest-day strong, .rest-day span { display: block; }
.plan-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-color: var(--rj-accent); }
.plan-summary h3 { font-size: 1.375rem; }
.plan-summary h2 { font-size: 1.25rem; }
.plan-numbers { display: flex; gap: 12px; flex-wrap: wrap; }
.plan-numbers li { display: flex; flex-direction: column; align-items: center; min-width: 88px; padding: 12px 16px; background: var(--rj-bg); border-radius: var(--rj-radius-sm); }
.plan-numbers b { font-size: 1.5rem; line-height: 1.5; }
.plan-numbers span { font-size: .8125rem; color: var(--rj-muted); }

/* Tables, filters and pagination */
.table-wrap, .table-card { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.table-card { padding: 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.data-table :is(th, td) { padding: 14px 16px; text-align: start; border-bottom: 1px solid var(--rj-border); vertical-align: middle; }
.data-table th { font-size: .8125rem; font-weight: 600; color: var(--rj-muted); background: var(--rj-bg-alt); white-space: nowrap; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td { overflow-wrap: anywhere; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 32px; }
.page-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--rj-border); border-radius: var(--rj-radius-sm); color: var(--rj-text); background: var(--rj-surface); font-size: .875rem; transition: border-color .16s, color .16s, box-shadow .16s; }
.page-link:hover { color: var(--rj-accent); border-color: var(--rj-accent); box-shadow: var(--rj-shadow-button); }
.page-link.current { color: var(--rj-accent); background: var(--rj-primary-soft); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--rj-border); border-radius: var(--rj-radius-sm); color: var(--rj-muted); font-size: .875rem; font-weight: 600; background: var(--rj-surface); transition: border-color .16s, color .16s, background .16s, box-shadow .16s; }
.chip:hover, .chip.active { color: var(--rj-accent); border-color: var(--rj-accent); background: var(--rj-primary-soft); }

/* Homepage */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 64px 0; background: var(--rj-hero-bg); }
.hero::before { content: ""; position: absolute; z-index: -1; width: 360px; height: 360px; inset-inline-end: -230px; top: 36px; border: 1px solid var(--rj-accent); border-radius: 50%; opacity: .2; pointer-events: none; }
.hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.hero h1 { max-width: 680px; margin-bottom: 20px; }
.hero .lead { margin-bottom: 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 28px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 24px; border-top: 1px solid var(--rj-border); }
.hero-stats li { display: flex; flex-direction: column; gap: 4px; }
.hero-stats b { font-size: 1.5rem; line-height: 1.4; font-weight: 800; }
.hero-stats span { font-size: .8125rem; color: var(--rj-muted); }
.hero-visual { position: relative; isolation: isolate; overflow: hidden; min-width: 0; padding: 24px; background: var(--rj-feature-bg); border: 1px solid var(--rj-border); border-radius: 24px; box-shadow: var(--rj-shadow); }
.hero-visual::before { content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; top: -120px; inset-inline-end: -100px; border: 32px solid var(--rj-accent); border-radius: 50%; opacity: .08; pointer-events: none; }
.hero-sample-footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: .875rem; }
.hero-sample-footer small { display: block; color: var(--rj-muted); }
.hero-sample-footer .feature-icon { width: 44px; height: 44px; margin: 0; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.step-num { display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--rj-icon-bg); color: var(--rj-accent); border-radius: var(--rj-radius-sm); margin-bottom: 20px; font-size: 1.125rem; font-weight: 800; }
.step p, .feature p { margin: 0; font-size: .875rem; color: var(--rj-muted); }
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.feature-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--rj-radius-sm); background: var(--rj-icon-bg); color: var(--rj-accent); margin-bottom: 20px; }
.feature-icon svg { width: 24px; height: 24px; }
.intro-grid { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 48px; }
.intro-text > p { color: var(--rj-muted); }
.check-list li { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; font-size: .9375rem; }
.check-list li::before { content: "✓"; font-weight: 800; color: var(--rj-accent); }
.video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--rj-border); border-radius: var(--rj-radius); background: var(--rj-surface); }
.video-frame video, .video-frame iframe { width: 100%; height: 100%; border: 0; }
.video-placeholder { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 12px; padding: 24px; background: var(--rj-surface); }
.video-placeholder p { margin: 0; color: var(--rj-muted); }
.play-btn { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--rj-radius); border: 1px solid var(--rj-border); color: var(--rj-accent); background: var(--rj-icon-bg); }
.cta-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px; border: 1px solid var(--rj-border); border-radius: var(--rj-radius); background: var(--rj-feature-bg); box-shadow: var(--rj-shadow); }
.cta-banner::before { content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; top: -140px; inset-inline-end: 14%; border: 1px solid var(--rj-accent); border-radius: 32px; transform: rotate(24deg); opacity: .18; pointer-events: none; }
.cta-banner h2 { font-size: 1.75rem; }
.cta-banner p { color: var(--rj-muted); margin: 0; }
.cta-banner .btn { flex-shrink: 0; }
.member-home-welcome { padding-top: 40px; }
.member-home-welcome > .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--rj-border); }
.member-home-welcome h1 { font-size: 2rem; }
.member-home-welcome p { margin: 0; font-size: .875rem; }
.member-home-welcome .btn { flex-shrink: 0; }
.site-updates { padding-block: 48px; }
.site-announcement-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; margin-bottom: 24px; }
.site-announcement { overflow-wrap: anywhere; }
.announcement-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.announcement-kind { display: inline-flex; align-items: center; gap: 8px; color: var(--rj-accent); font-size: .8125rem; font-weight: 600; }
.announcement-featured { font-size: .8125rem; color: var(--rj-accent); background: var(--rj-primary-soft); padding: 3px 10px; border-radius: 8px; }
.announcement-summary { font-size: .875rem; color: var(--rj-muted); }
.announcement-content { font-size: .9375rem; border-top: 1px solid var(--rj-border); padding-top: 16px; margin-bottom: 20px; }
.home-updates-empty { text-align: center; }
.home-updates-empty p { margin: 0; color: var(--rj-muted); }
:is(.site-announcement, .post-card)[id] { scroll-margin-top: calc(var(--rj-header-height) + 24px); }
.site-announcement:target, .post-card:target { outline: 2px solid var(--rj-accent); outline-offset: 4px; }

/* Blog, contact and account pages */
.search-form { display: flex; gap: 12px; max-width: 560px; margin-top: 24px; }
.search-form input { flex: 1; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.post-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: border-color .16s, box-shadow .16s; }
.post-card:hover, .post-card:focus-within { border-color: var(--rj-accent); box-shadow: var(--rj-shadow-hover); }
.post-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--rj-surface-2); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.cover-placeholder { display: grid; place-items: center; height: 100%; background: var(--rj-warm-surface); }
.cover-placeholder span { font-size: 3rem; font-weight: 800; color: var(--rj-accent); }
.post-body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.post-meta { color: var(--rj-muted); font-size: .8125rem; margin-bottom: 12px; }
.post-title a { color: var(--rj-text); }
.post-title a:hover { color: var(--rj-accent); }
.post-excerpt { flex: 1; color: var(--rj-muted); font-size: .875rem; }
.read-more { font-size: .875rem; font-weight: 700; }
.arrow-forward::before { content: "←"; }
.arrow-back::before { content: "→"; }
html[dir="ltr"] .arrow-forward::before { content: "→"; }
html[dir="ltr"] .arrow-back::before { content: "←"; }
.article-wrap { padding-block: 24px 64px; }
.article-cover { width: 100%; border-radius: var(--rj-radius); border: 1px solid var(--rj-border); margin-bottom: 32px; }
.article-lead { font-size: 1.125rem; border-inline-start: 3px solid var(--rj-accent); padding-inline-start: 20px; }
.article-content { font-size: 1.0625rem; line-height: 2.1; overflow-wrap: anywhere; margin-bottom: 32px; }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; align-items: start; }
.contact-info { display: grid; gap: 16px; }
.info-card { display: flex; align-items: center; gap: 16px; padding: 20px; }
.info-card .feature-icon { margin: 0; }
.info-card > div { min-width: 0; overflow-wrap: anywhere; }
.info-card h3 { font-size: 1rem; margin: 0 0 4px; }
.info-card p { color: var(--rj-muted); font-size: .875rem; margin: 0; }
.auth-section { padding: 48px 0 64px; min-height: 65vh; }
.auth-wrap { display: flex; justify-content: center; }
.auth-card { width: 100%; max-width: 480px; padding: 32px; }
.auth-card-wide { max-width: 720px; }
.auth-card h1 { font-size: 1.75rem; }
.auth-card > p { font-size: .875rem; }
.auth-alt { color: var(--rj-muted); margin: 24px 0 0; text-align: center; font-size: .875rem; }
.site-footer { border-top: 1px solid var(--rj-border); background: var(--rj-surface); padding-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding-bottom: 32px; }
.footer-about p { max-width: 400px; color: var(--rj-muted); font-size: .875rem; margin: 16px 0 0; }
.site-footer h4 { margin-bottom: 16px; }
.footer-links { display: grid; gap: 8px; font-size: .875rem; }
.footer-links a { color: var(--rj-muted); }
.footer-links a:hover { color: var(--rj-accent); }
.footer-bottom { border-top: 1px solid var(--rj-border); color: var(--rj-muted); font-size: .8125rem; padding-block: 20px; }
.print-actions { margin-top: 24px; }

@media (max-width: 1024px) {
    .hero-inner { gap: 32px; }
    .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps { gap: 16px; }
}
@media (max-width: 768px) {
    .container { width: calc(100% - 32px); }
    .section { padding-block: 40px; }
    .section-tight { padding-top: 16px; }
    .page-head h1, .page-hero h1, .member-home-welcome h1 { font-size: 1.625rem; }
    .hero { padding-block: 40px; }
    .hero-inner, .intro-grid, .contact-grid, .steps, .session-grid { grid-template-columns: minmax(0, 1fr); }
    .hero-inner, .intro-grid { gap: 32px; }
    .hero-visual { padding: 16px; }
    .hero h1 { font-size: 2rem; }
    .hero-stats { gap: 24px; }
    .steps { gap: 16px; }
    .form-row { flex-direction: column; gap: 0; }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .cta-banner, .member-home-welcome > .container { flex-direction: column; align-items: flex-start; }
    .cta-banner { padding: 24px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer-about { grid-column: 1 / -1; }
    .section-head { margin-bottom: 24px; }
    .article-wrap { padding-bottom: 40px; }
}
@media (max-width: 480px) {
    .card, .form-card, .auth-card { padding: 20px; }
    .post-card, .table-card { padding: 0; }
    .features, .post-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .search-form { flex-direction: column; }
    .hero-cta .btn { flex: 1; }
    .hero-stats { justify-content: space-between; gap: 16px; }
    .hero-stats span { max-width: 100px; }
    .hero-visual { padding: 12px; }
    .plan-numbers { width: 100%; }
    .plan-numbers li { flex: 1; min-width: 0; padding: 12px 8px; }
    .alert { align-items: flex-start; }
    .impersonation-banner .btn, .impersonation-banner form { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
    html, body { background: #fff; color: #000; }
    .site-header, .site-footer, .print-actions, .breadcrumbs, .messages, .site-discovery, .skip-link { display: none !important; }
    .session-card > .btn { display: none; }
    .card { box-shadow: none; border: 1px solid #ccc; background: #fff; color: #000; break-inside: avoid; }
    .exercise-meta em, .session-day, .plan-numbers b { color: #000; }
    .muted, .exercise-meta small, .session-notes, .plan-numbers span { color: #444; }
    .plan-numbers li, .session-notes { background: #fff; }
    .hero::before, .hero-visual::before, .cta-banner::before { display: none; }
}