/*! Relay design system 1.0.0 (2026-11-07). Licensed to Design Systems Library members, single user. */

/* ---- base ---- */
/* Relay base: document defaults, zero-specificity resets inside .ry-page, type roles, layout
   helpers (container, section, grid, stack), skip link, arrow link and the specimen frame used by
   demo/components.html. Load after tokens.css and before every component. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--ry-nav-h) + var(--ry-space-4));
}

body {
  margin: 0;
  background: var(--ry-canvas);
  color: var(--ry-body);
  font-family: var(--ry-font-sans);
  font-size: var(--ry-fs-body);
  line-height: var(--ry-lh-body);
  font-weight: var(--ry-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(.ry-page),
:where(.ry-page) *,
:where(.ry-page) *::before,
:where(.ry-page) *::after {
  box-sizing: border-box;
}

:where(.ry-page) {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

:where(.ry-page) > :where(main) {
  flex: 1 0 auto;
}

:where(.ry-page) :where(h1, h2, h3, h4, h5, p, ul, ol, figure, dl, dd, pre, table, blockquote, fieldset) {
  margin: 0;
}

:where(.ry-page) :where(ul, ol)[role="list"] {
  padding: 0;
  list-style: none;
}

:where(.ry-page) :where(img, svg, video, canvas) {
  display: block;
  max-width: 100%;
}

:where(.ry-page) :where(img, video) {
  height: auto;
}

:where(.ry-page) :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(.ry-page) :where(h1, h2, h3, h4, h5) {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-semibold);
  text-wrap: balance;
}

:where(.ry-page) :where(h1) {
  font-size: var(--ry-fs-display);
  line-height: var(--ry-lh-display);
  letter-spacing: var(--ry-track-display);
}

:where(.ry-page) :where(h2) {
  font-size: var(--ry-fs-title);
  line-height: var(--ry-lh-title);
  letter-spacing: var(--ry-track-title);
}

:where(.ry-page) :where(h3) {
  font-size: var(--ry-fs-card);
  line-height: var(--ry-lh-snug);
  letter-spacing: var(--ry-track-headline);
}

:where(.ry-page) :where(h4, h5) {
  font-size: var(--ry-fs-body);
  line-height: var(--ry-lh-snug);
}

:where(.ry-page) :where(p, li, dd, blockquote) {
  text-wrap: pretty;
}

:where(.ry-page) :where(a) {
  color: var(--ry-accent-strong);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: color var(--ry-dur-fast) var(--ry-ease), text-decoration-color var(--ry-dur-fast) var(--ry-ease);
}

:where(.ry-page) :where(a:hover) {
  color: var(--ry-ink);
  text-decoration-color: currentColor;
}

:where(.ry-page) :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ry-focus);
  outline-offset: 2px;
}

:where(.ry-page) :where(code, kbd, samp, pre) {
  font-family: var(--ry-font-mono);
  font-size: 0.875em;
  font-variant-ligatures: none;
}

:where(.ry-page) :where(p code, li code, td code, dd code) {
  padding: 1px 5px;
  border-radius: var(--ry-radius-xs);
  background: var(--ry-code-bg);
  color: var(--ry-code-ink);
  overflow-wrap: anywhere;
}

:where(.ry-page) :where(kbd) {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 5px;
  border: 1px solid var(--ry-hair-strong);
  border-bottom-width: 2px;
  border-radius: var(--ry-radius-xs);
  background: var(--ry-surface);
  color: var(--ry-ink);
  font-size: var(--ry-fs-caption);
  line-height: 1.6;
  text-align: center;
}

:where(.ry-page) :where(strong, b) {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-semibold);
}

/* New-content mark: the only place the lime family touches running text, always as a fill */
:where(.ry-page) :where(mark) {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--ry-lime-soft);
  color: var(--ry-ink);
}

:where(.ry-page) :where(hr) {
  height: 1px;
  margin: var(--ry-space-8) 0;
  border: 0;
  background: var(--ry-hair);
}

:where(.ry-page) ::selection {
  background: var(--ry-accent-soft);
  color: var(--ry-ink);
}

:where(.ry-page) :where([hidden]) {
  display: none !important;
}

/* Type roles as classes, for when the element and the look differ */
.ry-display {
  color: var(--ry-ink);
  font-size: var(--ry-fs-display);
  font-weight: var(--ry-weight-semibold);
  line-height: var(--ry-lh-display);
  letter-spacing: var(--ry-track-display);
}

.ry-title {
  color: var(--ry-ink);
  font-size: var(--ry-fs-title);
  font-weight: var(--ry-weight-semibold);
  line-height: var(--ry-lh-title);
  letter-spacing: var(--ry-track-title);
}

.ry-headline {
  color: var(--ry-ink);
  font-size: var(--ry-fs-headline);
  font-weight: var(--ry-weight-semibold);
  line-height: var(--ry-lh-snug);
  letter-spacing: var(--ry-track-headline);
}

.ry-lede {
  color: var(--ry-muted);
  font-size: var(--ry-fs-lede);
  line-height: var(--ry-lh-body);
  max-width: 40rem;
}

.ry-note {
  color: var(--ry-muted);
  font-size: var(--ry-fs-note);
  line-height: var(--ry-lh-body);
}

.ry-meta {
  color: var(--ry-muted);
  font-size: var(--ry-fs-meta);
  line-height: var(--ry-lh-snug);
}

.ry-caption {
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
  line-height: var(--ry-lh-snug);
}

.ry-mono {
  font-family: var(--ry-font-mono);
  font-variant-ligatures: none;
}

.ry-muted {
  color: var(--ry-muted);
}

.ry-num {
  font-variant-numeric: tabular-nums;
}

/* Layout */
.ry-container {
  width: 100%;
  max-width: calc(var(--ry-content) + 2 * var(--ry-gutter));
  margin-inline: auto;
  padding-inline: var(--ry-gutter);
}

.ry-container--reading {
  max-width: calc(var(--ry-reading) + 2 * var(--ry-gutter));
}

.ry-container--narrow {
  max-width: calc(var(--ry-narrow) + 2 * var(--ry-gutter));
}

.ry-section {
  padding-block: var(--ry-section-pad);
}

.ry-section--tight {
  padding-block: calc(var(--ry-section-pad) * 0.6);
}

.ry-section--flush-top {
  padding-block-start: 0;
}

.ry-section--sunk {
  background: var(--ry-sunk);
}

.ry-section--rule {
  border-block-start: 1px solid var(--ry-hair);
}

.ry-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ry-space-4);
}

.ry-stack--tight {
  gap: var(--ry-space-2);
}

.ry-stack--loose {
  gap: var(--ry-space-8);
}

.ry-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ry-space-3);
}

.ry-grid {
  display: grid;
  gap: var(--ry-space-6);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
  .ry-grid--2,
  .ry-grid--3,
  .ry-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ry-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ry-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ry-split {
  display: grid;
  gap: var(--ry-space-8);
}

@media (min-width: 960px) {
  .ry-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ry-space-11);
  }

  .ry-split--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ry-split__sticky {
    position: sticky;
    top: calc(var(--ry-nav-h) + var(--ry-space-7));
    align-self: start;
  }
}

.ry-center {
  text-align: center;
  margin-inline: auto;
}

/* Visually hidden, still read aloud */
.ry-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ry-skip {
  position: absolute;
  inset-inline-start: var(--ry-space-4);
  top: var(--ry-space-3);
  z-index: 100;
  padding: var(--ry-space-2) var(--ry-space-4);
  border-radius: var(--ry-radius-btn);
  background: var(--ry-btn);
  color: var(--ry-btn-ink);
  font-weight: var(--ry-weight-medium);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--ry-dur) var(--ry-ease);
}

.ry-skip:focus-visible {
  transform: none;
  color: var(--ry-btn-ink);
}

/* Text link with a trailing arrow icon */
.ry-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ry-accent-strong);
  font-weight: var(--ry-weight-medium);
  text-decoration: none;
}

.ry-link svg {
  flex: none;
  transition: transform var(--ry-dur-fast) var(--ry-ease);
}

.ry-link:hover {
  color: var(--ry-ink);
}

.ry-link:hover svg {
  transform: translateX(3px);
}

/* Directional icons (arrows, chevrons) carry .ry-flip and mirror in right-to-left pages */
[dir="rtl"] .ry-flip {
  transform: scaleX(-1);
}

[dir="rtl"] .ry-link svg {
  transform: scaleX(-1);
}

[dir="rtl"] .ry-link:hover svg {
  transform: scaleX(-1) translateX(3px);
}

/* Specimen frame: labels and frames for demo/components.html, never needed on product pages.
   From 1100px the name and summary sit in a left column beside the frame; .ry-specimen--wide
   keeps full-width parts (hero, nav, footer, the app shell) stacked. */
.ry-specimen {
  display: grid;
  gap: var(--ry-space-5);
  scroll-margin-top: calc(var(--ry-nav-h) + var(--ry-space-4));
}

.ry-specimen + .ry-specimen {
  margin-block-start: var(--ry-space-8);
  padding-block-start: var(--ry-space-8);
  border-block-start: 1px solid var(--ry-hair);
}

.ry-specimen__head {
  display: grid;
  gap: var(--ry-space-2);
  align-content: start;
}

.ry-specimen__name {
  font-size: var(--ry-fs-headline);
  letter-spacing: var(--ry-track-headline);
}

.ry-specimen__file {
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-specimen__summary {
  max-width: 46rem;
  color: var(--ry-muted);
  font-size: var(--ry-fs-note);
}

@media (min-width: 1100px) {
  .ry-specimen:not(.ry-specimen--wide) {
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: var(--ry-space-9);
  }

  .ry-specimen:not(.ry-specimen--wide) > .ry-specimen__head {
    position: sticky;
    top: calc(var(--ry-nav-h) + var(--ry-space-6));
  }
}

.ry-specimen__label {
  margin-block: var(--ry-space-3) calc(var(--ry-space-2) * -1);
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-specimen__label:first-child {
  margin-block-start: 0;
}

.ry-specimen__frame {
  display: grid;
  gap: var(--ry-space-4);
  min-width: 0;
  padding: var(--ry-space-6);
  border: 1px dashed var(--ry-hair-strong);
  border-radius: var(--ry-radius-card);
}

.ry-specimen__frame--bare {
  padding: 0;
  border: 0;
}

@media (max-width: 640px) {
  .ry-specimen__frame {
    padding: var(--ry-space-4);
  }
}

/* Social card frame for extras/og: 1200 by 630, screenshot at 1x */
.ry-og {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;
  gap: 56px;
  align-items: center;
  width: 1200px;
  height: 630px;
  padding: 64px 72px;
  overflow: hidden;
  background: var(--ry-canvas);
}

.ry-og__copy {
  display: grid;
  gap: 28px;
  align-content: center;
  height: 100%;
}

.ry-og__title {
  max-width: 16ch;
  font-size: 64px;
  line-height: 1.04;
  letter-spacing: var(--ry-track-display);
}

.ry-og__sub {
  max-width: 30ch;
  color: var(--ry-muted);
  font-size: 24px;
  line-height: 1.4;
}

.ry-og__url {
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: 18px;
}

/* ---- buttons ---- */
/* Buttons: 10px corners, flat fills, one primary per view. Labels are verbs. */

.ry-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ry-space-2);
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--ry-line-control);
  border-radius: var(--ry-radius-btn);
  background: var(--ry-surface);
  color: var(--ry-ink);
  font: inherit;
  font-size: var(--ry-fs-body);
  font-weight: var(--ry-weight-medium);
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--ry-dur-fast) var(--ry-ease),
    border-color var(--ry-dur-fast) var(--ry-ease),
    color var(--ry-dur-fast) var(--ry-ease),
    transform var(--ry-dur-fast) var(--ry-ease);
}

.ry-btn:hover,
.ry-btn.is-hover {
  border-color: var(--ry-ink);
  color: var(--ry-ink);
}

.ry-btn:active,
.ry-btn.is-active {
  transform: translateY(1px);
}

.ry-btn:focus-visible,
.ry-btn.is-focus {
  outline: 2px solid var(--ry-focus);
  outline-offset: 2px;
}

.ry-btn svg {
  flex: none;
}

.ry-btn--primary {
  border-color: var(--ry-btn);
  background: var(--ry-btn);
  color: var(--ry-btn-ink);
}

.ry-btn--primary:hover,
.ry-btn--primary.is-hover {
  border-color: var(--ry-btn-hover);
  background: var(--ry-btn-hover);
  color: var(--ry-btn-ink);
}

.ry-btn--secondary {
  background: var(--ry-surface);
}

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

.ry-btn--ghost:hover,
.ry-btn--ghost.is-hover {
  border-color: transparent;
  background: var(--ry-sunk);
  color: var(--ry-ink);
}

.ry-btn--danger {
  border-color: var(--ry-danger);
  background: var(--ry-surface);
  color: var(--ry-danger);
}

.ry-btn--danger:hover,
.ry-btn--danger.is-hover {
  border-color: var(--ry-danger);
  background: var(--ry-danger-soft);
  color: var(--ry-danger);
}

.ry-btn--sm {
  min-height: 36px;
  padding: 6px 12px;
  font-size: var(--ry-fs-meta);
}

.ry-btn--lg {
  min-height: 52px;
  padding: 12px 24px;
  font-size: 1.0625rem;
}

.ry-btn--block {
  display: flex;
  width: 100%;
}

.ry-btn--icon {
  width: 44px;
  padding: 0;
}

.ry-btn--icon.ry-btn--sm {
  width: 36px;
}

.ry-btn:disabled,
.ry-btn[aria-disabled="true"] {
  border-color: var(--ry-hair-strong);
  background: var(--ry-sunk);
  color: var(--ry-muted);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.ry-btn--ghost:disabled,
.ry-btn--ghost[aria-disabled="true"] {
  border-color: transparent;
  background: transparent;
}

/* Loading: a spinner joins the label, which changes to the present tense ("Saving") */
.ry-btn.is-loading {
  pointer-events: none;
}

.ry-btn.is-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: ry-btn-spin 700ms linear infinite;
}

@keyframes ry-btn-spin {
  to {
    transform: rotate(1turn);
  }
}

@media (pointer: coarse) {
  .ry-btn--sm {
    min-height: 44px;
  }

  .ry-btn--icon.ry-btn--sm {
    width: 44px;
  }
}

/* Action group: one primary and at most one secondary, wrapping on small screens */
.ry-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ry-space-3);
}

.ry-actions--center {
  justify-content: center;
}

.ry-actions--end {
  justify-content: flex-end;
}

@media (max-width: 479px) {
  .ry-actions--stack-sm {
    flex-direction: column;
    align-items: stretch;
  }

  .ry-actions--stack-sm .ry-btn {
    width: 100%;
  }
}

/* Segmented control: buttons with aria-pressed, one pressed at a time */
.ry-seg {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-btn);
  background: var(--ry-sunk);
}

.ry-seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ry-muted);
  font-size: var(--ry-fs-meta);
  font-weight: var(--ry-weight-medium);
  cursor: pointer;
  transition: background-color var(--ry-dur-fast) var(--ry-ease), color var(--ry-dur-fast) var(--ry-ease);
}

.ry-seg__btn:hover {
  color: var(--ry-ink);
}

.ry-seg__btn[aria-pressed="true"],
.ry-seg__btn[aria-selected="true"] {
  border-color: var(--ry-hair);
  background: var(--ry-surface);
  color: var(--ry-ink);
}

.ry-seg__btn:focus-visible {
  outline: 2px solid var(--ry-focus);
  outline-offset: 1px;
}

@media (pointer: coarse) {
  .ry-seg__btn {
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-btn,
  .ry-seg__btn {
    transition: none;
  }

  .ry-btn:active {
    transform: none;
  }

  .ry-btn.is-loading::before {
    animation-duration: 2s;
  }
}

/* ---- badges ---- */
/* Badges and fact chips: 6px tags. Pills are reserved for suggestion chips. */

.ry-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-tag);
  background: var(--ry-sunk);
  color: var(--ry-ink);
  font-size: var(--ry-fs-caption);
  font-weight: var(--ry-weight-medium);
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

.ry-badge svg {
  flex: none;
}

.ry-badge__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.ry-badge--accent {
  border-color: transparent;
  background: var(--ry-accent-soft);
  color: var(--ry-accent-strong);
}

.ry-badge--ok {
  border-color: transparent;
  background: var(--ry-ok-soft);
  color: var(--ry-ok);
}

.ry-badge--warn {
  border-color: transparent;
  background: var(--ry-warn-soft);
  color: var(--ry-warn);
}

.ry-badge--danger {
  border-color: transparent;
  background: var(--ry-danger-soft);
  color: var(--ry-danger);
}

/* New content: lime fill behind dark ink, the one sanctioned badge use of the lime */
.ry-badge--new {
  border-color: transparent;
  background: var(--ry-lime);
  color: var(--ry-lime-ink);
}

.ry-badge--outline {
  background: transparent;
  border-color: var(--ry-hair-strong);
  color: var(--ry-body);
}

.ry-badge--mono {
  font-family: var(--ry-font-mono);
  font-weight: var(--ry-weight-regular);
  letter-spacing: 0;
}

/* Fact chips: checkable facts under hero actions or inside cards */
.ry-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ry-space-2) var(--ry-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ry-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ry-space-2);
  color: var(--ry-muted);
  font-size: var(--ry-fs-meta);
  line-height: 1.4;
}

.ry-chip svg {
  flex: none;
  color: var(--ry-accent);
}

/* ---- avatar ---- */
/* Avatars: geometric marks and initials on rounded squares. No faces, no robots. */

.ry-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--ry-radius-mark);
  background: var(--ry-sunk);
  color: var(--ry-ink);
  font-size: var(--ry-fs-caption);
  font-weight: var(--ry-weight-semibold);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.ry-avatar svg {
  width: 16px;
  height: 16px;
}

