/* ==================================================================================================
   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; }

/* ── named text styles (LP-171) ─────────────────────────────────────────────────────────────────────
   The theme's type scale arrives as --type-<name>-size/-weight/-line-height/-family for display, title,
   headline, body, caption and meta (plus any name of the theme's own), built-in values included. A rule
   that plays one of those roles reads them, with today's literal as the fallback until a bundle loads.
   -line-height is only set when the style has one; -family is the design's --font-display / --font-body.
   title and body are read in place (hero title; article and sheet body). The secondary lines under a
   title are the caption role and the small status lines the meta role: */
.r-media-card__meta, .r-media-list__meta, .r-video__meta, .r-sequence-list__meta, .r-option__sub,
.r-toggle-row__sub, .r-form-row__value, .r-ranked-list__sublabel, .r-ask-box__opening-hint, .r-ask-box__secondary-hint {
    font-family: var(--type-caption-family, inherit); font-size: var(--type-caption-size, 12px);
    font-weight: var(--type-caption-weight, inherit); line-height: var(--type-caption-line-height, inherit);
}
.r-shelf__card-status, .r-likert__label {
    font-family: var(--type-meta-family, inherit); font-size: var(--type-meta-size, 11px);
    font-weight: var(--type-meta-weight, inherit); line-height: var(--type-meta-line-height, inherit);
}

/* ── named tones (LP-135) ───────────────────────────────────────────────────────────────────────────
   A component painted by a theme tone carries .r-toned (the theme's `tones` define the name) and/or
   .r-toned-dark (`tonesDark` does), with --tone-bg/-fg/-edge set inline to the theme's --tone-<name>-*.
   The toned look is drawn only in a mode that has its class, through the one gate
       :where(:root:not(.dark) .r-toned, .dark .r-toned-dark)
   so dark mode with no dark tone keeps the plain look, as iOS does. Inside it a part the tone leaves out
   falls back the iOS way: bg → surface, fg → text, edge → no border. :where() adds no specificity, so a
   toned rule ranks by its place in this file.

   --tint is a theme COLOUR picked by a prop (domainTone, iconTone, a stat-strip or shelf tone), set
   inline as var(--color-<name>); a colour the theme doesn't carry falls back to the accent. */

