/*
 * Roca Professionals, participant site and cabinet: statuses, levels, progress, rating.
 * A plain chip, status chips of claims and contests, admin flags, the level badge, progress to a goal,
 * the Квартал / Год switch, the result, rating rows and the filter chips.
 * Mockup: Claude Design, Дизайн-система section 07 and CabinetBlock. Conventions: the head of rp-base.css.
 */

/* ---- Chip: a neutral label without a dot (Второй этап программы, Level 2 и Level 3) ------------- */

.rp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--rp-sp-1-5);
  max-width: 100%;
  min-height: var(--rp-chip-h);
  padding: var(--rp-sp-1) var(--rp-sp-3);
  border-radius: var(--rp-r-xs);
  background: var(--rp-stone);
  color: var(--rp-ink-2);
  font-size: var(--rp-fs-caption);
  font-weight: var(--rp-fw-medium);
  line-height: var(--rp-lh-snug);
  vertical-align: middle;
}

.rp-chip--ink {
  background: var(--rp-surface-inverse);
  color: var(--rp-text-inverse);
}

/* ---- Status chip: a dot in the colour of the status and the text ------------------------------- */

/* The tone lives in two local properties, so the quiet variant can keep the dot colour alone. */
.rp-status {
  --st-fg: var(--rp-neutral);
  --st-bg: var(--rp-neutral-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--rp-sp-1-5);
  max-width: 100%;
  min-height: var(--rp-chip-h);
  padding: var(--rp-sp-1) var(--rp-sp-3);
  border-radius: var(--rp-r-pill);
  background: var(--st-bg);
  color: var(--st-fg);
  font-size: var(--rp-fs-caption);
  font-weight: var(--rp-fw-medium);
  line-height: var(--rp-lh-snug);
  vertical-align: middle;
}

.rp-status__dot {
  flex: none;
  width: var(--rp-dot);
  height: var(--rp-dot);
  border-radius: var(--rp-r-round);
  background: var(--st-fg);
}

.rp-status .rp-icon {
  width: var(--rp-sp-4);
  height: var(--rp-sp-4);
}

.rp-status--accent { --st-fg: var(--rp-accent); --st-bg: var(--rp-accent-soft); }
.rp-status--success { --st-fg: var(--rp-success); --st-bg: var(--rp-success-soft); }
.rp-status--warning { --st-fg: var(--rp-warning); --st-bg: var(--rp-warning-soft); }
.rp-status--danger { --st-fg: var(--rp-danger); --st-bg: var(--rp-danger-soft); }

/* Отменена после одобрения: was approved, so it gets a frame instead of a fill. */
.rp-status--outline {
  --st-fg: var(--rp-danger);
  --st-bg: var(--rp-surface);
  box-shadow: inset 0 0 0 var(--rp-bw) var(--rp-danger);
}

/* Победитель: the only status on ink. */
.rp-status--inverse { --st-fg: var(--rp-text-inverse); --st-bg: var(--rp-surface-inverse); }

/* Участник of a contest: took part, nothing to report. */
.rp-status--plain {
  --st-fg: var(--rp-text-secondary);
  --st-bg: var(--rp-surface);
  box-shadow: inset 0 0 0 var(--rp-bw) var(--rp-line-strong);
}

/* A hollow dot: nothing is in force (Черновик, Отменена после одобрения). */
.rp-status--neutral .rp-status__dot,
.rp-status--outline .rp-status__dot {
  background: transparent;
  box-shadow: inset 0 0 0 var(--rp-bw) var(--st-fg);
}

/* Inside lists and the profile: stone and ink, only the dot keeps the colour of the status. */
.rp-status--quiet {
  background: var(--rp-stone);
  color: var(--rp-text);
  box-shadow: none;
}

/* ---- Reason: always next to the status and says what to do ------------------------------------- */

.rp-reason {
  margin: 0;
  font-size: var(--rp-fs-small);
  line-height: var(--rp-lh-body);
  color: var(--rp-text);
  text-wrap: pretty;
}

.rp-reason__label {
  font-weight: var(--rp-fw-medium);
  color: var(--rp-danger);
}

.rp-reason--warning,
.rp-reason--danger {
  padding: var(--rp-sp-3) var(--rp-sp-4);
  border-radius: var(--rp-r-md);
}

.rp-reason--warning { background: var(--rp-warning-soft); }
.rp-reason--warning .rp-reason__label { color: var(--rp-warning); }
.rp-reason--danger { background: var(--rp-danger-soft); }

/* ---- Flags of the admin area: square, with an icon ---------------------------------------------- */