.ry-avatar--sm {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.ry-avatar--sm svg {
  width: 13px;
  height: 13px;
}

.ry-avatar--lg {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: var(--ry-fs-meta);
}

.ry-avatar--lg svg {
  width: 22px;
  height: 22px;
}

.ry-avatar--xl {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: var(--ry-fs-body);
}

.ry-avatar--xl svg {
  width: 30px;
  height: 30px;
}

/* Tints for people and collections (text stays ink) */
.ry-avatar--teal {
  background: var(--ry-accent-soft);
  color: var(--ry-accent-strong);
}

.ry-avatar--sand {
  background: var(--ry-warn-soft);
  color: var(--ry-ink);
}

.ry-avatar--moss {
  background: var(--ry-ok-soft);
  color: var(--ry-ink);
}

.ry-avatar--line {
  border: 1px solid var(--ry-hair-strong);
  background: var(--ry-surface);
}

/* The assistant: ink tile with the wick mark */
.ry-avatar--wick {
  background: var(--ry-ink);
  color: var(--ry-canvas);
}

.ry-avatar__status {
  position: absolute;
  inset-inline-end: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--ry-canvas);
  border-radius: 50%;
  background: var(--ry-ok);
}

.ry-avatar__status--away {
  background: var(--ry-line-control);
}

.ry-avatars {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ry-avatars > * + * {
  margin-inline-start: -6px;
}

.ry-avatars .ry-avatar {
  box-shadow: 0 0 0 2px var(--ry-canvas);
}

/* ---- nav ---- */
/* Nav: one sticky bar on the canvas. Brand, 3 to 5 links, theme toggle, one primary. */

.ry-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-block-end: 1px solid var(--ry-hair);
  background: var(--ry-canvas);
}

.ry-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--ry-space-6);
  width: 100%;
  max-width: calc(var(--ry-content) + 2 * var(--ry-gutter));
  min-height: var(--ry-nav-h);
  margin-inline: auto;
  padding-inline: var(--ry-gutter);
}

.ry-nav--app .ry-nav__inner {
  max-width: none;
}

.ry-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--ry-ink);
  font-size: 1.125rem;
  font-weight: var(--ry-weight-semibold);
  letter-spacing: -0.015em;
  text-decoration: none;
}

.ry-nav__brand:hover {
  color: var(--ry-ink);
}

.ry-nav__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ry-radius-mark);
  background: var(--ry-ink);
  color: var(--ry-canvas);
}

.ry-nav__menu {
  flex: 1;
  min-width: 0;
}

.ry-nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ry-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--ry-radius-btn);
  color: var(--ry-muted);
  font-size: 0.9375rem;
  font-weight: var(--ry-weight-medium);
  text-decoration: none;
  transition: background-color var(--ry-dur-fast) var(--ry-ease), color var(--ry-dur-fast) var(--ry-ease);
}

.ry-nav__link:hover {
  background: var(--ry-sunk);
  color: var(--ry-ink);
}

.ry-nav__link[aria-current="page"] {
  background: var(--ry-sunk);
  color: var(--ry-ink);
}

.ry-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--ry-space-2);
  margin-inline-start: auto;
}

.ry-nav__toggle {
  display: none;
}

.ry-nav__menu-actions {
  display: none;
}

/* Theme toggle: shows the moon in light, the sun in dark */
.ry-theme-toggle__sun {
  display: none;
}

.ry-theme-toggle__moon,
.ry-theme-toggle__sun {
  align-items: center;
  justify-content: center;
}

.ry-theme-toggle__moon {
  display: inline-flex;
}

:root[data-theme="dark"] .ry-theme-toggle__sun {
  display: inline-flex;
}

:root[data-theme="dark"] .ry-theme-toggle__moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ry-theme-toggle__sun {
    display: inline-flex;
  }

  :root:not([data-theme="light"]) .ry-theme-toggle__moon {
    display: none;
  }
}

@media (max-width: 899px) {
  .ry-nav__toggle {
    display: inline-flex;
  }

  .ry-nav__cta-wide {
    display: none;
  }

  .ry-nav__menu {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: none;
    padding: var(--ry-space-3) var(--ry-gutter) var(--ry-space-6);
    border-block-end: 1px solid var(--ry-hair);
    background: var(--ry-canvas);
    box-shadow: var(--ry-shadow-pop);
  }

  .ry-nav.is-open .ry-nav__menu {
    display: block;
  }

  .ry-nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .ry-nav__link {
    min-height: 48px;
    padding-inline: var(--ry-space-3);
    font-size: var(--ry-fs-body);
  }

  .ry-nav__menu-actions {
    display: flex;
    gap: var(--ry-space-3);
    margin-block-start: var(--ry-space-4);
    padding-block-start: var(--ry-space-4);
    border-block-start: 1px solid var(--ry-hair);
  }

  .ry-nav__menu-actions .ry-btn {
    flex: 1;
  }

  /* Without the script the links stay reachable as a wrapped row */
  .ry-nav:not(.is-ready) .ry-nav__menu {
    position: static;
    display: block;
    flex-basis: 100%;
    order: 3;
    padding: 0 0 var(--ry-space-3);
    border: 0;
    box-shadow: none;
  }

  .ry-nav:not(.is-ready) .ry-nav__inner {
    flex-wrap: wrap;
  }

  .ry-nav:not(.is-ready) .ry-nav__links {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .ry-nav:not(.is-ready) .ry-nav__toggle {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-nav__link {
    transition: none;
  }
}

/* ---- announcement-bar ---- */
/* Announcement bar: one line above the nav, a new mark, one link, a dismiss button. */

.ry-announce {
  border-block-end: 1px solid var(--ry-hair);
  background: var(--ry-sunk);
  color: var(--ry-body);
  font-size: var(--ry-fs-meta);
}

.ry-announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ry-space-3);
  max-width: calc(var(--ry-content) + 2 * var(--ry-gutter));
  min-height: 44px;
  margin-inline: auto;
  padding: 6px var(--ry-gutter);
}

.ry-announce__text {
  min-width: 0;
  line-height: 1.45;
}

.ry-announce__text a {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-medium);
}

.ry-announce__close {
  flex: none;
  margin-inline-start: auto;
}

.ry-announce--center .ry-announce__close {
  margin-inline-start: var(--ry-space-2);
}

@media (max-width: 640px) {
  .ry-announce__inner {
    justify-content: flex-start;
  }

  .ry-announce .ry-badge {
    display: none;
  }
}

/* ---- breadcrumbs ---- */
/* Breadcrumbs: a quiet trail with slash separators. */

.ry-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ry-fs-meta);
}

.ry-crumbs li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.ry-crumbs li + li::before {
  content: "/";
  margin-inline: 10px;
  color: var(--ry-hair-strong);
}

.ry-crumbs a {
  color: var(--ry-muted);
  text-decoration: none;
}

.ry-crumbs a:hover {
  color: var(--ry-ink);
  text-decoration: underline;
}

.ry-crumbs [aria-current="page"] {
  overflow: hidden;
  color: var(--ry-ink);
  font-weight: var(--ry-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- sidebar-nav ---- */
/* Sidebar nav: grouped vertical links for settings and docs. */

.ry-sidenav {
  display: grid;
  max-width: 20rem;
  gap: var(--ry-space-6);
  font-size: 0.9375rem;
}

.ry-sidenav__title {
  margin-block-end: var(--ry-space-2);
  padding-inline: var(--ry-space-3);
  color: var(--ry-muted);
  font-size: var(--ry-fs-caption);
  font-family: var(--ry-font-mono);
}

.ry-sidenav__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ry-sidenav__link {
  display: flex;
  align-items: center;
  gap: var(--ry-space-3);
  min-height: 40px;
  padding: 8px var(--ry-space-3);
  border-radius: var(--ry-radius-btn);
  color: var(--ry-body);
  text-decoration: none;
  transition: background-color var(--ry-dur-fast) var(--ry-ease), color var(--ry-dur-fast) var(--ry-ease);
}

.ry-sidenav__link svg {
  flex: none;
  color: var(--ry-muted);
}

.ry-sidenav__link:hover {
  background: var(--ry-sunk);
  color: var(--ry-ink);
}

.ry-sidenav__link[aria-current="page"],
.ry-sidenav__link[aria-current="true"] {
  background: var(--ry-sunk);
  color: var(--ry-ink);
  font-weight: var(--ry-weight-medium);
}

.ry-sidenav__link[aria-current] svg {
  color: var(--ry-ink);
}

.ry-sidenav__count {
  margin-inline-start: auto;
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

@media (pointer: coarse) {
  .ry-sidenav__link {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-sidenav__link {
    transition: none;
  }
}

/* ---- footer ---- */
/* Footer: brand and about, link columns, and a mono status bar. */

.ry-footer {
  margin-block-start: auto;
  border-block-start: 1px solid var(--ry-hair);
  background: var(--ry-canvas);
  font-size: var(--ry-fs-meta);
}

.ry-footer__inner {
  width: 100%;
  max-width: calc(var(--ry-content) + 2 * var(--ry-gutter));
  margin-inline: auto;
  padding: var(--ry-space-10) var(--ry-gutter) var(--ry-space-6);
}

.ry-footer__grid {
  display: grid;
  gap: var(--ry-space-8);
}

@media (min-width: 900px) {
  .ry-footer__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--ry-space-11);
  }
}

.ry-footer__about {
  max-width: 22rem;
  margin-block-start: var(--ry-space-4);
  color: var(--ry-muted);
  font-size: var(--ry-fs-note);
}

.ry-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ry-space-7) var(--ry-space-6);
}

@media (min-width: 640px) {
  .ry-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ry-footer__title {
  margin-block-end: var(--ry-space-3);
  color: var(--ry-ink);
  font-weight: var(--ry-weight-semibold);
}

.ry-footer__links {
  display: grid;
  gap: var(--ry-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ry-footer__links a {
  display: inline-block;
  padding-block: 2px;
  color: var(--ry-muted);
  text-decoration: none;
}

.ry-footer__links a:hover {
  color: var(--ry-ink);
  text-decoration: underline;
}

.ry-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ry-space-3) var(--ry-space-6);
  margin-block-start: var(--ry-space-10);
  padding-block-start: var(--ry-space-5);
  border-block-start: 1px solid var(--ry-hair);
  color: var(--ry-muted);
}

.ry-footer__status {
  display: inline-flex;
  align-items: center;
  gap: var(--ry-space-2);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-footer__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ry-ok);
}

.ry-footer--slim .ry-footer__inner {
  padding-block: var(--ry-space-5);
}

.ry-footer--slim .ry-footer__bar {
  margin: 0;
  padding: 0;
  border: 0;
}

@media (pointer: coarse) {
  .ry-footer__links a {
    padding-block: 10px;
  }

  .ry-footer__links {
    gap: 0;
  }
}

.ry-footer__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--ry-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ry-footer__inline a {
  display: inline-block;
  padding-block: 4px;
  color: var(--ry-muted);
  text-decoration: none;
}

.ry-footer__inline a:hover {
  color: var(--ry-ink);
  text-decoration: underline;
}

/* ---- hero ---- */
/* Hero: outcome h1, lede, one action pair, fact chips, and a framed window holding a coded
   conversation. The window is the product, so it is never a gradient or a stock picture. */

.ry-hero {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(4rem, 3rem + 4vw, 7rem);
}

.ry-hero__grid {
  display: grid;
  gap: var(--ry-space-9);
  align-items: center;
}

@media (min-width: 1024px) {
  .ry-hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--ry-space-11);
  }
}

.ry-hero__copy {
  display: grid;
  gap: var(--ry-space-6);
  justify-items: start;
}

.ry-hero__title {
  max-width: 15ch;
  font-size: clamp(2.5rem, 1.7rem + 2.8vw, 3.75rem);
  line-height: var(--ry-lh-display);
  letter-spacing: var(--ry-track-display);
}

.ry-hero__lede {
  max-width: 34rem;
  color: var(--ry-muted);
  font-size: var(--ry-fs-lede);
  line-height: var(--ry-lh-body);
}

.ry-hero__actions {
  margin-block-start: var(--ry-space-2);
}

.ry-hero__facts {
  margin-block-start: var(--ry-space-2);
  flex-direction: column;
  gap: var(--ry-space-2);
}

.ry-hero__visual {
  min-width: 0;
}

/* Centered hero: no visual, display size */
.ry-hero--center .ry-hero__copy {
  justify-items: center;
  text-align: center;
}

.ry-hero--center .ry-hero__title {
  max-width: 18ch;
  font-size: var(--ry-fs-display);
}

.ry-hero--center .ry-hero__lede {
  max-width: 38rem;
}

.ry-hero--center .ry-hero__facts {
  flex-direction: row;
  justify-content: center;
}

/* Page hero: inner pages, start-aligned, smaller, sits under breadcrumbs */
.ry-hero--page {
  padding-block: var(--ry-space-9) var(--ry-space-10);
}

.ry-hero--page .ry-hero__copy {
  gap: var(--ry-space-5);
}

.ry-hero--page .ry-hero__title {
  max-width: 22ch;
  font-size: var(--ry-fs-display);
}

.ry-hero--page .ry-hero__facts {
  flex-direction: row;
}

/* The window: a framed product surface for coded mocks */
.ry-window {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-card);
  background: var(--ry-surface);
  box-shadow: var(--ry-shadow-float);
}

.ry-window__bar {
  display: flex;
  align-items: center;
  gap: var(--ry-space-3);
  min-height: 48px;
  padding: 8px var(--ry-space-4);
  border-block-end: 1px solid var(--ry-hair);
}

.ry-window__icon {
  display: inline-flex;
  color: var(--ry-muted);
}

.ry-window__title {
  min-width: 0;
  overflow: hidden;
  color: var(--ry-ink);
  font-size: var(--ry-fs-meta);
  font-weight: var(--ry-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ry-window__meta {
  margin-inline-start: auto;
  flex: none;
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-window__body {
  padding: var(--ry-space-6) var(--ry-space-6) var(--ry-space-4);
}

.ry-window__dock {
  padding: 0 var(--ry-space-4) var(--ry-space-4);
}

@media (max-width: 640px) {
  .ry-window__body {
    padding: var(--ry-space-5) var(--ry-space-4) var(--ry-space-3);
  }

  .ry-window__dock {
    padding: 0 var(--ry-space-3) var(--ry-space-3);
  }
}

/* ---- section-header ---- */
/* Section header: one idea per section, an h2 and at most one intro paragraph. */

.ry-head {
  display: grid;
  gap: var(--ry-space-4);
  max-width: 46rem;
  margin-block-end: var(--ry-space-10);
}

.ry-head__intro {
  max-width: 40rem;
  color: var(--ry-muted);
  font-size: var(--ry-fs-lede);
  line-height: var(--ry-lh-body);
}

.ry-head__actions {
  margin-block-start: var(--ry-space-3);
}

.ry-head--center {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.ry-head--center .ry-head__actions {
  justify-content: center;
}

.ry-head--tight {
  margin-block-end: var(--ry-space-7);
}

@media (min-width: 960px) {
  .ry-head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ry-space-10);
    align-items: end;
    max-width: none;
  }
}

/* ---- turn-section ---- */
/* Turn section: the page as a conversation. A compact ask turn sits right-weighted; the answer
   below carries the gutter mark (a head dot on a thin line) beside its heading and content. */

.ry-convo {
  display: grid;
  gap: var(--ry-space-7);
}

.ry-ask {
  justify-self: end;
  width: fit-content;
  max-width: min(32rem, 88%);
  padding: 12px 18px;
  border-radius: var(--ry-radius-card);
  background: var(--ry-turn-user, var(--ry-sunk));
  color: var(--ry-ink);
  font-size: var(--ry-fs-reading);
  line-height: 1.5;
}

.ry-answer {
  position: relative;
  min-width: 0;
  padding-inline-start: var(--ry-wick-gap);
}

/* head mark, centered on the first line of the h2 */
.ry-answer::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: calc(var(--ry-fs-title) * var(--ry-lh-title) / 2 - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ry-wick-head);
}

/* the line */
.ry-answer::after {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: calc(var(--ry-fs-title) * var(--ry-lh-title) / 2 + 13px);
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--ry-wick);
}

.ry-answer > :where(h2, h3) {
  max-width: 24ch;
}

.ry-answer__intro {
  max-width: 40rem;
  margin-block-start: var(--ry-space-4);
  color: var(--ry-muted);
  font-size: var(--ry-fs-lede);
  line-height: var(--ry-lh-body);
}

.ry-answer__body {
  margin-block-start: var(--ry-space-9);
}

.ry-answer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ry-space-3) var(--ry-space-6);
  margin-block-start: var(--ry-space-8);
}

/* Headline-sized answers (an h2.ry-headline or h3 in a side column) */
.ry-answer--sm::before {
  top: calc(var(--ry-fs-headline) * var(--ry-lh-snug) / 2 - 4px);
  width: 8px;
  height: 8px;
}

.ry-answer--sm::after {
  inset-inline-start: 3px;
  top: calc(var(--ry-fs-headline) * var(--ry-lh-snug) / 2 + 10px);
}

/* Page answers: the answer is the page (404, a status page); a mono badge sits on the head line */
.ry-answer--page::before {
  top: 7px;
}

.ry-answer--page::after {
  top: 26px;
}

.ry-answer--page > .ry-badge {
  margin-block-end: var(--ry-space-5);
}

.ry-answer--page > h1 {
  max-width: 18ch;
}

/* Live: the newest answer on a page (a release, a status), head in lime */
.ry-answer--live::before {
  background: var(--ry-lime);
  box-shadow: var(--ry-lime-glow);
}

/* Centered ask and answer for a closing question */
.ry-convo--center .ry-ask {
  justify-self: center;
}

@media (max-width: 640px) {
  .ry-ask {
    max-width: 92%;
  }

  .ry-answer:not(.ry-answer--page, .ry-answer--sm)::before {
    width: 8px;
    height: 8px;
    top: calc(var(--ry-fs-title) * var(--ry-lh-title) / 2 - 4px);
  }

  .ry-answer:not(.ry-answer--page, .ry-answer--sm)::after {
    inset-inline-start: 3px;
    top: calc(var(--ry-fs-title) * var(--ry-lh-title) / 2 + 10px);
  }

  .ry-answer__body {
    margin-block-start: var(--ry-space-7);
  }
}

/* ---- features ---- */
/* Features: columns split by a top hairline, no boxes. Plus check and no-check lists. */