/* 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;
    flex: 0 0 auto;
    opacity: 0.9;
}
.r-meter {
    display: block;
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: var(--color-hairline, #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-heroText, #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-family: var(--hero-titleStyle-family, var(--type-title-family, inherit));
    font-size: var(--hero-titleStyle-size, var(--type-title-size, 22px));
    font-weight: var(--hero-titleStyle-weight, var(--type-title-weight, 600));
    line-height: var(--hero-titleStyle-line-height, var(--type-title-line-height, inherit));
}
.r-hero--navy .r-hero__title { color: var(--color-heroText, #fff); }
.r-hero__subtitle { margin: 0; font-size: 14px; color: var(--color-textMuted, #5a5a55); }
.r-hero--navy .r-hero__subtitle { color: color-mix(in srgb, var(--color-heroText, #fff) 75%, transparent); }
/* hero variant "assignment": eyebrow, window, CTA and an untruncated privacy footnote. */
.r-hero--assignment { gap: var(--space-s, 8px); }
.r-hero__window { margin: 0; font-size: 13px; font-weight: 500; color: var(--color-textMuted, #5a5a55); }
.r-hero__window::before { content: "\25F7"; margin-inline-end: 6px; }
.r-hero--navy .r-hero__window { color: color-mix(in srgb, var(--color-heroText, #fff) 75%, transparent); }
.r-hero__cta {
    align-self: flex-start; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
    font: 600 15px/1 inherit; background: var(--color-accent, #c8a951); color: var(--color-onAccent, var(--color-heroBg, #14213d));
}
.r-hero__footnote {
    margin: var(--space-xs, 4px) 0 0; padding-top: var(--space-s, 8px); font-size: 12px; white-space: normal; overflow: visible;
    border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); color: var(--color-textMuted, #5a5a55);
}
/* On the navy band the CTA inverts (onHero fill, heroBg text) so it reads whatever the tenant's accent is. */
.r-hero--navy .r-hero__cta { background: var(--color-heroText, #fff); color: var(--color-heroBg, #14213d); }
.r-hero__footnote::before { content: "\1F512\FE0E"; font-size: 10px; margin-inline-end: 7px; }
.r-hero--navy .r-hero__footnote { color: color-mix(in srgb, var(--color-heroText, #fff) 75%, transparent); }

/* Style preset options (style.hero, LP-174). The preset's enums and bools are classes on the block's wrapper and its
   image radius and title style are --hero-imageRadius / --hero-titleStyle-* properties there; an option the preset
   leaves out keeps the rules above. They draw on the standard head only. The image, the icon and chevron row and
   the meta line are in the markup only when the preset asks for them and the block carries the data. */
.r-hero__image {
    aspect-ratio: 16 / 9; overflow: hidden; margin-block-end: var(--space-m, 16px);
    background: var(--color-surfaceMuted, var(--color-hairline, #e3e2dd));
}
.r-hero__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.r-hero--imageAspect-3\:2 .r-hero__image { aspect-ratio: 3 / 2; }
.r-hero--imageAspect-1\:1 .r-hero__image { aspect-ratio: 1; }
/* image fullBleed: out over the hero's own padding to its top and side edges (the hero already spans the page's
   gutters), square corners. inset stays inside the padding and takes imageRadius. */
.r-hero--image-fullBleed .r-hero__image { margin-inline: calc(-1 * var(--space-l, 24px)); margin-block-start: calc(-1 * var(--space-l, 24px)); }
.r-hero--image-fullBleed .r-hero--plain .r-hero__image { margin-block-start: calc(-1 * var(--space-s, 8px)); }
.r-hero--image-inset .r-hero__image { border-radius: var(--hero-imageRadius, var(--radius-media, var(--radius-tile, 10px))); }
/* backdrop mist (LP-212): a two-tone diagonal gradient behind the head, from the tone's background to a quarter of
   the way to its foreground (the iOS twin's MistColors.depth), so text drawn for that background stays readable.
   The pair is backdropTone, else the hero's own tone (the block's, else the preset's), else the navy hero's. This
   is the still frame, and all there is off a practice page, under reduced motion, without WebGL 2 or offline. On a
   practice page the scene host lays the moving mist over it, drawn from this element's computed color (from) and
   background-color (to), so the still and the moving frame are always the same pair. */
.r-hero--backdrop-mist .r-hero { position: relative; isolation: isolate; }
.r-mist {
    --mist-from: var(--hero-backdropTone-bg, var(--mist-tone-bg, var(--hero-tone-bg, var(--color-heroBg, #14213d))));
    --mist-ink: var(--hero-backdropTone-fg, var(--mist-tone-fg, var(--hero-tone-fg, var(--color-heroText, #fff))));
    --mist-to: color-mix(in srgb, var(--mist-from) 75%, var(--mist-ink));
    position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    color: var(--mist-from);
    background-color: var(--mist-to);
    background-image: linear-gradient(to bottom right, var(--mist-from), var(--mist-to));
}
.r-mist > canvas { display: block; width: 100%; height: 100%; }
/* eyebrow plain: the label as authored, in small regular text. */
.r-hero--eyebrow-plain .r-hero__label {
    font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--color-textMuted, #5a5a55);
}
.r-hero--eyebrow-plain .r-hero--navy .r-hero__label { color: color-mix(in srgb, var(--color-heroText, #fff) 75%, transparent); }
/* leadingIcon / chevron: the title's row. A chevron makes the whole head a role="button". */
.r-hero__head { display: flex; align-items: center; gap: var(--space-s, 8px); }
.r-hero__head .r-hero__title { flex: 1 1 auto; min-width: 0; }
.r-hero__icon { display: flex; flex: 0 0 auto; font-size: 20px; }
.r-hero__chevron { display: flex; flex: 0 0 auto; font-size: 14px; color: var(--color-textMuted, #5a5a55); }
.r-hero--navy .r-hero__chevron { color: color-mix(in srgb, var(--color-heroText, #fff) 75%, transparent); }
.r-hero[role="button"] { cursor: pointer; }
.r-hero[role="button"]:focus-visible { outline: 2px solid var(--color-accent, #c8a951); outline-offset: -2px; }
/* metaPosition belowTitle: the block's meta ("Lesson 2 of 8"), in the caption role. */
.r-hero__meta {
    margin: 0; color: var(--color-textMuted, #5a5a55);
    font-family: var(--type-caption-family, inherit); font-size: var(--type-caption-size, 12px);
    font-weight: var(--type-caption-weight, inherit); line-height: var(--type-caption-line-height, inherit);
}
.r-hero--navy .r-hero__meta { color: color-mix(in srgb, var(--color-heroText, #fff) 75%, transparent); }
/* subtitleLines 1 to 8 (a class on the head: line-clamp takes a bare count). 0 is no limit and has no class. */
.r-hero[class*="r-hero--subtitleLines-"] .r-hero__subtitle {
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
    -webkit-line-clamp: var(--hero-lines); line-clamp: var(--hero-lines);
}
.r-hero--subtitleLines-1 { --hero-lines: 1; }
.r-hero--subtitleLines-2 { --hero-lines: 2; }
.r-hero--subtitleLines-3 { --hero-lines: 3; }
.r-hero--subtitleLines-4 { --hero-lines: 4; }
.r-hero--subtitleLines-5 { --hero-lines: 5; }
.r-hero--subtitleLines-6 { --hero-lines: 6; }
.r-hero--subtitleLines-7 { --hero-lines: 7; }
.r-hero--subtitleLines-8 { --hero-lines: 8; }

/* ── stat-row ───────────────────────────────────────────────────────────────────────────────────── */
.r-stat-row { padding-inline: var(--space-l, 24px); }
.r-stat-row--hero {
    background: var(--color-heroBg, #14213d);
    color: var(--color-heroText, #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-hairline, #e3e2dd);
}
.r-stat-row--hero .r-stat-box {
    background: rgba(255, 255, 255, 0.07);
    border-color: transparent;
    color: var(--color-heroText, #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; font-weight: 500; color: var(--color-textMuted, #5a5a55); }
.r-stat-strip__item .r-icon { font-size: 20px; color: var(--tint, var(--color-accent, #c8a951)); }
.r-stat-strip--week { gap: 0; }
.r-stat-strip__day { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--color-textMuted, #5a5a55); }
.r-stat-strip__dot { box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--color-hairline, #e3e2dd); }
.r-stat-strip__dot--on { background: var(--color-accent, #c8a951); border-color: var(--color-accent, #c8a951); }

/* ── media-card ─────────────────────────────────────────────────────────────────────────────────── */
.r-media-card {
    border-radius: var(--media-card-radius, var(--radius-card, 14px));
    background: var(--media-card-tone-bg, var(--media-card-surface, var(--color-surface, #fff)));
    border: 1px solid var(--media-card-tone-edge, var(--color-hairline, #e3e2dd));
    overflow: hidden;
}
.r-media-card:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) { background: var(--tone-bg, var(--color-surface, #fff)); border-color: var(--tone-edge, transparent); }
.r-media-card:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-media-card__title { color: var(--tone-fg, var(--color-text, #1a1a18)); }
.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(--tint, var(--color-accent, #c8a951)); }
.r-media-card__title { margin: 2px 0; font-size: 16px; font-weight: 600; color: var(--media-card-tone-fg, var(--color-text, #1a1a18)); }
.r-media-card__meta { margin: 0; color: var(--color-textMuted, #5a5a55); }
.r-media-card__rep { margin: 2px 0 0; font-size: 12px; font-weight: 500; color: var(--color-text, #1a1a18); }
.r-media-card__last { margin: 2px 0 0; font-size: 11.5px; color: var(--color-textMuted, #5a5a55); }
.r-media-card__counts::before { content: "\2713"; margin-inline-start: 5px; font-size: 12px; font-weight: 700; color: var(--color-safe, #0f6e56); }
.r-media-card__save {
    flex: 0 0 auto; width: 40px; height: 44px; border: 0; background: transparent; cursor: pointer;
    font-size: 20px; line-height: 1; color: var(--color-textMuted, #5a5a55);
}
.r-media-card__save::before { content: "\2661"; }
.r-media-card__save--on { color: var(--color-accent, #c8a951); }
.r-media-card__save--on::before { content: "\2665"; }
.r-media-card__save:focus-visible, .r-media-card__play:focus-visible { outline: 2px solid var(--color-accent, #c8a951); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
    .r-media-card__save--on::before { display: inline-block; animation: r-pop 0.25s ease-out; }
}
@keyframes r-pop { 50% { transform: scale(1.25); } }
.r-media-card__play {
    flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--media-card-playFill, 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-hairline, #e3e2dd); padding: var(--space-s, 8px); font-size: 12px; }
.r-media-card__disclosure summary { cursor: pointer; font-weight: 600; color: var(--color-textMuted, #5a5a55); }
.r-media-card__disclosure-text { margin: 6px 0 0; color: var(--color-text, #1a1a18); }

/* Style preset options (style.media-card, LP-178). The preset's enums and bools are classes on the block's wrapper
   and its colours and radius are --media-card-* properties there; an option the preset leaves out keeps the rules
   above. A preset's tone tints the card as the block's own `tone` does, and the block's wins where both are set. */
.r-media-card__cover {
    aspect-ratio: 16 / 9; overflow: hidden; margin-block-end: var(--space-s, 8px);
    background: var(--color-surfaceMuted, var(--color-hairline, #e3e2dd));
}
.r-media-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* cover fullBleed: out across the page's side gutter, as video's fullBleed placement. inset keeps the page's
   margins and takes the card's corners. */
.r-media-card--cover-fullBleed .r-media-card__cover { margin-inline: calc(-1 * var(--page-gutter, 0px)); }
.r-media-card--cover-inset .r-media-card__cover { border-radius: var(--media-card-radius, var(--radius-card, 14px)); }
.r-media-card--artwork-none .r-media-card__art { display: none; }
.r-media-card--border-none .r-media-card { border: 0; }
.r-media-card--border-hairline .r-media-card { border: 1px solid var(--color-hairline, #e3e2dd); }
.r-media-card--border-accent .r-media-card { border: 2px solid var(--color-accent, #c8a951); }
/* playButton glyph: the play glyph alone, drawn large, in the play colour. */
.r-media-card--playButton-glyph .r-media-card__play {
    background: transparent; border-radius: 0; font-size: 28px;
    color: var(--media-card-playFill, var(--color-accent, #14213d));
}

/* ── media-list ─────────────────────────────────────────────────────────────────────────────────── */
.r-media-list {
    border-radius: var(--radius-card, 14px);
    background: var(--media-list-tone-bg, var(--color-surface, #fff));
    border: 1px solid var(--media-list-tone-edge, var(--color-hairline, #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-hairline, #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(--media-list-titleTone-fg, var(--media-list-tone-fg, var(--color-text, #1a1a18))); }
.r-media-list__meta { color: var(--color-textMuted, #5a5a55); }
.r-media-list__status { font-size: 11px; font-weight: 600; color: var(--color-textMuted, #5a5a55); }
/* A locked row (row data, not style): a lock beside its status, and nothing to tap. */
.r-media-list__row--locked { cursor: default; }
.r-media-list__row--locked:hover, .r-media-list__row--locked:active { background: transparent; }
.r-media-list__status .r-icon { margin-inline-end: 4px; }

/* Style preset options (style.media-list, LP-173). The preset's enums and bools are classes on the block's wrapper
   and its lengths are --media-list-* properties there; an option the preset leaves out keeps the rules above. */
.r-media-list__art { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; width: var(--media-list-thumbnailWidth, 81px); }
.r-media-list__thumb {
    display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: var(--media-list-thumbnailRadius, var(--radius-media, var(--radius-tile, 10px)));
    background: var(--color-surfaceMuted, var(--color-hairline, #e3e2dd));
}
.r-media-list__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.r-media-list--thumbnailAspect-4\:3 .r-media-list__thumb { aspect-ratio: 4 / 3; }
.r-media-list--thumbnailAspect-1\:1 .r-media-list__thumb { aspect-ratio: 1; }
.r-media-list__art .r-meter { height: 3px; }
.r-media-list__media, .r-media-list__done { display: flex; align-items: center; gap: 6px; }
.r-media-list__media .r-icon, .r-media-list__done .r-icon { font-size: 15px; }
.r-media-list__done .r-icon { color: var(--color-accent, #c8a951); opacity: 1; }
.r-media-list__chevron { display: flex; flex: 0 0 auto; font-size: 14px; color: var(--color-textMuted, #5a5a55); }
/* rowLayout card: each row is its own card and the list is only their stack. */
.r-media-list--rowLayout-card .r-media-list {
    display: flex; flex-direction: column; gap: var(--space-s, 8px);
    border: 0; border-radius: 0; background: transparent; overflow: visible;
}
.r-media-list--rowLayout-card .r-media-list__row,
.r-media-list--rowLayout-card .r-media-list__row + .r-media-list__row {
    border: 1px solid var(--media-list-tone-edge, var(--color-hairline, #e3e2dd));
    border-radius: var(--radius-card, 14px);
    background: var(--media-list-tone-bg, var(--color-surface, #fff));
}
.r-media-list--rowLayout-card .r-media-list__row:not(.r-media-list__row--locked):hover {
    background: color-mix(in srgb, var(--color-text, #1a1a18) 4%, var(--media-list-tone-bg, var(--color-surface, #fff)));
}
.r-media-list--divider-none .r-media-list__row + .r-media-list__row,
.r-media-list--divider-gap .r-media-list__row + .r-media-list__row { border-top-color: transparent; }
.r-media-list--divider-gap .r-media-list__row { padding-block: 18px; }
/* current tintEdge: the highlight colour behind the row and a 3px accent edge on its leading side. */
.r-media-list__row--current {
    position: relative;
    background: var(--color-highlight, var(--color-accentSoft, color-mix(in srgb, var(--color-accent, #c8a951) 10%, var(--color-surface, #fff))));
}
.r-media-list__row--current::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px;
    background: var(--color-accent, #c8a951);
}
.r-media-list--titleLines-1 .r-media-list__title,
.r-media-list--titleLines-2 .r-media-list__title,
.r-media-list--titleLines-3 .r-media-list__title { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.r-media-list--titleLines-1 .r-media-list__title { -webkit-line-clamp: 1; line-clamp: 1; }
.r-media-list--titleLines-2 .r-media-list__title { -webkit-line-clamp: 2; line-clamp: 2; }
.r-media-list--titleLines-3 .r-media-list__title { -webkit-line-clamp: 3; line-clamp: 3; }

/* ── shelf (horizontal scroll) ──────────────────────────────────────────────────────────────────── */
.r-shelf { display: flex; flex-direction: column; gap: 8px; }
.r-shelf__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s, 8px); padding-inline: var(--space-l, 24px); }
.r-shelf__title { margin: 0; font-size: 16px; font-weight: 600; }
.r-shelf__count { font-size: 12px; font-weight: 600; color: var(--color-accent, #c8a951); white-space: nowrap; }
.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; min-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-hairline, #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-hairline, #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(--tint, 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 { color: var(--color-textMuted, #5a5a55); }

/* ── member facts (LP-109): "Last done …" + "Counts toward" chips on a content card ─────────────── */
.r-facts { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.r-facts__last { font-size: 11.5px; color: var(--color-textMuted, #5a5a55); }
.r-facts__counts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11px; }
.r-facts__lead { color: var(--color-textMuted, #5a5a55); }
.r-facts__chip {
    padding: 2px 7px; border-radius: 999px; font-weight: 600;
    color: var(--color-safe, #0f6e56); background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ── chips / options (shared interactive surfaces) ──────────────────────────────────────────────── */
.r-chip-question, .r-option-list, .r-chip-select, .r-avatar-picker, .r-experience-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-textMuted, #5a5a55);
    border: 1px solid currentColor;
}
.r-chip--safe { color: var(--color-safe, #0f6e56); }
.r-chip--danger { color: var(--color-danger, #b3261e); }
.r-chip--selected { background: color-mix(in srgb, currentColor 14%, transparent); border-width: 1.6px; }
/* selectedTone: the selected chip fills with the tone, its label and (without an edge) its stroke in the tone's fg. */
.r-chip:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) { background: var(--tone-bg, var(--color-surface, #fff)); color: var(--tone-fg, var(--color-text, #1a1a18)); border-color: var(--tone-edge, currentColor); }
.r-chip-question__footnote { margin: var(--space-s, 8px) 0 0; font-size: 11.5px; color: var(--color-textMuted, #5a5a55); }
.r-chip-question__why {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
    font: 600 12.5px/1 inherit; color: var(--color-textMuted, #5a5a55);
}
.r-chip-question__why::after { content: "\203A"; margin-inline-start: 4px; font-size: 14px; }
.r-chip-question__why:focus-visible, .r-chip:focus-visible { outline: 2px solid var(--color-accent, #c8a951); outline-offset: 2px; }

/* In-page sheet (a modal <dialog>): bottom sheet on narrow screens, centred card from tablet up. */
.r-sheet {
    width: 100%; max-width: 100%; margin: auto auto 0; padding: var(--space-l, 24px);
    border: 0; border-radius: var(--radius-card, 14px) var(--radius-card, 14px) 0 0;
    background: var(--color-bg, var(--color-surface, #fff)); color: var(--color-text, #1a1a18);
}
.r-sheet::backdrop { background: rgb(0 0 0 / 0.4); }
@media (min-width: 600px) {
    .r-sheet { max-width: 520px; margin: auto; border-radius: var(--radius-card, 14px); }
}
.r-sheet__bar { display: flex; justify-content: flex-end; margin: calc(-1 * var(--space-s, 8px)) calc(-1 * var(--space-s, 8px)) 0 0; }
.r-sheet__close {
    width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--color-textMuted, #5a5a55);
}
.r-sheet__close::before { content: "\00D7"; }
.r-sheet__close:focus-visible { outline: 2px solid var(--color-accent, #c8a951); outline-offset: 2px; }
.r-sheet__title { margin: 0 0 var(--space-s, 8px); font-size: 20px; font-weight: 600; }
.r-sheet__body {
    margin: 0;
    font-family: var(--type-body-family, inherit); font-size: var(--type-body-size, 15px);
    font-weight: var(--type-body-weight, inherit); line-height: var(--type-body-line-height, 1.55);
}

.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-hairline, #e3e2dd);
    color: var(--color-text, #1a1a18); font: inherit;
}
.r-option--selected { border: 1.6px solid var(--color-accent, #c8a951); }
.r-option-list__after { margin: var(--space-s, 8px) 0 0; font-size: 15px; color: var(--color-text, #1a1a18); }
.r-option-list__after:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
    .r-option-list__after:not(:empty) { animation: r-rise 0.35s ease-out; }
}
@keyframes r-rise { from { opacity: 0; transform: translateY(6px); } }
.r-option__text { display: flex; flex-direction: column; gap: 2px; }
.r-option__label { font-size: 14px; font-weight: 500; }
.r-option__sub { color: var(--color-textMuted, #5a5a55); }

.r-chip-select__label { font-size: 12px; font-weight: 600; color: var(--color-textMuted, #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-hairline, #e3e2dd); color: var(--color-text, #1a1a18);
}
.r-chip-select__opt--selected { background: var(--color-heroBg, #14213d); color: var(--color-heroText, #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-hairline, #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-hairline, #e3e2dd); }
.r-toggle-row__icon {
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--tint, var(--color-accent, #c8a951)); background: color-mix(in srgb, currentColor 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__title:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) { font-weight: 600; color: var(--tone-fg, var(--color-text, #1a1a18)); }
.r-toggle-row__sub { color: var(--color-textMuted, #5a5a55); }
/* layout "cards" (LP-270): the section is only the stack, and each row is a card of its own. */
.r-toggle-list--cards {
    display: flex; flex-direction: column; gap: var(--space-xs, 8px);
    overflow: visible; border: 0; border-radius: 0; background: none;
}
.r-toggle-list--cards .r-toggle-row {
    padding: 14px var(--space-m, 16px); border-radius: var(--radius-card, 14px);
    background: var(--color-surface, #fff); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-toggle-list--cards .r-toggle-row__text { gap: 3px; }
.r-toggle-list--cards .r-toggle-row__title { font-size: 17px; font-weight: 600; }

/* ── experience-picker (rows are .r-option) ─────────────────────────────────────────────────────── */
.r-experience-picker__switching { color: var(--color-textMuted, #5a5a55); }
.r-experience-picker__error { margin: var(--space-s, 8px) 0 0; font-size: 12.5px; color: var(--color-danger, #b3261e); }

/* ── avatar-picker ──────────────────────────────────────────────────────────────────────────────── */
.r-avatar-picker__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-textMuted, #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-textMuted, #5a5a55); border: 2px dashed var(--color-hairline, #e3e2dd); }

/* ── progress-bar / ring ────────────────────────────────────────────────────────────────────────── */
/* A style.progress-bar preset (LP-172) lands on the block's wrapper as --progress-bar-thickness / -fill / -tone-* /
   -track / -captionStyle-* / -inset / -markerColor and r-progress-bar--cap-* / --caption-* / --marker-* for the
   options it sets. Each rule reads its option with today's value as the fallback, so a bar with no preset is
   unchanged. --bar-height is the look's own thickness (plain 5, hairline 4, segments 8) unless the preset sets one. */
.r-progress-bar {
    --bar-height: var(--progress-bar-thickness, 5px);
    display: flex; flex-direction: column; gap: 6px; padding-inline: var(--progress-bar-inset, var(--space-l, 24px));
}
.r-progress-bar--hero { background: var(--color-heroBg, #14213d); color: var(--color-heroText, #fff); padding-block: var(--space-s, 8px); }
.r-progress-bar--hairline { --bar-height: var(--progress-bar-thickness, 4px); }
.r-progress-bar--segments { --bar-height: var(--progress-bar-thickness, 8px); }
.r-progress-bar__label {
    font-family: var(--progress-bar-captionStyle-family, inherit); font-size: var(--progress-bar-captionStyle-size, 12px);
    font-weight: var(--progress-bar-captionStyle-weight, 500); line-height: var(--progress-bar-captionStyle-line-height, inherit);
    opacity: 0.9;
}
.r-progress-bar .r-meter { height: var(--bar-height); background: var(--progress-bar-track, var(--color-hairline, #e3e2dd)); }
/* The preset's tone wins over its fill; the block's own tone (the .r-toned rule further down) wins over both. */
.r-progress-bar .r-meter__fill { background: var(--progress-bar-tone-fg, var(--progress-bar-fill, var(--color-accent, #14213d))); }
.r-progress-bar .r-segments__seg { height: var(--bar-height); background: var(--progress-bar-track, var(--color-hairline, #e3e2dd)); }
.r-progress-bar .r-segments__seg--on { background: var(--progress-bar-tone-fg, var(--progress-bar-fill, var(--color-accent, #c8a951))); }
.r-progress-bar--cap-square .r-meter,
.r-progress-bar--cap-square .r-segments__seg { border-radius: 0; }
.r-progress-bar--caption-below .r-progress-bar { flex-direction: column-reverse; }
/* caption none: not drawn, still read out. */
.r-progress-bar--caption-none .r-progress-bar__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
/* The marker dot: centred on the bar at its position, 4px taller than the bar, and it takes no room. */
.r-progress-bar__bar { position: relative; display: block; }
.r-progress-bar__marker {
    position: absolute; top: 50%; width: calc(var(--bar-height) + 4px); height: calc(var(--bar-height) + 4px);
    border-radius: 50%; transform: translate(-50%, -50%); background: var(--progress-bar-markerColor, var(--color-text, #1a1a18));
}
.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-hairline, #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-hairline, #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--safe { border-color: var(--color-safe, #0f6e56); background: color-mix(in srgb, var(--color-safe, #0f6e56) 8%, transparent); }
.r-callout--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--safe .r-callout__label { color: var(--color-safe, #0f6e56); }
.r-callout--danger .r-callout__label { color: var(--color-danger, #b3261e); }
.r-callout__text { margin: 0; font-size: 12.5px; color: var(--color-text, #1a1a18); }
/* A theme tone: a card in the tone's bg and edge, the label a plain line in its fg. Wins over a role tone. */
.r-callout:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) {
    padding: var(--space-m, 16px); border-radius: var(--radius-card, 14px);
    background: var(--tone-bg, var(--color-surface, #fff)); border-color: var(--tone-edge, transparent);
}
.r-callout:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-callout__label { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tone-fg, var(--color-text, #1a1a18)); }
/* variant "dashed": an empty-state box. No fill, a dashed edge, centred copy; a theme tone colours the edge and label. */
.r-callout--dashed {
    padding: var(--space-l, 24px); border-radius: var(--radius-card, 14px); text-align: center;
    background: none; border: 1.5px dashed var(--color-hairline, #e3e2dd);
}
.r-callout--dashed .r-callout__label { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-text, #1a1a18); }
.r-callout--dashed .r-callout__text { color: var(--color-textMuted, #5a5a55); }
.r-callout--dashed:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) { border-color: var(--tone-edge, var(--tone-fg, var(--color-text, #1a1a18))); }
.r-callout--dashed:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-callout__label { color: var(--tone-fg, var(--color-text, #1a1a18)); }
.r-callout__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs, 4px); margin-top: var(--space-xs, 4px); }
.r-callout__primary, .r-callout__dismiss { min-height: 44px; border-radius: 999px; cursor: pointer; font: 600 13.5px/1 inherit; }
.r-callout__primary { padding: 0 18px; border: 0; background: var(--color-accent, #c8a951); color: var(--color-onAccent, var(--color-heroBg, #14213d)); }
.r-callout__dismiss { padding: 0 12px; border: 0; background: transparent; color: var(--color-textMuted, #5a5a55); }
/* variant "footnote": a small muted line on the page background, link inline. */
.r-callout--footnote { margin: 0 var(--space-l, 24px); padding: 0; border: 0; background: none; font-size: 11.5px; color: var(--color-textMuted, #5a5a55); }
.r-callout__link {
    margin-inline-start: 0.3em; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: var(--color-text, #1a1a18); text-decoration: underline; text-underline-offset: 2px;
}
.r-callout__primary:focus-visible, .r-callout__dismiss:focus-visible, .r-callout__link:focus-visible,
.r-hero__cta:focus-visible { outline: 2px solid var(--color-accent, #c8a951); outline-offset: 2px; }
/* ── article (server-sanitised long-form body) ──────────────────────────────────────────────────── */
/* A style.article preset (LP-176) arrives on the block's wrapper as --article-* and .r-article--<option>-<value>.
   Each rule reads its property with today's value as the fallback, so an article with no preset is unchanged.
   paragraphGap is the one gap between every part of the article: adjoining margins collapse to it. */
.r-article {
    margin-inline: var(--article-inset, var(--space-l, 24px));
    color: var(--article-text, var(--color-text, #1a1a18));
    font-family: var(--article-bodyStyle-family, var(--type-body-family, inherit));
    font-size: var(--article-bodyStyle-size, var(--type-body-size, 15px));
    font-weight: var(--article-bodyStyle-weight, var(--type-body-weight, inherit));
    line-height: var(--article-lineHeight, var(--article-bodyStyle-line-height, var(--type-body-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: var(--article-paragraphGap, 1.4em) 0 var(--article-paragraphGap, 0.5em); line-height: 1.25; font-weight: 600;
    color: var(--article-text, 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; }
/* headings flat: every heading at the body size, still semibold. */
.r-article--headings-flat .r-article h1, .r-article--headings-flat .r-article h2,
.r-article--headings-flat .r-article h3, .r-article--headings-flat .r-article h4 { font-size: 1em; }
.r-article p { margin: 0 0 var(--article-paragraphGap, 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 var(--article-paragraphGap, 0.9em); padding-inline-start: 1.5em; }
.r-article li { margin: 0.25em 0; }
.r-article li::marker { color: var(--article-listMarker, 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: var(--article-paragraphGap, 1em) 0; padding: 0.4em 0 0.4em var(--space-m, 16px);
    border-inline-start: 3px solid var(--color-accent, #c8a951);
    color: var(--color-textMuted, #5a5a55); font-style: italic;
}
/* blockquote plain: indented text, no rule. */
.r-article--blockquote-plain .r-article blockquote { border-inline-start: 0; }
.r-article hr { border: 0; border-top: 1px solid var(--color-hairline, #e3e2dd); margin: var(--article-paragraphGap, 1.5em) 0; }
/* An inline image (LP-246's sanitiser serves it) never runs wider than the article. */
.r-article img { display: block; max-width: 100%; height: auto; border-radius: var(--article-imageRadius, 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-hairline, #e3e2dd); border-inline-end: 1px solid var(--color-hairline, #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-textMuted, #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-textMuted, #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-textMuted, #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-hairline, #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-hairline, #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-heroText, #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 { color: var(--color-textMuted, #5a5a55); }
.r-form-row__trail { width: 16px; height: 16px; color: var(--color-textMuted, #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-hairline, #e3e2dd); background: transparent; color: var(--color-textMuted, #5a5a55); }
/* field rows (time / email): a label wrapping its input. */
.r-form-row--field.r-form-row { cursor: default; }
.r-form-row__time {
    flex-shrink: 0; min-height: 36px; font: inherit; font-size: 14px; padding: 4px 8px; border-radius: 8px;
    border: 1px solid var(--color-hairline, #e3e2dd); background: var(--color-surface, #fff); color: var(--color-text, #1a1a18);
}
.r-form-row__status { margin-top: 4px; font-size: 12px; color: var(--color-textMuted, #5a5a55); }
.r-form-row__status[data-state="verified"] { color: var(--color-safe, #0f6e56); }
.r-form-row__status[data-state="unverified"] { color: var(--color-danger, #b3261e); }
.r-form-row__time:focus-visible, .r-form-row__input:focus-visible { outline: 2px solid var(--color-accent, #c8a951); outline-offset: 2px; }

/* ── video ──────────────────────────────────────────────────────────────────────────────────────── */
.r-video {
    border-radius: var(--video-radius, var(--radius-card, 14px));
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-hairline, #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; color: var(--color-textMuted, #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(--video-letterbox, var(--color-heroBg, #14213d));
}
.r-video__iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; display: block;
}
/* Style preset options (style.video, LP-177). The preset's enums and bools are classes on the block's wrapper and
   its radius and colours are --video-* properties there; an option the preset leaves out keeps the rules above.
   chrome, the controls and controlsVisibleOnLoad go to the Wistia iframe as embed options (Video.razor): CSS
   can't reach inside it. showTitle and showMeta leave the element out of the markup. */
/* The gold look a preset starts from (base gold): the accent border. A border option the preset sets wins. */
.r-video--gold { border: 2px solid var(--color-accent, #c8a951); }
.r-video--border-none .r-video { border: 0; }
.r-video--border-hairline .r-video { border: 1px solid var(--color-hairline, #e3e2dd); }
.r-video--border-accent .r-video { border: 2px solid var(--color-accent, #c8a951); }
/* placement fullBleed: out across the page's side gutter (--page-gutter, set by the shell; none where there is
   no gutter to cross). */
.r-video--placement-fullBleed { margin-inline: calc(-1 * var(--page-gutter, 0px)); }
/* sticky: the block stays at the top of the viewport while the rest of its page scrolls under it. */
.r-video--sticky-true { position: sticky; top: 0; z-index: 2; }

/* ── 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(--cta-radius, var(--radius-pill, 999px)); border: 0;
}
/* style.cta presets (LP-175): the block's wrapper carries --cta-fill / -ink / -fillActive / -inkActive / -radius /
   -size / -tone-* and r-cta--shape-* / --content-* / --group-* for the options its preset sets. Each look reads
   them with today's value as the fallback, so a block with no preset computes exactly what it did. An active
   button (.r-cta--active) points --cta-on-* at the active colours; a preset that leaves one out leaves that
   property invalid, and the look falls through to its resting colour. */
.r-cta--active { --cta-on-fill: var(--cta-fillActive); --cta-on-ink: var(--cta-inkActive); }
.r-cta--gold {
    background: var(--cta-on-fill, var(--cta-fill, var(--color-accent, #c8a951)));
    color: var(--cta-on-ink, var(--cta-ink, var(--color-onAccent, #14213d)));
}
.r-cta--navy {
    background: var(--cta-on-fill, var(--cta-fill, var(--color-heroBg, #14213d)));
    color: var(--cta-on-ink, var(--cta-ink, var(--color-heroText, #fff)));
}
.r-cta--outline {
    background: var(--cta-on-fill, var(--cta-fill, transparent));
    color: var(--cta-on-ink, var(--cta-ink, var(--cta-tone-fg, var(--color-heroBg, #14213d))));
    border: 1.5px solid var(--cta-tone-edge, var(--cta-tone-fg, var(--color-heroBg, #14213d)));
}
.r-cta--ghost {
    background: var(--cta-on-fill, var(--cta-fill, transparent));
    color: var(--cta-on-ink, var(--cta-ink, var(--cta-tone-fg, var(--color-textMuted, #5a5a55))));
}
.r-cta .r-icon { opacity: 1; }
.r-cta--content-iconLabel .r-cta .r-icon { margin-inline-end: 6px; }
/* shape square: a size-by-size button (36px unless the preset says), its corners the theme's button radius. */
.r-cta--shape-square .r-cta {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--cta-size, 36px); height: var(--cta-size, 36px); padding: 0;
    border-radius: var(--cta-radius, var(--radius-button, 999px));
}
.r-cta--shape-square .r-cta .r-icon { font-size: calc(var(--cta-size, 36px) / 2); }
/* shape inline: the square-cornered answer box. The look's colours and a tone don't apply to it. */
.r-cta--shape-inline .r-cta {
    min-height: 52px; font-weight: 700; border-radius: var(--cta-radius, 0);
    background: transparent; color: var(--color-text, #1a1a18); border: 1px solid var(--color-hairline, #e3e2dd);
}
/* group row: PageRenderer draws consecutive square row ctas in one left-aligned row. */
.r-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-s, 8px); min-width: 0; padding-inline: var(--space-l, 24px); }
.r-cta-row .r-cta-wrap { padding-inline: 0; }

/* ── ask-box ────────────────────────────────────────────────────────────────────────────────────── */
.r-ask-box { display: flex; flex-direction: column; gap: var(--space-s, 8px); padding-inline: var(--space-l, 24px); }
.r-ask-box__prompt { margin: 0; font-size: 22px; font-weight: 600; color: var(--color-text, #1a1a18); }
.r-ask-box--compact .r-ask-box__prompt { font-size: 17px; }
.r-ask-box__field {
    display: flex; align-items: flex-end; gap: 10px;
    padding: 8px 8px 8px 16px; border-radius: calc(var(--radius-tile, 10px) + 6px);
    background: var(--color-surface, #fff); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-ask-box__field:focus-within { border: 1.5px solid var(--color-accent, #c8a951); }
.r-ask-box__input {
    flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent;
    font-family: inherit; font-size: 15px; line-height: 1.4; color: var(--color-text, #1a1a18); padding: 4px 0;
    min-height: calc(3 * 1.4em); max-height: calc(8 * 1.4em); overflow-y: auto;
}
.r-ask-box__input:disabled { color: var(--color-textMuted, #5a5a55); }
/* Compact: one line until focused or filled, then the full field. */
.r-ask-box--compact .r-ask-box__field { align-items: center; }
.r-ask-box--compact .r-ask-box__input { min-height: 1.4em; height: 1.4em; overflow: hidden; }
.r-ask-box--compact:focus-within .r-ask-box__input,
.r-ask-box--compact.r-ask-box--filled .r-ask-box__input { height: auto; min-height: calc(3 * 1.4em); overflow-y: auto; }
.r-ask-box--compact:focus-within .r-ask-box__field,
.r-ask-box--compact.r-ask-box--filled .r-ask-box__field { align-items: flex-end; }
.r-ask-box__send {
    flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1;
    background: var(--color-accent, #14213d); color: var(--color-onAccent, #fff);
}
.r-ask-box__send:disabled { cursor: default; background: var(--color-hairline, #e3e2dd); color: var(--color-textMuted, #5a5a55); }
.r-ask-box__send[aria-busy="true"] { background: var(--color-accent, #14213d); color: var(--color-onAccent, #fff); }
.r-ask-box__error { margin: 0; font-size: 12.5px; color: var(--color-danger, #b3261e); }
.r-ask-box__openings { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.r-ask-box__opening, .r-ask-box__secondary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px;
    padding: 12px 15px; border-radius: var(--radius-tile, 10px); text-align: start; cursor: pointer; font: inherit;
    color: var(--color-text, #1a1a18);
}
.r-ask-box__opening { flex-direction: column; align-items: flex-start; gap: 2px; background: var(--color-surface, #fff); border: 1px solid var(--color-hairline, #e3e2dd); }
.r-ask-box__secondary { background: transparent; border: 1px dashed color-mix(in srgb, var(--color-accent, #c8a951) 55%, transparent); }
.r-ask-box__opening-label, .r-ask-box__secondary-label { font-size: 14.5px; font-weight: 600; }
.r-ask-box__opening-hint, .r-ask-box__secondary-hint { color: var(--color-textMuted, #5a5a55); }
.r-ask-box__secondary-text { display: flex; flex-direction: column; gap: 2px; }
.r-ask-box__badge {
    flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; background: color-mix(in srgb, var(--color-accent, #c8a951) 30%, transparent);
}
.r-ask-box__quick { display: flex; flex-wrap: wrap; gap: 6px; }
.r-ask-box__quick-link {
    min-height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
    background: var(--color-surface, #fff); color: var(--color-textMuted, #5a5a55); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-ask-box__input:focus-visible { outline: none; }
.r-ask-box__send:focus-visible, .r-ask-box__opening:focus-visible, .r-ask-box__secondary:focus-visible,
.r-ask-box__quick-link:focus-visible, .r-echo-card__not-quite:focus-visible {
    outline: 2px solid var(--color-accent, #c8a951); outline-offset: 2px;
}

/* ── echo-card ──────────────────────────────────────────────────────────────────────────────────── */
.r-echo-card { display: flex; flex-direction: column; gap: var(--space-m, 16px); }
.r-echo-card__label, .r-echo-card__quote, .r-echo-card__body, .r-echo-card__steps, .r-echo-card__not-quite { margin-inline: var(--space-l, 24px); }
.r-echo-card__label { margin-block: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-textMuted, #5a5a55); }
.r-echo-card__quote {
    margin-block: 0; padding-inline-start: 12px; border-inline-start: 3px solid var(--color-accent, #c8a951);
    font-size: 21px; font-style: italic; color: var(--color-text, #1a1a18); white-space: pre-line; overflow-wrap: anywhere;
}
.r-echo-card__body { margin-block: 0; font-size: 14.5px; color: var(--color-text, #1a1a18); }
.r-echo-card__steps { list-style: none; counter-reset: r-step; margin-block: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.r-echo-card__step { counter-increment: r-step; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: var(--color-text, #1a1a18); }
.r-echo-card__step::before {
    content: counter(r-step); flex: 0 0 26px; height: 26px; display: grid; place-items: center;
    border: 1.5px solid var(--color-accent, #c8a951); border-radius: 50%; font-size: 12px; font-weight: 700;
}
.r-echo-card__not-quite {
    align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; color: var(--color-textMuted, #5a5a55);
}
/* ── practice loop: timed-practice / state-capture / session-close ───────────────────────────────── */
.r-timed-practice, .r-state-capture, .r-session-close { padding-inline: var(--space-l, 24px); }
.r-timed-practice :is(button):focus-visible,
.r-state-capture :is(button):focus-visible,
.r-state-capture__point:has(:focus-visible) { outline: 2px solid var(--color-accent, #c8a951); outline-offset: 2px; }

.r-timed-practice { display: flex; flex-direction: column; align-items: center; gap: var(--space-m, 16px); text-align: center; }
.r-timed-practice__title { margin: 0; font-size: 20px; font-weight: 600; color: var(--color-text, #1a1a18); }
.r-timed-practice__visual { width: min(248px, 70vw); aspect-ratio: 1; margin-block: var(--space-s, 8px); }
.r-timed-practice__ring { position: relative; width: 100%; height: 100%; }
.r-timed-practice__track { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.r-timed-practice__guide, .r-timed-practice__arc { fill: none; }
.r-timed-practice__guide { stroke: var(--color-hairline, #e3e2dd); stroke-width: 1.5; }
.r-timed-practice__arc { stroke: var(--ring-ink, var(--color-accent, #c8a951)); stroke-width: 2.5; stroke-linecap: round; }
.r-timed-practice__disc {
    position: absolute; inset: 16px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ring-ink, var(--color-accent, #c8a951)) 55%, transparent),
                                        color-mix(in srgb, var(--ring-ink, var(--color-accent, #c8a951)) 14%, transparent));
    border: 1px solid color-mix(in srgb, var(--ring-ink, var(--color-accent, #c8a951)) 50%, transparent);
    transform: scale(0.82); /* the still size; an inline scale overrides it only when motion is welcome */
    transition: transform 200ms linear;
}
@media (prefers-reduced-motion: reduce) { .r-timed-practice__disc { transition: none; } }
/* scene host (LP-72): the canvas fills the visual; the 2D ring draws in the same box whenever the scene can't */
.r-scene { position: relative; width: 100%; height: 100%; }
.r-scene__surface { position: absolute; inset: 0; }
.r-scene__surface > canvas { display: block; width: 100%; height: 100%; }
.r-scene-block { padding-inline: var(--space-l, 24px); }
.r-scene-block .r-scene { width: min(320px, 80vw); aspect-ratio: 1; height: auto; margin-inline: auto; }
.r-timed-practice__phase { margin: 0; font-size: 32px; font-weight: 500; color: var(--color-text, #1a1a18); }
.r-timed-practice__instruction { margin: 0; font-size: 15px; color: var(--color-textMuted, #5a5a55); }
/* step mode (`advance: manual`): the step's glyph over the visual, its heading and text, and the Next button. */
.r-timed-practice__visual--step { position: relative; }
.r-timed-practice__mark {
    position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
    font-size: 88px; font-weight: 600; line-height: 1; color: var(--color-text, #1a1a18);
}
.r-timed-practice__step-title { margin: 0; font-size: 20px; font-weight: 600; color: var(--color-text, #1a1a18); }
.r-timed-practice__step-text { margin: 0; font-size: 15px; color: var(--color-text, #1a1a18); }
.r-timed-practice__controls:has(.r-timed-practice__next) { align-self: stretch; }
.r-timed-practice__next {
    align-self: stretch; min-height: 50px; padding: 6px 26px; cursor: pointer; font: 600 15px/1.3 inherit;
    border: 0; border-radius: var(--radius-pill, 999px);
    background: var(--color-accent, #c8a951); color: var(--color-onAccent, #fff);
}
.r-timed-practice__remaining { margin: 0; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-textMuted, #5a5a55); }
.r-timed-practice__controls { display: flex; flex-direction: column; align-items: center; gap: var(--space-s, 8px); margin-top: var(--space-xs, 4px); }
.r-timed-practice__pause {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 26px; cursor: pointer;
    font: 600 15px/1 inherit; border-radius: var(--radius-pill, 999px);
    background: var(--color-surface, #fff); color: var(--color-text, #1a1a18); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-timed-practice__glyph { font-size: 13px; }
.r-timed-practice__skip {
    min-height: 44px; padding: 0 12px; cursor: pointer; font: 500 15px/1.3 inherit;
    background: transparent; border: 0; color: var(--color-textMuted, #5a5a55); text-decoration: underline;
}
.r-timed-practice button:disabled { opacity: 0.5; cursor: default; }

.r-state-capture { display: flex; flex-direction: column; gap: var(--space-l, 24px); }
.r-state-capture__lead { margin: 0; font-size: 18px; font-weight: 500; color: var(--color-text, #1a1a18); }
.r-state-capture__section { display: flex; flex-direction: column; gap: var(--space-s, 8px); }
.r-state-capture__label { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-text, #1a1a18); }
.r-state-capture__words { display: flex; flex-wrap: wrap; gap: 8px; }
.r-state-capture__word, .r-state-capture__more {
    cursor: pointer; font: 500 15px/1 inherit; padding: 10px 14px; border-radius: var(--radius-pill, 999px);
    background: var(--color-surface, #fff); color: var(--color-text, #1a1a18); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-state-capture__word--selected {
    background: color-mix(in srgb, var(--color-accent, #c8a951) 16%, transparent);
    border: 1.6px solid var(--color-accent, #c8a951);
}
.r-state-capture__more { color: var(--color-textMuted, #5a5a55); border-style: dashed; }
.r-state-capture__scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.r-state-capture__point {
    position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; cursor: pointer;
    border-radius: var(--radius-tile, 10px); background: var(--color-surface, #fff); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-state-capture__point--selected {
    background: color-mix(in srgb, var(--color-accent, #c8a951) 16%, transparent);
    border: 1.6px solid var(--color-accent, #c8a951);
}
/* The radio stays in the accessibility tree and the tab order; the glyph is what's seen. */
.r-state-capture__radio { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.r-state-capture__glyph { font-size: 26px; line-height: 1; }
.r-state-capture__ends { display: flex; justify-content: space-between; gap: var(--space-s, 8px); font-size: 12px; color: var(--color-textMuted, #5a5a55); }
.r-state-capture__ends span:last-child { text-align: end; }
.r-state-capture__actions { display: flex; flex-direction: column; gap: var(--space-xs, 4px); }
.r-state-capture__done {
    width: 100%; min-height: 50px; cursor: pointer; font: 600 15px/1.2 inherit; border-radius: var(--radius-pill, 999px);
    background: var(--color-accent, #c8a951); color: var(--color-onAccent, #14213d); border: 0;
}
.r-state-capture__done:disabled {
    cursor: default; background: var(--color-surface, #fff); color: var(--color-textMuted, #5a5a55); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-state-capture__skip {
    width: 100%; min-height: 44px; cursor: pointer; font: 500 15px/1.2 inherit; background: transparent; border: 0; color: var(--color-textMuted, #5a5a55);
}
.r-state-capture__skip:disabled { cursor: default; opacity: 0.5; }

.r-session-close > * { margin: 0; }
.r-session-close {
    display: flex; flex-direction: column; gap: var(--space-m, 16px);
    margin-inline: var(--space-l, 24px); padding: var(--space-l, 24px);
    border-radius: var(--radius-card, 14px); background: var(--color-surface, #fff); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-session-close__head, .r-session-close__pair { display: flex; flex-direction: column; gap: 4px; }
.r-session-close__head p, .r-session-close__pair p { margin: 0; }
.r-session-close__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-textMuted, #5a5a55); }
.r-session-close__progress { font-size: 15px; font-weight: 500; color: var(--color-text, #1a1a18); }
.r-session-close__headline { font-size: 22px; font-weight: 600; color: var(--color-text, #1a1a18); }
.r-session-close__sub { font-size: 13px; color: var(--color-textMuted, #5a5a55); }
.r-session-close__rule { width: 100%; border: 0; border-top: 1px solid var(--color-hairline, #e3e2dd); }
.r-session-close__closing { font-size: 17px; color: var(--color-text, #1a1a18); }
.r-cta:disabled { opacity: 0.45; cursor: not-allowed; }
.r-cta:focus-visible { outline: 2px solid var(--color-heroBg, #14213d); outline-offset: 2px; }
.r-cta__notice { margin: var(--space-s, 8px) 0 0; font-size: 13px; text-align: center; color: var(--color-textMuted, #5a5a55); }

/* ── contact-list ───────────────────────────────────────────────────────────────────────────────── */
/* Crisis surface: plain, high-contrast, wraps rather than truncates; every action is ≥44px tall. */
.r-contact-list { display: flex; flex-direction: column; gap: var(--space-l, 24px); padding-inline: var(--space-l, 24px); }
.r-contact-list__label {
    margin: 0 0 var(--space-s, 8px); font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--color-textMuted, #5a5a55);
}
.r-contact-list__contacts {
    list-style: none; margin: 0; padding: 0;
    border-radius: var(--radius-card, 14px); background: var(--color-surface, #fff);
    border: 1px solid var(--color-hairline, #e3e2dd); overflow: hidden;
}
.r-contact-list__contact { padding: var(--space-m, 16px); }
.r-contact-list__contact + .r-contact-list__contact { border-top: 1px solid var(--color-hairline, #e3e2dd); }
.r-contact-list__name { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-text, #1a1a18); }
.r-contact-list__number {
    margin: 4px 0 0; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--color-text, #1a1a18); user-select: text;
}
.r-contact-list__note { margin: 4px 0 0; font-size: 13px; color: var(--color-textMuted, #5a5a55); }
.r-contact-list__badge {
    display: inline-block; margin: 8px 0 0; padding: 4px 10px; border-radius: var(--radius-pill, 999px);
    font-size: 11px; font-weight: 700; color: var(--color-text, #1a1a18);
    background: color-mix(in srgb, var(--color-accent, #c8a951) 18%, transparent);
}
.r-contact-list__actions { display: flex; flex-wrap: wrap; gap: var(--space-s, 8px); margin-top: 12px; }
.r-contact-list__action {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
    border-radius: var(--radius-pill, 999px); font-size: 15px; font-weight: 600; text-decoration: none;
    background: var(--color-accent, #c8a951); color: var(--color-onAccent, #14213d);
}
.r-contact-list__action:focus-visible { outline: 2px solid var(--color-heroBg, #14213d); outline-offset: 2px; }
.r-contact-list__fallback {
    display: flex; flex-direction: column; margin: 0; padding: 10px 14px; min-height: 44px;
    border: 1px solid var(--color-hairline, #e3e2dd); border-radius: var(--radius-tile, 12px);
}
.r-contact-list__fallback-label { font-size: 13px; font-weight: 600; color: var(--color-textMuted, #5a5a55); }
.r-contact-list__fallback-target { font-size: 15px; color: var(--color-text, #1a1a18); user-select: text; }

/* ── consent-check ──────────────────────────────────────────────────────────────────────────────── */
.r-consent-check { padding-inline: var(--space-l, 24px); }
.r-consent-check__row { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.r-consent-check__box { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--color-accent, #c8a951); cursor: pointer; }
.r-consent-check__box:focus-visible { outline: 2px solid var(--color-heroBg, #14213d); outline-offset: 2px; }
.r-consent-check__label { font-size: 15px; color: var(--color-text, #1a1a18); }
.r-consent-check__links { list-style: none; margin: 0; padding: 0 0 0 36px; }
.r-consent-check__link {
    display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500;
    color: var(--color-text, #1a1a18); text-decoration: underline;
}
.r-consent-check__link::after { content: " ↗"; }
.r-consent-check__link:focus-visible { outline: 2px solid var(--color-heroBg, #14213d); outline-offset: 2px; }
.r-consent-check__link-text { font-size: 14px; color: var(--color-textMuted, #5a5a55); user-select: text; }

/* ── step-header ────────────────────────────────────────────────────────────────────────────────── */
.r-step-header { display: flex; align-items: center; gap: 6px; padding-inline: var(--space-l, 24px); }
.r-step-header__back {
    flex: none; min-width: 44px; min-height: 44px; border: 0; background: transparent; cursor: pointer;
    font-size: 20px; color: var(--color-text, #1a1a18);
}
.r-step-header__back:focus-visible { outline: 2px solid var(--color-heroBg, #14213d); outline-offset: 2px; }
.r-step-header__progress { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.r-step-header__caption {
    margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-textMuted, #5a5a55);
}
.r-step-header__bar { display: flex; gap: 4px; }
.r-step-header__segment { flex: 1; height: 4px; border-radius: 2px; background: var(--color-hairline, #e3e2dd); }
.r-step-header__segment--filled { background: var(--color-accent, #c8a951); }
/* ── filter-bar ─────────────────────────────────────────────────────────────────────────────────── */
.r-filter-bar { display: flex; flex-direction: column; gap: var(--space-s, 8px); }
.r-filter-bar__search {
    width: 100%; min-height: 44px; padding: 0 16px; font: inherit; font-size: 14.5px;
    color: var(--color-text, #1a1a18); background: var(--color-surface, #fff);
    border: 1px solid var(--color-hairline, #e3e2dd); border-radius: var(--radius-pill, 999px);
}
.r-filter-bar__menus { display: flex; gap: 8px; overflow-x: auto; padding-block: 2px; }
.r-filter-bar__menu {
    flex: 0 0 auto; min-height: 36px; padding: 0 14px; font: 600 13px/1 inherit; cursor: pointer;
    color: var(--color-text, #1a1a18); background: var(--color-surface, #fff);
    border: 1px solid var(--color-hairline, #e3e2dd); border-radius: var(--radius-pill, 999px);
}
.r-filter-bar__menu--set { background: var(--color-accent, #c8a951); color: var(--color-onAccent, #14213d); border-color: transparent; }
.r-filter-bar__segments {
    display: flex; padding: 3px; gap: 3px; border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--color-text, #1a1a18) 6%, transparent);
}
.r-filter-bar__segment {
    flex: 1; position: relative; text-align: center; cursor: pointer; padding: 7px 10px;
    font-size: 13px; font-weight: 600; color: var(--color-textMuted, #5a5a55); border-radius: var(--radius-pill, 999px);
}
.r-filter-bar__segment--selected { background: var(--color-surface, #fff); color: var(--color-text, #1a1a18); }
/* The native radio stays in the tab order and the accessibility tree; it is only drawn as the segment. */
.r-filter-bar__segment-input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.r-filter-bar__segment:has(.r-filter-bar__segment-input:focus-visible) { outline: 2px solid var(--color-accent, #c8a951); outline-offset: 1px; }
.r-filter-bar__search:focus-visible,
.r-filter-bar__menu:focus-visible { outline: 2px solid var(--color-accent, #c8a951); outline-offset: 2px; }

/* ── sequence-list ──────────────────────────────────────────────────────────────────────────────── */
.r-sequence-list { display: flex; flex-direction: column; gap: var(--space-s, 8px); }
.r-sequence-list__steps {
    list-style: none; margin: 0; padding: 0; overflow: hidden;
    border-radius: var(--radius-card, 14px); background: var(--color-surface, #fff);
    border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-sequence-list__item + .r-sequence-list__item { border-top: 1px solid var(--color-hairline, #e3e2dd); }
.r-sequence-list__row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 14px;
    font: inherit; color: inherit; text-align: start; background: transparent; border: 0;
}
button.r-sequence-list__row { cursor: pointer; background: color-mix(in srgb, var(--color-accent, #c8a951) 12%, transparent); }
button.r-sequence-list__row:hover { background: color-mix(in srgb, var(--color-accent, #c8a951) 20%, transparent); }
button.r-sequence-list__row:focus-visible { outline: 2px solid var(--color-accent, #c8a951); outline-offset: -2px; }
.r-sequence-list__marker {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.r-sequence-list__item--done .r-sequence-list__marker { background: var(--color-safe, #2e7d4f); color: var(--color-onAccent, #fff); }
.r-sequence-list__item--available .r-sequence-list__marker { background: var(--color-accent, #c8a951); color: var(--color-onAccent, #14213d); }
.r-sequence-list__item--locked .r-sequence-list__marker {
    font-size: 10px; filter: grayscale(1); opacity: 0.7;
    background: var(--color-surface, #fff); border: 1.5px solid var(--color-hairline, #e3e2dd);
}
.r-sequence-list__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.r-sequence-list__title { font-size: 14.5px; font-weight: 500; color: var(--color-text, #1a1a18); }
.r-sequence-list__item--available .r-sequence-list__title { font-weight: 600; }
.r-sequence-list__item--locked .r-sequence-list__title { color: var(--color-textMuted, #5a5a55); }
.r-sequence-list__meta { color: var(--color-textMuted, #5a5a55); }
.r-sequence-list__status { flex: 0 0 auto; max-width: 40%; text-align: end; font-size: 12px; color: var(--color-textMuted, #5a5a55); }
.r-sequence-list__item--available .r-sequence-list__status { font-weight: 600; color: var(--color-text, #1a1a18); }
.r-sequence-list__footnote { margin: 0; padding-inline: 4px; font-size: 12px; color: var(--color-textMuted, #5a5a55); }

/* ── measurement & progress: likert-item, ranked-list, level-track, change-list ───────────────────── */
/* Server-computed values only — nothing here draws a score, total or percentage. Value changes and
   reorders fade (~0.2s opacity): a re-keyed element fades in, and dots/points ease their colour. */
@keyframes r-fade-in { from { opacity: 0; } to { opacity: 1; } }

.r-likert, .r-ranked-list, .r-level-track, .r-change-list { margin-inline: var(--space-l, 24px); }
.r-likert { display: flex; flex-direction: column; gap: var(--space-m, 16px); }
.r-likert__head { display: flex; flex-direction: column; gap: 4px; }
.r-likert__timeframe { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-textMuted, #5a5a55); }
.r-likert__statement { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--color-text, #1a1a18); }
.r-likert__scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.r-likert__point {
    display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; padding: 0;
    background: none; border: 0; cursor: pointer; font: inherit; color: var(--color-text, #1a1a18);
}
.r-likert__dot {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    font-size: 16px; font-weight: 600;
    background: var(--color-surface, #fff); border: 1.5px solid var(--color-hairline, #e3e2dd);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.35s cubic-bezier(.3, 1.6, .5, 1);
}
.r-likert__point--picked .r-likert__dot {
    background: var(--color-accent, #c8a951); border-color: var(--color-accent, #c8a951);
    color: var(--color-onAccent, #14213d); transform: scale(1.08);
}
.r-likert__point:focus-visible { outline: none; }
.r-likert__point:focus-visible .r-likert__dot { outline: 2px solid var(--color-accent, #c8a951); outline-offset: 3px; }
.r-likert__label { text-align: center; color: var(--color-textMuted, #5a5a55); }
.r-likert__ends { display: flex; justify-content: space-between; gap: var(--space-m, 16px); font-size: 12px; color: var(--color-textMuted, #5a5a55); }
.r-likert__ends span:last-child { text-align: end; }
.r-likert__defer, .r-ranked-list__see-all {
    align-self: flex-start; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
    font: 600 13px/1 inherit; color: var(--color-textMuted, #5a5a55);
}
.r-likert__defer { text-decoration: underline; }
.r-likert__defer:focus-visible, .r-ranked-list__see-all:focus-visible,
.r-level-track__action:focus-visible { outline: 2px solid var(--color-accent, #c8a951); outline-offset: 2px; }
.r-ranked-list__row:focus-visible { outline: 2px solid var(--color-accent, #c8a951); outline-offset: -2px; }

.r-ranked-list { display: flex; flex-direction: column; gap: 4px; }
.r-ranked-list__rows {
    list-style: none; margin: 0; padding: 0; overflow: hidden; animation: r-fade-in 0.2s ease;
    border-radius: var(--radius-card, 14px); background: var(--color-surface, #fff); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-ranked-list__item + .r-ranked-list__item { border-top: 1px solid var(--color-hairline, #e3e2dd); }
.r-ranked-list__row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 12px 15px;
    background: none; border: 0; text-align: start; font: inherit; color: var(--color-text, #1a1a18);
}
button.r-ranked-list__row { cursor: pointer; }
.r-ranked-list__item--lead .r-ranked-list__row { padding-block: 15px; }
.r-ranked-list__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.r-ranked-list__label { font-size: 14.5px; font-weight: 500; }
.r-ranked-list__item--lead .r-ranked-list__label { font-size: 17px; font-weight: 600; }
.r-ranked-list__sublabel { color: var(--color-textMuted, #5a5a55); }
.r-ranked-list__chevron {
    flex: none; width: 7px; height: 7px; margin-inline: 2px 4px;
    border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); opacity: 0.6;
}
.r-ranked-list__see-all { display: inline-flex; align-items: center; gap: 4px; }
.r-ranked-list__tag {
    flex: none; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
    background: color-mix(in srgb, var(--color-accent, #c8a951) 25%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent, #c8a951) 60%, transparent);
}

.r-rep-dots { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.r-rep-dots__dot {
    width: 10px; height: 10px; border-radius: 50%; transform: scale(0.86);
    border: 1.25px solid color-mix(in srgb, var(--color-textMuted, #5a5a55) 45%, transparent);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.45s cubic-bezier(.3, 1.6, .5, 1);
}
.r-rep-dots__dot--on { background: var(--color-accent, #c8a951); border-color: var(--color-accent, #c8a951); transform: none; }
.r-level-track--full .r-rep-dots__dot { width: 14px; height: 14px; }

.r-level-track { color: var(--color-text, #1a1a18); }
.r-level-track--compact, .r-level-track--row {
    display: flex; gap: var(--space-s, 8px); padding: 12px 15px;
    border-radius: var(--radius-card, 14px); background: var(--color-surface, #fff); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-level-track--compact { align-items: center; }
.r-level-track--row { flex-direction: column; padding: var(--space-m, 16px); }
.r-level-track__text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.r-level-track__eyebrow { margin: 0; font-size: 12px; color: var(--color-textMuted, #5a5a55); }
.r-level-track--compact .r-level-track__eyebrow,
.r-level-track--full .r-level-track__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.r-level-track--full .r-level-track__eyebrow { font-size: 11px; color: var(--color-accent, #c8a951); }
.r-level-track__title { margin: 0; font-size: 14px; font-weight: 600; }
.r-level-track--row .r-level-track__title { font-size: 16px; }
.r-level-track--full .r-level-track__title { font-size: 22px; line-height: 1.25; }
.r-level-track__state { margin: 0; font-size: 12px; color: var(--color-textMuted, #5a5a55); }
.r-level-track__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s, 8px); }
.r-level-track__meters { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s, 8px); }
.r-level-track__ticks { display: inline-flex; gap: 3px; }
.r-level-track__tick { width: 14px; height: 4px; border-radius: 999px; background: var(--color-hairline, #e3e2dd); transition: background-color 0.2s ease; }
.r-level-track__tick--on { background: var(--color-text, #1a1a18); }
.r-level-track--full { display: flex; flex-direction: column; gap: var(--space-s, 8px); }
.r-level-track__reps { display: flex; align-items: center; gap: var(--space-s, 8px); font-size: 13px; font-weight: 500; }
.r-level-track__detail { margin: 0; font-size: 13px; color: var(--color-textMuted, #5a5a55); }
.r-level-track__why { margin: 0; font-size: 15px; font-style: italic; line-height: 1.4; }
.r-level-track__action {
    width: 100%; min-height: 50px; cursor: pointer; font: 600 15px/1 inherit; border: 0;
    border-radius: var(--radius-pill, 999px); background: var(--color-accent, #c8a951); color: var(--color-onAccent, #14213d);
}
.r-level-track__levels {
    list-style: none; margin: var(--space-xs, 4px) 0 0; padding: 0; overflow: hidden;
    border-radius: var(--radius-card, 14px); background: var(--color-surface, #fff); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-level-track__level { display: flex; align-items: center; gap: 12px; padding: 12px; font-size: 14px; }
.r-level-track__level + .r-level-track__level { border-top: 1px solid var(--color-hairline, #e3e2dd); }
.r-level-track__level[data-status="now"] { font-weight: 600; background: color-mix(in srgb, var(--color-accent, #c8a951) 12%, transparent); }
/* Status marks are decorative (the note carries the word): done = filled check, now = ring + dot, ahead = ring. */
.r-level-track__mark {
    position: relative; flex: none; width: 17px; height: 17px; border-radius: 50%; box-sizing: border-box;
    border: 1.5px solid color-mix(in srgb, var(--color-textMuted, #5a5a55) 60%, transparent);
}
.r-level-track__level[data-status="done"] .r-level-track__mark { background: var(--color-safe, #0f6e56); border-color: var(--color-safe, #0f6e56); }
.r-level-track__level[data-status="done"] .r-level-track__mark::after {
    content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
    border: solid var(--color-surface, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.r-level-track__level[data-status="now"] .r-level-track__mark { border-color: var(--color-accent, #c8a951); }
.r-level-track__level[data-status="now"] .r-level-track__mark::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--color-accent, #c8a951);
}
.r-level-track__level[data-status="ahead"] { color: var(--color-textMuted, #5a5a55); }
.r-level-track__level-name { flex: 1; min-width: 0; }
.r-level-track__level-note { font-size: 12px; color: var(--color-textMuted, #5a5a55); }
.r-level-track__level[data-status="now"] .r-level-track__level-note { color: var(--color-text, #1a1a18); }

.r-change-list {
    list-style: none; margin-block: 0; padding: 0; overflow: hidden;
    border-radius: var(--radius-card, 14px); background: var(--color-surface, #fff); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-change-list__row { display: flex; flex-direction: column; gap: 5px; padding: 13px 15px; }
.r-change-list__row + .r-change-list__row { border-top: 1px solid var(--color-hairline, #e3e2dd); }
.r-change-list__title { font-size: 14.5px; font-weight: 600; color: var(--color-text, #1a1a18); }
.r-change-list__values { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 16px; }
.r-change-list__from { color: var(--color-textMuted, #5a5a55); }
.r-change-list__arrow { font-size: 12px; font-weight: 700; color: var(--color-accent, #c8a951); }
.r-change-list__to { font-weight: 600; color: var(--color-text, #1a1a18); animation: r-fade-in 0.2s ease; }
.r-change-list__note { font-size: 13px; color: var(--color-textMuted, #5a5a55); }

/* ── fact-list ──────────────────────────────────────────────────────────────────────────────────── */
/* Labelled values on one card; an editable row is a text field under its label. */
.r-fact-list { display: flex; flex-direction: column; gap: var(--space-s, 8px); margin-inline: var(--space-l, 24px); }
.r-fact-list__title {
    margin: 0; font-family: var(--font-display, inherit); font-size: 22px; font-weight: 600; line-height: 1.25;
    color: var(--color-text, #1a1a18);
}
.r-fact-list__rows {
    overflow: hidden; border-radius: var(--radius-card, 14px);
    background: var(--color-surface, #fff); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-fact-list__row {
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    min-height: 44px; padding: 12px 15px;
}
.r-fact-list__row + .r-fact-list__row { border-top: 1px solid var(--color-hairline, #e3e2dd); }
.r-fact-list__label { font-size: 12px; font-weight: 600; color: var(--color-textMuted, #5a5a55); }
.r-fact-list__value, .r-fact-list__input { font-size: 14px; font-weight: 500; color: var(--color-text, #1a1a18); }
.r-fact-list__value { overflow-wrap: anywhere; }
.r-fact-list__input {
    width: 100%; min-width: 0; padding: 0; font-family: inherit; line-height: inherit;
    background: transparent; border: 0;
}
.r-fact-list__input::placeholder { color: var(--color-textMuted, #5a5a55); opacity: 0.7; }
/* The focus ring is the row's: around the field alone it would run over the label above it. */
.r-fact-list__input:focus-visible { outline: none; }
.r-fact-list__row--editable:has(.r-fact-list__input:focus-visible) { box-shadow: inset 0 0 0 2px var(--color-accent, #c8a951); }

/* Reduce Motion: no springs or scaling — colours and re-keyed values still fade, so a change is seen. */
@media (prefers-reduced-motion: reduce) {
    .r-likert__dot, .r-rep-dots__dot { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; transform: none; }
    .r-likert__point--picked .r-likert__dot, .r-rep-dots__dot--on { transform: none; }
}

/* ── tablet / desktop ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .r-page { gap: var(--space-l, 24px); }
    .r-shelf__card { flex-basis: 180px; }
    .r-ask-box__openings { flex-direction: row; }
    .r-ask-box__opening { flex: 1 1 0; }
    .r-timed-practice, .r-state-capture { max-width: 560px; margin-inline: auto; width: 100%; box-sizing: border-box; }
    .r-session-close { max-width: 512px; margin-inline: auto; width: calc(100% - 2 * var(--space-l, 24px)); box-sizing: border-box; }
    .r-contact-list, .r-consent-check, .r-step-header { max-width: 720px; }
}

/* ── practice instruments: hold-timer / scenario-card ───────────────────────────────────────────── */
.r-hold-timer, .r-scenario-card { padding-inline: var(--space-l, 24px); }
.r-hold-timer button:focus-visible,
.r-scenario-card button:focus-visible { outline: 2px solid var(--color-accent, #c8a951); outline-offset: 2px; }

/* A passed best changes the best line's text only: it shares one class, with no state styling. */
.r-hold-timer { display: flex; flex-direction: column; align-items: center; gap: var(--space-l, 24px); text-align: center; }
.r-hold-timer__counter { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs, 4px); }
.r-hold-timer__counter p { margin: 0; }
.r-hold-timer__label { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-textMuted, #5a5a55); }
.r-hold-timer__elapsed { font-size: 56px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--color-text, #1a1a18); }
.r-hold-timer__best { font-size: 15px; color: var(--color-textMuted, #5a5a55); }
/* The largest target on screen. */
.r-hold-timer__notice {
    width: 100%; max-width: 560px; min-height: 88px; padding: var(--space-m, 16px); cursor: pointer;
    font-family: inherit; font-weight: 600; font-size: 20px; line-height: 1.3; border-radius: var(--radius-card, 14px); border: 0;
    background: var(--color-accent, #c8a951); color: var(--color-onAccent, #14213d);
}
.r-hold-timer__feedback { margin: calc(-1 * var(--space-s, 8px)) 0 0; min-height: 1.4em; font-size: 15px; color: var(--color-textMuted, #5a5a55); }
.r-hold-timer__done {
    min-height: 48px; padding: 12px 26px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1.2; border-radius: var(--radius-pill, 999px);
    background: var(--color-surface, #fff); color: var(--color-text, #1a1a18); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-hold-timer button:disabled { opacity: 0.5; cursor: default; }

/* Feedback distinguishes, never corrects: the chosen reading is accent-tinted, nothing reads right or wrong. */
.r-scenario-card { display: flex; flex-direction: column; gap: var(--space-m, 16px); }
.r-scenario-card > p, .r-scenario-card > h2 { margin: 0; }
.r-scenario-card__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-textMuted, #5a5a55); }
.r-scenario-card__illustration { display: block; width: 100%; height: auto; border-radius: var(--radius-card, 14px); }
.r-scenario-card__situation { font-size: 19px; font-weight: 500; line-height: 1.35; color: var(--color-text, #1a1a18); }
.r-scenario-card__question { font-size: 15px; font-weight: 600; color: var(--color-text, #1a1a18); }
.r-scenario-card__readings { display: flex; flex-direction: column; gap: var(--space-s, 8px); }
.r-scenario-card__reading {
    width: 100%; min-height: 48px; padding: 13px 15px; cursor: pointer; text-align: start;
    font-family: inherit; font-weight: 500; font-size: 15px; line-height: 1.3; border-radius: var(--radius-tile, 10px);
    background: var(--color-surface, #fff); color: var(--color-text, #1a1a18); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-scenario-card__reading--selected {
    background: color-mix(in srgb, var(--color-accent, #c8a951) 12%, var(--color-surface, #fff));
    border: 1.6px solid var(--color-accent, #c8a951);
}
.r-scenario-card__reading:disabled { cursor: default; }
.r-scenario-card__reading:disabled:not(.r-scenario-card__reading--selected) { opacity: 0.55; }
.r-scenario-card__feedback {
    margin: 0; padding: var(--space-m, 16px); font-size: 15px; line-height: 1.4; color: var(--color-text, #1a1a18);
    border-radius: var(--radius-tile, 10px); background: var(--color-surface, #fff);
}
.r-scenario-card__next {
    width: 100%; min-height: 50px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1.2; border-radius: var(--radius-pill, 999px); border: 0;
    background: var(--color-accent, #c8a951); color: var(--color-onAccent, #14213d);
}
.r-scenario-card__next:disabled { opacity: 0.5; cursor: default; }
@media (min-width: 768px) {
    .r-scenario-card, .r-hold-timer { max-width: 640px; margin-inline: auto; width: 100%; box-sizing: border-box; }
}

/* ── LP-135 part 2 (LP-180): the remaining toned components, segments and titleTone ─────────────────────
   Same gate as above. --title-fg is a titleTone: the named tone's fg for one title, set on the title (or its
   row) itself, so it wins over the fg of a toned card around it only in a mode the title tone is defined for. */

/* segments — progress-bar style "segments", level-track repsStyle "segments". */
.r-segments { display: flex; gap: 4px; width: 100%; }
.r-segments__seg { flex: 1 1 0; height: 8px; border-radius: 999px; background: var(--color-hairline, #e3e2dd); }
.r-segments__seg--on { background: var(--color-accent, #c8a951); }
.r-progress-bar:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-meter__fill,
.r-progress-bar:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-segments__seg--on { background: var(--tone-fg, var(--color-text, #1a1a18)); }
.r-level-track .r-segments { flex: none; width: calc(var(--segments) * 16px); max-width: 100%; }
.r-level-track .r-segments__seg { height: 6px; }
.r-level-track .r-segments__seg--on { background: var(--color-safe, #2a6f6a); }
.r-level-track--full .r-level-track__reps:has(> .r-segments) { flex-direction: column; align-items: stretch; }
.r-level-track--full .r-segments { width: 100%; }
.r-level-track--full .r-segments__seg { height: 10px; }
.r-level-track:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) { background: var(--tone-bg, var(--color-surface, #fff)); border-color: var(--tone-edge, transparent); }
.r-level-track:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-level-track__title { color: var(--tone-fg, var(--color-text, #1a1a18)); }

/* ask-box — `tone` on the box, `tone` / `titleTone` on an opening and on the secondary door, the acknowledgement. */
.r-ask-box__ask { display: flex; flex-direction: column; gap: var(--space-s, 8px); }
.r-ask-box__ask:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) {
    padding: var(--space-m, 16px); border-radius: var(--radius-card, 14px);
    background: var(--tone-bg, var(--color-surface, #fff)); border: 1px solid var(--tone-edge, transparent);
}
.r-ask-box__ask:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-ask-box__prompt { color: var(--tone-fg, var(--color-text, #1a1a18)); }
.r-ask-box__ack { margin: 0; font-size: 12.5px; color: var(--color-textMuted, #5a5a55); }
.r-ask-box__opening:where(:root:not(.dark) .r-toned, .dark .r-toned-dark), .r-ask-box__secondary:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) { background: var(--tone-bg, var(--color-surface, #fff)); border: 1px solid var(--tone-edge, transparent); }
.r-ask-box__opening:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-ask-box__opening-label,
.r-ask-box__secondary:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-ask-box__secondary-label { color: var(--tone-fg, var(--color-text, #1a1a18)); }
.r-ask-box__opening .r-ask-box__opening-label:where(:root:not(.dark) .r-toned, .dark .r-toned-dark),
.r-ask-box__secondary .r-ask-box__secondary-label:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) { color: var(--title-fg, var(--color-text, #1a1a18)); }

/* contact-list — a group's `tone` tints its card and label; `buttonTone` draws its actions as outline pills. */
.r-contact-list__group:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-contact-list__contacts { background: var(--tone-bg, var(--color-surface, #fff)); border-color: var(--tone-edge, transparent); }
.r-contact-list__group:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-contact-list__label { color: var(--tone-fg, var(--color-text, #1a1a18)); }
.r-contact-list__actions:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-contact-list__action {
    background: var(--color-surface, #fff); color: var(--tone-fg, var(--color-text, #1a1a18));
    border: 1.5px solid var(--tone-edge, var(--tone-fg, var(--color-text, #1a1a18)));
}

/* ranked-list — `tone` tints the list and its labels; layout "cards" draws each item as its own card. */
.r-ranked-list:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-ranked-list__rows { background: var(--tone-bg, var(--color-surface, #fff)); border-color: var(--tone-edge, transparent); }
.r-ranked-list:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-ranked-list__item + .r-ranked-list__item { border-top-color: var(--tone-edge, var(--color-hairline, #e3e2dd)); }
.r-ranked-list:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-ranked-list__label { color: var(--tone-fg, var(--color-text, #1a1a18)); }
.r-ranked-list--cards .r-ranked-list__rows {
    display: flex; flex-direction: column; gap: var(--space-xs, 8px);
    overflow: visible; border: 0; border-radius: 0; background: none;
}
.r-ranked-list--cards .r-ranked-list__item {
    overflow: hidden; border-radius: var(--radius-card, 14px);
    background: var(--color-surface, #fff); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-ranked-list--cards:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-ranked-list__rows { background: none; }
.r-ranked-list--cards:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-ranked-list__item { background: var(--tone-bg, var(--color-surface, #fff)); border-color: var(--tone-edge, transparent); }
.r-ranked-list--cards:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-ranked-list__item + .r-ranked-list__item { border-top-color: var(--tone-edge, transparent); }

/* cta — `tone` on an outline or ghost CTA: the label, and an outline's edge. */
.r-cta:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) { color: var(--tone-fg, var(--color-text, #1a1a18)); }
.r-cta--outline:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) { border-color: var(--tone-edge, var(--tone-fg, var(--color-text, #1a1a18))); }

/* form-group — a row's `titleTone` colours its label and icon. */
.r-form-row:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-form-row__label,
.r-form-row:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) > .r-icon { color: var(--title-fg, var(--color-text, #1a1a18)); }

/* timed-practice — `tone`: a pale circle in the tone's bg behind the visual (wider than it, as on iOS), and the
   2D ring in the tone's fg. */
.r-timed-practice__visual:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) {
    --ring-ink: var(--tone-fg, var(--color-text, #1a1a18));
    margin-block: calc(var(--space-s, 8px) + 26px); border-radius: 50%;
    background: var(--tone-bg, var(--color-surface, #fff)); box-shadow: 0 0 0 26px var(--tone-bg, var(--color-surface, #fff));
}

/* ── LP-271: the block props iOS drew and web dropped ──────────────────────────────────────────────────
   Each is a look a block opts into with a prop; a block that doesn't send it draws as it did. Toned looks
   go through the same gate as above. */

/* chip-question — chipStyle "pill": capsule chips, a hairline idle edge and the text colour whatever the role;
   the selected chip keeps its role (or selectedTone) colours. layout "plain": no card look, the prompt is the
   page's headline, the footnote and an emphasised "why we ask" link follow the chips. */
.r-chip-question--pill .r-chip-question__prompt { font-size: 15px; }
.r-chip-question--pill .r-chip-question__chips { gap: 9px; }
.r-chip-question--pill .r-chip {
    font-size: 15px; padding: 10px 16px; border-radius: 22px;
    border: 1.2px solid var(--color-hairline, #e3e2dd); color: var(--color-text, #1a1a18);
}
.r-chip-question--pill .r-chip--selected { font-weight: 600; color: var(--color-textMuted, #5a5a55); border-color: currentColor; }
.r-chip-question--pill .r-chip--selected.r-chip--safe { color: var(--color-safe, #0f6e56); }
.r-chip-question--pill .r-chip--selected.r-chip--danger { color: var(--color-danger, #b3261e); }
.r-chip-question--pill .r-chip:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) {
    background: var(--tone-bg, var(--color-surface, #fff)); color: var(--tone-fg, var(--color-text, #1a1a18)); border-color: var(--tone-edge, transparent);
}
.r-chip-question--plain .r-chip-question__prompt { font-family: var(--font-display, inherit); font-size: 28px; font-weight: 600; line-height: 1.2; }
.r-chip-question--plain .r-chip-question__chips { margin-top: var(--space-m, 16px); }
.r-chip-question--plain .r-chip-question__footnote { margin-top: var(--space-m, 16px); font-size: 14px; }
.r-chip-question--plain .r-chip-question__why { font-size: 14px; font-weight: 700; color: var(--color-heroBg, #14213d); }

/* chip-select — `tone`: every chip a pill, the idle ones a borderless tinted fill with the label in the tone's
   fg. A row that collapses behind a "more" chip (maxVisible + moreLabel) wraps, each chip its own width. */
.r-chip-select__options:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-chip-select__opt { border-radius: 999px; }
.r-chip-select__options:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-chip-select__opt:not(.r-chip-select__opt--selected) {
    background: var(--tone-bg, var(--color-surface, #fff)); color: var(--tone-fg, var(--color-text, #1a1a18)); border-color: transparent; font-weight: 600;
}
.r-chip-select--flow .r-chip-select__options { flex-wrap: wrap; }
.r-chip-select--flow .r-chip-select__opt {
    flex: 0 1 auto; max-width: 100%; padding-inline: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* contact-list — a group's layout "cards": each contact its own card, name / number / note on the left and the
   actions as compact pills on the trailing edge (under the text on a very narrow screen). The group's tone
   tints each card and its name; the label stays a quiet heading. The pill is 38px with a 44px target. */
.r-contact-list__group--cards .r-contact-list__contacts {
    display: flex; flex-direction: column; gap: var(--space-s, 12px);
    overflow: visible; border: 0; border-radius: 0; background: none;
}
.r-contact-list__group--cards .r-contact-list__contact {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
    border-radius: var(--radius-card, 14px); background: var(--color-surface, #fff); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-contact-list__group--cards .r-contact-list__contact > p { grid-column: 1; }
.r-contact-list__group--cards .r-contact-list__name { font-size: 17px; font-weight: 700; }
.r-contact-list__group--cards .r-contact-list__number { font-size: 15px; font-weight: 400; }
.r-contact-list__group--cards .r-contact-list__note { font-size: 14px; }
.r-contact-list__group--cards .r-contact-list__badge {
    justify-self: start; padding: 0; border-radius: 0; background: none;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-textMuted, #5a5a55);
}
.r-contact-list__group--cards .r-contact-list__actions { grid-column: 2; grid-row: 1 / span 4; align-self: start; flex-wrap: nowrap; margin-top: 0; }
.r-contact-list__group--cards .r-contact-list__action { position: relative; min-height: 38px; margin-block: 3px; padding: 0 16px; font-weight: 700; }
.r-contact-list__group--cards .r-contact-list__action::after { content: ""; position: absolute; inset: -3px 0; }
.r-contact-list__group--cards .r-contact-list__label { color: var(--color-textMuted, #5a5a55); }
.r-contact-list__group--cards:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-contact-list__contact { background: var(--tone-bg, var(--color-surface, #fff)); border-color: var(--tone-edge, transparent); }
.r-contact-list__group--cards:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-contact-list__name { color: var(--tone-fg, var(--color-text, #1a1a18)); }
@media (max-width: 339px) {
    .r-contact-list__group--cards .r-contact-list__contact { grid-template-columns: minmax(0, 1fr); }
    .r-contact-list__group--cards .r-contact-list__actions { grid-column: 1; grid-row: auto; flex-wrap: wrap; margin-top: 12px; }
}

/* echo-card — quoteStyle "quoted": the quote in a bold serif inside curly quotes, no rule, the body muted.
   `stepTone`: the steps as plain numerals in the tone's fg, no circles. */
.r-echo-card--quoted .r-echo-card__quote {
    padding-inline-start: 0; border-inline-start: 0;
    font-family: var(--font-display, inherit); font-size: 26px; font-style: normal; font-weight: 600; line-height: 1.25;
}
.r-echo-card--quoted .r-echo-card__body { color: var(--color-textMuted, #5a5a55); }
.r-echo-card__steps:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) { gap: 10px; }
.r-echo-card__steps:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-echo-card__step {
    align-items: baseline; gap: 16px; font-size: 15px; font-weight: 400; color: var(--color-textMuted, #5a5a55);
}
.r-echo-card__steps:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-echo-card__step::before {
    flex: 0 0 14px; height: auto; display: block; border: 0; border-radius: 0;
    font-size: 15px; color: var(--tone-fg, var(--color-text, #1a1a18));
}

/* form-group — layout "cards": each row its own card, a bold label over its subtitle, the action word trailing. */
.r-form-row__subtitle { font-size: 14px; color: var(--color-textMuted, #5a5a55); }
.r-form-row__action { flex: none; font-size: 15px; font-weight: 600; color: var(--color-text, #1a1a18); }
.r-form-group--cards .r-form-group__rows {
    display: flex; flex-direction: column; gap: var(--space-s, 12px);
    overflow: visible; border: 0; border-radius: 0; background: none;
}
.r-form-group--cards .r-form-row {
    min-height: 44px; padding: 14px var(--space-m, 16px);
    border-radius: var(--radius-card, 14px); background: var(--color-surface, #fff); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-form-group--cards .r-form-row__body { gap: 3px; }
.r-form-group--cards .r-form-row__label { font-size: 17px; font-weight: 600; }

/* level-track — layout "text". Row: a bold title over the detail line, the level label trailing. Full: a header
   card (tinted by `tone`, which also inks a segmented reps bar), `why` led by a bold label, a square action in
   the hero colours, and each level its own card with its status word trailing. */
.r-level-track__level-status { flex: none; font-size: 12px; font-weight: 600; color: var(--color-textMuted, #5a5a55); }
.r-level-track--row.r-level-track--text { flex-direction: row; align-items: center; padding: 14px 15px; }
.r-level-track--text .r-level-track__text { gap: 3px; }
.r-level-track--row.r-level-track--text .r-level-track__title { font-size: 17px; font-weight: 700; }
.r-level-track--text .r-level-track__detail { font-size: 15px; }
.r-level-track__level-label { flex: none; font-size: 15px; font-weight: 600; color: var(--color-textMuted, #5a5a55); }
.r-level-track__level-label::after { content: "\203A"; margin-inline-start: 4px; }
.r-level-track--full.r-level-track--text { gap: var(--space-m, 16px); }
.r-level-track__header {
    display: flex; flex-direction: column; gap: 10px; padding: 16px 18px;
    border-radius: var(--radius-card, 14px); background: var(--color-surface, #fff); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-level-track__header .r-level-track__eyebrow { font-size: 12px; letter-spacing: 0.12em; }
.r-level-track__header .r-level-track__title { font-size: 24px; }
.r-level-track__header .r-level-track__reps-label { margin: 0; font-size: 14px; color: var(--color-textMuted, #5a5a55); }
.r-level-track__header:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) { background: var(--tone-bg, var(--color-surface, #fff)); border-color: var(--tone-edge, transparent); }
.r-level-track__header:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-level-track__eyebrow { color: var(--tone-fg, var(--color-text, #1a1a18)); }
.r-level-track__header:where(:root:not(.dark) .r-toned, .dark .r-toned-dark) .r-segments__seg--on { background: var(--tone-fg, var(--color-text, #1a1a18)); }
.r-level-track--text .r-level-track__why { font-size: 16px; font-style: normal; }
.r-level-track--text .r-level-track__action {
    font-size: 16px; border-radius: var(--radius-tile, 10px);
    background: var(--color-heroBg, #14213d); color: var(--color-heroText, #fff);
}
.r-level-track__levels-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-textMuted, #5a5a55); }
.r-level-track--text .r-level-track__levels {
    display: flex; flex-direction: column; gap: var(--space-s, 12px);
    margin: 0; overflow: visible; border: 0; border-radius: 0; background: none;
}
.r-level-track--text .r-level-track__level,
.r-level-track--text .r-level-track__level[data-status="now"] {
    padding: 14px 15px; font-weight: 400;
    border-radius: var(--radius-card, 14px); background: var(--color-surface, #fff); border: 1px solid var(--color-hairline, #e3e2dd);
}
.r-level-track--text .r-level-track__level[data-status="ahead"] { opacity: 0.8; }
.r-level-track__level-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.r-level-track--text .r-level-track__level-name { font-size: 17px; font-weight: 700; }
.r-level-track--text .r-level-track__level-note,
.r-level-track--text .r-level-track__level[data-status="now"] .r-level-track__level-note { font-size: 15px; color: var(--color-textMuted, #5a5a55); }
.r-level-track--text .r-level-track__level-status { font-size: 15px; }

/* stat-row — an item's `id` is its theme colour, on the icon and the meter; set only on a box that is neither
   flagged nor on the hero, so those and a box with no id draw as they did. */
.r-stat-box .r-icon { color: var(--tint, currentColor); }
.r-stat-box .r-meter__fill { background: var(--tint, var(--color-accent, #14213d)); }