.rp-flag {
  --fl-fg: var(--rp-neutral);
  --fl-bg: var(--rp-neutral-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--rp-sp-1-5);
  max-width: 100%;
  min-height: var(--rp-sp-6);
  padding: var(--rp-sp-0-5) var(--rp-sp-2);
  border-radius: var(--rp-r-xs);
  background: var(--fl-bg);
  color: var(--fl-fg);
  font-size: var(--rp-fs-caption);
  font-weight: var(--rp-fw-medium);
  line-height: var(--rp-lh-snug);
  vertical-align: middle;
}

.rp-flag .rp-icon {
  width: var(--rp-sp-4);
  height: var(--rp-sp-4);
}

.rp-flag--warning { --fl-fg: var(--rp-warning); --fl-bg: var(--rp-warning-soft); }
.rp-flag--danger { --fl-fg: var(--rp-danger); --fl-bg: var(--rp-danger-soft); }

/* ---- Level badge: three dots and the name ------------------------------------------------------- */

/* rp-level is the level tile of the public site (rp-site.css), hence the longer name. */
.rp-level-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--rp-sp-2);
  max-width: 100%;
  min-height: var(--rp-chip-h);
  padding: var(--rp-sp-1) var(--rp-sp-3);
  border-radius: var(--rp-r-pill);
  background: var(--rp-surface);
  color: var(--rp-text);
  box-shadow: inset 0 0 0 var(--rp-bw) var(--rp-line-strong);
  font-size: var(--rp-fs-caption);
  font-weight: var(--rp-fw-medium);
  line-height: var(--rp-lh-snug);
  vertical-align: middle;
}

.rp-level-badge__dots {
  display: flex;
  flex: none;
  gap: var(--rp-sp-0-5);
}

.rp-level-badge__dot {
  width: var(--rp-dot);
  height: var(--rp-dot);
  border-radius: var(--rp-r-round);
  background: currentColor;
}

.rp-level-badge--1 .rp-level-badge__dot:nth-child(n + 2),
.rp-level-badge--2 .rp-level-badge__dot:nth-child(3) {
  background: transparent;
  box-shadow: inset 0 0 0 var(--rp-bw) var(--rp-line-field);
}

/* In a row the name is cut; rp-level-badge--wrap (the profile) lets it wrap. */
.rp-level-badge__name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rp-level-badge--3 {
  background: var(--rp-surface-inverse);
  color: var(--rp-text-inverse);
  box-shadow: none;
}

.rp-level-badge--wrap {
  align-items: flex-start;
  padding-block: var(--rp-sp-1-5);
  border-radius: var(--rp-r-md);
}

/* Centres the dots on the first line of the name. */
.rp-level-badge--wrap .rp-level-badge__dots {
  margin-top: var(--rp-sp-1);
}