.ry-features {
  display: grid;
  gap: var(--ry-space-8) var(--ry-space-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .ry-features,
  .ry-features--2,
  .ry-features--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ry-features,
  .ry-features--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ry-features--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ry-features--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ry-feature {
  display: grid;
  gap: var(--ry-space-3);
  align-content: start;
  padding-block-start: var(--ry-space-5);
  border-block-start: 1px solid var(--ry-hair-strong);
}

.ry-feature__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-block-end: var(--ry-space-2);
  border-radius: var(--ry-radius-btn);
  background: var(--ry-sunk);
  color: var(--ry-ink);
}

.ry-feature__num {
  margin-block-end: var(--ry-space-1);
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-feature__title {
  font-size: var(--ry-fs-card);
}

.ry-feature__text {
  color: var(--ry-body);
  line-height: var(--ry-lh-body);
}

.ry-feature .ry-link {
  margin-block-start: var(--ry-space-1);
}

/* Check lists */
.ry-checks {
  display: grid;
  gap: var(--ry-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ry-checks > li {
  position: relative;
  padding-inline-start: 28px;
  line-height: 1.5;
}

.ry-checks > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 3px;
  top: 0.3em;
  width: 11px;
  height: 6px;
  border-inline-start: 2px solid var(--ry-accent);
  border-block-end: 2px solid var(--ry-accent);
  transform: rotate(-45deg);
  transform-origin: center;
  translate: 0 2px;
}

.ry-checks--no > li {
  color: var(--ry-muted);
}

.ry-checks--no > li::before {
  inset-inline-start: 4px;
  top: 0.72em;
  width: 11px;
  height: 0;
  border: 0;
  border-block-start: 2px solid var(--ry-line-control);
  transform: none;
  translate: none;
}

/* ---- cards ---- */
/* Cards: flat, one hairline, 14px corners. An optional well holds a coded mini UI. */

.ry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-card);
  background: var(--ry-surface);
}

.ry-card__well {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 200px;
  padding: var(--ry-space-6);
  overflow: hidden;
  border-block-end: 1px solid var(--ry-hair);
  background: var(--ry-sunk);
}

@media (max-width: 719px) {
  .ry-card__well {
    min-height: 0;
  }
}

.ry-card__body {
  display: grid;
  gap: var(--ry-space-2);
  align-content: start;
  flex: 1;
  padding: var(--ry-space-6);
}

.ry-card__title {
  font-size: var(--ry-fs-card);
  line-height: var(--ry-lh-snug);
}

.ry-card__title a {
  color: inherit;
  text-decoration: none;
}

.ry-card__text {
  color: var(--ry-body);
}

.ry-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ry-space-2) var(--ry-space-3);
  color: var(--ry-muted);
  font-size: var(--ry-fs-meta);
}

.ry-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ry-space-3);
  margin-block-start: auto;
  padding: 0 var(--ry-space-6) var(--ry-space-6);
}

/* Link card: the title link covers the card */
.ry-card--link {
  transition: border-color var(--ry-dur-fast) var(--ry-ease);
}

.ry-card--link .ry-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ry-card--link:hover {
  border-color: var(--ry-hair-strong);
}

.ry-card--link:hover .ry-card__title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ry-card--link:focus-within {
  outline: 2px solid var(--ry-focus);
  outline-offset: 2px;
}

.ry-card--link .ry-card__title a:focus-visible {
  outline: none;
}

.ry-card--sunk {
  border-color: transparent;
  background: var(--ry-sunk);
}

.ry-card--pad {
  padding: var(--ry-space-2);
}

/* Split: well and body side by side on wide screens (a featured note, a feature spotlight) */
@media (min-width: 900px) {
  .ry-card--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .ry-card--split .ry-card__well {
    border-block-end: 0;
    border-inline-end: 1px solid var(--ry-hair);
  }

  .ry-card--split .ry-card__body {
    align-content: center;
    gap: var(--ry-space-3);
    padding: var(--ry-space-9);
  }

  .ry-card--split .ry-card__title {
    font-size: var(--ry-fs-headline);
    letter-spacing: var(--ry-track-headline);
  }
}

/* Small helper lines inside wells */
.ry-card__well .ry-thread--mini {
  gap: var(--ry-space-4);
}

@media (prefers-reduced-motion: reduce) {
  .ry-card--link {
    transition: none;
  }
}

/* ---- bento ---- */
/* Bento: six columns. Wide cells take three, narrow cells take two. Every well shows a
   different piece of the product. */

.ry-bento {
  display: grid;
  gap: var(--ry-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .ry-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ry-bento__cell--full {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .ry-bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ry-bento__cell {
    grid-column: span 2;
  }

  .ry-bento__cell--wide {
    grid-column: span 3;
  }

  .ry-bento__cell--full {
    grid-column: 1 / -1;
  }
}

@media (min-width: 720px) and (max-width: 1023px) {
  .ry-bento__cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.ry-bento .ry-card__well {
  min-height: 220px;
}

@media (max-width: 719px) {
  .ry-bento .ry-card__well {
    min-height: 0;
    padding-block: var(--ry-space-7);
  }
}

/* ---- stats ---- */
/* Stats: product facts as large tabular figures. Facts, never customer counts. */

.ry-stats {
  display: grid;
  gap: var(--ry-space-7) var(--ry-space-6);
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1024px) {
  .ry-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ry-stats--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ry-stat {
  display: flex;
  flex-direction: column;
  gap: var(--ry-space-2);
  padding-block-start: var(--ry-space-4);
  border-block-start: 1px solid var(--ry-hair-strong);
}

.ry-stat__value {
  order: -1;
  margin: 0;
  color: var(--ry-ink);
  font-size: var(--ry-fs-title);
  font-weight: var(--ry-weight-semibold);
  line-height: 1;
  letter-spacing: var(--ry-track-title);
  font-variant-numeric: tabular-nums;
}

.ry-stat__unit {
  margin-inline-start: 4px;
  color: var(--ry-muted);
  font-size: 0.5em;
  font-weight: var(--ry-weight-medium);
  letter-spacing: 0;
}

.ry-stat__label {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-medium);
}

.ry-stat__note {
  color: var(--ry-muted);
  font-size: var(--ry-fs-meta);
  line-height: 1.5;
}

/* ---- logo-row ---- */
/* Logo row: invented geometric monograms with names, one muted color. */

.ry-logos {
  display: grid;
  gap: var(--ry-space-5);
}

.ry-logos__title {
  color: var(--ry-muted);
  font-size: var(--ry-fs-meta);
}

.ry-logos__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ry-space-5) var(--ry-space-9);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ry-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ry-muted);
  font-size: 1.0625rem;
  font-weight: var(--ry-weight-semibold);
  letter-spacing: -0.01em;
}

.ry-logo svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.ry-logos--center {
  justify-items: center;
  text-align: center;
}

.ry-logos--center .ry-logos__list {
  justify-content: center;
}

/* ---- testimonial ---- */
/* Testimonial: a quote on the gutter line, attributed to the product's own team. */

.ry-quote {
  position: relative;
  display: grid;
  gap: var(--ry-space-6);
  max-width: 48rem;
  padding-inline-start: var(--ry-wick-gap);
}

.ry-quote::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--ry-wick);
}

.ry-quote__text {
  margin: 0;
  color: var(--ry-ink);
  font-size: var(--ry-fs-headline);
  font-weight: var(--ry-weight-regular);
  line-height: 1.4;
  letter-spacing: var(--ry-track-headline);
}

.ry-quote__text p {
  text-wrap: pretty;
}

.ry-quote__text p + p {
  margin-block-start: var(--ry-space-4);
}

.ry-quote__by {
  display: flex;
  align-items: center;
  gap: var(--ry-space-3);
  font-size: var(--ry-fs-meta);
}

.ry-quote__name {
  display: block;
  color: var(--ry-ink);
  font-weight: var(--ry-weight-semibold);
}

.ry-quote__role {
  display: block;
  color: var(--ry-muted);
}

.ry-quote--sm .ry-quote__text {
  font-size: var(--ry-fs-reading);
  line-height: var(--ry-lh-reading);
}

/* ---- pricing ---- */
/* Pricing: real prices, the period in words, one featured plan, allowance meters. */

.ry-billing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ry-space-3);
  margin-block-end: var(--ry-space-7);
}

.ry-billing__save {
  color: var(--ry-muted);
  font-size: var(--ry-fs-meta);
}

.ry-pricing {
  display: grid;
  gap: var(--ry-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .ry-pricing {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ry-pricing--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ry-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ry-space-5);
  height: 100%;
  padding: var(--ry-space-7) var(--ry-space-6);
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-card);
  background: var(--ry-surface);
}

.ry-plan--featured {
  border-color: var(--ry-ink);
  box-shadow: inset 0 0 0 1px var(--ry-ink);
}

.ry-plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ry-space-2);
}

.ry-plan__name {
  font-size: var(--ry-fs-card);
}

.ry-plan__desc {
  margin-block-start: calc(var(--ry-space-3) * -1);
  color: var(--ry-muted);
  font-size: var(--ry-fs-note);
}

.ry-plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px var(--ry-space-2);
}

.ry-plan__amount {
  color: var(--ry-ink);
  font-size: clamp(2.25rem, 1.9rem + 1.2vw, 2.75rem);
  font-weight: var(--ry-weight-semibold);
  line-height: 1;
  letter-spacing: var(--ry-track-title);
  font-variant-numeric: tabular-nums;
}

.ry-plan__term {
  color: var(--ry-muted);
  font-size: var(--ry-fs-meta);
}

.ry-plan__allow {
  padding: var(--ry-space-4);
  border-radius: var(--ry-radius-btn);
  background: var(--ry-sunk);
}

.ry-plan__list {
  font-size: var(--ry-fs-meta);
}

.ry-plan__cta {
  margin-block-start: auto;
}

.ry-pricing__note {
  margin-block-start: var(--ry-space-6);
  color: var(--ry-muted);
  font-size: var(--ry-fs-note);
  text-align: center;
}

.ry-pricing__compare {
  margin-block-start: var(--ry-space-10);
}

/* ---- faq ---- */
/* FAQ: native details on hairlines. An open answer gets the gutter mark. */

.ry-faq {
  border-block-start: 1px solid var(--ry-hair);
}

.ry-faq__item {
  border-block-end: 1px solid var(--ry-hair);
}

.ry-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ry-space-5);
  min-height: 64px;
  padding: var(--ry-space-4) 0;
  color: var(--ry-ink);
  font-size: 1.0625rem;
  font-weight: var(--ry-weight-medium);
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.ry-faq__q::-webkit-details-marker {
  display: none;
}

.ry-faq__q:hover {
  color: var(--ry-accent-strong);
}

.ry-faq__q:focus-visible {
  outline-offset: 4px;
  border-radius: var(--ry-radius-tag);
}

.ry-faq__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--ry-hair-strong);
  border-radius: var(--ry-radius-btn);
  color: var(--ry-ink);
  transition: transform var(--ry-dur) var(--ry-ease), background-color var(--ry-dur-fast) var(--ry-ease);
}

.ry-faq__item[open] .ry-faq__icon {
  transform: rotate(45deg);
  background: var(--ry-sunk);
}

.ry-faq__a {
  margin: 0 0 var(--ry-space-6);
  padding-inline-start: var(--ry-space-5);
  border-inline-start: 2px solid var(--ry-wick);
  color: var(--ry-body);
  max-width: 42rem;
}

.ry-faq__a > * + * {
  margin-block-start: var(--ry-space-3);
}

.ry-faq__contact {
  margin-block-start: var(--ry-space-6);
  color: var(--ry-muted);
  font-size: var(--ry-fs-note);
}

@media (prefers-reduced-motion: reduce) {
  .ry-faq__icon {
    transition: none;
  }
}

/* ---- cta ---- */
/* CTA close: shaped like the composer. A question field and the primary action. */

.ry-cta {
  display: grid;
  justify-items: center;
  gap: var(--ry-space-5);
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.ry-cta__intro {
  max-width: 36rem;
  color: var(--ry-muted);
  font-size: var(--ry-fs-lede);
}

.ry-cta__form {
  display: grid;
  gap: var(--ry-space-3);
  width: 100%;
  margin-block-start: var(--ry-space-4);
  padding: 12px 12px 12px 18px;
  border: 1px solid var(--ry-hair-strong);
  border-radius: var(--ry-radius-composer);
  background: var(--ry-surface);
  box-shadow: var(--ry-shadow-float);
  text-align: start;
  transition: border-color var(--ry-dur-fast) var(--ry-ease), box-shadow var(--ry-dur-fast) var(--ry-ease);
}

.ry-cta__form:focus-within {
  border-color: var(--ry-accent);
  box-shadow: var(--ry-shadow-float), 0 0 0 3px var(--ry-accent-soft);
}

.ry-cta__input {
  width: 100%;
  min-height: 44px;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: var(--ry-ink);
  font-size: var(--ry-fs-reading);
}

.ry-cta__input:focus,
.ry-cta__input:focus-visible {
  outline: none;
}

.ry-cta__input::placeholder {
  color: var(--ry-muted);
  opacity: 1;
}

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

.ry-cta__note {
  color: var(--ry-muted);
  font-size: var(--ry-fs-meta);
}

.ry-cta__alt {
  color: var(--ry-muted);
  font-size: var(--ry-fs-note);
}

@media (max-width: 479px) {
  .ry-cta__bar .ry-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-cta__form {
    transition: none;
  }
}

/* ---- prose ---- */
/* Prose: long-form reading at 17px on a 44rem column. Quotes take the gutter line. */

.ry-prose {
  max-width: var(--ry-reading);
  color: var(--ry-body);
  font-size: var(--ry-fs-reading);
  line-height: 1.75;
}

.ry-prose > * + * {
  margin-block-start: 1.15em;
}

.ry-prose > .ry-prose__lead {
  color: var(--ry-ink);
  font-size: var(--ry-fs-lede);
  line-height: 1.6;
}

.ry-prose :where(h2) {
  margin-block-start: 2.3em;
  font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: var(--ry-track-headline);
  scroll-margin-top: calc(var(--ry-nav-h) + var(--ry-space-6));
}

.ry-prose :where(h3) {
  margin-block-start: 1.9em;
  font-size: var(--ry-fs-card);
  scroll-margin-top: calc(var(--ry-nav-h) + var(--ry-space-6));
}

.ry-prose :where(h2, h3) + * {
  margin-block-start: 0.6em;
}

.ry-prose :where(ul, ol) {
  padding-inline-start: 1.35em;
}

.ry-prose :where(li + li) {
  margin-block-start: 0.45em;
}

.ry-prose :where(li)::marker {
  color: var(--ry-muted);
}

.ry-prose :where(ol > li)::marker {
  font-family: var(--ry-font-mono);
  font-size: 0.85em;
}

.ry-prose :where(a:not([class])) {
  color: var(--ry-accent-strong);
}

.ry-prose :where(blockquote) {
  padding-inline-start: var(--ry-space-5);
  border-inline-start: 2px solid var(--ry-wick);
  color: var(--ry-ink);
  font-size: var(--ry-fs-lede);
  line-height: 1.6;
}

.ry-prose :where(figure) {
  margin-block: 2em;
}

.ry-prose :where(figcaption) {
  margin-block-start: var(--ry-space-3);
  color: var(--ry-muted);
  font-size: var(--ry-fs-meta);
  line-height: 1.5;
}

.ry-prose :where(pre) {
  padding: var(--ry-space-4) var(--ry-space-5);
  overflow-x: auto;
  border-radius: var(--ry-radius-btn);
  background: var(--ry-code-bg);
  color: var(--ry-code-ink);
  font-size: 0.875rem;
  line-height: 1.65;
}

.ry-prose :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ry-fs-meta);
  line-height: 1.5;
}

.ry-prose :where(th, td) {
  padding: 10px 12px;
  border-block-end: 1px solid var(--ry-hair);
  text-align: start;
  vertical-align: top;
}

.ry-prose :where(th) {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-semibold);
}

.ry-prose :where(hr) {
  margin-block: 2.5em;
}

.ry-prose :where(.ry-callout, .ry-code, .ry-chart, .ry-table-wrap) {
  margin-block: 1.8em;
}

/* Sources at the end of an article */
.ry-prose__sources {
  margin-block-start: 3em;
  padding-block-start: var(--ry-space-6);
  border-block-start: 1px solid var(--ry-hair);
}

.ry-prose__sources h2 {
  margin-block-start: 0;
  font-size: var(--ry-fs-card);
}

@media (max-width: 640px) {
  .ry-prose {
    font-size: var(--ry-fs-body);
    line-height: 1.7;
  }
}

/* Doc layout: a sticky table of contents beside one reading column */
.ry-doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ry-space-8);
}

@media (min-width: 1024px) {
  .ry-doc {
    grid-template-columns: 13rem minmax(0, var(--ry-reading));
    justify-content: start;
    gap: var(--ry-space-11);
  }
}

.ry-doc__aside {
  min-width: 0;
}

@media (max-width: 1023px) {
  .ry-doc__aside {
    padding-block-end: var(--ry-space-6);
    border-block-end: 1px solid var(--ry-hair);
  }
}

/* ---- callout ---- */
/* Callout: a boxed aside. Note (teal), warn, danger, ok and new (lime fill, dark ink). */

.ry-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ry-space-3);
  padding: var(--ry-space-4) var(--ry-space-5);
  border: 1px solid transparent;
  border-radius: var(--ry-radius-card);
  background: var(--ry-accent-soft);
  color: var(--ry-ink);
  font-size: var(--ry-fs-body);
  line-height: var(--ry-lh-body);
}

.ry-callout__icon {
  display: inline-flex;
  padding-block-start: 2px;
  color: var(--ry-accent-strong);
}

.ry-callout__body {
  display: grid;
  gap: var(--ry-space-1);
  min-width: 0;
}

.ry-callout__title {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-semibold);
}

.ry-callout__body p {
  color: var(--ry-ink);
}

.ry-callout--warn {
  background: var(--ry-warn-soft);
}

.ry-callout--warn .ry-callout__icon {
  color: var(--ry-warn);
}

.ry-callout--danger {
  background: var(--ry-danger-soft);
}

