/* ==================================================================================================
   Learning Platform — SDUI renderer component styles (blueprint §6).

   These are the classes the Rendering/ components emit. They are keyed to the SAME semantic theme
   tokens the shell/spine writes from the tenant bundle (--color-*, --space-*, --radius-*). The spine
   owns the token VALUES; every rule here reads a token with a neutral fallback (var(--x, fallback)) so
   a component still renders legibly before a bundle loads or if a tenant omits a token — "a missing
   token degrades to a neutral fallback", exactly as iOS does. No brand nouns; Iswara is just tenant #1.

   Mobile-first. Wide/scrolling content (shelf) scrolls inside its own overflow container so the page
   body never scrolls horizontally.
   ================================================================================================== */

.r-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-m, 16px);
    padding-bottom: var(--space-xl, 32px);
    max-width: 720px;
    margin: 0 auto;
}

.r-block { min-width: 0; }

/* Full-bleed blocks (hero, hero-band stat-row/progress) span the page gutters. */
.r-hero,
.r-stat-row--hero,
.r-progress-bar--hero { margin-inline: calc(-1 * var(--space-l, 24px)); }

/* ── icons + meters (shared primitives) ─────────────────────────────────────────────────────────── */
.r-icon {
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.125em;
    background: currentColor;
    -webkit-mask: var(--icon-src, none) center / contain no-repeat;
    mask: var(--icon-src, none) center / contain no-repeat;
    opacity: 0.9;
}
.r-meter {
    display: block;
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: var(--color-line, #e3e2dd);
    overflow: hidden;
}
.r-meter__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-accent, #14213d);
    transition: width 0.6s ease-out;
}

