/* Recognize components. Every value comes from tokens.css except where noted "file literal". */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700&display=swap');

body { margin: 0; font-family: var(--font-sans); color: var(--text-primary); background: var(--background-page); -webkit-font-smoothing: antialiased; }
.rz-icon { display: inline-block; flex: none; vertical-align: middle; }

/* ---------- Button ---------- */
.rz-btn {
  --rz-bg: transparent; --rz-bd: transparent; --rz-fg: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  box-sizing: border-box; border: 1px solid var(--rz-bd); border-radius: var(--radius-pill);
  background: var(--rz-bg); color: var(--rz-fg); font-family: var(--font-sans); font-weight: 400;
  cursor: pointer; white-space: nowrap; transition: background-color .12s, border-color .12s, color .12s;
}
.rz-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rz-btn--small  { height: 28px; padding: var(--space-4) var(--space-10); font-size: 12px; line-height: 1.3; }
.rz-btn--medium { height: 35px; padding: var(--space-6) var(--space-14); font-size: 14px; line-height: 1.3; }
.rz-btn--large  { height: 44px; padding: var(--space-8) var(--space-18); font-size: 16px; line-height: 1.3; }
.rz-btn--icon-only { padding: 0; }
.rz-btn--small.rz-btn--icon-only { width: 28px; }
.rz-btn--medium.rz-btn--icon-only { width: 35px; }
.rz-btn--large.rz-btn--icon-only { width: 44px; }

/* solid */
.rz-btn--primary   { --rz-bg: var(--action-primary-bg);   --rz-bd: var(--action-primary-bg);   --rz-fg: var(--action-primary-text); }
.rz-btn--primary:hover   { --rz-bg: var(--action-primary-bg-hover); --rz-bd: var(--action-primary-bg-hover); }
.rz-btn--primary:active  { --rz-bg: var(--blue-800); --rz-bd: var(--blue-800); }
.rz-btn--secondary { --rz-bg: var(--action-secondary-bg); --rz-bd: var(--action-secondary-bg); --rz-fg: var(--action-secondary-text); }
.rz-btn--secondary:hover { --rz-bg: var(--action-secondary-bg-hover); --rz-bd: var(--action-secondary-bg-hover); }
.rz-btn--secondary:active { --rz-bg: var(--slate-700); --rz-bd: var(--slate-700); }
.rz-btn--success   { --rz-bg: var(--action-success-bg);   --rz-bd: var(--action-success-bg);   --rz-fg: var(--text-inverse); }
.rz-btn--success:hover   { --rz-bg: var(--green-700); --rz-bd: var(--green-700); }
.rz-btn--success:active  { --rz-bg: var(--green-800); --rz-bd: var(--green-800); }
.rz-btn--danger    { --rz-bg: var(--action-danger-bg);    --rz-bd: var(--action-danger-bg);    --rz-fg: var(--text-inverse); }
.rz-btn--danger:hover    { --rz-bg: var(--red-700); --rz-bd: var(--red-700); }
.rz-btn--danger:active   { --rz-bg: var(--red-800); --rz-bd: var(--red-800); }
.rz-btn--warning   { --rz-bg: var(--action-warning-bg);   --rz-bd: var(--action-warning-bg);   --rz-fg: var(--text-primary); }
.rz-btn--warning:hover   { --rz-bg: var(--yellow-600); --rz-bd: var(--yellow-600); }
.rz-btn--warning:active  { --rz-bg: var(--yellow-700); --rz-bd: var(--yellow-700); }
.rz-btn--link      { --rz-fg: var(--action-primary-bg); }
.rz-btn--link:hover      { --rz-fg: var(--action-primary-bg-hover); }
.rz-btn--link:active     { --rz-fg: var(--teal-800); }
.rz-btn--base      { --rz-fg: var(--text-primary); }
.rz-btn--base:active     { --rz-bd: var(--text-primary); }

/* outline */
.rz-btn--outline { --rz-bg: transparent; }
.rz-btn--primary.rz-btn--outline   { --rz-bd: var(--action-primary-bg); --rz-fg: var(--action-primary-bg); }
.rz-btn--primary.rz-btn--outline:hover  { --rz-bg: var(--blue-100); --rz-fg: var(--background-brand); }
.rz-btn--primary.rz-btn--outline:active { --rz-bg: var(--blue-200); --rz-fg: var(--background-brand); }
.rz-btn--secondary.rz-btn--outline { --rz-bd: var(--action-secondary-bg); --rz-fg: var(--action-secondary-bg); }
.rz-btn--secondary.rz-btn--outline:hover, .rz-btn--secondary.rz-btn--outline:active { --rz-bg: var(--action-secondary-bg); --rz-fg: var(--text-inverse); }
.rz-btn--success.rz-btn--outline   { --rz-bd: var(--action-success-bg); --rz-fg: var(--action-success-bg); }
.rz-btn--success.rz-btn--outline:hover  { --rz-bg: var(--action-success-bg); --rz-fg: var(--text-inverse); }
.rz-btn--success.rz-btn--outline:active { --rz-bg: var(--green-700); --rz-bd: var(--green-700); --rz-fg: var(--text-inverse); }
.rz-btn--danger.rz-btn--outline    { --rz-bd: var(--action-danger-bg); --rz-fg: var(--action-danger-bg); }
.rz-btn--danger.rz-btn--outline:hover   { --rz-bg: var(--action-danger-bg); --rz-fg: var(--text-inverse); }
.rz-btn--danger.rz-btn--outline:active  { --rz-bg: var(--red-700); --rz-bd: var(--red-700); --rz-fg: var(--text-inverse); }
.rz-btn--warning.rz-btn--outline   { --rz-bd: var(--action-warning-bg); --rz-fg: var(--action-warning-bg); }
.rz-btn--warning.rz-btn--outline:hover  { --rz-bg: var(--action-warning-bg); --rz-fg: var(--text-primary); }
.rz-btn--warning.rz-btn--outline:active { --rz-bg: var(--yellow-600); --rz-bd: var(--yellow-600); --rz-fg: var(--text-primary); }

/* disabled */
.rz-btn:disabled { cursor: not-allowed; --rz-bg: var(--slate-300); --rz-bd: var(--slate-300); --rz-fg: var(--text-inverse); }
.rz-btn--outline:disabled, .rz-btn--base:disabled { --rz-bg: transparent; --rz-bd: var(--slate-300); --rz-fg: var(--slate-300); }
.rz-btn--link:disabled { --rz-bg: transparent; --rz-bd: transparent; --rz-fg: var(--slate-300); }

/* ---------- Badge ---------- */
.rz-badge { display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; border: 1px solid transparent;
  border-radius: var(--radius-pill); font-family: var(--font-sans); line-height: 1.3; white-space: nowrap; }
.rz-badge--small  { padding: var(--space-4) var(--space-6); font-size: 12px; }
.rz-badge--medium { padding: var(--space-4) var(--space-8); font-size: 14px; }
.rz-badge--large  { padding: var(--space-4) var(--space-12); font-size: 16px; }
.rz-badge--white  { background: var(--background-surface); border-color: var(--border-default); color: var(--text-primary); }
.rz-badge--black  { background: var(--icon-black); color: var(--text-inverse); }
.rz-badge--gray   { background: var(--background-surface-alt); color: var(--text-secondary); }
.rz-badge--brand  { background: var(--background-brand-light); color: var(--text-brand); }
.rz-badge--yellow { background: var(--state-warning-bg); color: var(--state-warning-text); }
.rz-badge--red    { background: var(--state-danger-bg); color: var(--state-danger-text); }
.rz-badge--green  { background: var(--state-success-bg); color: var(--state-success-text); }
.rz-badge--blue   { background: var(--state-info-bg); color: var(--state-info-text); }

/* ---------- Alert ---------- */
.rz-alert { position: relative; display: flex; align-items: flex-start; gap: var(--space-16); box-sizing: border-box;
  padding: var(--space-16); border: 1px solid var(--rz-accent); border-radius: var(--radius-lg); background: var(--rz-tint);
  overflow: hidden; font-family: var(--font-sans); }
.rz-alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rz-accent); }
.rz-alert--success { --rz-tint: var(--state-success-bg); --rz-accent: var(--state-success-border); --rz-ico: var(--state-success-text); }
.rz-alert--warning { --rz-tint: var(--state-warning-bg); --rz-accent: var(--state-warning-border); --rz-ico: var(--state-warning-text); }
.rz-alert--danger  { --rz-tint: var(--state-danger-bg);  --rz-accent: var(--state-danger-border);  --rz-ico: var(--state-danger-text); }
.rz-alert--info    { --rz-tint: var(--state-info-bg);    --rz-accent: var(--state-info-border);    --rz-ico: var(--state-info-text); }
.rz-alert__icon { color: var(--rz-ico); display: flex; }
.rz-alert__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.rz-alert__text { display: flex; flex-direction: column; gap: var(--space-4); }
.rz-alert__title { font-size: 16px; line-height: 1.3; color: var(--text-primary); }
.rz-alert__desc { font-size: 14px; line-height: 1.3; color: var(--text-secondary); }
.rz-alert__action { align-self: flex-start; padding: var(--space-4) 0; border: 0; background: none; font: inherit; font-size: 14px; line-height: 1.3;
  color: var(--action-primary-bg); text-decoration: underline; cursor: pointer; }
.rz-alert__action:hover { color: var(--action-primary-bg-hover); }
.rz-alert__close { display: flex; padding: var(--space-4); margin: calc(var(--space-4) * -1); border: 0; background: none; color: var(--icon-enable); cursor: pointer; border-radius: var(--radius-pill); }
.rz-alert__action:focus-visible, .rz-alert__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Input ---------- */
.rz-input { display: inline-flex; align-items: stretch; box-sizing: border-box; width: 100%; font-family: var(--font-sans); }
.rz-input__field { flex: 1; display: flex; align-items: center; gap: var(--space-8); min-width: 0; box-sizing: border-box;
  background: var(--background-surface); border: 1px solid var(--gray-400); color: var(--gray-900); cursor: text;
  transition: border-color .12s, box-shadow .12s; }
.rz-input__control { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; font: inherit; color: inherit; }
.rz-input__control::placeholder { color: var(--gray-600); }
.rz-input__affix { display: flex; color: var(--icon-enable); }
.rz-input__addon { display: flex; align-items: center; box-sizing: border-box; padding: var(--space-6) var(--space-12);
  background: var(--gray-200); border: 1px solid var(--gray-400); color: var(--gray-900); white-space: nowrap; }
.rz-input--small  .rz-input__field { height: 28px; padding: var(--space-4) var(--space-8); font-size: 14px; line-height: 1.3; }
.rz-input--medium .rz-input__field { height: 35px; padding: var(--space-6) var(--space-12); font-size: 16px; line-height: 1.3; }
.rz-input--large  .rz-input__field { height: 44px; padding: var(--space-8) var(--space-16); font-size: 20px; line-height: 1.3; }
.rz-input--small  .rz-input__addon { font-size: 12px; }
.rz-input--medium .rz-input__addon { font-size: 16px; }
.rz-input--large  .rz-input__addon { font-size: 20px; }
.rz-input--small  { --rz-r: var(--radius-sm); }
.rz-input--medium { --rz-r: var(--radius-md); }
.rz-input--large  { --rz-r: var(--radius-lg); }
.rz-input > :first-child { border-top-left-radius: var(--rz-r); border-bottom-left-radius: var(--rz-r); }
.rz-input > :last-child { border-top-right-radius: var(--rz-r); border-bottom-right-radius: var(--rz-r); }
.rz-input.has-before .rz-input__field { border-left: 0; }
.rz-input.has-after .rz-input__field { border-right: 0; }
.rz-input__field:focus-within, .rz-input.is-focused .rz-input__field { border-color: var(--blue-400); box-shadow: var(--focus-ring); position: relative; z-index: 1; }
.rz-input--valid .rz-input__field { border-color: var(--green-500); }
.rz-input--valid .rz-input__field:focus-within, .rz-input--valid.is-focused .rz-input__field { border-color: var(--green-500); box-shadow: var(--focus-ring-valid); }
.rz-input--invalid .rz-input__field { border-color: var(--red-500); }
.rz-input--invalid .rz-input__field:focus-within, .rz-input--invalid.is-focused .rz-input__field { border-color: var(--red-500); box-shadow: var(--focus-ring-invalid); }
.rz-input.is-disabled .rz-input__field { background: var(--gray-200); cursor: not-allowed; }
.rz-input.is-disabled .rz-input__control { cursor: not-allowed; }

/* ---------- Avatar ---------- */
.rz-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
  font-family: var(--font-sans); font-weight: 400; color: var(--teal-800); background: var(--background-brand-light); }
.rz-avatar--circle { border-radius: 50%; }
.rz-avatar--square { border-radius: var(--radius-md); }
.rz-avatar--small  { width: 24px; height: 24px; font-size: 14px; }
.rz-avatar--medium { width: 32px; height: 32px; font-size: 14px; }
.rz-avatar--large  { width: 40px; height: 40px; font-size: 16px; }
.rz-avatar--custom { width: 64px; height: 64px; font-size: 20px; }
.rz-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.rz-avatar--icon { background: var(--gray-500); color: var(--text-inverse); }
.rz-avatar__text { line-height: 1; text-transform: uppercase; }
.rz-avatar__dot { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border: 2px solid var(--background-surface); border-radius: 50%; background: var(--red-500); }
.rz-avatar__count { position: absolute; top: -8px; right: -12px; min-width: 20px; height: 20px; padding: 0 var(--space-6); box-sizing: border-box;
  border: 2px solid var(--background-surface); border-radius: var(--radius-pill); background: var(--red-500); color: var(--text-inverse);
  font-size: 12px; line-height: 16px; text-align: center; }
.rz-avatar-group { display: inline-flex; align-items: center; }
.rz-avatar-group > .rz-avatar { box-shadow: 0 0 0 2px var(--background-surface); }
.rz-avatar-group > .rz-avatar + .rz-avatar { margin-left: -8px; }
.rz-avatar--more { background: var(--background-brand-light); color: var(--teal-800); }

/* ---------- Card ---------- */
.rz-card { display: flex; box-sizing: border-box; padding: var(--space-24); background: var(--background-surface);
  border: 1px solid var(--border-thin); border-radius: var(--radius-card); font-family: var(--font-sans); }