.ry-callout--danger .ry-callout__icon {
  color: var(--ry-danger);
}

.ry-callout--ok {
  background: var(--ry-ok-soft);
}

.ry-callout--ok .ry-callout__icon {
  color: var(--ry-ok);
}

.ry-callout--new {
  background: var(--ry-lime-soft);
}

.ry-callout--new .ry-callout__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--ry-radius-tag);
  background: var(--ry-lime);
  color: var(--ry-lime-ink);
}

.ry-callout--plain {
  border-color: var(--ry-hair);
  background: var(--ry-surface);
}

.ry-callout--plain .ry-callout__icon {
  color: var(--ry-muted);
}

/* ---- toc ---- */
/* Table of contents on a gutter line. The current section gets the head mark. */

.ry-toc {
  font-size: var(--ry-fs-meta);
}

.ry-toc__title {
  margin-block-end: var(--ry-space-3);
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-inline-start: 2px solid var(--ry-wick);
}

.ry-toc__list .ry-toc__list {
  margin-inline-start: var(--ry-space-4);
  border: 0;
}

.ry-toc__link {
  position: relative;
  display: block;
  padding: 6px 0 6px var(--ry-space-4);
  color: var(--ry-muted);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--ry-dur-fast) var(--ry-ease);
}

.ry-toc__link:hover {
  color: var(--ry-ink);
}

.ry-toc__link.is-current,
.ry-toc__link[aria-current="true"] {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-medium);
}

.ry-toc__link.is-current::before,
.ry-toc__link[aria-current="true"]::before {
  content: "";
  position: absolute;
  inset-inline-start: -6px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-block-start: -5px;
  border-radius: 50%;
  background: var(--ry-wick-head);
}

.ry-toc__list .ry-toc__list .ry-toc__link.is-current::before,
.ry-toc__list .ry-toc__list .ry-toc__link[aria-current="true"]::before {
  inset-inline-start: calc(-6px - var(--ry-space-4));
}

.ry-toc--sticky {
  position: sticky;
  top: calc(var(--ry-nav-h) + var(--ry-space-7));
}

@media (pointer: coarse) {
  .ry-toc__link {
    padding-block: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-toc__link {
    transition: none;
  }
}

/* ---- byline ---- */
/* Byline: author mark, name, date and reading time. */

.ry-byline {
  display: flex;
  align-items: center;
  gap: var(--ry-space-3);
  font-size: var(--ry-fs-meta);
  line-height: 1.4;
}

.ry-byline__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ry-byline__name {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-medium);
}

.ry-byline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ry-space-2);
  color: var(--ry-muted);
}

.ry-byline__meta > * + *::before {
  content: "\00B7";
  margin-inline-end: var(--ry-space-2);
}

.ry-byline--lg {
  gap: var(--ry-space-4);
  font-size: var(--ry-fs-body);
}

.ry-byline--lg .ry-byline__meta {
  font-size: var(--ry-fs-meta);
}

/* ---- timeline ---- */
/* Timeline: dated entries on the gutter line. Changelogs, roadmaps, company history. */

.ry-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ry-timeline__item {
  position: relative;
  display: grid;
  gap: var(--ry-space-2);
  padding-inline-start: var(--ry-wick-gap);
  padding-block-end: var(--ry-space-9);
}

.ry-timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ry-wick-head);
}

.ry-timeline__item::after {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 22px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--ry-wick);
}

.ry-timeline__item:last-child {
  padding-block-end: 0;
}

.ry-timeline__item:last-child::after {
  display: none;
}

.ry-timeline__date {
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
  line-height: 18px;
}

.ry-timeline__title {
  font-size: var(--ry-fs-card);
}

.ry-timeline__body {
  display: grid;
  gap: var(--ry-space-3);
  max-width: var(--ry-reading);
  color: var(--ry-body);
}

.ry-timeline__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ry-space-2);
}

.ry-timeline__item--new::before {
  background: var(--ry-lime);
  box-shadow: var(--ry-lime-glow);
}

.ry-timeline__item--planned::before {
  border: 2px solid var(--ry-line-control);
  background: var(--ry-canvas);
}

.ry-timeline__item--planned .ry-timeline__title {
  color: var(--ry-body);
}

@media (min-width: 900px) {
  .ry-timeline--dated .ry-timeline__item {
    padding-inline-start: calc(9rem + var(--ry-space-8) + var(--ry-wick-gap));
  }

  .ry-timeline--dated .ry-timeline__date {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 9rem;
    text-align: end;
  }

  .ry-timeline--dated .ry-timeline__item::before {
    inset-inline-start: calc(9rem + var(--ry-space-8));
  }

  .ry-timeline--dated .ry-timeline__item::after {
    inset-inline-start: calc(9rem + var(--ry-space-8) + 4px);
  }
}

/* ---- forms ---- */
/* Forms: 10px fields with a control border that clears 3:1, a teal focus ring, and words for
   every error. Placeholders are examples, never labels. */

.ry-form {
  display: grid;
  gap: var(--ry-space-5);
  min-width: 0;
}

.ry-form--card {
  padding: var(--ry-space-7);
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-card);
  background: var(--ry-surface);
}

.ry-form__row {
  display: grid;
  gap: var(--ry-space-5);
}

@media (min-width: 720px) {
  .ry-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ry-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ry-label {
  color: var(--ry-ink);
  font-size: 0.9375rem;
  font-weight: var(--ry-weight-medium);
  line-height: 1.35;
}

.ry-label__opt {
  margin-inline-start: 4px;
  color: var(--ry-muted);
  font-weight: var(--ry-weight-regular);
}

.ry-input,
.ry-select,
.ry-textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--ry-line-control);
  border-radius: var(--ry-radius-input);
  background: var(--ry-surface);
  color: var(--ry-ink);
  font: inherit;
  font-size: var(--ry-fs-body);
  line-height: 1.4;
  transition: border-color var(--ry-dur-fast) var(--ry-ease), box-shadow var(--ry-dur-fast) var(--ry-ease);
}

.ry-input::placeholder,
.ry-textarea::placeholder {
  color: var(--ry-muted);
  opacity: 1;
}

.ry-input:hover,
.ry-select:hover,
.ry-textarea:hover {
  border-color: var(--ry-body);
}

.ry-input:focus-visible,
.ry-select:focus-visible,
.ry-textarea:focus-visible,
.ry-input.is-focus,
.ry-textarea.is-focus {
  outline: none;
  border-color: var(--ry-focus);
  box-shadow: 0 0 0 1px var(--ry-focus), 0 0 0 4px var(--ry-accent-soft);
}

.ry-textarea {
  min-height: 128px;
  resize: vertical;
}

.ry-input[aria-invalid="true"],
.ry-select[aria-invalid="true"],
.ry-textarea[aria-invalid="true"] {
  border-color: var(--ry-danger);
}

.ry-input[aria-invalid="true"]:focus-visible,
.ry-textarea[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 1px var(--ry-danger), 0 0 0 4px var(--ry-danger-soft);
}

.ry-input.is-valid {
  border-color: var(--ry-ok);
}

.ry-input:disabled,
.ry-select:disabled,
.ry-textarea:disabled {
  border-color: var(--ry-hair-strong);
  background: var(--ry-sunk);
  color: var(--ry-muted);
  cursor: not-allowed;
}

.ry-input[readonly],
.ry-textarea[readonly] {
  border-color: var(--ry-hair);
  background: var(--ry-sunk);
}

.ry-select-wrap {
  position: relative;
}

.ry-select {
  appearance: none;
  padding-inline-end: 40px;
  cursor: pointer;
}

.ry-select-wrap > svg {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  color: var(--ry-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.ry-hint {
  color: var(--ry-muted);
  font-size: var(--ry-fs-note);
  line-height: 1.45;
}

.ry-error,
.ry-valid {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--ry-danger);
  font-size: var(--ry-fs-note);
  line-height: 1.45;
}

.ry-valid {
  color: var(--ry-ok);
}

.ry-error svg,
.ry-valid svg {
  flex: none;
  margin-block-start: 2px;
}

/* Checkboxes and radios */
.ry-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ry-body);
  line-height: 1.45;
  cursor: pointer;
}

.ry-check__input {
  appearance: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  margin: 1px 0 0;
  border: 1px solid var(--ry-line-control);
  border-radius: 5px;
  background: var(--ry-surface);
  cursor: pointer;
  transition: background-color var(--ry-dur-fast) var(--ry-ease), border-color var(--ry-dur-fast) var(--ry-ease);
}

.ry-check__input[type="radio"] {
  border-radius: 50%;
}

.ry-check__input::after {
  content: "";
  width: 10px;
  height: 5px;
  border-inline-start: 2px solid var(--ry-accent-ink);
  border-block-end: 2px solid var(--ry-accent-ink);
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg);
}

.ry-check__input[type="radio"]::after {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: var(--ry-accent-ink);
  transform: none;
}

.ry-check__input:checked {
  border-color: var(--ry-accent);
  background: var(--ry-accent);
}

.ry-check__input:checked::after {
  opacity: 1;
}

.ry-check__input:focus-visible {
  outline: 2px solid var(--ry-focus);
  outline-offset: 2px;
}

.ry-check__input:disabled {
  border-color: var(--ry-hair-strong);
  background: var(--ry-sunk);
  cursor: not-allowed;
}

.ry-check:has(:disabled) {
  color: var(--ry-muted);
  cursor: not-allowed;
}

.ry-fieldset {
  display: grid;
  gap: var(--ry-space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ry-legend {
  margin-block-end: var(--ry-space-1);
  padding: 0;
  color: var(--ry-ink);
  font-size: 0.9375rem;
  font-weight: var(--ry-weight-medium);
}

.ry-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ry-space-3) var(--ry-space-5);
  padding-block-start: var(--ry-space-2);
}

.ry-form__status {
  display: flex;
  align-items: flex-start;
  gap: var(--ry-space-3);
  padding: var(--ry-space-4);
  border-radius: var(--ry-radius-btn);
  background: var(--ry-ok-soft);
  color: var(--ry-ink);
}

.ry-form__status svg {
  flex: none;
  color: var(--ry-ok);
}

@media (pointer: coarse) {
  .ry-check {
    min-height: 44px;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .ry-form--card {
    padding: var(--ry-space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-input,
  .ry-select,
  .ry-textarea,
  .ry-check__input {
    transition: none;
  }
}

/* ---- switch ---- */
/* Switch: a real checkbox with role="switch" over a pill track. Teal when on. */

.ry-switch {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--ry-space-3);
  color: var(--ry-body);
  cursor: pointer;
}

.ry-switch__input {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 44px;
  height: 26px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ry-switch__track {
  position: relative;
  width: 44px;
  height: 26px;
  flex: none;
  border-radius: var(--ry-radius-pill);
  background: var(--ry-line-control);
  transition: background-color var(--ry-dur) var(--ry-ease);
}

.ry-switch__track::after {
  content: "";
  position: absolute;
  inset-inline-start: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ry-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform var(--ry-dur) var(--ry-ease);
}

.ry-switch__input:checked + .ry-switch__track {
  background: var(--ry-accent);
}

.ry-switch__input:checked + .ry-switch__track::after {
  transform: translateX(18px);
}

[dir="rtl"] .ry-switch__input:checked + .ry-switch__track::after {
  transform: translateX(-18px);
}

.ry-switch__input:focus-visible + .ry-switch__track {
  outline: 2px solid var(--ry-focus);
  outline-offset: 2px;
}

.ry-switch__input:disabled + .ry-switch__track {
  background: var(--ry-hair-strong);
}

.ry-switch:has(:disabled) {
  color: var(--ry-muted);
  cursor: not-allowed;
}

.ry-switch__text {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-block-start: 2px;
}

.ry-switch__label {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-medium);
  line-height: 1.35;
}

.ry-switch:has(:disabled) .ry-switch__label {
  color: var(--ry-muted);
}

.ry-switch__hint {
  color: var(--ry-muted);
  font-size: var(--ry-fs-meta);
  line-height: 1.45;
}

/* Settings row: text first, switch at the end, hairline below */
.ry-switch--row {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: var(--ry-space-6);
  width: 100%;
  padding-block: var(--ry-space-4);
  border-block-end: 1px solid var(--ry-hair);
}

.ry-switch--row .ry-switch__input {
  inset-inline-start: auto;
  inset-inline-end: 0;
  top: var(--ry-space-4);
}

@media (prefers-reduced-motion: reduce) {
  .ry-switch__track,
  .ry-switch__track::after {
    transition: none;
  }
}

/* ---- choice-cards ---- */
/* Choice cards: radio inputs dressed as cards. Selected cards take the accent border and tint. */

.ry-choices {
  display: grid;
  gap: var(--ry-space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ry-choices__legend {
  margin-block-end: var(--ry-space-2);
  padding: 0;
  color: var(--ry-ink);
  font-size: 0.9375rem;
  font-weight: var(--ry-weight-medium);
}

.ry-choices__grid {
  display: grid;
  gap: var(--ry-space-3);
}

@media (min-width: 720px) {
  .ry-choices__grid {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }

  .ry-choices--stack .ry-choices__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ry-choice {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px var(--ry-space-3);
  align-content: start;
  padding: var(--ry-space-4) var(--ry-space-5);
  border: 1px solid var(--ry-hair-strong);
  border-radius: var(--ry-radius-card);
  background: var(--ry-surface);
  cursor: pointer;
  transition: border-color var(--ry-dur-fast) var(--ry-ease), background-color var(--ry-dur-fast) var(--ry-ease);
}

.ry-choice:hover {
  border-color: var(--ry-line-control);
}

.ry-choice__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ry-choice__title {
  display: flex;
  align-items: center;
  gap: var(--ry-space-2);
  color: var(--ry-ink);
  font-weight: var(--ry-weight-semibold);
  line-height: 1.35;
}

.ry-choice__mark {
  grid-column: 2;
  grid-row: 1;
  width: 20px;
  height: 20px;
  border: 1px solid var(--ry-line-control);
  border-radius: 50%;
  background: var(--ry-surface);
  transition: border-width var(--ry-dur-fast) var(--ry-ease);
}

.ry-choice__desc {
  grid-column: 1 / -1;
  color: var(--ry-body);
  font-size: var(--ry-fs-meta);
  line-height: 1.5;
}

.ry-choice__meta {
  grid-column: 1 / -1;
  margin-block-start: var(--ry-space-1);
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-choice:has(:checked) {
  border-color: var(--ry-accent);
  background: var(--ry-accent-soft);
  box-shadow: inset 0 0 0 1px var(--ry-accent);
}

.ry-choice:has(:checked) .ry-choice__mark {
  border: 6px solid var(--ry-accent);
}

.ry-choice:has(:focus-visible) {
  outline: 2px solid var(--ry-focus);
  outline-offset: 2px;
}

.ry-choice:has(:disabled) {
  border-color: var(--ry-hair);
  background: var(--ry-sunk);
  cursor: not-allowed;
}

.ry-choice:has(:disabled) .ry-choice__input {
  cursor: not-allowed;
}

.ry-choice:has(:disabled) .ry-choice__title {
  color: var(--ry-muted);
}

@media (prefers-reduced-motion: reduce) {
  .ry-choice,
  .ry-choice__mark {
    transition: none;
  }
}

/* ---- search-field ---- */
/* Search field: icon, input, clear button and a shortcut hint in one 10px box. */

.ry-search {
  position: relative;
  width: 100%;
  max-width: 34rem;
}

.ry-search__box {
  display: flex;
  align-items: center;
  gap: var(--ry-space-2);
  min-height: 44px;
  padding-inline: 12px 6px;
  border: 1px solid var(--ry-line-control);
  border-radius: var(--ry-radius-input);
  background: var(--ry-surface);
  transition: border-color var(--ry-dur-fast) var(--ry-ease), box-shadow var(--ry-dur-fast) var(--ry-ease);
}

.ry-search__box:hover {
  border-color: var(--ry-body);
}

.ry-search__box:focus-within {
  border-color: var(--ry-focus);
  box-shadow: 0 0 0 1px var(--ry-focus), 0 0 0 4px var(--ry-accent-soft);
}

.ry-search__icon {
  display: inline-flex;
  flex: none;
  color: var(--ry-muted);
}

.ry-search__input {
  flex: 1;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ry-ink);
  font-size: var(--ry-fs-body);
}

.ry-search__input:focus,
.ry-search__input:focus-visible {
  outline: none;
}

.ry-search__input::placeholder {
  color: var(--ry-muted);
  opacity: 1;
}

.ry-search__input::-webkit-search-cancel-button {
  appearance: none;
}

.ry-search__clear {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--ry-radius-tag);
  background: transparent;
  color: var(--ry-muted);
  cursor: pointer;
}

.ry-search__clear:hover {
  background: var(--ry-sunk);
  color: var(--ry-ink);
}

.ry-search__kbd {
  flex: none;
  margin-inline-end: 4px;
}

.ry-search--lg .ry-search__box {
  min-height: 56px;
  padding-inline: 16px 8px;
  border-radius: var(--ry-radius-composer);
}

.ry-search--lg .ry-search__input {
  height: 54px;
  font-size: var(--ry-fs-reading);
}

.ry-search__list {
  display: grid;
  gap: 2px;
  margin: var(--ry-space-2) 0 0;
  padding: var(--ry-space-2);
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-card);
  background: var(--ry-surface);
  list-style: none;
}

.ry-search__item {
  display: flex;
  align-items: center;
  gap: var(--ry-space-3);
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--ry-radius-btn);
  color: var(--ry-ink);
  text-decoration: none;
}

.ry-search__item svg {
  flex: none;
  color: var(--ry-muted);
}

.ry-search__item:hover,
.ry-search__item[aria-selected="true"] {
  background: var(--ry-sunk);
  color: var(--ry-ink);
}

.ry-search__meta {
  margin-inline-start: auto;
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-search__empty {
  padding: 10px;
  color: var(--ry-muted);
  font-size: var(--ry-fs-meta);
}

@media (pointer: coarse) {
  .ry-search__clear {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 640px) {
  .ry-search__kbd {
    display: none;
  }
}

/* ---- file-drop ---- */
/* File drop: a dashed zone over a real file input, then one row per file. */

.ry-drop {
  display: grid;
  gap: var(--ry-space-3);
  min-width: 0;
}

.ry-drop__zone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--ry-space-2);
  padding: var(--ry-space-8) var(--ry-space-5);
  border: 1.5px dashed var(--ry-line-control);
  border-radius: var(--ry-radius-card);
  background: var(--ry-surface);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ry-dur-fast) var(--ry-ease), background-color var(--ry-dur-fast) var(--ry-ease);
}

.ry-drop__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.ry-drop__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-block-end: var(--ry-space-2);
  border-radius: var(--ry-radius-btn);
  background: var(--ry-sunk);
  color: var(--ry-ink);
}

