/*
 * Roca Professionals, participant site and cabinet: cards, rows of lists, the frame of the main block,
 * the participant profile.
 * Mockup: Claude Design, Дизайн-система section 06 and CabinetBlock. Conventions: the head of rp-base.css.
 * Status chips, the level badge and progress bars used inside the cards live in rp-status.css.
 */

/* ---- Card: white on paper, held by a line, no shadow --------------------------------------------- */

.rp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--rp-r-lg);
  background: var(--rp-surface);
  color: var(--rp-text);
  box-shadow: var(--rp-sh-1);
}

a.rp-card {
  text-decoration: none;
}

a.rp-card:hover {
  color: var(--rp-text);
}

@media (hover: hover) {
  a.rp-card:hover {
    box-shadow: 0 0 0 var(--rp-bw) var(--rp-line-strong);
  }
}

/* Photo on top: 16:9 for events, 4:3 for projects; an <img> fills it, rp-ph stands in for it. */
.rp-card__media {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--rp-ph-fill);
}

.rp-card__media--4x3 {
  aspect-ratio: 4 / 3;
}

.rp-card__media > img,
.rp-card__thumb > img,
.rp-card__pic > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Audience over the photo: Для Level 2 и Level 3. */
.rp-card__badge {
  position: absolute;
  top: var(--rp-sp-3);
  left: var(--rp-sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--rp-sp-1-5);
  max-width: calc(100% - 2 * var(--rp-sp-3));
  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);
  font-family: var(--rp-font);
  font-size: var(--rp-fs-caption);
  font-weight: var(--rp-fw-medium);
  line-height: var(--rp-lh-snug);
}

/* Photo counter: 1 / 8. */
.rp-card__count {
  position: absolute;
  top: var(--rp-sp-3);
  right: var(--rp-sp-3);
  padding: var(--rp-sp-1-5) var(--rp-sp-2);
  border-radius: var(--rp-r-xs);
  background: var(--rp-veil);
  color: var(--rp-text-secondary);
  font-family: var(--rp-font-mono);
  font-size: var(--rp-fs-micro);
  line-height: 1;
}

.rp-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--rp-sp-3);
  min-width: 0;
  padding: var(--rp-sp-5);
}

.rp-card__body > .rp-status,
.rp-card__info > .rp-status,
.rp-card__group > .rp-status {
  align-self: flex-start;
}

.rp-card__title {
  margin: 0;
  font-size: var(--rp-fs-h4);
  font-weight: var(--rp-fw-heading);
  line-height: var(--rp-lh-snug);
  letter-spacing: var(--rp-ls-heading);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* The title of a row card: body size. */
.rp-card__title--sm {
  font-size: var(--rp-fs-body);
}

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

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

/* Contest line under a line: Лучшая ванная 2026 · Подан. */
.rp-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rp-sp-3);
  padding-top: var(--rp-sp-3);
  border-top: var(--rp-bw) solid var(--rp-line);
  font-size: var(--rp-fs-small);
  line-height: var(--rp-lh-snug);
}

.rp-card__foot > :last-child {
  flex: none;
  color: var(--rp-text-secondary);
}

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

.rp-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rp-sp-2);
}

/* The main button of an event card sits a little lower than the gap. */
.rp-card__cta {
  margin-top: var(--rp-sp-1);
}

/* ---- Row cards: the compact event (date block on ink) and the prize ----------------------------- */

.rp-card--compact,
.rp-card--prize {
  flex-direction: row;
  gap: var(--rp-sp-4);
  padding: var(--rp-sp-4);
}

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

.rp-card__date {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rp-sp-0-5);
  width: var(--rp-sp-16);
  padding-block: var(--rp-sp-2);
  border-radius: var(--rp-r-md);
  background: var(--rp-surface-inverse);
  color: var(--rp-text-inverse);
}

.rp-card__day {
  font-size: var(--rp-fs-h3);
  font-weight: var(--rp-fw-medium);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rp-card__month {
  font-size: var(--rp-fs-micro);
  line-height: var(--rp-lh-snug);
}

/* Вы записаны. */
.rp-card__done {
  display: flex;
  align-items: center;
  gap: var(--rp-sp-1);
  margin: 0;
  font-size: var(--rp-fs-small);
  font-weight: var(--rp-fw-medium);
  line-height: var(--rp-lh-snug);
  color: var(--rp-success);
}

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

.rp-card__pic {
  flex: none;
  width: var(--rp-sp-24);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--rp-r-md);
  background: var(--rp-ph-fill);
}

.rp-card__pic.rp-ph {
  padding: var(--rp-sp-2);
}

/* ---- Check or sale: thumbnail, date and sum, shop, status; the reason and Исправить below ------- */