.rz-card--vertical { flex-direction: column; gap: 17px; /* file literal */ }
.rz-card--horizontal { flex-direction: row; align-items: center; gap: var(--space-24); }
.rz-card__content { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.rz-card__title { font-size: 24px; line-height: 1; font-weight: 700; color: var(--text-primary); }
.rz-card__label { font-size: 12px; line-height: 1.3; color: var(--text-secondary); }
.rz-card__desc { font-size: 16px; line-height: 1.3; color: var(--text-primary); }

/* ---------- FeedCard ---------- */
.rz-feed { box-sizing: border-box; width: 100%; background: var(--background-surface); border: 1px solid var(--border-thin);
  border-radius: var(--radius-card); overflow: hidden; font-family: var(--font-sans); color: var(--text-primary); }
.rz-feed__header { display: flex; align-items: center; gap: 19px; /* file literal */ padding: var(--space-16); border-bottom: 1px solid var(--border-thin); }
.rz-feed__header--announce { gap: var(--space-12); }
.rz-feed__badge { width: 72px; height: 72px; flex: none; border-radius: 50%; overflow: hidden; background: var(--background-brand-light); }
.rz-feed__badge img { width: 100%; height: 100%; object-fit: cover; }
.rz-feed__headtext { display: flex; flex-direction: column; gap: var(--space-8); }
.rz-feed__title { font-size: 20px; line-height: 1; font-weight: 700; }
.rz-feed__title--announce { font-weight: 400; }
.rz-feed__user { display: flex; align-items: center; gap: 9px; /* file literal */ }
.rz-feed__username { font-size: 16px; line-height: 1.3; }
.rz-feed__content { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); }
.rz-feed__message { font-size: 20px; line-height: 1.3; }
.rz-feed__message--announce { font-size: 16px; }
.rz-feed__image { border-radius: var(--radius-lg); overflow: hidden; }
.rz-feed__image img { display: block; width: 100%; height: 240px; object-fit: cover; }
.rz-feed__meta { display: flex; align-items: center; gap: var(--space-20); }
.rz-feed__sender { font-size: 14px; line-height: 1.3; color: var(--text-brand); text-decoration: none; }
.rz-feed__sender:hover { text-decoration: underline; }
.rz-feed__time { padding: var(--space-2) var(--space-8); border-radius: var(--radius-pill); background: var(--background-surface-alt);
  font-size: 12px; line-height: 1.3; color: var(--text-secondary); }
.rz-feed__comments { display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-16); border-top: 1px solid var(--border-thin); }
.rz-feed__comment-field { padding: 0 var(--space-8); border: 1px solid var(--border-thin); border-radius: var(--radius-card); background: var(--background-surface); }
.rz-feed__comment-field input { width: 100%; box-sizing: border-box; padding: var(--space-10); border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text-primary); }
.rz-feed__comment-field input::placeholder { color: var(--text-muted); }
.rz-feed__comment-field:focus-within { border-color: var(--blue-400); box-shadow: var(--focus-ring); }
.rz-feed__comment { display: flex; align-items: flex-start; gap: var(--space-16); }
.rz-feed__comment .rz-feed__comment-avatar { width: 28px; height: 28px; font-size: 12px; }
.rz-feed__comment-col { display: flex; flex-direction: column; gap: var(--space-4); }
.rz-feed__bubble { display: flex; align-items: flex-start; gap: var(--space-8); padding: var(--space-10) var(--space-16);
  border: 1px solid var(--border-thin); border-radius: var(--radius-md); background: var(--background-surface); }
.rz-feed__bubble-text { display: flex; flex-direction: column; gap: var(--space-8); }
.rz-feed__comment-author { font-size: 12px; line-height: 1.26; font-weight: 700; color: var(--text-brand); }
.rz-feed__comment-text { font-size: 16px; line-height: 1.3; }
.rz-feed__more { display: flex; padding: 0; border: 0; background: none; color: var(--icon-black); cursor: pointer; }
.rz-feed__comment-time { font-size: 12px; line-height: 1.3; color: var(--text-secondary); }
.rz-feed__reactions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); padding: var(--space-16); border-top: 1px solid var(--border-thin); }
.rz-feed__reaction-group { display: flex; align-items: center; gap: var(--space-20); }
.rz-feed__react { display: flex; padding: 0; border: 0; background: none; color: var(--icon-enable); cursor: pointer; }
.rz-feed__pills { display: flex; gap: var(--space-10); }
.rz-feed__pill { padding: var(--space-4) var(--space-12); border: 0; border-radius: var(--radius-pill); background: var(--background-surface-alt);
  font: inherit; font-size: 16px; line-height: 1.3; color: var(--text-secondary); cursor: pointer; }
.rz-feed__like { display: flex; align-items: center; gap: var(--space-10); padding: 0; border: 0; background: none; font: inherit; font-size: 14px; line-height: 1.3; color: var(--text-primary); cursor: pointer; }
.rz-feed__like-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; box-sizing: border-box;
  border: 1px solid #e2e8f0; /* file literal */ border-radius: 50%; background: var(--background-surface); color: var(--icon-enable); }
.rz-feed__like.is-liked .rz-feed__like-icon { border-color: transparent; background: var(--background-brand-light); color: var(--icon-brand); }
.rz-feed button:focus-visible, .rz-feed__sender:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-pill); }

/* ---------- preview helpers ---------- */
.rz-demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); padding: var(--space-16); }
.rz-demo--col { flex-direction: column; align-items: stretch; }
.rz-demo__label { width: 100%; font-size: 12px; line-height: 1.3; color: var(--text-secondary); }

/* ---------- Accordion ---------- */
.rz-accordion { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; font-family: var(--font-sans); }
.rz-accordion__item { box-sizing: border-box; border: 1px solid var(--border-default); background: var(--background-surface); }
.rz-accordion__item + .rz-accordion__item { margin-top: -1px; }
.rz-accordion__item:first-child { border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); }
.rz-accordion__item:last-child { border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }
.rz-accordion__heading { margin: 0; font: inherit; }
.rz-accordion__header {
  display: flex; align-items: center; gap: var(--space-8); box-sizing: border-box; width: 100%;
  padding: var(--space-16) var(--space-20); border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: 16px; line-height: 1.3; font-weight: 400; color: var(--gray-900);
}
.rz-accordion__item:first-child .rz-accordion__header { border-top-left-radius: calc(var(--radius-xl) - 1px); border-top-right-radius: calc(var(--radius-xl) - 1px); }
.rz-accordion__item:last-child:not(.is-open) .rz-accordion__header { border-bottom-left-radius: calc(var(--radius-xl) - 1px); border-bottom-right-radius: calc(var(--radius-xl) - 1px); }
.rz-accordion__title { flex: 1; min-width: 0; }
.rz-accordion__caret { color: var(--icon-black); }
.rz-accordion__header:focus-visible { outline: none; box-shadow: var(--focus-ring); position: relative; z-index: 1; }
.rz-accordion__item.is-open .rz-accordion__header { background: var(--background-brand); color: var(--text-inverse); border-bottom: 1px solid var(--border-default); }
.rz-accordion__item.is-open .rz-accordion__caret { color: var(--icon-inverse); }
.rz-accordion__item.is-disabled .rz-accordion__header { color: var(--text-secondary); cursor: not-allowed; }
.rz-accordion__item.is-disabled .rz-accordion__caret { color: var(--icon-enable); }
.rz-accordion__body { padding: var(--space-16) var(--space-20); font-size: 16px; line-height: 1.3; color: var(--text-primary); }
.rz-accordion__item:last-child .rz-accordion__body { border-bottom-left-radius: calc(var(--radius-xl) - 1px); border-bottom-right-radius: calc(var(--radius-xl) - 1px); }

/* ---------- Breadcrumb ---------- */
.rz-breadcrumb { box-sizing: border-box; padding-bottom: var(--space-16); font-family: var(--font-sans); }
.rz-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.rz-breadcrumb__item { display: flex; align-items: center; }
.rz-breadcrumb__link, .rz-breadcrumb__current { display: inline-flex; align-items: center; gap: var(--space-4); font-size: 16px; line-height: 1.3; }
.rz-breadcrumb__link { color: var(--text-brand); text-decoration: none; border-radius: var(--radius-sm); }
.rz-breadcrumb__link--home .rz-breadcrumb__text { text-decoration: underline; }
.rz-breadcrumb__link:hover .rz-breadcrumb__text { color: var(--text-link); text-decoration: underline; }
.rz-breadcrumb__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rz-breadcrumb__ellipsis { cursor: default; }
.rz-breadcrumb__home { color: var(--icon-brand); }
.rz-breadcrumb__current { color: var(--text-secondary); }
.rz-breadcrumb__current .rz-breadcrumb__home { color: var(--icon-enable); }
.rz-breadcrumb__sep { display: flex; align-items: center; box-sizing: border-box; height: 24px; color: var(--text-secondary); }
.rz-breadcrumb__sep--text { padding: 0 var(--space-8); font-size: 16px; line-height: 1.5; /* Body/Regular: 16 / 150% */ }
.rz-breadcrumb__sep--icon { padding: var(--space-4) var(--space-8) 0; color: var(--icon-black); }
.rz-breadcrumb__sep--none { width: 8px; padding: var(--space-4); }

/* ---------- ButtonGroup ---------- */
.rz-button-group { display: inline-flex; align-items: stretch; }
.rz-button-group--horizontal { flex-direction: row; }
.rz-button-group--vertical { flex-direction: column; }
/* gap -1 in the file: neighbours share one border line */
.rz-button-group--horizontal > .rz-btn + .rz-btn { margin-left: -1px; }
.rz-button-group--vertical > .rz-btn + .rz-btn { margin-top: -1px; }
.rz-button-group > .rz-btn { position: relative; border-radius: 0; }
.rz-button-group > .rz-btn:hover, .rz-button-group > .rz-btn:focus-visible { z-index: 1; }
/* horizontal ends are pill-shaped (99px), vertical ends use a 16px radius */
.rz-button-group--horizontal > .rz-btn:first-child { border-top-left-radius: var(--radius-pill); border-bottom-left-radius: var(--radius-pill); }
.rz-button-group--horizontal > .rz-btn:last-child { border-top-right-radius: var(--radius-pill); border-bottom-right-radius: var(--radius-pill); }
.rz-button-group--vertical > .rz-btn:first-child { border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); }
.rz-button-group--vertical > .rz-btn:last-child { border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }

/* ---------- Carousel ---------- */
.rz-carousel { position: relative; display: flex; flex-direction: column; width: 100%; font-family: var(--font-sans); color: var(--text-primary); outline: none; }
.rz-carousel__viewport { overflow: hidden; }
.rz-carousel__track { display: flex; gap: var(--space-20); transition: transform .35s ease; }
.rz-carousel__slide { flex: 0 0 100%; display: flex; flex-direction: column; gap: var(--space-16); box-sizing: border-box; min-width: 0;
  padding: var(--space-16); background: var(--background-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.rz-carousel__media { position: relative; aspect-ratio: 568 / 300; /* file literal */ border-radius: 10px; /* file literal */ overflow: hidden; background: var(--gray-600); }
.rz-carousel__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rz-carousel__label { position: absolute; left: var(--space-8); bottom: var(--space-8); }
.rz-carousel__content { display: flex; align-items: center; gap: var(--space-16); }
.rz-carousel__caption { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-10); }
.rz-carousel__title { font-size: 18px; line-height: 1; font-weight: 700; color: var(--text-primary); }
.rz-carousel__text { font-size: 14px; line-height: 1.3; color: var(--text-primary); }
.rz-carousel__content .rz-btn { flex: none; }

/* _carousel-nav: a 112px hit area with a 14x26 chevron at 50% opacity, 90% on hover */
.rz-carousel__nav { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 112px; /* file literal */
  padding: 0; border: 0; background: transparent; cursor: pointer; opacity: .5; transition: opacity .12s; }
.rz-carousel__nav--prev { left: 0; }
.rz-carousel__nav--next { right: 0; }
.rz-carousel__nav--light { color: var(--white); }
.rz-carousel__nav--dark { color: var(--gray-900); }
.rz-carousel__nav:hover, .rz-carousel__nav:focus-visible { opacity: .9; }
.rz-carousel__nav:focus-visible { outline: none; }
.rz-carousel__nav:focus-visible .rz-icon { border-radius: var(--radius-md); box-shadow: var(--focus-ring); }

/* _carousel-indicators (Dark=true): 30px bars, 3px tall, gap 6 */
.rz-carousel__indicators { display: flex; justify-content: center; gap: var(--space-6); }
.rz-carousel__indicator { display: flex; align-items: center; width: 30px; /* file literal */ padding: var(--space-10) 0; border: 0; background: transparent; cursor: pointer; }
.rz-carousel__bar { display: block; width: 100%; height: 3px; /* file literal */ border-radius: var(--radius-pill); background: var(--gray-800); opacity: .5; transition: opacity .12s; }
.rz-carousel__indicator.is-active .rz-carousel__bar { opacity: 1; }
.rz-carousel__indicator:focus-visible { outline: none; }
.rz-carousel__indicator:focus-visible .rz-carousel__bar { box-shadow: var(--focus-ring); }

/* ---------- Checkbox ---------- */
.rz-checkbox {
  --rz-cb-on: var(--background-brand); --rz-cb-bd: var(--border-default); --rz-cb-focus-bd: var(--blue-300);
  --rz-cb-ring: 0 0 0 4px rgba(8, 143, 143, 0.24); /* file literal: teal-600 at 24% */
  display: inline-flex; align-items: center; gap: var(--space-8); vertical-align: middle; cursor: pointer;
  font-family: var(--font-sans); font-size: 16px; line-height: 1.3; font-weight: 400; color: var(--gray-900);
}
.rz-checkbox.is-reverse { flex-direction: row-reverse; }
.rz-checkbox--valid { --rz-cb-on: var(--green-500); --rz-cb-bd: var(--green-500); --rz-cb-focus-bd: var(--green-500);
  --rz-cb-ring: 0 0 0 4px rgba(8, 131, 37, 0.24); /* file literal: green-500 at 24% */ color: var(--green-500); }
.rz-checkbox--invalid { --rz-cb-on: var(--red-500); --rz-cb-bd: var(--red-500); --rz-cb-focus-bd: var(--red-500);
  --rz-cb-ring: 0 0 0 4px rgba(195, 14, 14, 0.24); /* file literal: red-600 at 24% */ color: var(--red-500); }
.rz-checkbox__wrap { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 21px; }
.rz-checkbox__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.rz-checkbox__box { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 16px; height: 16px; border: 1px solid var(--rz-cb-bd); border-radius: var(--radius-sm);
  background: var(--background-page); color: var(--white); transition: background-color .12s, border-color .12s, box-shadow .12s; }
.rz-checkbox__box::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--black); opacity: 0; pointer-events: none; }
.rz-checkbox.is-on .rz-checkbox__box { background: var(--rz-cb-on); border-color: var(--rz-cb-on); }
.rz-checkbox__check { position: absolute; top: -1px; left: -1px; }
.rz-checkbox__bar { width: 8px; height: 2px; background: currentColor; }
.rz-checkbox__input:focus-visible + .rz-checkbox__box, .rz-checkbox.is-focused .rz-checkbox__box { box-shadow: var(--rz-cb-ring); }
.rz-checkbox__input:focus-visible + .rz-checkbox__box::after, .rz-checkbox.is-focused .rz-checkbox__box::after { opacity: .1; }
.rz-checkbox:not(.is-on) .rz-checkbox__input:focus-visible + .rz-checkbox__box,
.rz-checkbox.is-focused:not(.is-on) .rz-checkbox__box { background: var(--white); border-color: var(--rz-cb-focus-bd); }
.rz-checkbox.is-disabled { cursor: not-allowed; }
.rz-checkbox.is-disabled .rz-checkbox__box, .rz-checkbox.is-disabled .rz-checkbox__label { opacity: .5; }