.ry-drop__title {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-medium);
}

.ry-drop__hint {
  color: var(--ry-muted);
  font-size: var(--ry-fs-meta);
}

.ry-drop__zone:hover,
.ry-drop__zone.is-over {
  border-color: var(--ry-accent);
  background: var(--ry-accent-soft);
}

.ry-drop__zone:focus-within {
  outline: 2px solid var(--ry-focus);
  outline-offset: 2px;
}

.ry-drop__zone.is-error {
  border-color: var(--ry-danger);
  background: var(--ry-danger-soft);
}

.ry-drop__zone.is-disabled {
  border-color: var(--ry-hair-strong);
  background: var(--ry-sunk);
  cursor: not-allowed;
}

.ry-drop__zone.is-disabled .ry-drop__input {
  cursor: not-allowed;
}

.ry-drop__zone.is-disabled .ry-drop__title {
  color: var(--ry-muted);
}

.ry-drop__files {
  display: grid;
  gap: var(--ry-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ry-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px var(--ry-space-3);
  padding: 10px 8px 10px 12px;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-btn);
  background: var(--ry-surface);
}

.ry-file__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ry-radius-tag);
  background: var(--ry-accent-soft);
  color: var(--ry-accent-strong);
}

.ry-file__main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ry-file__name {
  overflow: hidden;
  color: var(--ry-ink);
  font-size: var(--ry-fs-meta);
  font-weight: var(--ry-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ry-file__meta {
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-file__bar {
  height: 4px;
  overflow: hidden;
  border-radius: var(--ry-radius-pill);
  background: var(--ry-sunk);
}

.ry-file__bar span {
  display: block;
  width: var(--ry-value, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--ry-accent);
}

.ry-file__status {
  display: inline-flex;
  color: var(--ry-ok);
}

.ry-file.is-error {
  border-color: var(--ry-danger);
}

.ry-file.is-error .ry-file__icon {
  background: var(--ry-danger-soft);
  color: var(--ry-danger);
}

.ry-file.is-error .ry-file__meta {
  color: var(--ry-danger);
}

@media (prefers-reduced-motion: reduce) {
  .ry-drop__zone {
    transition: none;
  }
}

/* ---- newsletter ---- */
/* Newsletter: one email field and a verb. A clear success message replaces nothing else. */

.ry-newsletter {
  display: grid;
  gap: var(--ry-space-3);
  max-width: 34rem;
}

.ry-newsletter__title {
  color: var(--ry-ink);
  font-size: var(--ry-fs-card);
  font-weight: var(--ry-weight-semibold);
  line-height: var(--ry-lh-snug);
}

.ry-newsletter__text {
  color: var(--ry-muted);
  font-size: var(--ry-fs-note);
}

.ry-newsletter__row {
  display: flex;
  gap: var(--ry-space-2);
  margin-block-start: var(--ry-space-1);
}

.ry-newsletter__row .ry-input {
  flex: 1;
  min-width: 0;
}

.ry-newsletter__note {
  color: var(--ry-muted);
  font-size: var(--ry-fs-caption);
}

.ry-newsletter__done {
  display: none;
  align-items: center;
  gap: var(--ry-space-2);
  padding: 10px 12px;
  border-radius: var(--ry-radius-btn);
  background: var(--ry-ok-soft);
  color: var(--ry-ink);
  font-size: var(--ry-fs-meta);
}

.ry-newsletter__done svg {
  flex: none;
  color: var(--ry-ok);
}

.ry-newsletter.is-done .ry-newsletter__done {
  display: flex;
}

.ry-newsletter.is-done .ry-newsletter__row {
  display: none;
}

.ry-newsletter--card {
  padding: var(--ry-space-6);
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-card);
  background: var(--ry-surface);
}

@media (max-width: 479px) {
  .ry-newsletter__row {
    flex-direction: column;
  }
}

/* ---- tables ---- */
/* Tables: hairline rows, mono numerals right-aligned, and a labelled stack under 640px. */

.ry-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-card);
  background: var(--ry-surface);
}

.ry-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ry-body);
  font-size: var(--ry-fs-meta);
  line-height: 1.45;
}

.ry-table caption {
  padding: var(--ry-space-4) var(--ry-space-5) 0;
  color: var(--ry-muted);
  font-size: var(--ry-fs-meta);
  text-align: start;
}

.ry-table th,
.ry-table td {
  padding: 12px var(--ry-space-5);
  border-block-end: 1px solid var(--ry-hair);
  text-align: start;
  vertical-align: top;
}

.ry-table thead th {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-semibold);
  white-space: nowrap;
}

.ry-table tbody th {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-medium);
}

.ry-table tbody tr:last-child > * {
  border-block-end: 0;
}

.ry-table tbody tr:hover > * {
  background: var(--ry-canvas);
}

.ry-table .ry-num {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

.ry-table thead .ry-num {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-fs-meta);
}

.ry-table__group th {
  padding-block: 10px;
  background: var(--ry-sunk);
  color: var(--ry-ink);
  font-weight: var(--ry-weight-semibold);
}

.ry-yes,
.ry-no {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ry-yes {
  color: var(--ry-ok);
}

.ry-no {
  color: var(--ry-muted);
}

.ry-table--compact th,
.ry-table--compact td {
  padding: 8px var(--ry-space-4);
}

.ry-table--plans thead th:not(:first-child),
.ry-table--plans td {
  text-align: center;
}

.ry-table--plans .ry-yes,
.ry-table--plans .ry-no {
  justify-content: center;
}

@media (max-width: 640px) {
  .ry-table--stack {
    font-size: var(--ry-fs-body);
  }

  .ry-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .ry-table--stack,
  .ry-table--stack tbody,
  .ry-table--stack tr,
  .ry-table--stack th,
  .ry-table--stack td {
    display: block;
    width: 100%;
  }

  .ry-table--stack tr {
    padding: var(--ry-space-3) 0;
    border-block-end: 1px solid var(--ry-hair);
  }

  .ry-table--stack tbody tr:last-child {
    border-block-end: 0;
  }

  .ry-table--stack th,
  .ry-table--stack td {
    padding: 4px var(--ry-space-4);
    border: 0;
  }

  .ry-table--stack td[data-label] {
    display: flex;
    justify-content: space-between;
    gap: var(--ry-space-4);
    text-align: end;
  }

  .ry-table--stack td[data-label]::before {
    content: attr(data-label);
    color: var(--ry-muted);
    font-family: var(--ry-font-sans);
    font-size: var(--ry-fs-meta);
    text-align: start;
  }

  .ry-table--stack .ry-table__group th {
    margin-block: calc(var(--ry-space-3) * -1);
    padding: 10px var(--ry-space-4);
  }

  .ry-table--plans td,
  .ry-table--plans .ry-yes,
  .ry-table--plans .ry-no {
    justify-content: space-between;
  }
}

/* ---- description-list ---- */
/* Description list: term and value pairs on hairlines, for settings and metadata. */

.ry-dl {
  display: grid;
  margin: 0;
  font-size: var(--ry-fs-meta);
}

.ry-dl__row {
  display: grid;
  gap: 2px var(--ry-space-6);
  padding-block: 12px;
  border-block-end: 1px solid var(--ry-hair);
}

.ry-dl__row:first-child {
  border-block-start: 1px solid var(--ry-hair);
}

@media (min-width: 640px) {
  .ry-dl__row {
    grid-template-columns: minmax(9rem, 2fr) minmax(0, 5fr);
    align-items: baseline;
  }
}

.ry-dl dt {
  color: var(--ry-muted);
}

.ry-dl dd {
  margin: 0;
  min-width: 0;
  color: var(--ry-ink);
  overflow-wrap: anywhere;
}

.ry-dl__mono {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

/* Two columns of pairs */
@media (min-width: 900px) {
  .ry-dl--cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ry-space-8);
  }

  .ry-dl--cols .ry-dl__row:nth-child(2) {
    border-block-start: 1px solid var(--ry-hair);
  }
}

/* Inline: label above value, no lines, for tool call metadata */
.ry-dl--inline {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--ry-space-4);
}

.ry-dl--inline .ry-dl__row {
  grid-template-columns: none;
  padding: 0;
  border: 0;
}

/* ---- pagination ---- */
/* Pagination: previous, numbered pages, a gap, next. 40px squares with 10px corners. */

.ry-pages ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ry-pages__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--ry-radius-btn);
  color: var(--ry-body);
  font-size: var(--ry-fs-meta);
  font-weight: var(--ry-weight-medium);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

a.ry-pages__link:hover {
  background: var(--ry-sunk);
  color: var(--ry-ink);
}

.ry-pages__link[aria-current="page"] {
  border-color: var(--ry-ink);
  color: var(--ry-ink);
}

.ry-pages__link[aria-disabled="true"] {
  color: var(--ry-muted);
  cursor: not-allowed;
}

.ry-pages__gap {
  min-width: 24px;
  color: var(--ry-muted);
  text-align: center;
}

.ry-pages__step {
  border-color: var(--ry-hair-strong);
}

.ry-pages__prev {
  margin-inline-end: auto;
}

.ry-pages__next {
  margin-inline-start: auto;
}

.ry-pages--spread ul {
  justify-content: center;
}

[dir="rtl"] .ry-pages__link svg {
  transform: scaleX(-1);
}

@media (pointer: coarse) {
  .ry-pages__link {
    min-width: 44px;
    height: 44px;
  }
}

@media (max-width: 479px) {
  .ry-pages__num:not([aria-current]) {
    display: none;
  }
}

/* ---- chart ---- */
/* Chart: inline SVG that reads only viz tokens. Every chart has visible labels or values and a
   data-table fallback. No library. */

.ry-chart {
  display: grid;
  gap: var(--ry-space-4);
  min-width: 0;
  padding: var(--ry-space-5);
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-card);
  background: var(--ry-surface);
}

.ry-chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ry-space-2) var(--ry-space-4);
}

.ry-chart__title {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-semibold);
}

.ry-chart__sub {
  color: var(--ry-muted);
  font-size: var(--ry-fs-meta);
}

.ry-chart__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Bar and line plots keep their 12px labels at 12px: on narrow screens the plot scrolls sideways
   instead of shrinking (the data table is the other way in) */
.ry-chart__plot {
  min-width: 0;
  overflow-x: auto;
  border-radius: var(--ry-radius-tag);
}

.ry-chart__plot:focus-visible {
  outline: 2px solid var(--ry-focus);
  outline-offset: 2px;
}

.ry-chart__plot .ry-chart__svg {
  min-width: 520px;
}

.ry-chart__grid {
  stroke: var(--ry-hair);
  stroke-width: 1;
}

.ry-chart__axis {
  stroke: var(--ry-hair-strong);
  stroke-width: 1;
}

.ry-chart__label {
  fill: var(--ry-muted);
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: 12px;
}

.ry-chart__value {
  fill: var(--ry-ink);
  color: var(--ry-ink);
  font-family: var(--ry-font-mono);
  font-size: 12px;
  font-weight: var(--ry-weight-medium);
}

.ry-chart__fill--1 { fill: var(--ry-viz-1); }
.ry-chart__fill--2 { fill: var(--ry-viz-2); }
.ry-chart__fill--3 { fill: var(--ry-viz-3); }
.ry-chart__fill--4 { fill: var(--ry-viz-4); }
.ry-chart__fill--5 { fill: var(--ry-viz-5); }
.ry-chart__fill--6 { fill: var(--ry-viz-6); }

.ry-chart__line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ry-chart__line--1 { stroke: var(--ry-viz-1); }
.ry-chart__line--2 { stroke: var(--ry-viz-2); stroke-dasharray: 6 5; }
.ry-chart__line--3 { stroke: var(--ry-viz-3); }

.ry-chart__dot--1 { fill: var(--ry-surface); stroke: var(--ry-viz-1); stroke-width: 2; }
.ry-chart__dot--2 { fill: var(--ry-surface); stroke: var(--ry-viz-2); stroke-width: 2; }

.ry-chart__arc {
  fill: none;
  stroke-width: 18;
}

.ry-chart__arc--1 { stroke: var(--ry-viz-1); }
.ry-chart__arc--2 { stroke: var(--ry-viz-2); }
.ry-chart__arc--3 { stroke: var(--ry-viz-3); }
.ry-chart__arc--4 { stroke: var(--ry-viz-4); }
.ry-chart__arc--5 { stroke: var(--ry-viz-5); }
.ry-chart__arc--6 { stroke: var(--ry-viz-6); }

.ry-chart__track {
  fill: none;
  stroke: var(--ry-sunk);
  stroke-width: 18;
}

.ry-chart__center {
  fill: var(--ry-ink);
  color: var(--ry-ink);
  font-family: var(--ry-font-sans);
  font-size: 22px;
  font-weight: var(--ry-weight-semibold);
}

.ry-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ry-space-2) var(--ry-space-5);
  margin: 0;
  padding: 0;
  color: var(--ry-body);
  font-size: var(--ry-fs-meta);
  list-style: none;
}

.ry-chart__legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--ry-space-2);
}

.ry-chart__key {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 3px;
  background: var(--ry-viz-1);
}

.ry-chart__key--2 { background: var(--ry-viz-2); border-radius: 50%; }
.ry-chart__key--3 { background: var(--ry-viz-3); border-radius: 0; }
.ry-chart__key--4 { background: var(--ry-viz-4); transform: rotate(45deg) scale(0.85); }
.ry-chart__key--5 { background: var(--ry-viz-5); }
.ry-chart__key--6 { background: var(--ry-viz-6); border-radius: 50%; }

.ry-chart__legend-value {
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-chart__data {
  font-size: var(--ry-fs-meta);
}

.ry-chart__data summary {
  width: fit-content;
  color: var(--ry-accent-strong);
  font-weight: var(--ry-weight-medium);
  cursor: pointer;
}

.ry-chart__data .ry-table {
  margin-block-start: var(--ry-space-3);
}

.ry-chart--donut .ry-chart__body {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  align-items: center;
  gap: var(--ry-space-6);
}

.ry-chart--donut .ry-chart__legend {
  flex-direction: column;
}

.ry-chart--donut .ry-chart__legend li {
  justify-content: flex-start;
}

.ry-chart--donut .ry-chart__legend-value {
  margin-inline-start: auto;
  padding-inline-start: var(--ry-space-3);
  white-space: nowrap;
}

@media (max-width: 479px) {
  .ry-chart--donut .ry-chart__body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .ry-chart--donut .ry-chart__svg {
    max-width: 200px;
  }
}

/* Bar and line charts need about 520px so their 12px labels stay 12px; donuts need 360px.
   The grid stays one column until there is room for that. */
.ry-chart-grid {
  display: grid;
  gap: var(--ry-space-5);
}

@media (min-width: 1100px) {
  .ry-chart-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- alert ---- */
/* Alert: a page-level message. Icon, title, one sentence, actions. Color is never the only signal. */

.ry-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--ry-space-3);
  align-items: start;
  padding: var(--ry-space-4);
  border: 1px solid var(--ry-hair);
  border-inline-start: 3px solid var(--ry-accent);
  border-radius: var(--ry-radius-btn);
  background: var(--ry-surface);
  color: var(--ry-body);
  font-size: var(--ry-fs-meta);
  line-height: 1.5;
}

.ry-alert__icon {
  display: inline-flex;
  color: var(--ry-accent-strong);
}

.ry-alert__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ry-alert__title {
  color: var(--ry-ink);
  font-size: var(--ry-fs-body);
  font-weight: var(--ry-weight-semibold);
}

.ry-alert__body p {
  font-size: var(--ry-fs-note);
}

.ry-alert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ry-space-2);
  margin-block-start: var(--ry-space-2);
}

.ry-alert__close {
  margin: -6px -6px 0 0;
}

.ry-alert--ok {
  border-inline-start-color: var(--ry-ok);
}

.ry-alert--ok .ry-alert__icon {
  color: var(--ry-ok);
}

.ry-alert--warn {
  border-inline-start-color: var(--ry-warn);
}

.ry-alert--warn .ry-alert__icon {
  color: var(--ry-warn);
}

.ry-alert--danger {
  border-inline-start-color: var(--ry-danger);
  background: var(--ry-danger-soft);
  border-color: transparent;
  border-inline-start-color: var(--ry-danger);
}

.ry-alert--danger .ry-alert__icon {
  color: var(--ry-danger);
}

.ry-alert--danger .ry-alert__body {
  color: var(--ry-ink);
}

/* ---- toast ---- */
/* Toast: short confirmations in a polite live region, bottom end. One action at most. */

.ry-toasts {
  position: fixed;
  inset-inline-end: var(--ry-space-5);
  bottom: var(--ry-space-5);
  z-index: 90;
  display: grid;
  gap: var(--ry-space-2);
  width: min(24rem, calc(100vw - 2 * var(--ry-space-5)));
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.ry-toasts--static {
  position: static;
  width: 100%;
  max-width: 24rem;
}

.ry-toast {
  display: flex;
  align-items: center;
  gap: var(--ry-space-3);
  min-height: 52px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--ry-radius-card);
  background: var(--ry-ink);
  color: var(--ry-canvas);
  font-size: var(--ry-fs-meta);
  line-height: 1.4;
  box-shadow: var(--ry-shadow-pop);
  pointer-events: auto;
  animation: ry-toast-in var(--ry-dur-slow) var(--ry-ease) both;
}

.ry-toast__icon {
  display: inline-flex;
  flex: none;
}

.ry-toast__text {
  flex: 1;
  min-width: 0;
}