.rp-card--check {
  gap: var(--rp-sp-4);
  padding: var(--rp-sp-4);
}

.rp-card__row {
  display: flex;
  gap: var(--rp-sp-4);
  min-width: 0;
}

.rp-card__thumb {
  flex: none;
  width: var(--rp-thumb);
  aspect-ratio: 3 / 4;
  align-self: flex-start;
  overflow: hidden;
  border-radius: var(--rp-r-sm);
  background: var(--rp-ph-fill);
}

.rp-card__thumb.rp-ph {
  padding: 0;
}

.rp-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rp-sp-3);
}

.rp-card__sum {
  flex: none;
  font-size: var(--rp-fs-body);
  font-weight: var(--rp-fw-medium);
  line-height: var(--rp-lh-snug);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rp-card__info > .rp-status {
  margin-top: var(--rp-sp-1);
}

/* ---- Challenge: goal, the sum large, the bar, days left ------------------------------------------ */

.rp-card--challenge {
  gap: var(--rp-sp-4);
  padding: var(--rp-sp-5);
}

/* ЧЕЛЛЕНДЖ · ДО 31 ДЕКАБРЯ. */
.rp-card__rubric {
  display: flex;
  justify-content: space-between;
  gap: var(--rp-sp-3);
  margin: 0;
  font-size: var(--rp-fs-caption);
  line-height: var(--rp-lh-snug);
  color: var(--rp-text-tertiary);
}

.rp-card__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--rp-sp-2);
  margin: 0;
}

.rp-card__figure {
  font-size: var(--rp-fs-h2);
  font-weight: var(--rp-fw-heading);
  line-height: var(--rp-lh-heading);
  letter-spacing: var(--rp-ls-heading);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rp-card__of {
  font-size: var(--rp-fs-small);
  color: var(--rp-text-tertiary);
}

/* Осталось 560 000 ₸ · 83 дня, under the bar. */
.rp-card__split {
  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-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---- Certificate: the mark, the number, the course, the participant, PDF and a link -------------- */

.rp-card--cert {
  gap: var(--rp-sp-5);
  padding: var(--rp-sp-6) var(--rp-sp-5);
  box-shadow: inset 0 0 0 var(--rp-bw) var(--rp-line-strong);
}

.rp-card--cert .rp-card__group {
  gap: var(--rp-sp-2);
}

.rp-card__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rp-sp-2) var(--rp-sp-3);
}

/* The logo at caption size: the mark is 1.15 of the caption, as on the mockup. */
.rp-card__brand .rp-logo {
  gap: var(--rp-sp-2);
  font-size: var(--rp-fs-caption);
}

.rp-card__brand .rp-logo__mark {
  height: 1.15em;
}

.rp-card__brand .rp-logo__word {
  padding-left: var(--rp-sp-2);
  border-left-color: var(--rp-line-field);
}

/* RP-KZ-2026-000123. */
.rp-card__code {
  font-family: var(--rp-font-mono);
  font-size: var(--rp-fs-micro);
  line-height: 1;
  color: var(--rp-text-tertiary);
}

/* ---- List: rows with a line between them instead of a grid of cards ------------------------------ */

/* Children are rows (rp-list__row, rp-notification) or <li> around them; the line is drawn on each
   child after the first. clip keeps the corners without making the list a scroller. */
.rp-list {
  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-list > * + * {
  box-shadow: inset 0 var(--rp-bw) 0 var(--rp-line);
}

.rp-list__row {
  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);
  color: var(--rp-text);
  text-decoration: none;
}

a.rp-list__row:hover {
  color: var(--rp-text);
}

@media (hover: hover) {
  a.rp-list__row:hover,
  button.rp-list__row:hover {
    background: var(--rp-paper);
  }
}

button.rp-list__row {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
}

/* The list clips its children, so the focus ring goes inside the row. */
.rp-list__row:focus-visible {
  outline-offset: calc(-1 * var(--rp-bw-strong));
}

/* Date on the left: 12 / окт. As wide as rp-symbol, so dates and icons share one column. */
.rp-list__date {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--rp-avatar);
  min-height: var(--rp-sp-12);
  border-radius: var(--rp-r-md);
  background: var(--rp-stone);
}

.rp-list__day {
  font-size: var(--rp-fs-body);
  font-weight: var(--rp-fw-medium);
  line-height: var(--rp-lh-snug);
  font-variant-numeric: tabular-nums;
}

.rp-list__month {
  font-size: var(--rp-fs-micro);
  line-height: var(--rp-lh-snug);
  color: var(--rp-text-secondary);
}

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

.rp-list__main > .rp-status {
  align-self: flex-start;
  margin-top: var(--rp-sp-0-5);
}