.rz-checkbox-group { display: flex; font-family: var(--font-sans); }
.rz-checkbox-group--horizontal { flex-wrap: wrap; align-items: center; gap: var(--space-16); }
.rz-checkbox-group--vertical { flex-direction: column; align-items: flex-start; gap: var(--space-6); }

/* ---------- CloseButton ---------- */
.rz-close-button {
  display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
  width: 24px; height: 24px; padding: var(--space-4); border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--icon-black); cursor: pointer; transition: box-shadow .12s;
}
.rz-close-button--white { color: var(--icon-inverse); }
/* the file fades the whole control: 50% normal, 75% hovered, 100% pressed, 25% disabled */
.rz-close-button .rz-icon { opacity: .5; transition: opacity .12s; }
.rz-close-button:hover .rz-icon { opacity: .75; }
.rz-close-button:active .rz-icon { opacity: 1; }
.rz-close-button:active { box-shadow: 0 0 0 4px rgba(20, 105, 166, 0.24); /* file literal: blue-500 at 24% */ }
.rz-close-button--white:active { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2); /* file literal */ }
.rz-close-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rz-close-button--white:focus-visible { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2); /* file literal: the white pressed ring, visible on dark fills */ }
.rz-close-button:disabled { cursor: not-allowed; box-shadow: none; }
.rz-close-button:disabled .rz-icon { opacity: .25; }

/* ---------- Collapse ---------- */
.rz-collapse { display: flex; flex-direction: column; gap: var(--space-16); box-sizing: border-box; width: 424px; /* file literal */ max-width: 100%; font-family: var(--font-sans); }
.rz-collapse__triggers { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-8); }
/* The file's trigger instance is a large primary button with body-xl text and 16px side padding. */
.rz-btn.rz-collapse__trigger { padding: var(--space-8) var(--space-16); font-size: 20px; line-height: 1.3; }
.rz-collapse__trigger.is-open { --rz-bg: var(--action-primary-bg-hover); --rz-bd: var(--action-primary-bg); }
.rz-collapse__panel { box-sizing: border-box; min-width: 0; padding: var(--space-16); border: 1px solid var(--border-default); border-radius: var(--radius-xl);
  background: var(--background-page); font-size: 16px; line-height: 1.3; color: var(--gray-900); white-space: pre-line; }
.rz-collapse__panel[hidden] { display: none; }

/* ---------- DatePicker ---------- */
.rz-datepicker { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; width: 250px; /* file literal */
  font-family: var(--font-sans); color: var(--gray-900); vertical-align: top; }

/* ---- field: white pill, 1px gray-400 border ---- */
.rz-datepicker__field { display: flex; align-items: center; gap: var(--space-4); box-sizing: border-box; width: 100%; margin: 0;
  background: var(--background-surface); border: 1px solid var(--gray-400); color: var(--gray-900); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, box-shadow .12s; }
.rz-datepicker--small  .rz-datepicker__field { height: 28px; padding: var(--space-4) var(--space-8);  border-radius: var(--radius-xl); font-size: 14px; line-height: 1.3; }
.rz-datepicker--medium .rz-datepicker__field { height: 35px; padding: var(--space-6) var(--space-12); border-radius: var(--radius-card); font-size: 16px; line-height: 1.3; }
.rz-datepicker--large  .rz-datepicker__field { height: 44px; padding: var(--space-8) var(--space-16); border-radius: 24px; /* file literal */ font-size: 20px; line-height: 1.3; }
.rz-datepicker__values { flex: 1; display: flex; align-items: center; min-width: 0; }
.rz-datepicker__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-datepicker__value.is-placeholder { color: #6c757d; /* file literal */ }
.rz-datepicker__sep { flex: none; display: flex; padding: 1px var(--space-8); /* file literal */ color: var(--gray-900); }
.rz-datepicker__affix { flex: none; display: flex; color: #6c757d; /* file literal */ }

.rz-datepicker__field:focus-visible, .rz-datepicker.is-open .rz-datepicker__field, .rz-datepicker.is-focused .rz-datepicker__field {
  outline: none; border-color: var(--blue-300); box-shadow: 0 0 0 4px rgba(20, 105, 166, 0.25); /* file literal */ }
.rz-datepicker--valid .rz-datepicker__field { border-color: var(--green-500); }
.rz-datepicker--valid .rz-datepicker__field:focus-visible, .rz-datepicker--valid.is-open .rz-datepicker__field, .rz-datepicker--valid.is-focused .rz-datepicker__field {
  border-color: var(--green-500); box-shadow: var(--focus-ring-valid); }
.rz-datepicker--invalid .rz-datepicker__field { border-color: var(--red-500); }
.rz-datepicker--invalid .rz-datepicker__field:focus-visible, .rz-datepicker--invalid.is-open .rz-datepicker__field, .rz-datepicker--invalid.is-focused .rz-datepicker__field {
  border-color: var(--red-500); box-shadow: var(--focus-ring-invalid); }
.rz-datepicker.is-disabled .rz-datepicker__field { background: var(--gray-200); cursor: not-allowed; }

/* ---- panel: white, 0 8 16 shadow, 7px arrow gap above ---- */
.rz-datepicker__panel { position: absolute; top: 100%; left: 0; z-index: 20; box-sizing: border-box; width: 280px; /* file literal */ margin-top: 7px; /* file literal */
  background: var(--background-surface); border-radius: var(--radius-xl); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* file literal */ font-size: 14px; line-height: 1.3; }
.rz-datepicker__panel.is-inline { position: relative; top: auto; left: auto; }
.rz-datepicker.has-inline { width: auto; }
.rz-datepicker.has-inline .rz-datepicker__field { width: 250px; /* file literal */ }
.rz-datepicker__panel--range { width: 560px; /* file literal */ }
.rz-datepicker__arrow { position: absolute; top: -7px; left: var(--space-20); width: 14px; height: 7px; background: var(--background-surface);
  clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rz-datepicker__panes { display: flex; }
.rz-datepicker__pane { flex: 1; min-width: 0; }

.rz-datepicker__header { display: flex; align-items: center; height: 40px; padding: 0 var(--space-8); border-bottom: 1px solid var(--border-default); }
.rz-datepicker__nav { display: flex; width: 44px; }
.rz-datepicker__nav--end { justify-content: flex-end; }
.rz-datepicker__navbtn { display: flex; align-items: center; justify-content: center; width: 22px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--gray-400); cursor: pointer; }
.rz-datepicker__navbtn:hover { color: var(--gray-700); }
.rz-datepicker__view { flex: 1; display: flex; justify-content: center; gap: var(--space-8); color: var(--gray-900); }

/* day grid: 7 columns, 30px weekday row, 38px day rows, 32px round cells */
.rz-datepicker__body { padding: var(--space-8) var(--space-12); }
.rz-datepicker__grid { display: flex; flex-direction: column; }
.rz-datepicker__row { display: grid; grid-template-columns: repeat(7, 1fr); padding: 3px 0; /* file literal */ }
.rz-datepicker__row--head { padding: 0; }
.rz-datepicker__weekday { display: flex; align-items: center; justify-content: center; height: 30px; color: var(--gray-900); }
.rz-datepicker__cell { position: relative; display: flex; justify-content: center; }
.rz-datepicker__cell.is-in-range::before, .rz-datepicker__cell.is-range-start::before, .rz-datepicker__cell.is-range-end::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--blue-100); }
.rz-datepicker__cell.is-range-start::before { left: 50%; }
.rz-datepicker__cell.is-range-end::before { right: 50%; }
.rz-datepicker__cell.is-disabled::before { content: ""; position: absolute; inset: 0; background: var(--gray-300); }
.rz-datepicker__day { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 32px; height: 32px; padding: 1px 7px; /* file literal */
  border: 1px solid transparent; border-radius: var(--radius-card); background: transparent; font: inherit; color: var(--gray-900); cursor: pointer; }
.rz-datepicker__day.is-outside { color: var(--gray-500); }
.rz-datepicker__day:hover { background: var(--gray-300); }
.rz-datepicker__day.is-today { border-color: var(--background-brand); }
.rz-datepicker__day.is-selected { background: var(--blue-600); border-color: var(--blue-600); color: var(--text-inverse); }
.rz-datepicker__day:disabled { color: var(--gray-500); background: transparent; cursor: not-allowed; }
.rz-datepicker__day:focus-visible, .rz-datepicker__chip:focus-visible, .rz-datepicker__navbtn:focus-visible, .rz-datepicker__today:focus-visible {
  outline: none; box-shadow: var(--focus-ring); }

/* month / year / quarter chips */
.rz-datepicker__body--cells { padding: var(--space-8) 14px; /* file literal */ }
.rz-datepicker__cells { display: grid; justify-items: center; }
.rz-datepicker__cells--month, .rz-datepicker__cells--year { grid-template-columns: repeat(3, 1fr); row-gap: 40px; /* file literal */ padding: var(--space-20) 0; }
.rz-datepicker__cells--quarter { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); padding: var(--space-12) 0; }
.rz-datepicker__chip { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 60px; height: 24px; padding: 0 var(--space-8);
  border: 0; border-radius: var(--radius-card); background: transparent; font: inherit; color: var(--gray-900); cursor: pointer; }
.rz-datepicker__cells--quarter .rz-datepicker__chip { width: 100%; height: 32px; }
.rz-datepicker__chip.is-outside { color: var(--gray-400); }
.rz-datepicker__chip:hover { background: var(--gray-300); }
.rz-datepicker__chip.is-selected { background: var(--blue-600); color: var(--text-inverse); }

.rz-datepicker__footer { display: flex; justify-content: center; padding: var(--space-10) 0; border-top: 1px solid var(--border-default); }
.rz-datepicker__today { padding: var(--space-4) var(--space-8); border: 0; border-radius: var(--radius-pill); background: transparent; font: inherit; color: var(--text-brand); cursor: pointer; }
.rz-datepicker__today:hover { color: var(--text-link); text-decoration: underline; }

/* ---------- Dropdown ---------- */
.rz-dropdown { position: relative; display: inline-flex; font-family: var(--font-sans); }
.rz-dropdown__split { display: inline-flex; }
.rz-dropdown__split > .rz-btn + .rz-btn { margin-left: -1px; }
.rz-dropdown__split > .rz-btn:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.rz-dropdown__split > .rz-btn:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.rz-dropdown__caret { padding: 0; }
.rz-dropdown__caret.rz-btn--small { width: 28px; }
.rz-dropdown__caret.rz-btn--medium { width: 35px; }
.rz-dropdown__caret.rz-btn--large { width: 48px; }

/* menu panel: floats next to the trigger; .rz-dropdown--inline keeps it in normal flow */
.rz-dropdown__menu { position: absolute; z-index: 1000; box-sizing: border-box; min-width: 162px; /* file literal: 160px list + 1px border each side */
  padding: var(--space-8) 0; background: var(--background-surface); border: 1px solid rgba(0, 0, 0, 0.15); /* file literal */
  border-radius: 12px; /* file literal */ }
.rz-dropdown--down  > .rz-dropdown__menu { top: calc(100% + var(--space-8)); left: 0; }
.rz-dropdown--up    > .rz-dropdown__menu { bottom: calc(100% + var(--space-8)); left: 0; }
.rz-dropdown--right > .rz-dropdown__menu { left: calc(100% + var(--space-8)); top: 0; }
.rz-dropdown--left  > .rz-dropdown__menu { right: calc(100% + var(--space-8)); top: 0; }

.rz-dropdown--inline { align-items: flex-start; }
.rz-dropdown--inline.rz-dropdown--down  { flex-direction: column; }
.rz-dropdown--inline.rz-dropdown--up    { flex-direction: column-reverse; }
.rz-dropdown--inline.rz-dropdown--right { flex-direction: row; }
.rz-dropdown--inline.rz-dropdown--left  { flex-direction: row-reverse; }
.rz-dropdown--inline > .rz-dropdown__menu { position: relative; inset: auto; }
.rz-dropdown--inline.rz-dropdown--down  > .rz-dropdown__menu { margin-top: var(--space-8); }
.rz-dropdown--inline.rz-dropdown--up    > .rz-dropdown__menu { margin-bottom: var(--space-8); }
.rz-dropdown--inline.rz-dropdown--right > .rz-dropdown__menu { margin-left: var(--space-8); }
.rz-dropdown--inline.rz-dropdown--left  > .rz-dropdown__menu { margin-right: var(--space-8); }

.rz-dropdown__list { list-style: none; margin: 0; padding: 0; outline: none; }