/* ── hero ───────────────────────────────────────────────────────────────────────────────────────── */
.r-hero {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-l, 24px);
}
.r-hero--plain { padding-block: var(--space-s, 8px); }
.r-hero--navy { background: var(--color-heroBg, #14213d); color: var(--color-onHero, #fff); }
.r-hero--gold { background: color-mix(in srgb, var(--color-accent, #c8a951) 18%, transparent); }
.r-hero__mark {
    width: 54px; height: 54px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-accent, #c8a951);
    color: var(--color-heroBg, #14213d);
    font: 700 26px/1 Georgia, serif;
    margin-bottom: 4px;
}
.r-hero__label {
    margin: 0;
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-accent, #c8a951);
}
.r-hero--navy .r-hero__label { color: var(--color-accent, #c8a951); }
.r-hero__title { margin: 0; font-size: 22px; font-weight: 600; }
.r-hero--navy .r-hero__title { color: var(--color-onHero, #fff); }
.r-hero__subtitle { margin: 0; font-size: 14px; color: var(--color-muted, #5a5a55); }
.r-hero--navy .r-hero__subtitle { color: color-mix(in srgb, var(--color-onHero, #fff) 75%, transparent); }

/* ── stat-row ───────────────────────────────────────────────────────────────────────────────────── */
.r-stat-row { padding-inline: var(--space-l, 24px); }
.r-stat-row--hero {
    background: var(--color-heroBg, #14213d);
    color: var(--color-onHero, #fff);
    padding: var(--space-s, 8px) var(--space-l, 24px);
}
.r-stat-row__total { margin: 0 0 var(--space-s, 8px); font-size: 30px; font-weight: 700; }
.r-stat-row__total-unit { font-size: 14px; opacity: 0.7; margin-inline-start: 6px; }
.r-stat-row__items { display: flex; gap: 10px; }
.r-stat-box {
    position: relative;
    flex: 1;
    display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
    padding: 12px 8px;
    border-radius: var(--radius-tile, 10px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-line, #e3e2dd);
}
.r-stat-row--hero .r-stat-box {
    background: rgba(255, 255, 255, 0.07);
    border-color: transparent;
    color: var(--color-onHero, #fff);
}
.r-stat-box--flagged { border: 2px solid var(--color-accent, #c8a951); }
.r-stat-box__focus {
    position: absolute; top: -8px; left: 8px;
    font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 3px 7px; border-radius: 999px;
    background: var(--color-accent, #c8a951); color: var(--color-onAccent, #14213d);
}
.r-stat-box__label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.r-stat-box__value { font-size: 20px; font-weight: 700; }
.r-stat-box__delta { font-size: 10px; font-weight: 600; color: var(--color-safe, #0f6e56); margin-inline-start: 2px; }

/* ── stat-strip ─────────────────────────────────────────────────────────────────────────────────── */
.r-stat-strip { display: flex; gap: var(--space-l, 24px); justify-content: center; padding: var(--space-s, 8px) var(--space-l, 24px); }
.r-stat-strip__item { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--color-muted, #5a5a55); }

/* ── media-card ─────────────────────────────────────────────────────────────────────────────────── */
.r-media-card {
    border-radius: var(--radius-card, 14px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-line, #e3e2dd);
    overflow: hidden;
}
.r-media-card--gold { border: 2px solid var(--color-accent, #c8a951); }
.r-media-card__head { display: flex; gap: var(--space-s, 8px); align-items: center; padding: var(--space-s, 8px); }
.r-media-card__art {
    flex: 0 0 auto; width: 54px; height: 54px;
    border-radius: var(--radius-tile, 10px);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px;
    background: linear-gradient(135deg, var(--color-accent, #14213d), color-mix(in srgb, var(--color-accent, #c8a951) 40%, #fff));
}
.r-media-card__body { flex: 1; min-width: 0; }
.r-media-card__domain { margin: 0; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent, #c8a951); }
.r-media-card__title { margin: 2px 0; font-size: 16px; font-weight: 600; color: var(--color-text, #1a1a18); }
.r-media-card__meta { margin: 0; font-size: 12px; color: var(--color-muted, #5a5a55); }
.r-media-card__play {
    flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--color-accent, #14213d); color: var(--color-onAccent, #fff);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.r-media-card__disclosure { border-top: 1px solid var(--color-line, #e3e2dd); padding: var(--space-s, 8px); font-size: 12px; }
.r-media-card__disclosure summary { cursor: pointer; font-weight: 600; color: var(--color-muted, #5a5a55); }
.r-media-card__disclosure-text { margin: 6px 0 0; color: var(--color-text, #1a1a18); }

/* ── media-list ─────────────────────────────────────────────────────────────────────────────────── */
.r-media-list {
    border-radius: var(--radius-card, 14px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-line, #e3e2dd);
    overflow: hidden;
}
.r-media-list__row {
    padding: 12px 15px; display: flex; flex-direction: column; gap: 8px;
    width: 100%; text-align: start; font: inherit; color: inherit;
    background: transparent; border: 0; cursor: pointer;
    transition: background 0.12s ease-out;
}
.r-media-list__row + .r-media-list__row { border-top: 1px solid var(--color-line, #e3e2dd); }
.r-media-list__row:hover { background: color-mix(in srgb, var(--color-text, #1a1a18) 4%, transparent); }
.r-media-list__row:active { background: color-mix(in srgb, var(--color-text, #1a1a18) 7%, transparent); }
.r-media-list__row:focus-visible { outline: 2px solid var(--color-accent, #c8a951); outline-offset: -2px; }
.r-media-list__row-head { display: flex; align-items: center; gap: 10px; }
.r-media-list__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.r-media-list__title { font-size: 14px; font-weight: 500; color: var(--color-text, #1a1a18); }
.r-media-list__meta { font-size: 12px; color: var(--color-muted, #5a5a55); }
.r-media-list__status { font-size: 11px; font-weight: 600; color: var(--color-muted, #5a5a55); }

/* ── shelf (horizontal scroll) ──────────────────────────────────────────────────────────────────── */
.r-shelf { display: flex; flex-direction: column; gap: 8px; }
.r-shelf__title { margin: 0; padding-inline: var(--space-l, 24px); font-size: 16px; font-weight: 600; }
.r-shelf__track {
    display: flex; gap: 10px;
    overflow-x: auto;
    padding-inline: var(--space-l, 24px);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.r-shelf__card {
    flex: 0 0 150px; height: 110px;
    display: flex; flex-direction: column; gap: 8px;
    padding: var(--space-s, 8px);
    border-radius: var(--radius-tile, 10px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-line, #e3e2dd);
    scroll-snap-align: start;
    text-align: start; font: inherit; color: inherit; cursor: pointer;
    transition: transform 0.12s ease-out, border-color 0.12s ease-out, box-shadow 0.12s ease-out;
}
.r-shelf__card:hover { border-color: color-mix(in srgb, var(--color-accent, #c8a951) 55%, var(--color-line, #e3e2dd)); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
.r-shelf__card:active { transform: scale(0.98); }
.r-shelf__card:focus-visible { outline: 2px solid var(--color-accent, #c8a951); outline-offset: 2px; }
.r-shelf__tag { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent, #c8a951); }
.r-shelf__card-title { font-size: 13px; font-weight: 600; color: var(--color-text, #1a1a18); flex: 1; }
.r-shelf__card-status { font-size: 11px; color: var(--color-muted, #5a5a55); }

/* ── chips / options (shared interactive surfaces) ──────────────────────────────────────────────── */
.r-chip-question, .r-option-list, .r-chip-select, .r-avatar-picker { padding-inline: var(--space-l, 24px); }
.r-chip-question { border: 0; margin: 0; }
.r-chip-question__prompt { padding: 0; font-size: 13px; font-weight: 500; color: var(--color-text, #1a1a18); }
.r-chip-question__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--space-s, 8px); }
.r-chip {
    font: 500 12px/1 inherit; cursor: pointer;
    padding: 8px 12px; border-radius: 9px;
    background: transparent; color: var(--color-muted, #5a5a55);
    border: 1px solid currentColor;
}
.r-chip[data-tone="safe"] { color: var(--color-safe, #0f6e56); }
.r-chip[data-tone="danger"] { color: var(--color-danger, #b3261e); }
.r-chip--selected { background: color-mix(in srgb, currentColor 14%, transparent); border-width: 1.6px; }

.r-option-list__prompt { margin: 0 0 var(--space-s, 8px); font-size: 16px; font-weight: 600; color: var(--color-text, #1a1a18); }
.r-option-list__options { display: flex; flex-direction: column; gap: 9px; }
.r-option-list--dimmed { opacity: 0.4; pointer-events: none; }
.r-option {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: start; cursor: pointer;
    padding: 13px 15px; border-radius: var(--radius-tile, 10px);
    background: var(--color-surface, #fff); border: 1px solid var(--color-line, #e3e2dd);
    color: var(--color-text, #1a1a18); font: inherit;
}
.r-option--selected { border: 1.6px solid var(--color-accent, #c8a951); }
.r-option__text { display: flex; flex-direction: column; gap: 2px; }
.r-option__label { font-size: 14px; font-weight: 500; }
.r-option__sub { font-size: 12px; color: var(--color-muted, #5a5a55); }

.r-chip-select__label { font-size: 12px; font-weight: 600; color: var(--color-muted, #5a5a55); }
.r-chip-select__options { display: flex; gap: 8px; margin-top: 8px; }
.r-chip-select__opt {
    flex: 1; cursor: pointer; font: 500 13px/1 inherit; padding: 9px 0; border-radius: 9px;
    background: var(--color-surface, #fff); border: 1px solid var(--color-line, #e3e2dd); color: var(--color-text, #1a1a18);
}
.r-chip-select__opt--selected { background: var(--color-heroBg, #14213d); color: var(--color-onHero, #fff); border-color: transparent; }

/* ── toggle-list ────────────────────────────────────────────────────────────────────────────────── */
.r-toggle-list { border-radius: var(--radius-card, 14px); background: var(--color-surface, #fff); border: 1px solid var(--color-line, #e3e2dd); overflow: hidden; }
.r-toggle-row { display: flex; align-items: center; gap: 12px; padding: 12px 15px; cursor: pointer; }
.r-toggle-row + .r-toggle-row { border-top: 1px solid var(--color-line, #e3e2dd); }
.r-toggle-row__icon {
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--color-accent, #c8a951); background: color-mix(in srgb, var(--color-accent, #c8a951) 12%, transparent);
}
.r-toggle-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.r-toggle-row__title { font-size: 14px; font-weight: 500; color: var(--color-text, #1a1a18); }
.r-toggle-row__sub { font-size: 12px; color: var(--color-muted, #5a5a55); }

/* ── avatar-picker ──────────────────────────────────────────────────────────────────────────────── */
.r-avatar-picker__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-muted, #5a5a55); }
.r-avatar-picker__tiles { display: flex; gap: 10px; margin-top: 8px; }
.r-avatar {
    width: 48px; height: 48px; border-radius: 50%; cursor: pointer; border: 0;
    display: flex; align-items: center; justify-content: center; font: 700 18px/1 inherit;
}
.r-avatar--selected { outline: 2.5px solid var(--color-accent, #c8a951); outline-offset: 1px; }
.r-avatar--overflow { background: var(--color-surface, #fff); color: var(--color-muted, #5a5a55); border: 2px dashed var(--color-line, #e3e2dd); }

/* ── progress-bar / ring ────────────────────────────────────────────────────────────────────────── */
.r-progress-bar { display: flex; flex-direction: column; gap: 6px; padding-inline: var(--space-l, 24px); }
.r-progress-bar--hero { background: var(--color-heroBg, #14213d); color: var(--color-onHero, #fff); padding-block: var(--space-s, 8px); }
.r-progress-bar__label { font-size: 12px; font-weight: 500; opacity: 0.9; }
.r-progress-bar--hairline .r-meter { height: 4px; }
.r-progress-ring { position: relative; width: 120px; height: 120px; margin-inline: auto; }
.r-progress-ring__svg { width: 100%; height: 100%; }
.r-progress-ring__track { stroke: var(--color-line, #e3e2dd); }
.r-progress-ring__fill { stroke: var(--color-accent, #14213d); transition: stroke-dasharray 0.8s ease-out; }
.r-progress-ring__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; }

/* ── chat-bar ───────────────────────────────────────────────────────────────────────────────────── */
.r-chat-bar {
    display: flex; align-items: center; gap: 10px; margin-inline: var(--space-l, 24px);
    padding: 8px 14px; border-radius: 999px;
    background: var(--color-surface, #fff); border: 1px solid var(--color-line, #e3e2dd);
}
.r-chat-bar__input { flex: 1; border: 0; background: transparent; font: 13px inherit; color: var(--color-text, #1a1a18); outline: none; }
.r-chat-bar__send { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; background: var(--color-accent, #14213d); color: var(--color-onAccent, #fff); }

/* ── ai-text / callout / quote / status ─────────────────────────────────────────────────────────── */
.r-ai-text {
    margin-inline: var(--space-l, 24px); padding: var(--space-m, 16px); font-size: 13.5px;
    border-radius: var(--radius-card, 14px);
    background: var(--color-aiBg, color-mix(in srgb, var(--color-accent, #c8a951) 12%, transparent));
    color: var(--color-text, #1a1a18);
}
.r-callout {
    margin-inline: var(--space-l, 24px); padding: var(--space-s, 8px);
    border-radius: var(--radius-tile, 10px);
    border: 1px solid color-mix(in srgb, var(--color-accent, #c8a951) 40%, transparent);
    background: color-mix(in srgb, var(--color-accent, #c8a951) 12%, transparent);
}
.r-callout[data-tone="safe"] { border-color: var(--color-safe, #0f6e56); background: color-mix(in srgb, var(--color-safe, #0f6e56) 8%, transparent); }
.r-callout[data-tone="danger"] { border-color: var(--color-danger, #b3261e); background: color-mix(in srgb, var(--color-danger, #b3261e) 8%, transparent); }
.r-callout__label { margin: 0 0 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent, #c8a951); }
.r-callout[data-tone="safe"] .r-callout__label { color: var(--color-safe, #0f6e56); }
.r-callout[data-tone="danger"] .r-callout__label { color: var(--color-danger, #b3261e); }
.r-callout__text { margin: 0; font-size: 12.5px; color: var(--color-text, #1a1a18); }
/* ── article (server-sanitised long-form body) ──────────────────────────────────────────────────── */
.r-article {
    margin-inline: var(--space-l, 24px);
    color: var(--color-text, #1a1a18);
    font-size: 15px; line-height: 1.65;
    overflow-wrap: break-word;
}
.r-article > :first-child { margin-top: 0; }
.r-article > :last-child { margin-bottom: 0; }
.r-article h1, .r-article h2, .r-article h3, .r-article h4 {
    margin: 1.4em 0 0.5em; line-height: 1.25; font-weight: 600; color: var(--color-text, #1a1a18);
}
.r-article h1 { font-size: 1.5em; }
.r-article h2 { font-size: 1.3em; }
.r-article h3 { font-size: 1.13em; }
.r-article h4 { font-size: 1em; letter-spacing: 0.01em; }
.r-article p { margin: 0 0 0.9em; }
.r-article strong, .r-article b { font-weight: 600; }
.r-article em, .r-article i { font-style: italic; }
.r-article ul, .r-article ol { margin: 0 0 0.9em; padding-inline-start: 1.5em; }
.r-article li { margin: 0.25em 0; }
.r-article li::marker { color: var(--color-accent, #c8a951); }
.r-article a { color: var(--color-accent, #c8a951); text-decoration: underline; text-underline-offset: 2px; }
.r-article a:hover { text-decoration-thickness: 2px; }
.r-article blockquote {
    margin: 1em 0; padding: 0.4em 0 0.4em var(--space-m, 16px);
    border-inline-start: 3px solid var(--color-accent, #c8a951);
    color: var(--color-muted, #5a5a55); font-style: italic;
}
.r-article hr { border: 0; border-top: 1px solid var(--color-line, #e3e2dd); margin: 1.5em 0; }

.r-quote {
    margin-inline: var(--space-l, 24px); padding: var(--space-m, 16px);
    border-inline-start: 3px solid var(--color-accent, #c8a951);
    border-radius: var(--radius-card, 14px);
    background: var(--color-surface, #fff); border-block: 1px solid var(--color-line, #e3e2dd); border-inline-end: 1px solid var(--color-line, #e3e2dd);
}
.r-quote__text { margin: 0; font-style: italic; font-size: 15px; color: var(--color-text, #1a1a18); }
.r-quote__by { margin-top: 6px; font-size: 11px; color: var(--color-muted, #5a5a55); }
.r-status { display: flex; flex-direction: column; align-items: center; gap: var(--space-s, 8px); text-align: center; padding: var(--space-l, 24px); }
.r-status__icon { font-size: 44px; color: var(--color-accent, #c8a951); }
.r-status__title { margin: 0; font-size: 20px; font-weight: 600; }
.r-status__subtitle { margin: 0; font-size: 14px; color: var(--color-muted, #5a5a55); }

/* ── form-group ─────────────────────────────────────────────────────────────────────────────────── */
.r-form-group { display: flex; flex-direction: column; gap: 8px; }
.r-form-group__title { margin: 0; padding-inline: var(--space-l, 24px); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted, #5a5a55); }
.r-form-group__rows { margin-inline: var(--space-l, 24px); border-radius: var(--radius-card, 14px); background: var(--color-surface, #fff); border: 1px solid var(--color-line, #e3e2dd); overflow: hidden; }
.r-form-row {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
    padding: 12px 15px; font: inherit; color: var(--color-text, #1a1a18); background: transparent; border: 0;
}
.r-form-row + .r-form-row { border-top: 1px solid var(--color-line, #e3e2dd); }
.r-form-row:not(.r-form-row--info) { cursor: pointer; }
.r-form-row__avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--color-onHero, #fff); background: var(--color-heroBg, #14213d); }
.r-form-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.r-form-row__label { font-size: 14px; font-weight: 500; }
.r-form-row__value { font-size: 12px; color: var(--color-muted, #5a5a55); }
.r-form-row__trail { width: 16px; height: 16px; color: var(--color-muted, #5a5a55); }
/* edit row: an inline text field + Save/Cancel while editing the display name. */
.r-form-row--editing { cursor: default; align-items: center; }
.r-form-row__input {
    margin-top: 4px; width: 100%; font: inherit; font-size: 14px;
    padding: 7px 9px; border-radius: 8px;
    border: 1px solid var(--color-accent, #14213d); background: var(--color-surface, #fff);
    color: var(--color-text, #1a1a18);
}
.r-form-row__actions { display: flex; gap: 8px; flex-shrink: 0; }
.r-form-row__save, .r-form-row__cancel {
    font: 600 12.5px/1 inherit; padding: 7px 12px; border-radius: 8px; cursor: pointer;
}
.r-form-row__save { border: 0; background: var(--color-accent, #14213d); color: var(--color-onAccent, #fff); }
.r-form-row__save:disabled { opacity: 0.5; cursor: default; }
.r-form-row__cancel { border: 1px solid var(--color-line, #e3e2dd); background: transparent; color: var(--color-muted, #5a5a55); }

/* ── video ──────────────────────────────────────────────────────────────────────────────────────── */
.r-video {
    border-radius: var(--radius-card, 14px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-line, #e3e2dd);
    overflow: hidden;
}
.r-video__head { padding: var(--space-s, 8px) var(--space-m, 16px); }
.r-video__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-text, #1a1a18); }
.r-video__meta { margin: 2px 0 0; font-size: 12px; color: var(--color-muted, #5a5a55); }
/* Responsive 16:9 frame — padding-top keeps the aspect on every width; the iframe fills it absolutely. */
.r-video__frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: var(--color-heroBg, #14213d);
}
.r-video__iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; display: block;
}

/* ── cta ────────────────────────────────────────────────────────────────────────────────────────── */
.r-cta-wrap { padding-inline: var(--space-l, 24px); }
.r-cta {
    width: 100%; cursor: pointer; font: 600 15px/1 inherit; padding: 15px;
    border-radius: var(--radius-pill, 999px); border: 0;
}
.r-cta--gold { background: var(--color-accent, #c8a951); color: var(--color-onAccent, #14213d); }
.r-cta--navy { background: var(--color-heroBg, #14213d); color: var(--color-onHero, #fff); }
.r-cta--outline { background: transparent; color: var(--color-heroBg, #14213d); border: 1.5px solid var(--color-heroBg, #14213d); }
.r-cta--ghost { background: transparent; color: var(--color-muted, #5a5a55); }

/* ── tablet / desktop ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .r-page { gap: var(--space-l, 24px); }
    .r-shelf__card { flex-basis: 180px; }
}