.ry-toast__action {
  flex: none;
  min-height: 36px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--ry-radius-tag);
  background: transparent;
  color: var(--ry-canvas);
  font-weight: var(--ry-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ry-toast__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--ry-radius-tag);
  background: transparent;
  color: var(--ry-canvas);
  cursor: pointer;
}

.ry-toast__action:focus-visible,
.ry-toast__close:focus-visible {
  outline: 2px solid var(--ry-canvas);
  outline-offset: 1px;
}

.ry-toast.is-leaving {
  animation: ry-toast-out var(--ry-dur) var(--ry-ease) both;
}

@keyframes ry-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes ry-toast-out {
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (pointer: coarse) {
  .ry-toast__close {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-toast,
  .ry-toast.is-leaving {
    animation: none;
  }
}

/* ---- dialog ---- */
/* Dialog: native <dialog>, 14px corners, a scrim, head, body and actions. */

.ry-dialog {
  width: min(30rem, calc(100vw - 2 * var(--ry-space-4)));
  max-height: calc(100dvh - 2 * var(--ry-space-6));
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-card);
  background: var(--ry-surface);
  color: var(--ry-body);
  box-shadow: var(--ry-shadow-panel);
}

.ry-dialog::backdrop {
  background: var(--ry-scrim);
}

.ry-dialog[open] {
  animation: ry-dialog-in var(--ry-dur-slow) var(--ry-ease) both;
}

@keyframes ry-dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

.ry-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ry-space-4);
  padding: var(--ry-space-6) var(--ry-space-6) 0;
}

.ry-dialog__title {
  font-size: var(--ry-fs-headline);
  line-height: var(--ry-lh-snug);
  letter-spacing: var(--ry-track-headline);
}

.ry-dialog__close {
  margin: -8px -8px 0 0;
}

.ry-dialog__body {
  display: grid;
  gap: var(--ry-space-4);
  padding: var(--ry-space-4) var(--ry-space-6) var(--ry-space-6);
}

.ry-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ry-space-3);
  padding: var(--ry-space-4) var(--ry-space-6);
  border-block-start: 1px solid var(--ry-hair);
  background: var(--ry-canvas);
}

.ry-dialog__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ry-radius-btn);
  background: var(--ry-danger-soft);
  color: var(--ry-danger);
}

/* Inline preview for documentation pages: the same look without the modal behavior */
.ry-dialog--inline {
  position: static;
  display: block;
  width: 100%;
  max-width: 30rem;
  margin: 0;
  box-shadow: var(--ry-shadow-pop);
}

@media (prefers-reduced-motion: reduce) {
  .ry-dialog[open] {
    animation: none;
  }
}

/* ---- tooltip ---- */
/* Tooltip: a short hint on hover and focus. It names or explains; it never holds the only copy of
   something a person needs. */

.ry-tip {
  position: relative;
  display: inline-flex;
}

.ry-tip__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  inset-inline-start: 50%;
  z-index: 80;
  width: max-content;
  max-width: 16rem;
  padding: 6px 10px;
  border-radius: var(--ry-radius-tag);
  background: var(--ry-ink);
  color: var(--ry-canvas);
  font-size: var(--ry-fs-caption);
  font-weight: var(--ry-weight-medium);
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity var(--ry-dur-fast) var(--ry-ease), transform var(--ry-dur-fast) var(--ry-ease);
  visibility: hidden;
}

[dir="rtl"] .ry-tip__bubble {
  transform: translate(50%, 4px);
}

.ry-tip:hover .ry-tip__bubble,
.ry-tip:focus-within .ry-tip__bubble,
.ry-tip.is-shown .ry-tip__bubble {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

[dir="rtl"] .ry-tip:hover .ry-tip__bubble,
[dir="rtl"] .ry-tip:focus-within .ry-tip__bubble,
[dir="rtl"] .ry-tip.is-shown .ry-tip__bubble {
  transform: translate(50%, 0);
}

.ry-tip.is-dismissed .ry-tip__bubble {
  opacity: 0;
  visibility: hidden;
}

.ry-tip--below .ry-tip__bubble {
  top: calc(100% + 8px);
  bottom: auto;
}

.ry-tip__kbd {
  margin-inline-start: 6px;
  color: var(--ry-canvas);
  font-family: var(--ry-font-mono);
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .ry-tip__bubble {
    transition: none;
  }
}

/* ---- empty-state ---- */
/* Empty state: a small drawing of the gutter mark, a title, one line of help, one action. */

.ry-empty {
  display: grid;
  justify-items: center;
  gap: var(--ry-space-3);
  max-width: 28rem;
  margin-inline: auto;
  padding: var(--ry-space-10) var(--ry-space-5);
  text-align: center;
}

.ry-empty__art {
  position: relative;
  width: 120px;
  height: 72px;
  margin-block-end: var(--ry-space-3);
}

.ry-empty__art span {
  position: absolute;
  border-radius: 3px;
  background: var(--ry-hair-strong);
}

.ry-empty__art span:nth-child(1) {
  inset-inline-start: 20px;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ry-wick-head);
}

.ry-empty__art span:nth-child(2) {
  inset-inline-start: 25px;
  top: 20px;
  width: 2px;
  height: 52px;
  background: var(--ry-wick);
}

.ry-empty__art span:nth-child(3) {
  inset-inline-start: 44px;
  top: 2px;
  width: 64px;
  height: 8px;
}

.ry-empty__art span:nth-child(4) {
  inset-inline-start: 44px;
  top: 22px;
  width: 48px;
  height: 8px;
  opacity: 0.7;
}

.ry-empty__art span:nth-child(5) {
  inset-inline-start: 44px;
  top: 42px;
  width: 56px;
  height: 8px;
  opacity: 0.45;
}

.ry-empty__title {
  font-size: var(--ry-fs-headline);
  letter-spacing: var(--ry-track-headline);
}

.ry-empty__text {
  color: var(--ry-muted);
}

.ry-empty .ry-actions {
  justify-content: center;
  margin-block-start: var(--ry-space-3);
}

.ry-empty--compact {
  padding: var(--ry-space-7) var(--ry-space-4);
}

.ry-empty--compact .ry-empty__art {
  transform: scale(0.75);
  margin-block: -10px 0;
}

.ry-empty--compact .ry-empty__title {
  font-size: var(--ry-fs-card);
}

.ry-empty--boxed {
  max-width: none;
  border: 1px dashed var(--ry-hair-strong);
  border-radius: var(--ry-radius-card);
}

/* ---- skeleton ---- */
/* Skeleton: placeholder shapes while content loads, with a soft shimmer. Static under reduced
   motion. Wrap the area in aria-busy="true" with a hidden "Loading" line. */

.ry-skel {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ry-radius-xs);
  background: var(--ry-sunk);
}

.ry-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--ry-surface), transparent);
  opacity: 0.7;
  transform: translateX(-100%);
  animation: ry-shimmer 1.6s ease-in-out infinite;
}

@keyframes ry-shimmer {
  to {
    transform: translateX(100%);
  }
}

.ry-skel--line {
  width: 100%;
  height: 12px;
}

.ry-skel--line + .ry-skel--line {
  margin-block-start: 10px;
}

.ry-skel--short {
  width: 60%;
}

.ry-skel--title {
  width: 45%;
  height: 20px;
  margin-block-end: var(--ry-space-4);
}

.ry-skel--avatar {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.ry-skel--block {
  width: 100%;
  height: 140px;
  border-radius: var(--ry-radius-card);
}

.ry-skel-group {
  display: grid;
  gap: var(--ry-space-4);
}

.ry-skel-row {
  display: flex;
  align-items: center;
  gap: var(--ry-space-3);
}

@media (prefers-reduced-motion: reduce) {
  .ry-skel::after {
    animation: none;
    opacity: 0;
  }
}

/* ---- progress ---- */
/* Progress: determinate bars with a label and value, an indeterminate bar, a spinner and steps. */

.ry-progress {
  display: grid;
  gap: var(--ry-space-2);
  min-width: 0;
}

.ry-progress__head {
  display: flex;
  justify-content: space-between;
  gap: var(--ry-space-3);
  font-size: var(--ry-fs-meta);
}

.ry-progress__label {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-medium);
}

.ry-progress__value {
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
  font-variant-numeric: tabular-nums;
}

.ry-progress__track {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: var(--ry-radius-pill);
  background: var(--ry-sunk);
  box-shadow: inset 0 0 0 1px var(--ry-hair);
}

.ry-progress__bar {
  display: block;
  width: var(--ry-value, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--ry-accent);
}

.ry-progress--ok .ry-progress__bar {
  background: var(--ry-ok);
}

.ry-progress--warn .ry-progress__bar {
  background: var(--ry-warn);
}

.ry-progress--danger .ry-progress__bar {
  background: var(--ry-danger);
}

.ry-progress.is-indeterminate .ry-progress__bar {
  width: 35%;
  animation: ry-indeterminate 1.4s var(--ry-ease-in-out) infinite;
}

@keyframes ry-indeterminate {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(300%);
  }
}

.ry-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: none;
  border: 2px solid var(--ry-hair-strong);
  border-block-start-color: var(--ry-ink);
  border-radius: 50%;
  animation: ry-spin 800ms linear infinite;
}

@keyframes ry-spin {
  to {
    transform: rotate(1turn);
  }
}

/* Steps */
.ry-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ry-space-2) var(--ry-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ry-fs-meta);
  counter-reset: ry-step;
}

.ry-steps__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ry-space-2);
  color: var(--ry-muted);
  counter-increment: ry-step;
}

.ry-steps__item::before {
  content: counter(ry-step);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--ry-line-control);
  border-radius: 50%;
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-steps__item.is-done {
  color: var(--ry-body);
}

.ry-steps__item.is-done::before {
  border-color: var(--ry-accent);
  background: var(--ry-accent);
  color: var(--ry-accent-ink);
}

.ry-steps__item[aria-current="step"] {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-medium);
}

.ry-steps__item[aria-current="step"]::before {
  border: 2px solid var(--ry-ink);
}

@media (prefers-reduced-motion: reduce) {
  .ry-progress.is-indeterminate .ry-progress__bar {
    width: 100%;
    animation: none;
    opacity: 0.5;
  }

  .ry-spinner {
    animation-duration: 2.4s;
  }
}

/* ---- message-turn ---- */
/* Message turns: the layout unit. User turns are compact and right-weighted. Assistant turns are
   full-width reading columns with the gutter mark: the Wickline tile, then a thin line down the turn. */

.ry-thread {
  display: flex;
  flex-direction: column;
  gap: var(--ry-space-8);
  min-width: 0;
}

.ry-thread--reading {
  width: 100%;
  max-width: calc(var(--ry-reading) + var(--ry-wick-gap));
  margin-inline: auto;
}

.ry-turn {
  min-width: 0;
}

/* User turn */
.ry-turn--user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ry-space-2);
}

.ry-turn--user .ry-turn__body {
  max-width: min(34rem, 86%);
  padding: 11px 16px;
  border-radius: var(--ry-radius-card);
  background: var(--ry-turn-user, var(--ry-sunk));
  color: var(--ry-ink);
  font-size: var(--ry-fs-reading);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* User turns and asks take the opposite tone of what they sit on: sunk on canvas and white,
   white on sunk bands and wells. */
.ry-window,
.ry-card,
.ry-app__main,
.ry-artifact {
  --ry-turn-user: var(--ry-sunk);
}

.ry-section--sunk,
.ry-card__well,
.ry-card--sunk {
  --ry-turn-user: var(--ry-surface);
}

.ry-turn__files {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ry-space-2);
  max-width: 86%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ry-turn__meta {
  display: flex;
  align-items: center;
  gap: var(--ry-space-2);
  color: var(--ry-muted);
  font-size: var(--ry-fs-caption);
}

/* Assistant turn */
.ry-turn--assistant {
  display: grid;
  grid-template-columns: var(--ry-wick-gap) minmax(0, 1fr);
}

.ry-turn__gutter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
}

.ry-turn__mark {
  transition: box-shadow var(--ry-dur) var(--ry-ease);
}

.ry-turn__wick {
  position: relative;
  flex: 1;
  width: 2px;
  min-height: var(--ry-space-6);
  margin-block-start: var(--ry-space-2);
  margin-inline-start: 10px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ry-wick);
}

.ry-turn__main {
  display: grid;
  gap: var(--ry-space-3);
  align-content: start;
  min-width: 0;
}

.ry-turn__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--ry-space-3);
  min-height: 22px;
  font-size: var(--ry-fs-meta);
  line-height: 1.2;
}

.ry-turn__name {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-semibold);
}

.ry-turn__model,
.ry-turn__time {
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-turn__body {
  max-width: var(--ry-reading);
  color: var(--ry-body);
  font-size: var(--ry-fs-reading);
  line-height: var(--ry-lh-reading);
  overflow-wrap: break-word;
}

.ry-turn--assistant .ry-turn__body > * + * {
  margin-block-start: 0.85em;
}

.ry-turn__body :where(ul, ol) {
  padding-inline-start: 1.3em;
}

.ry-turn__body :where(li + li) {
  margin-block-start: 0.35em;
}

.ry-turn__body :where(h3, h4) {
  margin-block-start: 1.3em;
  font-size: var(--ry-fs-reading);
  letter-spacing: 0;
}

.ry-turn__body :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ry-fs-meta);
}

.ry-turn__body :where(th, td) {
  padding: 8px 10px;
  border-block-end: 1px solid var(--ry-hair);
  text-align: start;
  vertical-align: top;
}

.ry-turn__body :where(th) {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-semibold);
}

.ry-turn__table {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-btn);
}

.ry-turn__table :where(tr:last-child td) {
  border-block-end: 0;
}

.ry-turn__actions {
  margin-block-start: var(--ry-space-1);
}

/* System notice turn: a centered mono line between hairlines */
.ry-turn--system {
  display: flex;
  align-items: center;
  gap: var(--ry-space-4);
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
  text-align: center;
}

.ry-turn--system::before,
.ry-turn--system::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ry-hair);
}

.ry-turn--system svg {
  display: inline-block;
  vertical-align: -3px;
  margin-inline-end: 4px;
}

/* Attachment chip: files on a user turn and in the composer */
.ry-attach {
  display: inline-flex;
  align-items: center;
  gap: var(--ry-space-2);
  max-width: 100%;
  min-height: 40px;
  padding: 6px 10px 6px 8px;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-btn);
  background: var(--ry-surface);
  color: var(--ry-ink);
  font-size: var(--ry-fs-meta);
  line-height: 1.25;
}

.ry-attach__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--ry-radius-tag);
  background: var(--ry-accent-soft);
  color: var(--ry-accent-strong);
}

.ry-attach__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ry-attach__size {
  flex: none;
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-attach__remove {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-inline-start: 2px;
  padding: 0;
  border: 0;
  border-radius: var(--ry-radius-tag);
  background: transparent;
  color: var(--ry-muted);
  cursor: pointer;
}

.ry-attach__remove:hover {
  background: var(--ry-sunk);
  color: var(--ry-ink);
}

.ry-attach.is-uploading .ry-attach__icon {
  background: var(--ry-lime);
  color: var(--ry-lime-ink);
}

.ry-attach.is-error {
  border-color: var(--ry-danger);
}

.ry-attach.is-error .ry-attach__icon {
  background: var(--ry-danger-soft);
  color: var(--ry-danger);
}

/* Mini thread: hero windows, bento wells, OG cards */
.ry-thread--mini {
  gap: var(--ry-space-5);
}

.ry-thread--mini .ry-turn--user .ry-turn__body,
.ry-thread--mini .ry-turn__body {
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ry-thread--mini .ry-turn--user .ry-turn__body {
  padding: 9px 14px;
}

.ry-thread--mini .ry-turn--assistant {
  grid-template-columns: 34px minmax(0, 1fr);
}

.ry-thread--mini .ry-turn__main {
  gap: var(--ry-space-2);
}

@media (max-width: 640px) {
  .ry-turn--user .ry-turn__body {
    max-width: 92%;
  }

  .ry-turn--assistant {
    grid-template-columns: 32px minmax(0, 1fr);
  }
}

@media (pointer: coarse) {
  .ry-attach__remove {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-turn__mark {
    transition: none;
  }
}

/* ---- streaming ---- */
/* Streaming: while the model works, a chartreuse light sweeps down the gutter line and the head
   tile wears a lime ring. Reduced motion: a static lime segment at the top of the line. */

.ry-turn.is-streaming .ry-turn__mark,
.ry-turn.is-new .ry-turn__mark {
  box-shadow: 0 0 0 2px var(--ry-canvas), 0 0 0 4px var(--ry-lime);
}

.ry-turn.is-streaming .ry-turn__wick::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 45%;
  min-height: 24px;
  border-radius: 2px;
  background: linear-gradient(to bottom, transparent, var(--ry-lime) 35%, var(--ry-lime) 65%, transparent);
  transform: translateY(-100%);
  animation: ry-sweep var(--ry-dur-sweep) var(--ry-ease-in-out) infinite;
}

:root[data-theme="dark"] .ry-turn.is-streaming .ry-turn__wick::after {
  box-shadow: var(--ry-lime-glow);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ry-turn.is-streaming .ry-turn__wick::after {
    box-shadow: var(--ry-lime-glow);
  }
}

@keyframes ry-sweep {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(260%);
  }
}

/* Working pill: what the model is doing right now, lime fill behind dark ink */
.ry-working {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: var(--ry-space-2);
  min-height: 24px;
  padding: 2px 10px 2px 8px;
  border-radius: var(--ry-radius-tag);
  background: var(--ry-lime);
  color: var(--ry-lime-ink);
  font-family: var(--ry-font-sans);
  font-size: var(--ry-fs-caption);
  font-weight: var(--ry-weight-medium);
  line-height: 1.3;
}

.ry-working__dots {
  display: inline-flex;
  gap: 3px;
}

.ry-working__dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: ry-dot 1.2s ease-in-out infinite;
}

.ry-working__dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.ry-working__dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes ry-dot {
  0%,
  80%,
  100% {
    opacity: 0.3;
  }

  40% {
    opacity: 1;
  }
}

/* Caret at the end of streaming text */
.ry-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-inline-start: 2px;
  vertical-align: -0.15em;
  border-radius: 1px;
  background: var(--ry-ink);
  animation: ry-caret 1s steps(1) infinite;
}