.rz-dropdown__item { display: flex; align-items: center; gap: var(--space-8); width: 100%; box-sizing: border-box;
  padding: var(--space-4) var(--space-16); border: 0; background: transparent; text-align: left; cursor: pointer;
  font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.3; color: var(--gray-900); white-space: nowrap; }
.rz-dropdown__item-main { flex: 1; display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.rz-dropdown__item-extra { display: flex; align-items: center; }
.rz-dropdown__item:hover { background: var(--background-page); }
.rz-dropdown__item:focus-visible { outline: none; background: var(--background-page); box-shadow: inset var(--focus-ring); }
.rz-dropdown__item.is-active { background: var(--background-brand); color: var(--text-inverse); }
.rz-dropdown__item:disabled { background: transparent; color: rgba(33, 37, 41, 0.5); /* file literal: gray-900 at 50% */ cursor: not-allowed; }

.rz-dropdown__header { padding: var(--space-8) var(--space-16); font-size: 14px; line-height: 1.3; color: #6c757d; /* file literal */ white-space: nowrap; }
.rz-dropdown__divider { padding: var(--space-8) 0; }
.rz-dropdown__divider::before { content: ""; display: block; height: 1px; background: rgba(0, 0, 0, 0.18); /* file literal */ }

/* optional pointer: 12x6, centered 22px from the menu's edge */
.rz-dropdown__menu.has-arrow::before, .rz-dropdown__menu.has-arrow::after { content: ""; position: absolute; width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent; }
.rz-dropdown__menu--top-left::before, .rz-dropdown__menu--top-center::before, .rz-dropdown__menu--top-right::before { top: -7px; border-bottom: 6px solid rgba(0, 0, 0, 0.15); }
.rz-dropdown__menu--top-left::after, .rz-dropdown__menu--top-center::after, .rz-dropdown__menu--top-right::after { top: -5px; border-bottom: 6px solid var(--background-surface); }
.rz-dropdown__menu--bottom-left::before, .rz-dropdown__menu--bottom-center::before, .rz-dropdown__menu--bottom-right::before { bottom: -7px; border-top: 6px solid rgba(0, 0, 0, 0.15); }
.rz-dropdown__menu--bottom-left::after, .rz-dropdown__menu--bottom-center::after, .rz-dropdown__menu--bottom-right::after { bottom: -5px; border-top: 6px solid var(--background-surface); }
.rz-dropdown__menu--top-left::before, .rz-dropdown__menu--top-left::after, .rz-dropdown__menu--bottom-left::before, .rz-dropdown__menu--bottom-left::after { left: 15px; /* 22px centre, less half the 12px arrow, less the border */ }
.rz-dropdown__menu--top-right::before, .rz-dropdown__menu--top-right::after, .rz-dropdown__menu--bottom-right::before, .rz-dropdown__menu--bottom-right::after { right: 15px; }
.rz-dropdown__menu--top-center::before, .rz-dropdown__menu--top-center::after, .rz-dropdown__menu--bottom-center::before, .rz-dropdown__menu--bottom-center::after { left: calc(50% - 6px); }

/* ---------- FloatingLabel ---------- */
.rz-fl { --rz-fl-bd: var(--gray-400); --rz-fl-ring: var(--focus-ring); --rz-fl-focus-bd: var(--blue-400);
  position: relative; box-sizing: border-box; width: 100%; font-family: var(--font-sans); }
.rz-fl--valid { --rz-fl-bd: var(--green-500); --rz-fl-ring: var(--focus-ring-valid); --rz-fl-focus-bd: var(--green-500); }
.rz-fl--invalid { --rz-fl-bd: var(--red-500); --rz-fl-ring: var(--focus-ring-invalid); --rz-fl-focus-bd: var(--red-500); }

.rz-fl__field { position: relative; display: flex; align-items: center; box-sizing: border-box; width: 100%;
  background: var(--background-surface); border: 1px solid var(--rz-fl-bd); color: var(--gray-900);
  transition: border-color .12s, box-shadow .12s; }
.rz-fl__field:focus-within, .rz-fl.is-focused .rz-fl__field { border-color: var(--rz-fl-focus-bd); box-shadow: var(--rz-fl-ring); }
.rz-fl.is-disabled .rz-fl__field { background: var(--gray-200); cursor: not-allowed; }

.rz-fl__control { display: block; box-sizing: border-box; min-width: 0; margin: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; line-height: 1.3; font-weight: 400; color: inherit; }
.rz-fl__control:disabled { cursor: not-allowed; }

/* label: 16px resting inside the field, 12px floated above the value; gray-900 at 65% */
.rz-fl__label { position: absolute; top: 17px; left: 12px; z-index: 1; max-width: calc(100% - 64px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 16px; line-height: 1.3; font-weight: 400; color: var(--gray-900); opacity: .65; cursor: text;
  transition: top .12s, left .12s, font-size .12s; }
.rz-fl.is-floated .rz-fl__label { top: 9px; left: 13px; font-size: 12px; }
.rz-fl.is-disabled .rz-fl__label { cursor: not-allowed; }

/* input: 54px pill */
.rz-fl--input .rz-fl__field, .rz-fl--select .rz-fl__field { height: 54px; padding: 0 var(--space-12); border-radius: var(--radius-pill); }
.rz-fl--input .rz-fl__control { flex: 1; height: 100%; padding: 22px 0 9px; /* file literal: value sits 22px below the top edge */ }
.rz-fl__clear { display: flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; margin-left: var(--space-8); padding: 0;
  border: 0; border-radius: 50%; background: none; color: #6c757d; /* file literal */ cursor: pointer; }
.rz-fl__clear:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rz-fl__clear:disabled { cursor: not-allowed; }
.rz-fl__status { display: flex; flex: none; }
.rz-fl--valid .rz-fl__status { color: var(--green-500); }
.rz-fl--invalid .rz-fl__status { color: var(--red-500); }
.rz-fl--input .rz-fl__status { margin-left: var(--space-4); }
.rz-fl--input.is-floated .rz-fl__clear { align-self: flex-end; margin-bottom: 12px; /* file literal */ }
.rz-fl--input.is-floated .rz-fl__status { align-self: flex-end; margin-bottom: var(--space-10); }

/* select: native select under the icons */
.rz-fl--select .rz-fl__field { justify-content: flex-end; }
.rz-fl--select .rz-fl__control { position: absolute; inset: 0; width: 100%; padding: 22px 32px 9px var(--space-12); border-radius: inherit;
  -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; }
.rz-fl--select.has-status .rz-fl__control { padding-right: 58px; }
.rz-fl--select:not(.is-filled) .rz-fl__control { color: var(--gray-600); }
.rz-fl--select .rz-fl__control option { color: var(--gray-900); }
.rz-fl__icons { position: relative; display: flex; align-items: center; gap: var(--space-8); margin-top: 12px; pointer-events: none; }
.rz-fl--select .rz-fl__status { padding: 1px; }
.rz-fl__caret { color: var(--gray-800); }

/* textarea: 16px corners, three lines, resizable */
.rz-fl--textarea .rz-fl__field { display: block; border-radius: var(--radius-xl); }
.rz-fl--textarea .rz-fl__control { width: 100%; min-height: 95px; padding: 22px var(--space-12) var(--space-10) var(--space-16); border-radius: inherit; resize: vertical; }
.rz-fl--textarea.has-status .rz-fl__control { padding-right: 36px; /* file literal */ }
.rz-fl--textarea.is-disabled .rz-fl__control { color: var(--gray-600); }
.rz-fl--textarea .rz-fl__status { position: absolute; top: 9px; right: 7px; /* file literal: 10px / 8px from the outer edge */ }
.rz-fl--textarea .rz-fl__label { top: 11px; }
.rz-fl--textarea.is-floated .rz-fl__label { top: 9px; left: 17px; }

/* ---------- Image ---------- */
/* image: no radius, 90% black backdrop behind the picture (shows through letterboxing with fit=contain) */
.rz-image { position: relative; display: block; box-sizing: border-box; width: 100%; overflow: hidden;
  background: color-mix(in srgb, var(--black) 90%, transparent); }
.rz-image--custom { width: 160px; height: 160px; }
.rz-image__img { display: block; width: 100%; height: 100%; }

/* image-thumbnail: white frame, 4px padding, 1px border-default, radius-md */
.rz-image-thumb { display: block; box-sizing: border-box; width: 100%; padding: var(--space-4); background: var(--background-surface);
  border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.rz-image-thumb > .rz-image { width: 100%; height: 100%; }

/* ---------- ImageUpload ---------- */
.rz-upload { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); font-family: var(--font-sans); color: var(--gray-900); }
.rz-upload__input { display: none; }

/* image-card grid: 104px cards, 8px gaps, three to a row */
.rz-upload__grid { display: grid; grid-template-columns: repeat(3, 104px); gap: var(--space-8); }
.rz-upload__card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-8);
  box-sizing: border-box; width: 104px; height: 104px; padding: var(--space-8); border: 1px solid var(--gray-500); border-radius: var(--radius-xl);
  background: transparent; font: inherit; color: inherit; }
.rz-upload__card > * { flex: none; }
.rz-upload__card--upload, .rz-upload__card--uploading { border-style: dashed; background: var(--gray-100); }
.rz-upload__card--upload { padding: 40px var(--space-8); /* file literal */ }
.rz-upload__card--upload { cursor: pointer; transition: border-color .12s; }
.rz-upload__card--upload:hover, .rz-upload.is-dragging .rz-upload__card--upload { border-color: var(--blue-400); }
.rz-upload__card--upload:focus-visible { outline: none; border-color: var(--blue-400); box-shadow: var(--focus-ring); }
.rz-upload__card--upload:disabled { cursor: not-allowed; opacity: .6; }
.rz-upload__card--upload .rz-icon { color: var(--icon-black); }
.rz-upload__card-text { font-size: 16px; line-height: 1.3; color: var(--gray-600); }
.rz-upload__card-text--strong { color: var(--gray-900); white-space: nowrap; }

/* normal / hovered: 88px image (radius-lg) with view + delete buttons over it on hover */
.rz-upload__thumb { width: 88px; height: 88px; border-radius: var(--radius-lg); overflow: hidden; background: var(--background-brand-light); }
.rz-upload__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rz-upload__mask { position: absolute; inset: var(--space-8); display: flex; align-items: center; justify-content: center; gap: var(--space-8);
  border-radius: var(--radius-lg); opacity: 0; transition: opacity .12s; }
.rz-upload__card--normal:hover .rz-upload__mask, .rz-upload__card--normal:focus-within .rz-upload__mask, .rz-upload__card.is-hovered .rz-upload__mask { opacity: 1; }
.rz-upload__act { display: flex; padding: var(--space-6); border: 0; border-radius: 40px; /* file literal */ cursor: pointer; }
.rz-upload__act--view { background: var(--blue-50); color: var(--blue-500); }
.rz-upload__act--remove { background: var(--red-50); color: var(--red-600); }
.rz-upload__act:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* uploading: label over a 4px progress track */
.rz-upload__progress { position: relative; display: block; width: 88px; height: 4px; margin: var(--space-10) 0; border-radius: 10px; /* file literal */
  background: var(--gray-300); overflow: hidden; box-shadow: inset 0 0.22px 0.44px rgba(51, 51, 51, 0.08); /* file literal */ }
.rz-upload__progress-bar { display: block; height: 100%; background: var(--blue-500); transition: width .2s; }

/* error: red-600 outline, image icon and file name */
.rz-upload__card--error { padding: 0; border-color: var(--state-danger-text); color: var(--state-danger-text); }
.rz-upload__card-name { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--state-danger-text); }
.rz-upload__card-remove { position: absolute; top: var(--space-4); right: var(--space-4); display: flex; padding: var(--space-2); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--state-danger-text); cursor: pointer; opacity: 0; }
.rz-upload__card--error:hover .rz-upload__card-remove, .rz-upload__card-remove:focus-visible { opacity: 1; }
.rz-upload__card-remove:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* dragger: 400px drop area, gray-50 fill, 1px gray-500 border, 32px radius */
.rz-upload--dragger { align-items: stretch; width: 100%; max-width: 400px; }
.rz-upload__dragger { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); box-sizing: border-box; padding: var(--space-16) var(--space-16);
  background: var(--gray-50); border: 1px solid var(--gray-500); border-radius: 32px; /* file literal */ text-align: center; cursor: pointer; transition: border-color .12s, background-color .12s; }
.rz-upload__dragger:hover, .rz-upload__dragger.is-dragging { border-color: var(--blue-400); }
.rz-upload__dragger.is-dragging { background: var(--background-brand-light); }
.rz-upload__dragger:focus-visible { outline: none; border-color: var(--blue-400); box-shadow: var(--focus-ring); }
.rz-upload__dragger.is-disabled { cursor: not-allowed; opacity: .6; }
.rz-upload__dragger-icon { color: var(--blue-500); }
.rz-upload__dragger-text { display: flex; flex-direction: column; gap: var(--space-4); }
.rz-upload__dragger-title { font-size: 16px; line-height: 1.3; color: var(--gray-900); }
.rz-upload__dragger-hint { font-size: 14px; line-height: 1.3; color: #6c757d; /* file literal */ }

/* file and image lists under the button */
.rz-upload__list { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; max-width: 400px; margin: 0; padding: 0; list-style: none; }
.rz-upload__list--images { max-width: 600px; }
.rz-upload__row { display: flex; align-items: center; gap: var(--space-8); min-height: 24px; padding: 0 var(--space-4); border-radius: var(--radius-sm);
  font-size: 14px; line-height: 1.3; color: var(--gray-900); }
.rz-upload__row:hover { background: var(--gray-100); }
.rz-upload__row > .rz-icon { color: var(--icon-enable); }
.rz-upload__row--image { padding: 9px var(--space-8); /* file literal */ border: 1px solid var(--gray-400); border-radius: 2px; /* file literal */ }
.rz-upload__row-thumb { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--gray-100); color: var(--icon-enable); }
.rz-upload__row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rz-upload__row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-upload__row.is-error, .rz-upload__row.is-error > .rz-icon { color: var(--state-danger-text); }
.rz-upload__row.is-error.rz-upload__row--image { border-color: var(--state-danger-text); }
.rz-upload__row-remove { display: flex; padding: var(--space-2); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--icon-enable); cursor: pointer; }
.rz-upload__row-remove:hover { color: var(--state-danger-text); }
.rz-upload__row-remove:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- ListGroup ---------- */
.rz-list-group { display: flex; flex-direction: column; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font-family: var(--font-sans); }
.rz-list-group__li { display: block; margin: 0; padding: 0; }
.rz-list-group__item {
  display: flex; align-items: center; gap: var(--space-8); box-sizing: border-box; width: 100%; margin: 0;
  border: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.3; font-weight: 400; text-align: left;
}
.rz-list-group__label { flex: 1; min-width: 0; }
.rz-list-group__item.is-interactive { cursor: pointer; }
.rz-list-group__item.is-disabled { cursor: not-allowed; }
.rz-list-group__item:focus-visible { outline: none; box-shadow: var(--focus-ring); position: relative; z-index: 1; }