.rp-level-badge--wrap .rp-level-badge__name {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ---- Progress to a goal: the label above, the bar, the scale below ------------------------------- */

.rp-progress {
  display: flex;
  flex-direction: column;
  gap: var(--rp-sp-2);
  min-width: 0;
}

.rp-progress__label {
  display: flex;
  align-items: center;
  gap: var(--rp-sp-1-5);
  margin: 0;
  font-size: var(--rp-fs-body);
  font-weight: var(--rp-fw-medium);
  line-height: var(--rp-lh-snug);
}

.rp-progress__track {
  position: relative;
  display: block;
  height: var(--rp-progress-h);
  overflow: hidden;
  border-radius: var(--rp-r-pill);
  background: var(--rp-surface-strong);
}

/* The share comes from the markup as a number 0..1 (style="--rp-progress:.65"); scaleX keeps the
   motion on transform. */
.rp-progress__bar {
  display: block;
  height: 100%;
  border-radius: var(--rp-r-pill);
  background: var(--rp-accent);
  transform: scaleX(var(--rp-progress, 0));
  transform-origin: 0 50%;
  transition: transform var(--rp-dur-slow) var(--rp-ease);
}

/* Edges of the scale: 650 000 ₸ and 1 000 000 ₸. */
.rp-progress__scale {
  display: flex;
  justify-content: space-between;
  gap: var(--rp-sp-3);
  margin: 0;
  font-size: var(--rp-fs-small);
  line-height: var(--rp-lh-snug);
  color: var(--rp-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Ticks hang from the bar: each one sits at --rp-at of the width (style="--rp-at:50%"). All ticks
   share one grid cell, so the row is as tall as one label and nothing is absolutely positioned. */
.rp-progress__ticks {
  display: grid;
  margin-top: calc(-1 * var(--rp-sp-2));
  font-size: var(--rp-fs-caption);
  line-height: var(--rp-lh-snug);
  color: var(--rp-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.rp-progress__tick {
  position: relative;
  grid-area: 1 / 1;
  justify-self: start;
  margin-left: var(--rp-at, 0%);
  padding-top: var(--rp-sp-2);
  white-space: nowrap;
  transform: translateX(-50%);
}

.rp-progress__tick::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--rp-bw);
  height: var(--rp-sp-1-5);
  background: var(--rp-line-strong);
}

.rp-progress__tick--start {
  margin-left: 0;
  transform: none;
}

.rp-progress__tick--start::before {
  left: 0;
}

.rp-progress__tick--end {
  justify-self: end;
  margin-left: 0;
  transform: none;
}

.rp-progress__tick--end::before {
  left: auto;
  right: 0;
}

/* Thin, 2 px: a quiet meter such as places taken at an event, ink on the line colour. */
.rp-progress--thin {
  gap: var(--rp-sp-1-5);
}

.rp-progress--thin .rp-progress__label {
  font-size: var(--rp-fs-small);
}

.rp-progress--thin .rp-progress__track {
  height: var(--rp-progress-h-thin);
  background: var(--rp-line);
}

.rp-progress--thin .rp-progress__bar {
  background: var(--rp-text);
}

/* Few left: Осталось 6 мест из 40. */
.rp-progress--warning .rp-progress__label {
  color: var(--rp-warning);
}

/* Цель выполнена: the whole bar turns success. */
.rp-progress.is-done .rp-progress__label {
  color: var(--rp-success);
}

.rp-progress.is-done .rp-progress__track {
  background: var(--rp-success);
}

.rp-progress.is-done .rp-progress__bar {
  background: var(--rp-success);
  transform: none;
}

/* ---- Segmented switch: Квартал / Год ------------------------------------------------------------ */

/* The white thumb is ::before of the switch and slides under the selected item (is-active or
   aria-selected="true"); its place is found with :has(), so the markup carries no index. */
.rp-seg {
  --seg-n: 2;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  min-width: 0;
  padding: var(--rp-sp-1);
  border-radius: var(--rp-r-pill);
  background: var(--rp-surface-strong);
}

.rp-seg::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--rp-sp-1);
  bottom: var(--rp-sp-1);
  left: var(--rp-sp-1);
  width: calc((100% - 2 * var(--rp-sp-1)) / var(--seg-n));
  border-radius: var(--rp-r-pill);
  background: var(--rp-surface);
  box-shadow: var(--rp-sh-1);
  transition: transform var(--rp-dur) var(--rp-ease);
}

.rp-seg:has(> .rp-seg__item:nth-child(3)) { --seg-n: 3; }
.rp-seg:has(> .rp-seg__item:nth-child(4)) { --seg-n: 4; }

.rp-seg:has(> .rp-seg__item:nth-child(2):is(.is-active, [aria-selected="true"]))::before { transform: translateX(100%); }
.rp-seg:has(> .rp-seg__item:nth-child(3):is(.is-active, [aria-selected="true"]))::before { transform: translateX(200%); }
.rp-seg:has(> .rp-seg__item:nth-child(4):is(.is-active, [aria-selected="true"]))::before { transform: translateX(300%); }
.rp-seg:not(:has(> :is(.is-active, [aria-selected="true"])))::before { opacity: 0; }

.rp-seg__item {
  min-width: 0;
  min-height: var(--rp-tap);
  padding: 0 var(--rp-sp-2);
  overflow: hidden;
  border: 0;
  border-radius: var(--rp-r-pill);
  background: transparent;
  color: var(--rp-text-secondary);
  font-size: var(--rp-fs-small);
  font-weight: var(--rp-fw-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rp-seg__item:hover,
.rp-seg__item.is-active,
.rp-seg__item[aria-selected="true"] {
  color: var(--rp-text);
}

.rp-seg__item:focus-visible {
  outline-offset: calc(-1 * var(--rp-bw-strong));
}

/* Without :has() the selected item paints its own thumb and nothing slides. */
@supports not selector(:has(*)) {
  .rp-seg::before {
    display: none;
  }

  .rp-seg__item.is-active,
  .rp-seg__item[aria-selected="true"] {
    background: var(--rp-surface);
    box-shadow: var(--rp-sh-1);
  }
}

/* ---- Result: IV квартал 2026, 85 баллов, 27 место из 214 --------------------------------------- */

.rp-result {
  display: flex;
  flex-direction: column;
  gap: var(--rp-sp-1);
  min-width: 0;
}

.rp-result__period,
.rp-result__place {
  margin: 0;
  font-size: var(--rp-fs-small);
  line-height: var(--rp-lh-snug);
  color: var(--rp-text-secondary);
}

.rp-result__value {
  margin: 0;
  font-size: var(--rp-fs-number);
  font-weight: var(--rp-fw-heading);
  line-height: var(--rp-lh-tight);
  letter-spacing: var(--rp-ls-display);
  font-variant-numeric: tabular-nums;
}

/* ---- Rating: rows of place, avatar, name and city, result --------------------------------------- */

/* clip, not hidden: a hidden overflow would become the scroller and break the pinned own row. */
.rp-rating {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: clip;
  border-radius: var(--rp-r-lg);
  background: var(--rp-surface);
  box-shadow: var(--rp-sh-1);
  list-style: none;
}

.rp-rating__row {
  display: grid;
  grid-template-columns: var(--rp-sp-8) var(--rp-avatar) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--rp-sp-3);
  min-height: var(--rp-sp-16);
  padding: var(--rp-sp-2) var(--rp-sp-4);
  background: var(--rp-surface);
  box-shadow: inset 0 calc(-1 * var(--rp-bw)) 0 var(--rp-line);
}

.rp-rating__place {
  font-size: var(--rp-fs-body);
  font-weight: var(--rp-fw-medium);
  color: var(--rp-text-secondary);
  font-variant-numeric: tabular-nums;
}

.rp-rating__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rp-rating__name {
  overflow: hidden;
  font-size: var(--rp-fs-body);
  line-height: var(--rp-lh-snug);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rp-rating__city {
  font-size: var(--rp-fs-caption);
  line-height: var(--rp-lh-snug);
  color: var(--rp-text-tertiary);
}

.rp-rating__score {
  font-size: var(--rp-fs-body);
  font-weight: var(--rp-fw-medium);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Your own row: stone with an accent rule on the left. */
.rp-rating__row--me {
  background: var(--rp-accent-soft);
  box-shadow: inset var(--rp-progress-h-thin) 0 0 var(--rp-accent);
}

.rp-rating__row--me .rp-rating__place { color: var(--rp-accent); }
.rp-rating__row--me .rp-rating__name { font-weight: var(--rp-fw-medium); }
.rp-rating__row--me .rp-rating__city { color: var(--rp-text-secondary); }
.rp-rating__row--me .rp-avatar { background: var(--rp-surface); }

/* Pinned to the bottom of the scroller; a page with a tab bar sets --rp-pin-bottom above it. */
.rp-rating__row--pinned {
  position: sticky;
  z-index: 1;
  bottom: var(--rp-pin-bottom, 0);
  box-shadow: inset var(--rp-progress-h-thin) 0 0 var(--rp-accent), var(--rp-sh-bar);
}

/* Участник скрыт: the lock instead of the avatar, the name quiet. */
.rp-rating__row--hidden .rp-rating__name {
  color: var(--rp-text-tertiary);
}

/* The break between TOP-10 and your own row. */
.rp-rating__gap {
  display: flex;
  justify-content: center;
  padding: var(--rp-sp-1);
  font-size: var(--rp-fs-body);
  line-height: var(--rp-lh-snug);
  color: var(--rp-text-tertiary);
}

/* ---- Filter chips: one row that scrolls sideways ------------------------------------------------ */

.rp-filters {
  display: flex;
  gap: var(--rp-sp-2);
  padding-block: var(--rp-sp-1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.rp-filters::-webkit-scrollbar {
  display: none;
}

/* Runs under the edge of the screen, so the cut chip says there is more (phone gutter). */
.rp-filters--bleed {
  margin-inline: calc(-1 * var(--rp-gutter-m));
  padding-inline: var(--rp-gutter-m);
  scroll-padding-inline: var(--rp-gutter-m);
}

.rp-filter {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--rp-sp-1-5);
  min-height: var(--rp-tap);
  padding: 0 var(--rp-sp-4);
  border: 0;
  border-radius: var(--rp-r-pill);
  background: var(--rp-surface);
  color: var(--rp-text);
  box-shadow: inset 0 0 0 var(--rp-bw) var(--rp-line-strong);
  font-size: var(--rp-fs-small);
  font-weight: var(--rp-fw-medium);
  white-space: nowrap;
  text-decoration: none;
}

.rp-filter__count {
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
  .rp-filter:hover {
    color: var(--rp-text);
    box-shadow: inset 0 0 0 var(--rp-bw) var(--rp-line-quiet);
  }
}

.rp-filter.is-active,
.rp-filter[aria-pressed="true"],
.rp-filter[aria-current] {
  background: var(--rp-text);
  color: var(--rp-text-inverse);
  box-shadow: none;
}

/* The row clips anything outside it, so the focus ring goes inside the chip. */
.rp-filter:focus-visible {
  outline-offset: calc(-1 * var(--rp-bw-strong));
}

/* ---- Progress of ticks (Watermelon: Credit Usage Card) ---------------------------------------- */

/* Thin ticks instead of a solid bar; the filled share is --rp-progress (0..1). Static: no data animates it yet. */
.rp-ticks {
  --rp-tick: var(--rp-bw-strong);
  --rp-tick-step: calc(var(--rp-bw-strong) * 3);
  position: relative;
  height: var(--rp-sp-4);
  background: repeating-linear-gradient(90deg, var(--rp-line-strong) 0 var(--rp-tick), transparent var(--rp-tick) var(--rp-tick-step));
}

.rp-ticks::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--rp-accent) 0 var(--rp-tick), transparent var(--rp-tick) var(--rp-tick-step));
  clip-path: inset(0 calc((1 - var(--rp-progress, 0)) * 100%) 0 0);
}

.rp-ticks--clay::before {
  background: repeating-linear-gradient(90deg, var(--rp-ink-2) 0 var(--rp-tick), transparent var(--rp-tick) var(--rp-tick-step));
}

.rp-ticks__legend {
  display: flex;
  justify-content: space-between;
  gap: var(--rp-sp-3);
  margin-top: var(--rp-sp-2);
  font-family: var(--rp-font-mono);
  font-size: var(--rp-fs-micro);
  color: var(--rp-text-tertiary);
}

/* ---- A checklist that folds (Watermelon: Onboarding Checklist) -------------------------------- */

.rp-checklist {
  border-radius: var(--rp-r-lg);
  background: var(--rp-surface);
  box-shadow: var(--rp-sh-1);
}

.rp-checklist__head {
  display: flex;
  align-items: center;
  gap: var(--rp-sp-3);
  min-height: var(--rp-sp-16);
  padding: var(--rp-sp-3) var(--rp-sp-4);
  cursor: pointer;
  list-style: none;
}

.rp-checklist__head::-webkit-details-marker {
  display: none;
}

.rp-checklist__head > .rp-icon {
  color: var(--rp-text-tertiary);
  transition: transform var(--rp-dur) var(--rp-ease);
}

.rp-checklist:not([open]) .rp-checklist__head > .rp-icon {
  transform: rotate(-90deg);
}

.rp-checklist__title {
  flex: 1;
  min-width: 0;
  font-weight: var(--rp-fw-medium);
}

/* One short tick per item, the done ones in the accent. */
.rp-checklist__ticks {
  display: flex;
  gap: var(--rp-sp-0-5);
}

.rp-checklist__tick {
  width: var(--rp-bw-strong);
  height: var(--rp-sp-4);
  border-radius: var(--rp-r-xs);
  background: var(--rp-line-strong);
}

.rp-checklist__tick.is-done {
  background: var(--rp-accent);
}

.rp-checklist__count {
  min-width: var(--rp-sp-8);
  font-family: var(--rp-font-mono);
  font-size: var(--rp-fs-caption);
  color: var(--rp-text-tertiary);
  text-align: right;
}

.rp-checklist__body {
  border-top: var(--rp-bw) solid var(--rp-line);
  animation: rp-fade-in var(--rp-dur) var(--rp-ease);
}

.rp-checklist__body .rp-list {
  border-radius: 0 0 var(--rp-r-lg) var(--rp-r-lg);
  box-shadow: none;
}

/* ---- A number that rolls by digits (Skiper: Number flow) -------------------------------------- */

/* Each digit is a column 0-9 moved by translateY; only the digits that change move. */
/* The digit box is em-based, not lh: lh is missing in Safari before 16.4. */
.rp-roll {
  --rp-roll-h: 1.1em;
  display: inline-flex;
  line-height: var(--rp-roll-h);
  font-variant-numeric: tabular-nums;
  vertical-align: bottom;
}

.rp-roll__digit {
  display: inline-block;
  height: var(--rp-roll-h);
  overflow: hidden;
}

.rp-roll__strip {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--rp-d, 0) * -1 * var(--rp-roll-h)));
  transition: transform var(--rp-dur-count) var(--rp-ease);
}

.rp-roll__strip > span {
  height: var(--rp-roll-h);
}

.rp-roll__sep {
  white-space: pre;
}