@keyframes ry-caret {
  50% {
    opacity: 0;
  }
}

/* Words that arrived in the last moment of a stream */
.ry-stream-word {
  animation: ry-word var(--ry-dur-slow) var(--ry-ease) both;
}

@keyframes ry-word {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-turn.is-streaming .ry-turn__wick::after {
    height: 48px;
    background: var(--ry-lime);
    transform: none;
    animation: none;
  }

  .ry-working__dots span {
    opacity: 1;
    animation: none;
  }

  .ry-caret,
  .ry-stream-word {
    animation: none;
  }
}

/* ---- tool-call ---- */
/* Tool call: a collapsible card inline in an assistant turn. The head is one button; the body
   shows input and output in mono. Running, done and error states. */

.ry-tool {
  position: relative;
  max-width: var(--ry-reading);
  overflow: hidden;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-btn);
  background: var(--ry-surface);
}

.ry-tool__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--ry-body);
  font-size: var(--ry-fs-meta);
  line-height: 1.3;
  text-align: start;
}

button.ry-tool__head {
  cursor: pointer;
}

button.ry-tool__head:hover {
  background: var(--ry-sunk);
}

.ry-tool__head:focus-visible {
  outline: 2px solid var(--ry-focus);
  outline-offset: -2px;
  border-radius: var(--ry-radius-btn);
}

.ry-tool__status {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ry-ok);
}

.ry-tool__name {
  flex: none;
  padding: 1px 6px;
  border-radius: var(--ry-radius-xs);
  background: var(--ry-code-bg);
  color: var(--ry-code-ink);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-tool__summary {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ry-tool__time {
  flex: none;
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-tool__chev {
  display: inline-flex;
  flex: none;
  color: var(--ry-muted);
  transition: transform var(--ry-dur) var(--ry-ease);
}

.ry-tool__head[aria-expanded="true"] .ry-tool__chev {
  transform: rotate(180deg);
}

.ry-tool__body {
  display: grid;
  gap: var(--ry-space-3);
  padding: var(--ry-space-3);
  border-block-start: 1px solid var(--ry-hair);
  background: var(--ry-code-bg);
}

.ry-tool__label {
  margin-block-end: 4px;
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-tool__code {
  margin: 0;
  color: var(--ry-code-ink);
  font-family: var(--ry-font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ry-tool__error {
  color: var(--ry-danger);
  font-size: var(--ry-fs-note);
}

/* Running: lime status dot and a lime line crossing the head */
.ry-tool.is-running .ry-tool__status::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ry-lime);
  box-shadow: 0 0 0 3px var(--ry-lime-soft);
}

.ry-tool.is-running .ry-tool__status svg {
  display: none;
}

.ry-tool.is-running .ry-tool__head::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 30%;
  height: 2px;
  background: var(--ry-lime);
  animation: ry-tool-run 1.4s var(--ry-ease-in-out) infinite;
}

@keyframes ry-tool-run {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(340%);
  }
}

[dir="rtl"] .ry-tool.is-running .ry-tool__head::after {
  animation-name: ry-tool-run-rtl;
}

@keyframes ry-tool-run-rtl {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-340%);
  }
}

/* Error */
.ry-tool.is-error {
  border-color: var(--ry-danger);
}

.ry-tool.is-error .ry-tool__status {
  color: var(--ry-danger);
}

/* A run of tool calls */
.ry-tools {
  display: grid;
  gap: var(--ry-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 640px) {
  .ry-tool__name {
    display: none;
  }
}

@media (pointer: coarse) {
  .ry-tool__head {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-tool__chev {
    transition: none;
  }

  .ry-tool.is-running .ry-tool__head::after {
    width: 100%;
    animation: none;
    transform: none;
  }
}

/* ---- citation ---- */
/* Citations: numbered chips inside the text, and the source list they open. */

.ry-cite {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-inline: 1px;
  padding: 0 5px;
  border: 1px solid var(--ry-hair-strong);
  border-radius: var(--ry-radius-tag);
  background: var(--ry-surface);
  color: var(--ry-ink);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
  font-weight: var(--ry-weight-medium);
  line-height: 1;
  text-decoration: none;
  vertical-align: 0.12em;
  transition: background-color var(--ry-dur-fast) var(--ry-ease), color var(--ry-dur-fast) var(--ry-ease), border-color var(--ry-dur-fast) var(--ry-ease);
}

.ry-cite::before {
  content: "";
  position: absolute;
  inset: -8px -4px;
}

a.ry-cite:hover,
button.ry-cite:hover {
  border-color: var(--ry-accent);
  background: var(--ry-accent-soft);
  color: var(--ry-accent-strong);
}

.ry-cite:focus-visible {
  outline: 2px solid var(--ry-focus);
  outline-offset: 2px;
}

.ry-cite.is-active,
.ry-cite[aria-expanded="true"] {
  border-color: var(--ry-ink);
  background: var(--ry-ink);
  color: var(--ry-canvas);
}

/* Source list */
.ry-sources {
  max-width: var(--ry-reading);
  border-block-start: 1px solid var(--ry-hair);
  padding-block-start: var(--ry-space-3);
}

.ry-sources__head {
  display: flex;
  align-items: center;
  gap: var(--ry-space-2);
  width: fit-content;
  min-height: 32px;
  color: var(--ry-ink);
  font-size: var(--ry-fs-meta);
  font-weight: var(--ry-weight-medium);
  list-style: none;
  cursor: pointer;
}

.ry-sources__head::-webkit-details-marker {
  display: none;
}

.ry-sources__head svg {
  color: var(--ry-muted);
  transition: transform var(--ry-dur) var(--ry-ease);
}

.ry-sources[open] .ry-sources__head .ry-sources__chev {
  transform: rotate(180deg);
}

.ry-sources__list {
  display: grid;
  gap: var(--ry-space-2);
  margin: var(--ry-space-3) 0 0;
  padding: 0;
  list-style: none;
}

.ry-source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px var(--ry-space-3);
  padding: 10px 12px;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-btn);
  background: var(--ry-surface);
  scroll-margin: var(--ry-space-10);
  transition: background-color var(--ry-dur) var(--ry-ease), border-color var(--ry-dur) var(--ry-ease);
}

.ry-source__num {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--ry-radius-tag);
  background: var(--ry-sunk);
  color: var(--ry-ink);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
  font-weight: var(--ry-weight-medium);
}

.ry-source__main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ry-source__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--ry-space-3);
}

.ry-source__title {
  min-width: 0;
  color: var(--ry-ink);
  font-size: var(--ry-fs-meta);
  font-weight: var(--ry-weight-medium);
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.ry-source__title:hover {
  color: var(--ry-accent-strong);
  text-decoration: underline;
}

.ry-source__loc {
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-source__quote {
  margin: 2px 0 0;
  padding-inline-start: var(--ry-space-3);
  border-inline-start: 2px solid var(--ry-wick);
  color: var(--ry-body);
  font-size: var(--ry-fs-meta);
  line-height: 1.55;
}

.ry-source.is-flagged {
  border-color: var(--ry-accent);
  background: var(--ry-accent-soft);
}

.ry-source.is-flagged .ry-source__quote {
  border-color: var(--ry-accent);
}

/* Compact chips row: sources under a short answer or in a mini thread */
.ry-source-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ry-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ry-source-chip {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--ry-space-2);
  max-width: 100%;
  min-height: 30px;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-tag);
  background: var(--ry-surface);
  color: var(--ry-ink);
  font-size: var(--ry-fs-caption);
  text-decoration: none;
}

a.ry-source-chip:hover {
  border-color: var(--ry-accent);
  color: var(--ry-ink);
}

.ry-source-chip .ry-source__num {
  min-width: 20px;
  height: 20px;
}

.ry-source-chip__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (pointer: coarse) {
  .ry-cite::before {
    inset: -12px -6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-cite,
  .ry-source,
  .ry-sources__head svg {
    transition: none;
  }
}

/* ---- code-block ---- */
/* Code block: a file bar with a copy button, then code that scrolls sideways and never wraps. */

.ry-code {
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-btn);
  background: var(--ry-code-bg);
}

.ry-code__bar {
  display: flex;
  align-items: center;
  gap: var(--ry-space-2);
  min-height: 40px;
  padding: 4px 6px 4px 14px;
  border-block-end: 1px solid var(--ry-hair);
}

.ry-code__file {
  min-width: 0;
  overflow: hidden;
  color: var(--ry-ink);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ry-code__lang {
  margin-inline-start: auto;
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-code__copy {
  margin-inline-start: auto;
  min-height: 32px;
  padding: 4px 10px;
  font-size: var(--ry-fs-caption);
}

.ry-code__pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  color: var(--ry-code-ink);
  font-family: var(--ry-font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  white-space: pre;
  tab-size: 2;
}

.ry-code__pre:focus-visible {
  outline: 2px solid var(--ry-focus);
  outline-offset: -2px;
}

.ry-code__pre code {
  font-size: inherit;
}

.ry-code__k {
  color: var(--ry-code-keyword);
}

.ry-code__s {
  color: var(--ry-code-string);
}

.ry-code__c {
  color: var(--ry-code-comment);
}

.ry-code__n {
  color: var(--ry-code-number);
}

.ry-code__p {
  color: var(--ry-code-comment);
  user-select: none;
}

.ry-code__lang + .ry-code__copy {
  margin-inline-start: 0;
}

.ry-code.is-copied .ry-code__copy {
  color: var(--ry-ok);
}

@media (pointer: coarse) {
  .ry-code__copy {
    min-height: 44px;
  }
}

/* ---- composer ---- */
/* Composer: the message box. 14px corners, one float shadow, an autosizing field, attachments,
   tools on the start side, send (or stop while working) on the end side. */

.ry-composer {
  position: relative;
  display: grid;
  gap: var(--ry-space-2);
  width: 100%;
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--ry-hair-strong);
  border-radius: var(--ry-radius-composer);
  background: var(--ry-surface);
  box-shadow: var(--ry-shadow-float);
  transition: border-color var(--ry-dur-fast) var(--ry-ease), box-shadow var(--ry-dur-fast) var(--ry-ease);
}

.ry-composer:focus-within {
  border-color: var(--ry-accent);
  box-shadow: var(--ry-shadow-float), 0 0 0 3px var(--ry-accent-soft);
}

.ry-composer__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ry-space-2);
  margin: 0;
  padding: 2px 0 0;
  list-style: none;
}

.ry-composer__attachments:empty {
  display: none;
}

.ry-composer__input {
  display: block;
  width: 100%;
  min-height: 52px;
  max-height: 240px;
  margin: 0;
  padding: 6px 4px 2px;
  resize: none;
  border: 0;
  background: transparent;
  color: var(--ry-ink);
  font-size: var(--ry-fs-reading);
  line-height: 1.5;
}

.ry-composer__input:focus,
.ry-composer__input:focus-visible {
  outline: none;
}

.ry-composer__input::placeholder {
  color: var(--ry-muted);
  opacity: 1;
}

.ry-composer__ghost {
  display: block;
  min-height: 40px;
  padding: 6px 4px 2px;
  color: var(--ry-muted);
  font-size: var(--ry-fs-reading);
  line-height: 1.5;
}

.ry-composer__bar {
  display: flex;
  align-items: center;
  gap: var(--ry-space-2);
  min-width: 0;
}

.ry-composer__tools {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.ry-composer__hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
  color: var(--ry-muted);
  font-size: var(--ry-fs-caption);
  white-space: nowrap;
}

.ry-composer__end {
  display: flex;
  align-items: center;
  gap: var(--ry-space-2);
  margin-inline-start: auto;
}

.ry-composer__hint + .ry-composer__end {
  margin-inline-start: var(--ry-space-2);
}

.ry-composer__send svg,
.ry-composer__stop svg {
  width: 18px;
  height: 18px;
}

.ry-composer__stop {
  display: none;
}

.ry-composer.is-busy .ry-composer__send {
  display: none;
}

.ry-composer.is-busy .ry-composer__stop {
  display: inline-flex;
  margin-inline-start: auto;
}

.ry-composer--static .ry-composer__bar {
  justify-content: space-between;
}

/* Working: a lime line grows along the top edge, then fades (no overflow clipping, so menus
   that open upward from the composer stay visible) */
.ry-composer.is-busy::before {
  content: "";
  position: absolute;
  inset-inline: 16px;
  top: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--ry-lime);
  transform-origin: left center;
  animation: ry-composer-busy 1.6s var(--ry-ease-in-out) infinite;
}

[dir="rtl"] .ry-composer.is-busy::before {
  transform-origin: right center;
}

@keyframes ry-composer-busy {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }

  70% {
    opacity: 1;
    transform: scaleX(1);
  }

  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

/* Rate-limited or read-only */
.ry-composer.is-disabled {
  border-color: var(--ry-hair);
  background: var(--ry-sunk);
  box-shadow: none;
}

.ry-composer.is-disabled .ry-composer__input {
  color: var(--ry-muted);
  cursor: not-allowed;
}

.ry-composer.is-error {
  border-color: var(--ry-danger);
}

.ry-composer__foot {
  margin-block-start: var(--ry-space-2);
  color: var(--ry-muted);
  font-size: var(--ry-fs-caption);
  text-align: center;
}

@media (max-width: 640px) {
  .ry-composer__hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-composer {
    transition: none;
  }

  .ry-composer.is-busy::before {
    animation: none;
    transform: none;
  }
}

/* ---- menu ---- */
/* Menu: a popover on native details. Items are buttons or links; one destructive item at most. */

.ry-menu {
  position: relative;
  display: inline-block;
}

.ry-menu > summary {
  list-style: none;
}

.ry-menu > summary::-webkit-details-marker {
  display: none;
}

.ry-menu__pop {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: 13rem;
  max-width: min(22rem, calc(100vw - 2 * var(--ry-space-4)));
  padding: 6px;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-card);
  background: var(--ry-raised);
  box-shadow: var(--ry-shadow-pop);
  animation: ry-menu-in var(--ry-dur) var(--ry-ease) both;
}

@keyframes ry-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.ry-menu--end .ry-menu__pop {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.ry-menu--up .ry-menu__pop {
  top: auto;
  bottom: calc(100% + 6px);
}

.ry-menu--static .ry-menu__pop {
  position: static;
  animation: none;
}

.ry-menu__list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ry-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ry-ink);
  font: inherit;
  font-size: var(--ry-fs-meta);
  line-height: 1.3;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.ry-menu__item svg {
  flex: none;
  color: var(--ry-muted);
}

.ry-menu__item:hover,
.ry-menu__item:focus-visible {
  background: var(--ry-sunk);
  color: var(--ry-ink);
  outline: none;
}

.ry-menu__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ry-focus);
}

.ry-menu__item--danger,
.ry-menu__item--danger svg {
  color: var(--ry-danger);
}

.ry-menu__item--danger:hover {
  background: var(--ry-danger-soft);
  color: var(--ry-danger);
}

.ry-menu__kbd {
  margin-inline-start: auto;
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-menu__sep {
  height: 1px;
  margin: 5px 4px;
  background: var(--ry-hair);
}

.ry-menu__label {
  margin: 0;
  padding: 6px 10px 4px;
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

@media (pointer: coarse) {
  .ry-menu__item {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-menu__pop {
    animation: none;
  }
}

/* ---- model-picker ---- */
/* Model picker: a menu of models on real radio inputs. Name, one line on what it is for, cost. */

.ry-picker__trigger {
  gap: 6px;
}

.ry-picker__trigger .ry-picker__chev {
  display: inline-flex;
  color: var(--ry-muted);
  transition: transform var(--ry-dur) var(--ry-ease);
}

.ry-picker[open] .ry-picker__chev {
  transform: rotate(180deg);
}

.ry-picker__pop {
  min-width: 18rem;
}

.ry-picker__set {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}

.ry-picker__option {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--ry-space-3);
  padding: 10px 12px 10px 36px;
  border-radius: 10px;
  cursor: pointer;
}

.ry-picker__input {
  position: absolute;
  inset-inline-start: 12px;
  top: 13px;
  width: 16px;
  height: 16px;
  margin: 0;
  appearance: none;
  border-radius: 50%;
  cursor: pointer;
}

.ry-picker__input:checked {
  border-inline-start: 2px solid var(--ry-accent-strong);
  border-block-end: 2px solid var(--ry-accent-strong);
  border-radius: 0;
  width: 13px;
  height: 7px;
  top: 15px;
  transform: rotate(-45deg);
}

.ry-picker__input:focus-visible {
  outline: none;
}

.ry-picker__option:hover {
  background: var(--ry-sunk);
}

.ry-picker__option:has(:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--ry-focus);
}

.ry-picker__option:has(:checked) {
  background: var(--ry-accent-soft);
}

.ry-picker__name {
  color: var(--ry-ink);
  font-size: var(--ry-fs-meta);
  font-weight: var(--ry-weight-semibold);
}

.ry-picker__desc {
  grid-column: 1 / -1;
  color: var(--ry-body);
  font-size: var(--ry-fs-caption);
  line-height: 1.45;
}

.ry-picker__cost {
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
  white-space: nowrap;
}

.ry-picker__option:has(:disabled) {
  cursor: not-allowed;
}

.ry-picker__option:has(:disabled) :is(.ry-picker__name, .ry-picker__desc) {
  color: var(--ry-muted);
}

@media (prefers-reduced-motion: reduce) {
  .ry-picker__trigger .ry-picker__chev {
    transition: none;
  }
}

/* ---- suggestion-chips ---- */
/* Suggestion chips: the only pills in Relay. Each one fills the composer with a prompt. */

.ry-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ry-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ry-suggest--center {
  justify-content: center;
}

.ry-suggest__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ry-space-2);
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--ry-hair-strong);
  border-radius: var(--ry-radius-pill);
  background: var(--ry-surface);
  color: var(--ry-ink);
  font: inherit;
  font-size: var(--ry-fs-meta);
  line-height: 1.3;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--ry-dur-fast) var(--ry-ease), background-color var(--ry-dur-fast) var(--ry-ease);
}

.ry-suggest__chip svg {
  flex: none;
  color: var(--ry-muted);
}