/* ---- general: bordered list, Variant x State ---- */
.rz-list-group--general { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.rz-list-group--general.rz-list-group--flush { border: 0; border-radius: 0; }
.rz-list-group--general .rz-list-group__item {
  padding: var(--space-8) var(--space-16); background: var(--rz-bg); color: var(--rz-fg); box-shadow: inset 0 -1px 0 var(--rz-bd);
}
.rz-list-group--general .rz-list-group__li:last-child .rz-list-group__item { box-shadow: none; }
.rz-list-group--general .rz-list-group__item:focus-visible { box-shadow: var(--focus-ring); }

/* normal */
.rz-list-group__item--default,
.rz-list-group__item--primary, .rz-list-group__item--secondary, .rz-list-group__item--success, .rz-list-group__item--danger,
.rz-list-group__item--warning, .rz-list-group__item--info, .rz-list-group__item--light, .rz-list-group__item--dark {
  --rz-bg: var(--background-surface); --rz-bd: var(--border-default); --rz-fg: rgba(33, 37, 41, 0.75); /* file literal: gray-900 at 75% */ }
.rz-list-group__item--primary   { --rz-bg: var(--blue-100);  --rz-bd: var(--blue-200); }
.rz-list-group__item--secondary { --rz-bg: var(--gray-200);  --rz-bd: var(--gray-400); }
.rz-list-group__item--success   { --rz-bg: var(--green-100); --rz-bd: var(--green-300); }
.rz-list-group__item--danger    { --rz-bg: var(--red-50);    --rz-bd: var(--red-300); }
.rz-list-group__item--warning   { --rz-bg: var(--yellow-50); --rz-bd: var(--yellow-200); }
.rz-list-group__item--info      { --rz-bg: #cff4fc; /* file literal */ --rz-bd: #9eeaf9; /* file literal */ }
.rz-list-group__item--light     { --rz-bg: #fcfcfd; /* file literal */ --rz-bd: var(--gray-200); }
.rz-list-group__item--dark      { --rz-bg: var(--gray-400);  --rz-bd: var(--gray-500); }

/* hovered (not on the selected or disabled row) */
.rz-list-group__item.is-interactive:not(.is-active):not(.is-disabled):hover { --rz-fg: var(--text-primary); }
.rz-list-group__item--default.is-interactive:not(.is-active):not(.is-disabled):hover   { --rz-bg: var(--gray-50); }
.rz-list-group__item--primary.is-interactive:not(.is-active):not(.is-disabled):hover   { --rz-bg: var(--blue-200);  --rz-bd: var(--blue-300); }
.rz-list-group__item--secondary.is-interactive:not(.is-active):not(.is-disabled):hover { --rz-bg: var(--gray-400);  --rz-bd: var(--gray-500); }
.rz-list-group__item--success.is-interactive:not(.is-active):not(.is-disabled):hover   { --rz-bg: var(--green-200); --rz-bd: var(--green-200); }
.rz-list-group__item--danger.is-interactive:not(.is-active):not(.is-disabled):hover    { --rz-bg: var(--red-100);   --rz-bd: var(--red-400); }
.rz-list-group__item--warning.is-interactive:not(.is-active):not(.is-disabled):hover   { --rz-bg: var(--yellow-200); --rz-bd: var(--yellow-400); }
.rz-list-group__item--info.is-interactive:not(.is-active):not(.is-disabled):hover      { --rz-bg: #9eeaf9; /* file literal */ --rz-bd: #9eeaf9; /* file literal */ }
.rz-list-group__item--light.is-interactive:not(.is-active):not(.is-disabled):hover     { --rz-bg: var(--gray-200);  --rz-bd: var(--gray-200); }
.rz-list-group__item--dark.is-interactive:not(.is-active):not(.is-disabled):hover      { --rz-bg: var(--gray-500);  --rz-bd: var(--gray-500); }

/* pressed */
.rz-list-group__item--default.is-interactive:not(.is-active):not(.is-disabled):active   { --rz-bg: var(--gray-200); }
.rz-list-group__item--primary.is-interactive:not(.is-active):not(.is-disabled):active   { --rz-bg: var(--blue-400);  --rz-bd: var(--blue-400); --rz-fg: var(--text-inverse); }
.rz-list-group__item--secondary.is-interactive:not(.is-active):not(.is-disabled):active { --rz-bg: var(--gray-500);  --rz-bd: var(--gray-600); }
.rz-list-group__item--success.is-interactive:not(.is-active):not(.is-disabled):active   { --rz-bg: var(--green-300); --rz-bd: var(--green-400); }
.rz-list-group__item--danger.is-interactive:not(.is-active):not(.is-disabled):active    { --rz-bg: var(--red-300);   --rz-bd: var(--red-400); --rz-fg: var(--gray-900); }
.rz-list-group__item--warning.is-interactive:not(.is-active):not(.is-disabled):active   { --rz-bg: var(--yellow-400); --rz-bd: var(--yellow-300); }
.rz-list-group__item--info.is-interactive:not(.is-active):not(.is-disabled):active      { --rz-bg: #9eeaf9; /* file literal */ --rz-bd: #9eeaf9; /* file literal */ }
.rz-list-group__item--light.is-interactive:not(.is-active):not(.is-disabled):active     { --rz-bg: var(--gray-200);  --rz-bd: var(--gray-200); }
.rz-list-group__item--dark.is-interactive:not(.is-active):not(.is-disabled):active      { --rz-bg: var(--gray-500);  --rz-bd: var(--gray-500); }

/* active (selected) */
.rz-list-group__item--default.is-active   { --rz-bg: var(--background-brand); --rz-bd: #0d6efd; /* file literal */ --rz-fg: var(--text-inverse); }
.rz-list-group__item--primary.is-active   { --rz-bg: var(--blue-600);  --rz-bd: var(--blue-600);  --rz-fg: #cfe2ff; /* file literal */ }
.rz-list-group__item--secondary.is-active { --rz-bg: var(--gray-800);  --rz-bd: var(--gray-900);  --rz-fg: #e2e3e5; /* file literal */ }
.rz-list-group__item--success.is-active   { --rz-bg: var(--green-700); --rz-bd: var(--green-800); --rz-fg: var(--green-50); }
.rz-list-group__item--danger.is-active    { --rz-bg: var(--red-800);   --rz-bd: var(--red-900);   --rz-fg: #f8d7da; /* file literal */ }
.rz-list-group__item--warning.is-active   { --rz-bg: var(--yellow-800); --rz-bd: var(--yellow-900); --rz-fg: #fff3cd; /* file literal */ }
.rz-list-group__item--info.is-active      { --rz-bg: #055160; /* file literal */ --rz-bd: #055160; /* file literal */ --rz-fg: #cff4fc; /* file literal */ }
.rz-list-group__item--light.is-active     { --rz-bg: var(--gray-700);  --rz-bd: var(--gray-700);  --rz-fg: #fcfcfd; /* file literal */ }
.rz-list-group__item--dark.is-active      { --rz-bg: var(--gray-700);  --rz-bd: var(--gray-700);  --rz-fg: var(--gray-400); }

/* disabled: white fill, the variant's border; default gets slate-100 */
.rz-list-group__item.is-disabled { --rz-bg: var(--background-surface); }
.rz-list-group__item--default.is-disabled   { --rz-bg: var(--slate-100); --rz-fg: var(--gray-900); }
.rz-list-group__item--secondary.is-disabled { --rz-bd: #c4c8cb; /* file literal */ }
.rz-list-group__item--success.is-disabled   { --rz-bd: var(--green-200); }
.rz-list-group__item--warning.is-disabled   { --rz-bd: var(--yellow-500); }

/* ---- pill: the department list, rounded rows with an optional star and right icon ---- */
.rz-list-group--pill { gap: var(--space-4); }
.rz-list-group--pill .rz-list-group__item {
  padding: var(--space-8) var(--space-16); border-radius: var(--radius-card); background: var(--background-surface); color: var(--gray-900);
}
.rz-list-group--pill .rz-list-group__item.has-left { padding-left: var(--space-8); }
.rz-list-group--pill .rz-list-group__item.has-right { padding-right: var(--space-8); }
.rz-list-group--pill .rz-list-group__item.is-interactive:hover { background: var(--gray-50); }
.rz-list-group--pill .rz-list-group__item.is-active { background: var(--gray-300); }
.rz-list-group--pill .rz-list-group__item.is-disabled { background: var(--gray-200); color: var(--text-secondary); }
.rz-list-group__star { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 20px; height: 20px;
  border-radius: var(--radius-card); background: var(--background-surface-alt); color: var(--gray-500); }
.rz-list-group__star.is-favorite { background: rgba(245, 158, 11, 0.24); /* file literal: yellow-600 at 24% */ color: var(--state-warning-text); }
.rz-list-group__star[role="button"] { cursor: pointer; }
.rz-list-group__star:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rz-list-group__icon { display: inline-flex; flex: none; color: var(--slate-900); }
.rz-list-group__item.is-disabled .rz-list-group__icon { color: var(--icon-enable); }

/* ---------- Modal ---------- */
.rz-modal-root { position: fixed; inset: 0; z-index: 1050; }
.rz-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); /* file literal: the file draws no backdrop; standard 50% black scrim */ }
.rz-modal-dialog { position: absolute; inset: 0; overflow-y: auto; display: flex; align-items: flex-start; justify-content: center;
  box-sizing: border-box; padding: 28px var(--space-16); /* file literal: 28px top/bottom from the component frame */ }
.rz-modal { display: flex; flex-direction: column; box-sizing: border-box; width: 500px; max-width: 100%;
  background: var(--background-surface); border: 1px solid rgba(0, 0, 0, 0.17); /* file literal */ border-radius: var(--radius-card);
  font-family: var(--font-sans); color: var(--text-primary); outline: none; position: relative; }
.rz-modal--small { width: 300px; }
.rz-modal--default { width: 500px; }
.rz-modal--large { width: 800px; }
.rz-modal--extra-large { width: 1140px; }
.rz-modal--inline { margin: 28px auto; /* file literal: 28px top/bottom from the component frame */ }
.rz-modal__header { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-16); border-bottom: 1px solid var(--border-default); }
.rz-modal__title { flex: 1; min-width: 0; font-size: 20px; line-height: 1.3; font-weight: 400; color: var(--text-primary); }
.rz-modal__close { display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; box-sizing: border-box;
  padding: var(--space-4); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--icon-black); opacity: 0.5; cursor: pointer;
  transition: opacity .12s, box-shadow .12s; }
.rz-modal__close:hover { opacity: 0.75; }
.rz-modal__close:active { opacity: 1; }
.rz-modal__close:focus-visible { outline: none; opacity: 1; box-shadow: var(--focus-ring); }
.rz-modal__close:disabled { opacity: 0.25; cursor: not-allowed; }
.rz-modal__content { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-16); }
.rz-modal__text { padding-bottom: var(--space-16); font-size: 16px; line-height: 1.3; color: var(--text-primary); }
.rz-modal__footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-8);
  padding: var(--space-12); border-top: 1px solid var(--border-default); }
.rz-modal__footer .rz-btn--medium { padding: var(--space-6) var(--space-12); font-size: 16px; }

/* ---------- NavBar ---------- */
.rz-navbar { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 60px; /* file literal */
  box-sizing: border-box; width: 100%; height: 72px; padding: var(--space-8) var(--space-16); background: var(--background-page);
  font-family: var(--font-sans); color: var(--text-primary); }
.rz-navbar__menu { display: flex; align-items: center; gap: var(--space-12); }
.rz-navbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); flex: none;
  box-sizing: border-box; height: 56px; padding: var(--space-6); border: 0; border-radius: var(--radius-lg); background: transparent;
  color: var(--text-secondary); font: inherit; text-decoration: none; cursor: pointer; transition: color .12s, background-color .12s; }
.rz-navbar__icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--icon-enable); }
.rz-navbar__label { font-size: 12px; line-height: 1.3; font-weight: 400; white-space: nowrap; }
.rz-navbar__item:hover, .rz-navbar__item:hover .rz-navbar__icon { color: var(--text-brand); }
.rz-navbar__item.is-active { background: color-mix(in srgb, var(--background-brand) 16%, transparent); color: var(--text-brand); }
.rz-navbar__item.is-active .rz-navbar__icon { color: var(--icon-brand); }
.rz-navbar__item:focus-visible, .rz-navbar__menu-btn:focus-visible, .rz-navbar__brand-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rz-navbar__brand { display: flex; align-items: center; justify-content: center; }
.rz-navbar__brand-link { display: flex; border-radius: var(--radius-sm); }
.rz-navbar__logo-img { display: block; height: 24px; width: auto; }
.rz-navbar__options { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-16); min-width: 0; padding-right: var(--space-10); }
.rz-navbar__user { display: flex; align-items: center; gap: var(--space-10); min-width: 0; }
.rz-navbar__user-info { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); min-width: 0; }
.rz-navbar__username { font-size: 14px; line-height: 1.3; font-weight: 400; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rz-navbar__points { font-size: 12px; line-height: 1.3; font-weight: 300; color: var(--gray-900); white-space: nowrap; }
.rz-navbar__menu-btn { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; box-sizing: border-box;
  padding: var(--space-10); border: 0; border-radius: 30px; /* file literal */ background: transparent; color: var(--icon-brand); cursor: pointer; }
.rz-navbar__menu-btn:hover { background: var(--background-brand-light); }
.rz-navbar__menu-btn .rz-icon { width: 20px; }

/* ---------- Offcanvas ---------- */
.rz-offcanvas-root { position: fixed; inset: 0; z-index: 1045; pointer-events: none; }
.rz-offcanvas-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); /* file literal: the file draws no backdrop; standard 50% black scrim */ pointer-events: auto; }
.rz-offcanvas { position: absolute; display: flex; flex-direction: column; box-sizing: border-box; max-width: 100%; max-height: 100%;
  background: var(--background-surface); font-family: var(--font-sans); color: var(--text-primary); outline: none; pointer-events: auto;
  --rz-oc-border: 1px solid rgba(0, 0, 0, 0.18); /* file literal */ animation: rz-offcanvas-in .2s ease-out; }