.rp-list__title {
  margin: 0;
  font-size: var(--rp-fs-body);
  font-weight: var(--rp-fw-medium);
  line-height: var(--rp-lh-snug);
  overflow-wrap: anywhere;
}

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

/* Number or status on the right: 412 000 ₸ / Одобрена. */
.rp-list__end {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--rp-sp-0-5);
  max-width: 45%;
  text-align: right;
}

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

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

.rp-list__chevron {
  color: var(--rp-text-tertiary);
}

/* ---- Notification row: icon, title, text, time, the unread dot ---------------------------------- */

.rp-notification {
  display: flex;
  gap: var(--rp-sp-3);
  padding: var(--rp-sp-4);
  color: var(--rp-text);
  text-decoration: none;
}

a.rp-notification:hover {
  color: var(--rp-text);
}

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

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

.rp-notification__head {
  display: flex;
  justify-content: space-between;
  gap: var(--rp-sp-2);
}

/* Read by default: quieter title and text; is-unread brings the weight and the dot. */
.rp-notification__title {
  margin: 0;
  font-size: var(--rp-fs-body);
  font-weight: var(--rp-fw-regular);
  line-height: var(--rp-lh-snug);
  color: var(--rp-text-secondary);
  overflow-wrap: anywhere;
}

.rp-notification__dot {
  display: none;
  flex: none;
  width: var(--rp-sp-2);
  height: var(--rp-sp-2);
  margin-top: var(--rp-sp-1-5);
  border-radius: var(--rp-r-round);
  background: var(--rp-accent);
}

.rp-notification__text {
  margin: 0;
  font-size: var(--rp-fs-small);
  line-height: var(--rp-lh-snug);
  color: var(--rp-text-tertiary);
}

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

.rp-notification.is-unread .rp-notification__title {
  font-weight: var(--rp-fw-medium);
  color: var(--rp-text);
}

.rp-notification.is-unread .rp-notification__text {
  color: var(--rp-text-secondary);
}

.rp-notification.is-unread .rp-notification__dot {
  display: block;
}

/* ---- Symbol: an icon in a circle, tinted by meaning ---------------------------------------------- */

.rp-symbol {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--rp-avatar);
  height: var(--rp-avatar);
  border-radius: var(--rp-r-round);
  background: var(--rp-surface-sunken);
  color: var(--rp-text-secondary);
}

.rp-symbol--accent { background: var(--rp-accent-soft); color: var(--rp-accent); }
.rp-symbol--success { background: var(--rp-success-soft); color: var(--rp-success); }
.rp-symbol--warning { background: var(--rp-warning-soft); color: var(--rp-warning); }
.rp-symbol--danger { background: var(--rp-danger-soft); color: var(--rp-danger); }

/* ---- Avatar: initials on the photo stand-in, or the photo itself --------------------------------- */

.rp-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--rp-avatar);
  height: var(--rp-avatar);
  overflow: hidden;
  border-radius: var(--rp-r-round);
  background: var(--rp-ph-fill);
  color: var(--rp-ph-text);
  font-size: var(--rp-fs-caption);
  font-weight: var(--rp-fw-medium);
  line-height: 1;
}

.rp-avatar--lg {
  width: var(--rp-avatar-lg);
  height: var(--rp-avatar-lg);
  font-size: var(--rp-fs-lead);
}

.rp-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Frame in a frame: the main block of a screen, a white panel on a stone mat ------------------ */

/* Square corners like every box of the style; the mat is a stone border around the panel. */
.rp-frame {
  min-width: 0;
  padding: var(--rp-sp-1-5);
  border-radius: var(--rp-r-lg);
  background: var(--rp-stone);
}

.rp-frame__panel {
  display: flex;
  flex-direction: column;
  gap: var(--rp-sp-4);
  min-width: 0;
  padding: var(--rp-sp-5);
  border-radius: var(--rp-r-lg);
  background: var(--rp-surface);
  box-shadow: var(--rp-sh-1);
}

/* ---- Participant profile: avatar, name, type and studio, level, status -------------------------- */

/* rp-member, not rp-profile: the cabinet menu may want that name for its own user card. */
.rp-member {
  display: flex;
  align-items: center;
  gap: var(--rp-sp-4);
  min-width: 0;
}

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

.rp-member__name {
  margin: 0;
  font-size: var(--rp-fs-h4);
  font-weight: var(--rp-fw-heading);
  line-height: var(--rp-lh-snug);
  letter-spacing: var(--rp-ls-heading);
  overflow-wrap: anywhere;
}

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

.rp-member__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--rp-sp-1-5);
  padding-top: var(--rp-sp-1);
}