.ry-suggest__chip:hover {
  border-color: var(--ry-line-control);
  background: var(--ry-sunk);
  color: var(--ry-ink);
}

.ry-suggest__chip:focus-visible {
  outline: 2px solid var(--ry-focus);
  outline-offset: 2px;
}

.ry-suggest__chip.is-picked {
  border-color: var(--ry-accent);
  background: var(--ry-accent-soft);
}

/* Cards: larger prompts on the start screen */
.ry-suggest--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--ry-space-3);
  width: 100%;
}

.ry-suggest--cards .ry-suggest__chip {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  height: 100%;
  min-height: 88px;
  padding: 14px 16px;
  border-color: var(--ry-hair);
  border-radius: var(--ry-radius-card);
}

.ry-suggest__title {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-medium);
}

.ry-suggest__hint {
  color: var(--ry-muted);
  font-size: var(--ry-fs-caption);
  line-height: 1.45;
}

.ry-suggest--cards .ry-suggest__chip svg {
  margin-block-end: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .ry-suggest__chip {
    transition: none;
  }
}

/* ---- feedback-bar ---- */
/* Feedback bar: quiet icon buttons under an assistant turn. Thumbs use aria-pressed. */

.ry-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-inline-start: -6px;
}

.ry-feedback__btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ry-muted);
  cursor: pointer;
  transition: background-color var(--ry-dur-fast) var(--ry-ease), color var(--ry-dur-fast) var(--ry-ease);
}

.ry-feedback__btn:hover {
  background: var(--ry-sunk);
  color: var(--ry-ink);
}

.ry-feedback__btn:focus-visible {
  outline: 2px solid var(--ry-focus);
  outline-offset: 1px;
}

.ry-feedback__btn[aria-pressed="true"] {
  background: var(--ry-sunk);
  color: var(--ry-ink);
}

.ry-feedback__btn[aria-pressed="true"] svg {
  fill: currentColor;
  fill-opacity: 0.18;
}

.ry-feedback__sep {
  width: 1px;
  height: 16px;
  margin-inline: 4px;
  background: var(--ry-hair);
}

.ry-feedback__note {
  margin-inline-start: var(--ry-space-2);
  color: var(--ry-muted);
  font-size: var(--ry-fs-caption);
}

.ry-feedback__meta {
  margin-inline-start: auto;
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

@media (pointer: coarse) {
  .ry-feedback__btn {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-feedback__btn {
    transition: none;
  }
}

/* ---- usage-meter ---- */
/* Usage meter: questions or credits used this period. Teal while there is room, warn from 80%,
   danger at the limit. The words always carry the number too. */

.ry-usage {
  display: grid;
  gap: var(--ry-space-2);
  min-width: 0;
}

.ry-usage__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--ry-space-3);
  font-size: var(--ry-fs-meta);
}

.ry-usage__label {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-medium);
}

.ry-usage__value {
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
  font-variant-numeric: tabular-nums;
}

.ry-usage__track {
  position: relative;
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-pill);
  background: var(--ry-surface);
}

.ry-usage__fill {
  display: block;
  width: var(--ry-value, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--ry-accent);
}

/* Optional split: part of the allowance used by a second model */
.ry-usage__fill + .ry-usage__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--ry-viz-3);
}

.ry-usage__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px var(--ry-space-3);
  color: var(--ry-muted);
  font-size: var(--ry-fs-caption);
}

.ry-usage--warn .ry-usage__fill {
  background: var(--ry-warn);
}

.ry-usage--full .ry-usage__fill {
  background: var(--ry-danger);
}

.ry-usage--full .ry-usage__value {
  color: var(--ry-danger);
}

.ry-usage--compact {
  gap: 6px;
}

.ry-usage--compact .ry-usage__track {
  height: 8px;
}

.ry-usage--card {
  padding: var(--ry-space-5);
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-card);
  background: var(--ry-surface);
}

/* ---- thread-notice ---- */
/* Thread notice: errors and limits inside the conversation, aligned with assistant turns. */

.ry-notice {
  display: grid;
  grid-template-columns: var(--ry-wick-gap) minmax(0, 1fr);
}

.ry-notice__mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-block-start: 12px;
  border-radius: 6px;
  background: var(--ry-sunk);
  color: var(--ry-ink);
}

.ry-notice__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ry-space-3) var(--ry-space-5);
  max-width: var(--ry-reading);
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-card);
  background: var(--ry-surface);
}

.ry-notice__text {
  display: grid;
  gap: 2px;
  flex: 1 1 16rem;
  min-width: 0;
  color: var(--ry-body);
  font-size: var(--ry-fs-meta);
  line-height: 1.5;
}

.ry-notice__title {
  color: var(--ry-ink);
  font-size: var(--ry-fs-body);
  font-weight: var(--ry-weight-semibold);
}

.ry-notice__time {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
  color: var(--ry-muted);
}

.ry-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ry-space-2);
}

.ry-notice--error .ry-notice__mark {
  background: var(--ry-danger-soft);
  color: var(--ry-danger);
}

.ry-notice--error .ry-notice__box {
  border-color: var(--ry-danger);
}

.ry-notice--limit .ry-notice__mark {
  background: var(--ry-warn-soft);
  color: var(--ry-warn);
}

.ry-notice--limit .ry-notice__box {
  background: var(--ry-warn-soft);
  border-color: transparent;
}

.ry-notice--limit .ry-notice__text {
  color: var(--ry-ink);
}

@media (max-width: 640px) {
  .ry-notice {
    grid-template-columns: 32px minmax(0, 1fr);
  }
}

/* ---- empty-thread ---- */
/* Empty thread: the start screen. The mark, one question, suggestion cards and the composer. */

.ry-start {
  display: grid;
  justify-items: center;
  gap: var(--ry-space-5);
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  padding-block: clamp(2rem, 6vh, 5rem) var(--ry-space-6);
  text-align: center;
}

/* The mark hangs a short wick toward the title: the next turn is the assistant's */
.ry-start__mark {
  position: relative;
  margin-block-end: var(--ry-space-7);
}

.ry-start__mark::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(50% - 1px);
  top: calc(100% + 8px);
  width: 2px;
  height: 20px;
  border-radius: 2px;
  background: var(--ry-wick);
}

.ry-start__title {
  max-width: 20ch;
  font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.625rem);
  line-height: var(--ry-lh-title);
  letter-spacing: var(--ry-track-title);
}

.ry-start__text {
  max-width: 34rem;
  color: var(--ry-muted);
  font-size: var(--ry-fs-reading);
}

.ry-start__composer {
  width: 100%;
  margin-block-start: var(--ry-space-4);
  text-align: start;
}

.ry-start__suggest {
  width: 100%;
  text-align: start;
}

.ry-start__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ry-space-2) var(--ry-space-4);
  color: var(--ry-muted);
  font-size: var(--ry-fs-meta);
}

/* ---- thread-list ---- */
/* Thread list: threads grouped by date in the sidebar. New and working threads get a lime dot.
   Each row has a menu for rename, share and delete. */

.ry-threads {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: var(--ry-canvas);
}

.ry-threads--panel {
  height: 560px;
  max-width: 300px;
  overflow: hidden;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-card);
}

.ry-threads__head {
  display: grid;
  gap: var(--ry-space-2);
  padding: var(--ry-space-3);
}

.ry-threads__head .ry-search__box {
  min-height: 40px;
  border-color: var(--ry-hair-strong);
}

.ry-threads__head .ry-search__input {
  height: 38px;
  font-size: var(--ry-fs-meta);
}

.ry-threads__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ry-space-1) var(--ry-space-2) var(--ry-space-5);
}

.ry-threads__group + .ry-threads__group {
  margin-block-start: var(--ry-space-4);
}

.ry-threads__label {
  padding: 6px 10px;
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-threads__list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ry-thread-item {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: var(--ry-radius-btn);
  transition: background-color var(--ry-dur-fast) var(--ry-ease);
}

.ry-thread-item:hover {
  background: var(--ry-sunk);
}

.ry-thread-item.is-active {
  background: var(--ry-sunk);
}

.ry-thread-item__link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  min-height: 38px;
  padding: 8px 6px 8px 10px;
  border-radius: inherit;
  color: var(--ry-body);
  font-size: var(--ry-fs-meta);
  line-height: 1.3;
  text-decoration: none;
}

.ry-thread-item__link:last-child {
  padding-inline-end: 10px;
}

.ry-thread-item__link:hover {
  color: var(--ry-ink);
}

.ry-thread-item__link:focus-visible {
  outline-offset: -2px;
}

.ry-thread-item.is-active .ry-thread-item__link {
  color: var(--ry-ink);
  font-weight: var(--ry-weight-medium);
}

.ry-thread-item__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ry-thread-item__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--ry-lime);
  box-shadow: 0 0 0 2px var(--ry-lime-soft);
}

.ry-thread-item.is-streaming .ry-thread-item__dot {
  animation: ry-dot 1.2s ease-in-out infinite;
}

.ry-thread-item .ry-menu {
  flex: none;
  opacity: 0;
  transition: opacity var(--ry-dur-fast) var(--ry-ease);
}

.ry-thread-item:hover .ry-menu,
.ry-thread-item:focus-within .ry-menu,
.ry-thread-item.is-active .ry-menu,
.ry-thread-item .ry-menu[open] {
  opacity: 1;
}

.ry-thread-item__more {
  width: 30px;
  min-height: 30px;
  margin-inline-end: 4px;
}

.ry-thread-item__input {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  margin: 2px 4px;
  padding: 4px 8px;
  border: 1px solid var(--ry-focus);
  border-radius: 8px;
  background: var(--ry-surface);
  color: var(--ry-ink);
  font-size: var(--ry-fs-meta);
}

.ry-thread-item__input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ry-accent-soft);
}

.ry-threads__foot {
  display: grid;
  gap: var(--ry-space-4);
  padding: var(--ry-space-4);
  border-block-start: 1px solid var(--ry-hair);
}

.ry-threads__account {
  display: flex;
  align-items: center;
  gap: var(--ry-space-3);
  min-width: 0;
  font-size: var(--ry-fs-meta);
}

.ry-threads__who {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.ry-threads__name {
  overflow: hidden;
  color: var(--ry-ink);
  font-weight: var(--ry-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ry-threads__plan {
  color: var(--ry-muted);
  font-size: var(--ry-fs-caption);
}

.ry-threads__account .ry-btn {
  margin-inline-start: auto;
}

.ry-threads__links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--ry-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ry-fs-caption);
}

.ry-threads__links a {
  color: var(--ry-muted);
  text-decoration: none;
}

.ry-threads__links a:hover {
  color: var(--ry-ink);
  text-decoration: underline;
}

@media (pointer: coarse) {
  .ry-thread-item .ry-menu {
    opacity: 1;
  }

  .ry-thread-item__link {
    min-height: 44px;
  }

  .ry-thread-item__more {
    width: 40px;
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-thread-item,
  .ry-thread-item .ry-menu {
    transition: none;
  }

  .ry-thread-item.is-streaming .ry-thread-item__dot {
    animation: none;
  }
}

/* ---- artifact-panel ---- */
/* Artifact panel: what the conversation produced (a document, code, a table) opens beside the
   thread. The reference card inside a turn opens it. */

.ry-artifact-ref {
  display: flex;
  align-items: center;
  gap: var(--ry-space-3);
  width: 100%;
  max-width: 26rem;
  min-height: 60px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-card);
  background: var(--ry-surface);
  color: var(--ry-body);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--ry-dur-fast) var(--ry-ease);
}

.ry-artifact-ref:hover {
  border-color: var(--ry-hair-strong);
}

.ry-artifact-ref:focus-visible {
  outline: 2px solid var(--ry-focus);
  outline-offset: 2px;
}

.ry-artifact-ref[aria-expanded="true"] {
  border-color: var(--ry-accent);
  background: var(--ry-accent-soft);
}

.ry-artifact-ref__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--ry-radius-btn);
  background: var(--ry-accent-soft);
  color: var(--ry-accent-strong);
}

.ry-artifact-ref[aria-expanded="true"] .ry-artifact-ref__icon {
  background: var(--ry-surface);
}

.ry-artifact-ref__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ry-artifact-ref__title {
  overflow: hidden;
  color: var(--ry-ink);
  font-size: 0.9375rem;
  font-weight: var(--ry-weight-medium);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ry-artifact-ref__meta {
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-artifact-ref__open {
  margin-inline-start: auto;
  flex: none;
  color: var(--ry-accent-strong);
  font-size: var(--ry-fs-meta);
  font-weight: var(--ry-weight-medium);
}

/* The panel */
.ry-artifact {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  min-height: 0;
  background: var(--ry-surface);
}

.ry-artifact--card {
  height: auto;
  max-height: 560px;
  overflow: hidden;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-card);
}

.ry-artifact__head {
  display: flex;
  align-items: center;
  gap: var(--ry-space-3);
  min-height: 60px;
  padding: 10px 12px 10px 16px;
  border-block-end: 1px solid var(--ry-hair);
}

.ry-artifact__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--ry-radius-btn);
  background: var(--ry-accent-soft);
  color: var(--ry-accent-strong);
}

.ry-artifact__titles {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.ry-artifact__title {
  overflow: hidden;
  font-size: var(--ry-fs-body);
  line-height: 1.3;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ry-artifact__title:focus {
  outline: none;
}

.ry-artifact__meta {
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-artifact__actions {
  display: flex;
  gap: 2px;
  margin-inline-start: auto;
}

.ry-artifact__tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ry-space-3);
  padding: 10px 16px;
  border-block-end: 1px solid var(--ry-hair);
}

.ry-artifact__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--ry-space-7) var(--ry-space-7) var(--ry-space-9);
}

.ry-artifact__doc {
  max-width: 38rem;
  margin-inline: auto;
  color: var(--ry-body);
  font-size: var(--ry-fs-body);
  line-height: var(--ry-lh-reading);
}

.ry-artifact__doc > * + * {
  margin-block-start: 1em;
}

.ry-artifact__doc h3 {
  font-size: var(--ry-fs-card);
}

.ry-artifact__doc .ry-artifact__edit {
  border-radius: 3px;
  background: var(--ry-lime-soft);
  color: var(--ry-ink);
}

.ry-artifact__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ry-space-2) var(--ry-space-4);
  padding: 10px 16px;
  border-block-start: 1px solid var(--ry-hair);
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-artifact__versions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 640px) {
  .ry-artifact__body {
    padding: var(--ry-space-5) var(--ry-space-4) var(--ry-space-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-artifact-ref {
    transition: none;
  }
}

/* ---- app-shell ---- */
/* App shell: thread list, conversation, artifact panel. The conversation sits on the white
   surface; the sidebar sits behind it on the canvas. */

.ry-app {
  position: relative;
  display: grid;
  grid-template-columns: var(--ry-side-w) minmax(0, 1fr);
  height: calc(100vh - var(--ry-nav-h));
  height: calc(100dvh - var(--ry-nav-h));
  min-height: 560px;
  overflow: hidden;
  background: var(--ry-canvas);
}

.ry-app.has-panel {
  grid-template-columns: var(--ry-side-w) minmax(0, 1fr) var(--ry-panel-w);
}

.ry-app--demo {
  height: 680px;
  min-height: 0;
  border: 1px solid var(--ry-hair);
  border-radius: var(--ry-radius-card);
}

.ry-app__side {
  min-width: 0;
  min-height: 0;
  border-inline-end: 1px solid var(--ry-hair);
}

.ry-app__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--ry-surface);
}

.ry-app__bar {
  display: flex;
  align-items: center;
  gap: var(--ry-space-2);
  min-height: 56px;
  padding: 8px var(--ry-space-4);
  border-block-end: 1px solid var(--ry-hair);
}

.ry-app__title {
  min-width: 0;
  overflow: hidden;
  color: var(--ry-ink);
  font-size: var(--ry-fs-body);
  font-weight: var(--ry-weight-semibold);
  line-height: 1.3;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ry-app__meta {
  flex: none;
  color: var(--ry-muted);
  font-family: var(--ry-font-mono);
  font-size: var(--ry-fs-caption);
}

.ry-app__tools {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: auto;
}

.ry-app__side-toggle {
  display: none;
}

.ry-app__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ry-space-8) var(--ry-space-6) var(--ry-space-6);
}

.ry-app__dock {
  padding: 0 var(--ry-space-6) var(--ry-space-4);
}

.ry-app__dock > * {
  max-width: calc(var(--ry-reading) + var(--ry-wick-gap));
  margin-inline: auto;
}

.ry-app__panel {
  min-width: 0;
  min-height: 0;
  border-inline-start: 1px solid var(--ry-hair);
}

.ry-app:not(.has-panel) .ry-app__panel {
  display: none;
}

.ry-app__scrim {
  display: none;
}

@media (max-width: 1279px) {
  .ry-app.has-panel {
    grid-template-columns: var(--ry-side-w) minmax(0, 1fr);
  }

  .ry-app__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 40;
    width: min(var(--ry-panel-w), 100%);
    box-shadow: var(--ry-shadow-panel);
  }
}

@media (max-width: 899px) {
  .ry-app,
  .ry-app.has-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .ry-app__side-toggle {
    display: inline-flex;
  }

  .ry-app__side {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 45;
    width: min(300px, 86%);
    border-inline-end: 1px solid var(--ry-hair);
    box-shadow: var(--ry-shadow-panel);
    transform: translateX(-105%);
    transition: transform var(--ry-dur-slow) var(--ry-ease);
    visibility: hidden;
  }

  [dir="rtl"] .ry-app__side {
    transform: translateX(105%);
  }

  .ry-app.is-side-open .ry-app__side {
    transform: none;
    visibility: visible;
  }

  .ry-app.is-side-open .ry-app__scrim {
    position: absolute;
    inset: 0;
    z-index: 44;
    display: block;
    background: var(--ry-scrim);
  }

  .ry-app__scroll {
    padding: var(--ry-space-6) var(--ry-space-4) var(--ry-space-4);
  }

  .ry-app__dock {
    padding: 0 var(--ry-space-3) var(--ry-space-3);
  }

  .ry-app__panel {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ry-app__side {
    transition: none;
  }
}