.rz-offcanvas--right  { top: 0; right: 0; bottom: 0; width: 400px; border-left: var(--rz-oc-border); --rz-oc-from: translateX(100%); }
.rz-offcanvas--left   { top: 0; left: 0; bottom: 0; width: 400px; border-right: var(--rz-oc-border); --rz-oc-from: translateX(-100%); }
.rz-offcanvas--top    { top: 0; left: 0; right: 0; height: 300px; border-bottom: var(--rz-oc-border); --rz-oc-from: translateY(-100%); }
.rz-offcanvas--bottom { bottom: 0; left: 0; right: 0; height: 300px; border-top: var(--rz-oc-border); --rz-oc-from: translateY(100%); }
@keyframes rz-offcanvas-in { from { transform: var(--rz-oc-from); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .rz-offcanvas { animation: none; } }
.rz-offcanvas--inline { position: relative; inset: auto; animation: none; }
.rz-offcanvas--inline.rz-offcanvas--top, .rz-offcanvas--inline.rz-offcanvas--bottom { width: 100%; }
.rz-offcanvas__header { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-16); flex: none; }
.rz-offcanvas__title { flex: 1; min-width: 0; font-size: 20px; line-height: 1.3; font-weight: 400; color: var(--gray-900); }
.rz-offcanvas__close { display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; box-sizing: border-box;
  padding: var(--space-4); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--icon-black); opacity: 0.5; cursor: pointer;
  transition: opacity .12s, box-shadow .12s; }
.rz-offcanvas__close:hover { opacity: 0.75; }
.rz-offcanvas__close:active { opacity: 1; }
.rz-offcanvas__close:focus-visible { outline: none; opacity: 1; box-shadow: var(--focus-ring); }
.rz-offcanvas__body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-10);
  padding: var(--space-16); background: var(--background-surface); font-size: 16px; line-height: 1.3; }

/* ---------- Pagination ---------- */
.rz-pagination { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-16); font-family: var(--font-sans); color: var(--gray-900); }
.rz-pagination--small { gap: var(--space-8); }
.rz-pagination__content { display: flex; align-items: center; gap: var(--space-8); }
.rz-pagination__total { white-space: nowrap; color: var(--gray-900); }
.rz-pagination__list { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.rz-pagination__list > li { display: flex; }
.rz-pagination__list > li + li { margin-left: -1px; } /* file gap -1: neighbours share a border */

.rz-pagination__item {
  position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  border: 1px solid var(--border-default); border-radius: 0; background: var(--background-surface);
  color: var(--text-brand); font: inherit; line-height: 1.3; white-space: nowrap; cursor: pointer;
  transition: background-color .12s, box-shadow .12s;
}
.rz-pagination__item:hover { z-index: 1; background: var(--background-page); }
.rz-pagination__item:active { z-index: 1; box-shadow: 0 0 0 4px rgba(8, 143, 143, 0.24); /* file literal: teal-600 at 24% */ }
.rz-pagination__item:focus-visible { z-index: 2; outline: none; box-shadow: var(--focus-ring); }
.rz-pagination__item.is-active { background: var(--background-brand); color: var(--text-inverse); }
.rz-pagination--medium .rz-pagination__item.is-active { color: var(--background-page); } /* the file's medium size binds background-page here */
.rz-pagination__item:disabled { cursor: not-allowed; background: var(--background-surface); color: var(--text-muted); box-shadow: none; }

/* prev / next: rounded outer ends, surface-alt on hover, brand caret */
.rz-pagination__prev { border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
.rz-pagination__next { border-radius: 0 var(--radius-xl) var(--radius-xl) 0; }
.rz-pagination__prev:hover, .rz-pagination__next:hover { background: var(--background-surface-alt); }
.rz-pagination__prev .rz-icon, .rz-pagination__next .rz-icon { color: var(--icon-brand); }
.rz-pagination__prev:disabled .rz-icon, .rz-pagination__next:disabled .rz-icon { color: var(--icon-muted); }

/* jump (…): dots at rest, an arrow on hover */
.rz-pagination__jump { color: var(--icon-brand); }
.rz-pagination__jump:hover { background: var(--gray-200); }
.rz-pagination__jump .rz-pagination__arrow { display: none; }
.rz-pagination__jump:hover:not(:disabled) .rz-pagination__dots, .rz-pagination__jump:focus-visible .rz-pagination__dots { display: none; }
.rz-pagination__jump:hover:not(:disabled) .rz-pagination__arrow, .rz-pagination__jump:focus-visible .rz-pagination__arrow { display: flex; }
.rz-pagination__jump:disabled { color: var(--icon-muted); }
.rz-pagination__dots, .rz-pagination__arrow { display: flex; }

/* sizes: small 28 / body-md, medium 35 / body-lg, large 52 / body-xl */
.rz-pagination--small  { font-size: 14px; line-height: 1.3; }
.rz-pagination--medium { font-size: 16px; line-height: 1.3; }
.rz-pagination--large  { font-size: 20px; line-height: 1.3; }
.rz-pagination--small  .rz-pagination__item { height: 28px; padding: var(--space-4) var(--space-8); }
.rz-pagination--medium .rz-pagination__item { height: 35px; padding: var(--space-6) var(--space-12); }
.rz-pagination--large  .rz-pagination__item { height: 52px; padding: var(--space-12) var(--space-24); }
.rz-pagination--small  .rz-pagination__prev, .rz-pagination--small  .rz-pagination__next { padding: var(--space-4) var(--space-8); }
.rz-pagination--medium .rz-pagination__prev, .rz-pagination--medium .rz-pagination__next { padding: var(--space-6) var(--space-10); }
.rz-pagination--large  .rz-pagination__prev, .rz-pagination--large  .rz-pagination__next { padding: var(--space-12) var(--space-20); }
.rz-pagination__nav--text { color: var(--text-brand); }
.rz-pagination__nav--text:disabled { color: var(--text-muted); }
.rz-pagination--small  .rz-pagination__jump { width: 31px; padding: 0; } /* file literal */
.rz-pagination--medium .rz-pagination__jump { width: 38px; padding: 0; } /* file literal */
.rz-pagination--large  .rz-pagination__jump { width: 56px; padding: 0; } /* file literal */

/* options: page-size select and quick jumper */
.rz-pagination__options { display: flex; align-items: center; gap: var(--space-12); }
.rz-pagination--small .rz-pagination__options { gap: var(--space-8); }
.rz-pagination__select { position: relative; display: inline-flex; align-items: center; color: #6c757d; /* file literal */ }
.rz-pagination__select select {
  appearance: none; -webkit-appearance: none; box-sizing: border-box; margin: 0;
  border: 1px solid var(--gray-400); border-radius: var(--radius-xl); background: var(--background-surface);
  color: inherit; font: inherit; line-height: 1.3; cursor: pointer;
}
.rz-pagination__select select:focus-visible { outline: none; border-color: var(--blue-400); box-shadow: var(--focus-ring); }
.rz-pagination__select select:disabled { background: var(--gray-200); cursor: not-allowed; }
.rz-pagination__select .rz-icon { position: absolute; pointer-events: none; color: var(--gray-800); }
.rz-pagination--small  .rz-pagination__select select { height: 28px; padding: var(--space-4) 32px var(--space-4) var(--space-8); } /* 32 = 12 pad + 12 icon + 8 gap */
.rz-pagination--medium .rz-pagination__select select { height: 35px; padding: var(--space-6) 32px var(--space-6) var(--space-12); }
.rz-pagination--large  .rz-pagination__select select { height: 52px; padding: var(--space-12) 32px var(--space-12) var(--space-16); }
.rz-pagination__select .rz-icon { right: var(--space-12); }
.rz-pagination__jumper { display: flex; align-items: center; gap: var(--space-4); }
.rz-pagination__goto { white-space: nowrap; color: var(--gray-900); }
.rz-pagination .rz-pagination__jump-input { width: 65px; }
.rz-pagination--small .rz-pagination__jump-input { width: 50px; }
.rz-pagination--large .rz-pagination__jump-input { width: 80px; }
.rz-pagination--large .rz-pagination__jump-input .rz-input__field { height: 50px; } /* file literal: the jumper input is 50px tall */

/* ---------- Placeholder ---------- */
/* placeholders-line: gray-800 at 20% (normal) or the file's gray-800 / #d6d8d9 banded gradient at 50% (glow).
   The file's prototype fades glow into normal and back over 1s, ease in-out. */
.rz-placeholder { position: relative; display: block; box-sizing: border-box; width: 100%; max-width: 100%; flex: none; overflow: hidden;
  border-radius: 12px; /* file literal */ background: color-mix(in srgb, var(--gray-800) 20%, transparent); }
.rz-placeholder--large  { height: 32px; }
.rz-placeholder--medium { height: 18px; }
.rz-placeholder--xs     { height: 10px; }
.rz-placeholder--glow::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background: linear-gradient(120deg, var(--gray-800) 0%, #d6d8d9 /* file literal */ 32%, var(--gray-800) 63%, #d6d8d9 /* file literal */ 100%);
  animation: rz-placeholder-glow 1s ease-in-out infinite alternate; }
.rz-placeholder--fixed { flex: none; }
@keyframes rz-placeholder-glow { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rz-placeholder--glow::after { animation: none; }
}

/* layout="feed": the file's "placeholders" skeleton of a Stream post. */
.rz-placeholder-feed { box-sizing: border-box; width: 100%; background: var(--background-surface); border: 1px solid var(--border-thin);
  border-radius: var(--radius-card); overflow: hidden; }
.rz-placeholder-feed__header { display: flex; align-items: center; gap: 19px; /* file literal */ padding: var(--space-16); border-bottom: 1px solid var(--border-thin); }
.rz-placeholder-feed__title { display: flex; flex-direction: column; gap: var(--space-8); flex: 0 1 325px; min-width: 0; }
.rz-placeholder-feed__user { display: flex; align-items: center; gap: 9px; /* file literal */ min-width: 0; }
.rz-placeholder-feed__content { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); }
.rz-placeholder-feed__footer { display: flex; align-items: center; gap: var(--space-20); }
.rz-placeholder-feed__comments { display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-16); border-top: 1px solid var(--border-thin); border-bottom: 1px solid var(--border-thin); }
.rz-placeholder-feed__comment { display: flex; align-items: flex-start; gap: var(--space-16); }
.rz-placeholder-feed__bubble { display: flex; flex-direction: column; gap: var(--space-4); }
.rz-placeholder-feed__reactions { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-20); padding: var(--space-16); }
.rz-placeholder-feed__group { display: flex; align-items: center; gap: var(--space-20); }
.rz-placeholder-feed__pills, .rz-placeholder-feed__share { display: flex; align-items: center; gap: var(--space-10); }

/* ---------- Popover ---------- */
.rz-popover { position: relative; display: inline-flex; font-family: var(--font-sans); }

/* panel floats beside the trigger; the 8px arrow sits in the gap */
.rz-popover__panel { position: absolute; z-index: 1000; box-sizing: border-box; width: 278px; /* file literal: fixed-width variants */ }
.rz-popover__panel--auto { width: max-content; max-width: 278px; /* file literal */ }
.rz-popover--top    > .rz-popover__panel { bottom: calc(100% + var(--space-8)); left: 50%; transform: translateX(-50%); }
.rz-popover--bottom > .rz-popover__panel { top: calc(100% + var(--space-8)); left: 50%; transform: translateX(-50%); }
.rz-popover--left   > .rz-popover__panel { right: calc(100% + var(--space-8)); top: 50%; transform: translateY(-50%); }
.rz-popover--right  > .rz-popover__panel { left: calc(100% + var(--space-8)); top: 50%; transform: translateY(-50%); }

/* inline: trigger and panel in normal flow, arranged by direction */
.rz-popover--inline { align-items: center; }
.rz-popover--inline.rz-popover--top    { flex-direction: column-reverse; }
.rz-popover--inline.rz-popover--bottom { flex-direction: column; }
.rz-popover--inline.rz-popover--left   { flex-direction: row-reverse; }
.rz-popover--inline.rz-popover--right  { flex-direction: row; }
.rz-popover--inline > .rz-popover__panel { position: relative; inset: auto; transform: none; }
.rz-popover--inline.rz-popover--top    > .rz-popover__panel:not(:only-child) { margin-bottom: var(--space-8); }
.rz-popover--inline.rz-popover--bottom > .rz-popover__panel:not(:only-child) { margin-top: var(--space-8); }
.rz-popover--inline.rz-popover--left   > .rz-popover__panel:not(:only-child) { margin-right: var(--space-8); }
.rz-popover--inline.rz-popover--right  > .rz-popover__panel:not(:only-child) { margin-left: var(--space-8); }

.rz-popover__box { box-sizing: border-box; overflow: hidden; background: var(--background-surface);
  border: 1px solid rgba(0, 0, 0, 0.2); /* file literal */ border-radius: var(--radius-xl); }
.rz-popover__header { padding: var(--space-8) var(--space-16); background: #f0f0f0; /* file literal */
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* file literal */
  font-size: 16px; font-weight: 400; line-height: 1.3; color: var(--gray-900); }
.rz-popover__body { padding: var(--space-16); font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--gray-900); }

/* arrow: 16 x 8, a 1px border triangle under a white one */
.rz-popover__arrow { position: absolute; width: 0; height: 0; }
.rz-popover__arrow::before, .rz-popover__arrow::after { content: ""; position: absolute; width: 0; height: 0; border: 8px solid transparent; }
.rz-popover__panel--top .rz-popover__arrow    { top: 100%; left: 50%; }
.rz-popover__panel--bottom .rz-popover__arrow { bottom: 100%; left: 50%; }
.rz-popover__panel--left .rz-popover__arrow   { left: 100%; top: 50%; }
.rz-popover__panel--right .rz-popover__arrow  { right: 100%; top: 50%; }
.rz-popover__panel--top .rz-popover__arrow::before { left: -8px; top: 0; border-bottom: 0; border-top-color: rgba(0, 0, 0, 0.2); }
.rz-popover__panel--top .rz-popover__arrow::after  { left: -8px; top: -1px; border-bottom: 0; border-top-color: var(--background-surface); }
.rz-popover__panel--bottom .rz-popover__arrow::before { left: -8px; bottom: 0; border-top: 0; border-bottom-color: rgba(0, 0, 0, 0.2); }
.rz-popover__panel--bottom .rz-popover__arrow::after  { left: -8px; bottom: -1px; border-top: 0; border-bottom-color: var(--background-surface); }
.rz-popover__panel--left .rz-popover__arrow::before { top: -8px; left: 0; border-right: 0; border-left-color: rgba(0, 0, 0, 0.2); }
.rz-popover__panel--left .rz-popover__arrow::after  { top: -8px; left: -1px; border-right: 0; border-left-color: var(--background-surface); }
.rz-popover__panel--right .rz-popover__arrow::before { top: -8px; right: 0; border-left: 0; border-right-color: rgba(0, 0, 0, 0.2); }
.rz-popover__panel--right .rz-popover__arrow::after  { top: -8px; right: -1px; border-left: 0; border-right-color: var(--background-surface); }

/* ---------- Progress ---------- */
.rz-progress { display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 16px; overflow: hidden;
  background: var(--gray-200); border-radius: var(--radius-md); font-family: var(--font-sans); }
.rz-progress__bar { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 0; overflow: hidden;
  transition: width .6s ease; }
.rz-progress__bar--default { background-color: var(--yellow-500); color: var(--text-primary); }
.rz-progress__bar--success { background-color: var(--background-brand); color: var(--text-inverse); }
.rz-progress__bar--info    { background-color: var(--text-link); color: var(--text-inverse); }
.rz-progress__bar--danger  { background-color: var(--text-danger); color: var(--text-inverse); }
.rz-progress__label { font-size: 12px; line-height: 1.3; white-space: nowrap; }

/* Stripes: white parallelograms 8px wide every 16px, at 15% opacity (the file's _progress/striped). */
.rz-progress__bar--striped {
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--white) 15%, transparent) 25%, transparent 25%, transparent 50%,
    color-mix(in srgb, var(--white) 15%, transparent) 50%, color-mix(in srgb, var(--white) 15%, transparent) 75%,
    transparent 75%, transparent);
  background-size: 16px 16px; }
/* Animated: the file's prototype slides the pattern ~32px a second. */
.rz-progress__bar--animated { animation: rz-progress-stripes .5s linear infinite; }
@keyframes rz-progress-stripes { from { background-position: 16px 0; } to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .rz-progress__bar { transition: none; }
  .rz-progress__bar--animated { animation: none; }
}

/* ---------- Radio ---------- */
.rz-radio {
  --rz-rd-on: var(--background-brand); --rz-rd-bd: var(--border-default); --rz-rd-focus-bd: var(--teal-300);
  --rz-rd-ring: 0 0 0 4px rgba(8, 143, 143, 0.24); /* file literal: teal-600 at 24% */
  display: inline-flex; align-items: center; gap: var(--space-8); vertical-align: middle; cursor: pointer;
  font-family: var(--font-sans); font-size: 16px; line-height: 1.3; font-weight: 400; color: var(--gray-900);
}
.rz-radio.is-reverse { flex-direction: row-reverse; }
.rz-radio--valid { --rz-rd-on: var(--green-500); --rz-rd-bd: var(--green-500); --rz-rd-focus-bd: var(--green-500); --rz-rd-ring: var(--focus-ring-valid); color: var(--green-500); }
.rz-radio--invalid { --rz-rd-on: var(--red-500); --rz-rd-bd: var(--red-500); --rz-rd-focus-bd: var(--red-500); --rz-rd-ring: var(--focus-ring-invalid); color: var(--red-500); }
.rz-radio__wrap { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 21px; }
.rz-radio__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.rz-radio__circle { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 16px; height: 16px; border: 1px solid var(--rz-rd-bd); border-radius: 50%; background: var(--background-page);
  transition: background-color .12s, border-color .12s, box-shadow .12s; }
.rz-radio__circle::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--white); opacity: 0; }
.rz-radio__circle::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: var(--black); opacity: 0; pointer-events: none; }
.rz-radio.is-on .rz-radio__circle { background: var(--rz-rd-on); border-color: var(--rz-rd-on); }
.rz-radio.is-on .rz-radio__circle::before { opacity: 1; }
.rz-radio__input:focus-visible + .rz-radio__circle, .rz-radio.is-focused .rz-radio__circle { box-shadow: var(--rz-rd-ring); }
.rz-radio__input:focus-visible + .rz-radio__circle::after, .rz-radio.is-focused .rz-radio__circle::after { opacity: .1; }
.rz-radio:not(.is-on) .rz-radio__input:focus-visible + .rz-radio__circle,
.rz-radio.is-focused:not(.is-on) .rz-radio__circle { border-color: var(--rz-rd-focus-bd); }
.rz-radio.is-disabled { cursor: not-allowed; }
.rz-radio.is-disabled .rz-radio__circle, .rz-radio.is-disabled .rz-radio__label { opacity: .5; }

.rz-radio-group { display: flex; font-family: var(--font-sans); }
.rz-radio-group--horizontal { flex-wrap: wrap; align-items: center; gap: var(--space-16); }
.rz-radio-group--vertical { flex-direction: column; align-items: flex-start; gap: var(--space-6); }

/* ---------- Scrollspy ---------- */
.rz-scrollspy { display: flex; align-items: flex-start; gap: var(--space-16); box-sizing: border-box; padding: 20px; /* file literal */
  background: var(--background-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); overflow: hidden;
  font-family: var(--font-sans); color: var(--text-primary); }
.rz-scrollspy__scroll { flex: 1; min-width: 0; align-self: stretch; overflow-y: auto; scrollbar-width: thin; border-radius: var(--radius-sm); }
.rz-scrollspy__scroll:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rz-scrollspy__content { display: flex; flex-direction: column; gap: var(--space-20); }
.rz-scrollspy__section { display: flex; flex-direction: column; gap: var(--space-16); }
.rz-scrollspy__heading { margin: 0; font-size: 20px; line-height: 1; font-weight: 700; color: var(--text-primary); }
.rz-scrollspy__body { display: flex; flex-direction: column; gap: var(--space-20); }
.rz-scrollspy__para { margin: 0; font-size: 14px; line-height: 1.3; font-weight: 400; color: var(--text-secondary); }
.rz-scrollspy__nav { flex: none; }
.rz-scrollspy__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.rz-scrollspy__list--sub { padding: 0 var(--space-8) var(--space-6); /* the file nests subsections 8px in */ }
.rz-scrollspy__link { display: flex; align-items: center; gap: 5px; /* file literal */ padding: 3px var(--space-8); /* file literal: 3px */
  border-radius: var(--radius-sm); font-size: 14px; line-height: 1.3; color: var(--gray-900); text-decoration: none; white-space: nowrap; }
.rz-scrollspy__bar { font-size: 12.8px; /* file literal */ line-height: 1.1; font-weight: 700; color: var(--text-brand); visibility: hidden; }
.rz-scrollspy__link:hover { color: var(--text-link); }
.rz-scrollspy__link.is-active { color: #3b71ca; /* file literal */ }
.rz-scrollspy__link.is-active .rz-scrollspy__bar { visibility: visible; }
.rz-scrollspy__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Slider ---------- */
.rz-slider { box-sizing: border-box; width: 100%; padding: var(--space-8) var(--space-12); font-family: var(--font-sans); user-select: none; -webkit-user-select: none; }
.rz-slider__track { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--border-default); cursor: pointer; touch-action: none; }
.rz-slider__handle { position: absolute; top: 50%; z-index: 2; box-sizing: border-box; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: var(--background-brand); outline: none; cursor: grab; transition: box-shadow .12s, background-color .12s; }
.rz-slider__handle:focus-visible, .rz-slider__handle.is-focused {
  box-shadow: inset 0 0 0 1px var(--white), 0 0 0 4px rgba(8, 143, 143, 0.24); /* file literal: teal-600 at 24% */ }
.rz-slider__handle.is-pressed { cursor: grabbing; background: var(--background-brand-light);
  box-shadow: inset 0 0 0 1px var(--white), 0 0 0 4px rgba(8, 143, 143, 0.24); /* file literal: teal-600 at 24% */ }
.rz-slider.is-disabled .rz-slider__track { cursor: not-allowed; }
.rz-slider.is-disabled .rz-slider__handle { background: var(--gray-500); cursor: not-allowed; box-shadow: none; }

.rz-slider__marks { position: relative; height: 24px; }
.rz-slider__mark { position: absolute; top: 0; width: 0; height: 24px; }
.rz-slider__dot { position: absolute; top: -10px; left: -6px; z-index: 1; box-sizing: border-box; width: 12px; height: 12px;
  border: 2px solid var(--gray-300); border-radius: 50%; background: var(--white); pointer-events: none; }
.rz-slider__mark-label { position: absolute; top: 10px; left: 0; transform: translateX(-50%); white-space: nowrap;
  font-size: 14px; line-height: 1.3; font-weight: 400; color: var(--gray-600); }
.rz-slider__mark.is-active .rz-slider__dot { border-color: var(--teal-300); }
.rz-slider__mark.is-active .rz-slider__mark-label { color: var(--text-primary); }
.rz-slider__mark.is-danger .rz-slider__mark-label { color: var(--red-500); }
.rz-slider__mark.is-danger.is-active .rz-slider__dot { border-color: var(--red-500); }

/* ---------- Spinner ---------- */
.rz-spinner { display: inline-flex; flex: none; width: 32px; height: 32px; vertical-align: middle; }
.rz-spinner__ring { display: block; animation: rz-spinner-turn .75s linear infinite; }
.rz-spinner__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.rz-spinner--dark      { color: var(--gray-900); }
.rz-spinner--primary   { color: var(--state-progress); }
.rz-spinner--secondary { color: var(--gray-600); }
.rz-spinner--success   { color: var(--state-success-text); }
.rz-spinner--danger    { color: var(--state-danger-text); }
.rz-spinner--warning   { color: var(--state-warning-border); }
.rz-spinner--light     { color: var(--white); }

@keyframes rz-spinner-turn { to { transform: rotate(360deg); } }
@keyframes rz-spinner-pulse { 50% { opacity: .4; } }

/* Reduced motion: no turning; a slow fade keeps the busy signal without movement. */
@media (prefers-reduced-motion: reduce) {
  .rz-spinner__ring { animation: rz-spinner-pulse 2s ease-in-out infinite; }
}

/* ---------- Switch ---------- */
.rz-switch {
  --rz-sw-on: var(--background-brand); --rz-sw-bd: var(--border-default); --rz-sw-focus: var(--teal-300);
  --rz-sw-ring: 0 0 0 4px rgba(8, 143, 143, 0.24); /* file literal: teal-600 at 24% */
  display: inline-flex; align-items: center; gap: var(--space-8); vertical-align: middle; cursor: pointer;
  font-family: var(--font-sans); font-size: 16px; line-height: 1.3; font-weight: 400; color: var(--gray-900);
}
.rz-switch.is-reverse { flex-direction: row-reverse; }
.rz-switch--valid { --rz-sw-on: var(--green-500); --rz-sw-bd: var(--green-500); --rz-sw-focus: var(--green-500); --rz-sw-ring: var(--focus-ring-valid); color: var(--green-500); }
.rz-switch--invalid { --rz-sw-on: var(--red-500); --rz-sw-bd: var(--red-500); --rz-sw-focus: var(--red-500); --rz-sw-ring: var(--focus-ring-invalid); color: var(--red-500); }
.rz-switch__wrap { position: relative; display: flex; align-items: center; flex: none; width: 32px; height: 21px; }
.rz-switch__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.rz-switch__track { position: relative; display: flex; align-items: center; box-sizing: border-box; width: 32px; height: 16px;
  padding: var(--space-2); border: 1px solid var(--rz-sw-bd); border-radius: var(--radius-pill); background: var(--background-page);
  transition: background-color .15s, border-color .15s, box-shadow .15s; }
.rz-switch__track::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--black); opacity: 0; pointer-events: none; }
.rz-switch__knob { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.25); /* file literal: black at 25% */ transition: transform .15s, background-color .15s; }
.rz-switch.is-on .rz-switch__track { background: var(--rz-sw-on); border-color: var(--rz-sw-on); }
.rz-switch.is-on .rz-switch__knob { transform: translateX(16px); background: var(--white); }
.rz-switch__input:focus-visible + .rz-switch__track, .rz-switch.is-focused .rz-switch__track { box-shadow: var(--rz-sw-ring); }
.rz-switch__input:focus-visible + .rz-switch__track::after, .rz-switch.is-focused .rz-switch__track::after { opacity: .1; }
.rz-switch:not(.is-on) .rz-switch__input:focus-visible + .rz-switch__track,
.rz-switch.is-focused:not(.is-on) .rz-switch__track { border-color: var(--rz-sw-focus); }
.rz-switch:not(.is-on) .rz-switch__input:focus-visible + .rz-switch__track .rz-switch__knob,
.rz-switch.is-focused:not(.is-on) .rz-switch__knob { background: var(--rz-sw-focus); }
.rz-switch.is-disabled { cursor: not-allowed; }
.rz-switch.is-disabled .rz-switch__track, .rz-switch.is-disabled .rz-switch__label { opacity: .5; }
/* loading: the knob gets a cut-out quarter arc that turns (the file's _switch-nob loading phases) */
.rz-switch.is-loading { cursor: progress; }
.rz-switch.is-loading .rz-switch__knob::after { content: ""; position: absolute; inset: 2px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--rz-sw-on); animation: rz-switch-spin .8s linear infinite; }
.rz-switch.is-loading:not(.is-on) .rz-switch__knob::after { border-top-color: var(--background-page); }
@keyframes rz-switch-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rz-switch__knob, .rz-switch__track { transition: none; } .rz-switch.is-loading .rz-switch__knob::after { animation-duration: 2.4s; } }

/* ---------- Table ---------- */
/* Frame: the white card the file sets a table in, with a toolbar above and pagination below. */
.rz-table-frame { display: flex; flex-direction: column; gap: var(--space-24); box-sizing: border-box; padding: var(--space-12);
  background: var(--background-surface); border: 1px solid var(--background-surface-alt); border-radius: 24px; /* file literal */
  font-family: var(--font-sans); }
.rz-table-frame__toolbar, .rz-table-frame__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }

.rz-table__scroll { overflow-x: auto; }
.rz-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-sans); color: var(--text-primary); }
.rz-table__caption { padding-bottom: var(--space-8); text-align: left; font-size: 14px; line-height: 1.3; color: var(--text-secondary); }

/* Header cells: Table Header / Side = LeftEnd · Center · RightEnd */
.rz-table__th { box-sizing: border-box; height: 58px; padding: 0 var(--space-16); background: var(--background-surface-alt);
  border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default);
  font-size: 16px; line-height: 1; font-weight: 400; text-align: left; vertical-align: middle; white-space: nowrap; }
.rz-table__th:first-child { border-left: 1px solid var(--border-default); border-top-left-radius: 24px; /* file literal */ }
.rz-table__th:last-child { border-right: 1px solid var(--border-default); border-top-right-radius: 24px; /* file literal */ }
.rz-table__th--actions { width: 1%; }
.rz-table__sort { display: inline-flex; align-items: center; gap: var(--space-10); padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-sm); }
.rz-table__th:first-child .rz-table__sort { gap: var(--space-8); }
.rz-table__sort .rz-icon { color: var(--icon-enable); }
.rz-table__sort.is-sorted .rz-icon { color: var(--icon-brand); }
.rz-table__sort:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Body cells: Table Row / Variable Row = 1 · 2, Type = Default · Date · Actions */
.rz-table__td { box-sizing: border-box; height: 50px; padding: 0 var(--space-16); background: var(--background-surface);
  border-bottom: 1px solid var(--border-default); font-size: 14px; line-height: 1.3; vertical-align: middle; }
.rz-table--striped .rz-table__row:nth-child(even) .rz-table__td { background: var(--background-page); }
.rz-table__td:first-child { border-left: 1px solid var(--border-default); }
.rz-table__td:last-child { border-right: 1px solid var(--border-default); }
.rz-table__row:last-child .rz-table__td:first-child { border-bottom-left-radius: 24px; /* file literal */ }
.rz-table__row:last-child .rz-table__td:last-child { border-bottom-right-radius: 24px; /* file literal */ }
.rz-table__td--actions { width: 1%; white-space: nowrap; }

.rz-table__date { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.rz-table__time { font-size: 12px; line-height: 1.3; color: var(--text-muted); }

.rz-table__actions { display: flex; align-items: center; gap: var(--space-10); }
.rz-table__action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--radius-lg); cursor: pointer; transition: background-color .12s; }
.rz-table__action--primary { background: var(--blue-100); color: var(--action-primary-bg); }
.rz-table__action--primary:hover { background: var(--blue-200); }
.rz-table__action--danger { background: var(--state-danger-bg); color: var(--state-danger-text); }
.rz-table__action--danger:hover { background: var(--red-100); }
.rz-table__action:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rz-table__action:disabled { cursor: not-allowed; background: var(--gray-200); color: var(--icon-disabled); }

/* ---------- Tabs ---------- */
.rz-tabs { display: flex; align-items: stretch; font-family: var(--font-sans); }
.rz-tabs__tab {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); box-sizing: border-box;
  margin: 0; border: 0; background: transparent; font: inherit; white-space: nowrap; cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s;
}
.rz-tabs__tab:focus-visible { outline: none; box-shadow: var(--focus-ring); position: relative; z-index: 1; }
.rz-tabs__tab:disabled { cursor: not-allowed; }
.rz-tabs__panel { padding-top: var(--space-16); font-family: var(--font-sans); font-size: 16px; line-height: 1.3; color: var(--text-primary); }
.rz-tabs__panel:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ---- default: plain items, 16px label, 8/16 padding ---- */
.rz-tabs--default { gap: 0; }
.rz-tabs--default .rz-tabs__tab { padding: var(--space-8) var(--space-16); font-size: 16px; line-height: 1.3; color: var(--text-brand); border-radius: var(--radius-sm); }
.rz-tabs--default .rz-tabs__tab:hover { color: var(--blue-600); }
.rz-tabs--default .rz-tabs__tab.is-active { color: var(--gray-700); }
.rz-tabs--default .rz-tabs__tab:disabled { color: var(--gray-600); }
/* light / dark colour schemes: black or white text at the file's opacities */
.rz-tabs--light .rz-tabs__tab { color: rgba(0, 0, 0, 0.55); /* file literal */ }
.rz-tabs--light .rz-tabs__tab:hover { color: rgba(0, 0, 0, 0.7); /* file literal */ }
.rz-tabs--light .rz-tabs__tab.is-active { color: rgba(0, 0, 0, 0.9); /* file literal */ }
.rz-tabs--light .rz-tabs__tab:disabled { color: rgba(0, 0, 0, 0.3); /* file literal */ }
.rz-tabs--dark .rz-tabs__tab { color: rgba(255, 255, 255, 0.55); /* file literal */ }
.rz-tabs--dark .rz-tabs__tab:hover { color: rgba(255, 255, 255, 0.75); /* file literal */ }
.rz-tabs--dark .rz-tabs__tab.is-active { color: var(--text-inverse); }
.rz-tabs--dark .rz-tabs__tab:disabled { color: rgba(255, 255, 255, 0.25); /* file literal */ }

/* ---- pill: pills in a surface-alt track ---- */
.rz-tabs--pill { display: inline-flex; gap: var(--space-4); padding: var(--space-4); border-radius: 30px; /* file literal */ background: var(--background-surface-alt); }
.rz-tabs--pill .rz-tabs__tab { padding: var(--space-8) var(--space-16); border-radius: var(--radius-pill); background: var(--background-page);
  font-size: 14px; line-height: 1.3; color: var(--text-brand); }
.rz-tabs--pill .rz-tabs__tab:hover { background: var(--blue-100); color: var(--blue-600); }
.rz-tabs--pill .rz-tabs__tab.is-active { background: var(--background-brand); color: var(--text-inverse); }
.rz-tabs--pill .rz-tabs__tab:disabled { background: var(--gray-300); color: var(--gray-600); }

/* ---- tab: folder tabs on a 1px rule; the active tab sits on the rule and hides it ---- */
.rz-tabs--tab { box-shadow: inset 0 -1px 0 var(--border-default); }
.rz-tabs--tab .rz-tabs__tab { height: 39px; padding: var(--space-8) var(--space-16) 9px; /* file literal: 9px bottom */
  border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: 16px; line-height: 1.3; color: var(--text-brand); }
.rz-tabs--tab .rz-tabs__tab:hover, .rz-tabs--tab .rz-tabs__tab.is-active {
  border-color: var(--border-default); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--background-surface); }
.rz-tabs--tab .rz-tabs__tab:hover { color: var(--blue-600); }
.rz-tabs--tab .rz-tabs__tab.is-active { color: var(--gray-700); }
.rz-tabs--tab .rz-tabs__tab:disabled { border-color: transparent; background: transparent; color: var(--gray-600); }

/* ---------- Toast ---------- */
.rz-toast { --rz-toast-bg: var(--background-surface); --rz-toast-fg: var(--text-primary);
  position: fixed; z-index: 1090; top: var(--space-16); right: var(--space-16);
  width: 350px; /* file literal */ max-width: calc(100vw - 32px); box-sizing: border-box; overflow: hidden;
  background: var(--rz-toast-bg); border: 1px solid var(--border-default); border-radius: 14px; /* file literal */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* file literal */ font-family: var(--font-sans); }
.rz-toast--inline { position: relative; top: auto; right: auto; z-index: auto; }

.rz-toast--primary   { --rz-toast-bg: var(--state-info-text);    --rz-toast-fg: var(--text-inverse); }
.rz-toast--secondary { --rz-toast-bg: #6c757d; /* file literal */ --rz-toast-fg: var(--text-inverse); }
.rz-toast--success   { --rz-toast-bg: var(--state-success-text); --rz-toast-fg: var(--text-inverse); }
.rz-toast--danger    { --rz-toast-bg: var(--state-danger-border); --rz-toast-fg: var(--text-inverse); }
.rz-toast--warning   { --rz-toast-bg: var(--state-warning-text); --rz-toast-fg: var(--text-inverse); }
.rz-toast--dark      { --rz-toast-bg: var(--gray-900);           --rz-toast-fg: var(--text-inverse); }

/* header: white at 85% over the toast color, so colored toasts get a tinted header */
.rz-toast__header { display: flex; align-items: center; gap: var(--space-8); box-sizing: border-box;
  padding: var(--space-8) 33px var(--space-8) var(--space-12); /* file literal: 6px + 27px lane for the close button */
  background: rgba(255, 255, 255, 0.85); /* file literal */ border-bottom: 1px solid var(--border-default); }
.rz-toast__image { flex: none; display: flex; width: 20px; height: 20px; overflow: hidden; border-radius: var(--radius-lg); background: rgba(0, 0, 0, 0.9); /* file literal */ }
.rz-toast__image img { width: 100%; height: 100%; object-fit: cover; }
.rz-toast__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--text-secondary); }
.rz-toast__time { flex: none; padding-right: var(--space-4); font-size: 12px; font-weight: 400; line-height: 1.26; color: var(--text-secondary); white-space: nowrap; }

.rz-toast__body { padding: var(--space-12); font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--rz-toast-fg); }
.rz-toast--no-header .rz-toast__body { padding-right: 33px; /* file literal: keeps text clear of the close button */ }

.rz-toast__close { position: absolute; top: var(--space-8); right: 6px; /* file literal */ display: flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; /* file literal */ padding: 0; border: 0; border-radius: var(--radius-md); background: transparent;
  color: var(--text-primary); opacity: 0.5; /* file literal */ cursor: pointer; }
.rz-toast--no-header:not(.rz-toast--default) .rz-toast__close { color: var(--text-inverse); }
.rz-toast__close:hover { opacity: 0.75; }
.rz-toast__close:focus-visible { outline: none; opacity: 1; box-shadow: var(--focus-ring); }

/* ---------- Tooltip ---------- */
.rz-tooltip { position: relative; display: inline-flex; font-family: var(--font-sans); }

.rz-tooltip__bubble { position: absolute; z-index: 1100; display: flex; width: max-content; max-width: 200px; /* file literal */
  opacity: 0.9; /* file literal: the whole tooltip is 90% */ pointer-events: none; }
.rz-tooltip__bubble--fixed { width: 200px; /* file literal */ }
.rz-tooltip--top    > .rz-tooltip__bubble { bottom: calc(100% + var(--space-4)); left: 50%; transform: translateX(-50%); }
.rz-tooltip--bottom > .rz-tooltip__bubble { top: calc(100% + var(--space-4)); left: 50%; transform: translateX(-50%); }
.rz-tooltip--left   > .rz-tooltip__bubble { right: calc(100% + var(--space-4)); top: 50%; transform: translateY(-50%); }
.rz-tooltip--right  > .rz-tooltip__bubble { left: calc(100% + var(--space-4)); top: 50%; transform: translateY(-50%); }

/* inline: trigger and bubble in normal flow */
.rz-tooltip--inline { align-items: center; }
.rz-tooltip--inline.rz-tooltip--top    { flex-direction: column-reverse; }
.rz-tooltip--inline.rz-tooltip--bottom { flex-direction: column; }
.rz-tooltip--inline.rz-tooltip--left   { flex-direction: row-reverse; }
.rz-tooltip--inline.rz-tooltip--right  { flex-direction: row; }
.rz-tooltip--inline > .rz-tooltip__bubble { position: relative; inset: auto; transform: none; }
.rz-tooltip--inline.rz-tooltip--top    > .rz-tooltip__bubble:not(:only-child) { margin-bottom: var(--space-4); }
.rz-tooltip--inline.rz-tooltip--bottom > .rz-tooltip__bubble:not(:only-child) { margin-top: var(--space-4); }
.rz-tooltip--inline.rz-tooltip--left   > .rz-tooltip__bubble:not(:only-child) { margin-right: var(--space-4); }
.rz-tooltip--inline.rz-tooltip--right  > .rz-tooltip__bubble:not(:only-child) { margin-left: var(--space-4); }

.rz-tooltip__body { flex: 1; box-sizing: border-box; padding: var(--space-4) var(--space-8); background: var(--gray-300);
  border-radius: var(--radius-xl); font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--text-primary); text-align: center; }

/* arrow: 12 x 6 triangle in the bubble fill, in a 7px gap */
.rz-tooltip__bubble--top, .rz-tooltip__bubble--bottom { flex-direction: column; padding: 7px 0; /* file literal: arrow lane */ }
.rz-tooltip__bubble--left, .rz-tooltip__bubble--right { flex-direction: row; padding: 0 6px; /* file literal: arrow lane */ }
.rz-tooltip__bubble--top { padding-top: 0; }
.rz-tooltip__bubble--bottom { padding-bottom: 0; }
.rz-tooltip__bubble--left { padding-left: 0; }
.rz-tooltip__bubble--right { padding-right: 0; }
.rz-tooltip__arrow { position: absolute; width: 0; height: 0; border: 6px solid transparent; }
.rz-tooltip__bubble--top .rz-tooltip__arrow    { bottom: 1px; left: calc(50% - 6px); border-bottom: 0; border-top-color: var(--gray-300); }
.rz-tooltip__bubble--bottom .rz-tooltip__arrow { top: 1px; left: calc(50% - 6px); border-top: 0; border-bottom-color: var(--gray-300); }
.rz-tooltip__bubble--left .rz-tooltip__arrow   { right: 0; top: calc(50% - 6px); border-right: 0; border-left-color: var(--gray-300); }
.rz-tooltip__bubble--right .rz-tooltip__arrow  { left: 0; top: calc(50% - 6px); border-left: 0; border-right-color: var(--gray-300); }