/*
 * Roca Professionals, participant site and cabinet: base styles, type, icons, the logo.
 *
 * Conventions of every rp-*.css file (the component files follow them too):
 * - classes start with rp-: block rp-btn, element rp-btn__label, modifier rp-btn--secondary;
 *   states are is-* classes (is-active, is-loading, is-error, is-open) next to the native ones
 *   (:disabled, :focus-visible, [aria-invalid="true"], [aria-current]);
 * - values come from rp-tokens.css only: no raw colour, size or duration in a component file;
 * - phone first: everything works at 360 px, text of inputs is 16 px, touch targets 44 px;
 * - motion animates transform and opacity only; prefers-reduced-motion switches it off here.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--rp-paper);
  color: var(--rp-text);
  font-family: var(--rp-font);
  font-size: var(--rp-fs-body);
  font-weight: var(--rp-fw-text);
  line-height: var(--rp-lh-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

a {
  color: var(--rp-accent);
  text-decoration-thickness: var(--rp-bw);
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--rp-accent-hover);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--rp-bw-strong) solid var(--rp-accent);
  outline-offset: var(--rp-sp-0-5);
}

::selection {
  background: var(--rp-stone);
}

[hidden] {
  display: none !important;
}

.rp-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Type ------------------------------------------------------------------------------------- */

/* Headings are Regular and set tight (guide of Roca, volume 3, p. 7): -0.045 em on the biggest, -0.035 em on the smaller ones. */
.rp-display {
  font-size: var(--rp-site-h1);
  font-weight: var(--rp-fw-heading);
  line-height: var(--rp-lh-tight);
  letter-spacing: var(--rp-ls-display);
}

.rp-h1 {
  font-size: var(--rp-fs-h1);
  font-weight: var(--rp-fw-heading);
  line-height: var(--rp-lh-heading);
  letter-spacing: var(--rp-ls-display);
}

.rp-h2 {
  font-size: var(--rp-fs-h2);
  font-weight: var(--rp-fw-heading);
  line-height: var(--rp-lh-heading);
  letter-spacing: var(--rp-ls-heading);
}

.rp-h3 {
  font-size: var(--rp-fs-h3);
  font-weight: var(--rp-fw-heading);
  line-height: var(--rp-lh-snug);
  letter-spacing: var(--rp-ls-heading);
}

.rp-lead {
  font-size: var(--rp-site-lead);
  line-height: var(--rp-lh-body);
  color: var(--rp-text-secondary);
}

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

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

/* The rubric above a heading: Мероприятия, Ваш результат. No capitals and no spacing (the guide of Roca avoids capitals). */
.rp-rubric {
  font-size: var(--rp-fs-rubric);
  font-weight: var(--rp-fw-strong);
  line-height: var(--rp-lh-snug);
  color: var(--rp-text-tertiary);
}

/* Two-tone heading: the rest of the phrase in the colour of captions. */
.rp-soft {
  color: var(--rp-text-tertiary);
}

/* The big result number: 1 340 000 ₸, 85 баллов; the unit at half the size in the caption colour. */
.rp-number {
  font-size: var(--rp-fs-number);
  font-weight: var(--rp-fw-heading);
  line-height: var(--rp-lh-tight);
  letter-spacing: var(--rp-ls-heading);
  font-variant-numeric: tabular-nums;
}

.rp-number__unit {
  margin-left: 0.25em;
  font-size: 0.5em;
  letter-spacing: 0;
  color: var(--rp-text-tertiary);
}

/* Numbers and codes (RP-KZ-2026-000123, артикул, номер кассы): Onest with tabular digits, one font for all data. */
.rp-mono {
  font-family: var(--rp-font-mono);
  font-size: var(--rp-fs-caption);
  letter-spacing: 0;
}

/* ---- Logo ------------------------------------------------------------------------------------- */

/* The Roca mark through a mask: it takes currentColor, black or white only. The word under it, PROFESSIONALS, is capitals as
 * a part of the sign (the only capitals of the interface). */
.rp-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--rp-sp-3);
  color: var(--rp-ink);
  text-decoration: none;
}

.rp-logo:hover {
  color: var(--rp-ink);
}

.rp-logo__mark {
  display: block;
  flex: none;
  height: var(--rp-sp-6);
  aspect-ratio: var(--rp-logo-ar);
  background: currentColor;
  -webkit-mask: var(--rp-logo);
  mask: var(--rp-logo);
}

.rp-logo__word {
  padding-left: var(--rp-sp-3);
  border-left: var(--rp-bw) solid currentColor;
  font-size: var(--rp-fs-caption);
  font-weight: var(--rp-fw-medium);
  line-height: 1;
  letter-spacing: var(--rp-ls-wordmark);
  text-transform: uppercase;
}

.rp-logo--inverse {
  color: var(--rp-text-inverse);
}

/*
 * Roca and Laufen side by side (guide of the group, p. 5): Roca first on the left, Laufen on the right, centred on one line.
 * The module is a fifth of the width of the Roca mark; the gap is 2 modules; Laufen is 1.4 times as wide as the Roca mark
 * (5 and 7 modules of visual weight). The word of the programme stays with the Roca mark as a part of its sign.
 * Black on light, white on dark; no effects.
 */
.rp-logo-pair {
  --rp-pair-roca-w: calc(var(--rp-sp-6) * var(--rp-logo-ar));
  display: flex;
  align-items: center;
  gap: calc(var(--rp-pair-roca-w) * 0.4);
}

.rp-logo-pair__laufen {
  display: block;
  flex: none;
  width: calc(var(--rp-pair-roca-w) * 1.4);
  aspect-ratio: var(--rp-logo-laufen-ar);
  background: currentColor;
  -webkit-mask: var(--rp-logo-laufen);
  mask: var(--rp-logo-laufen);
}

/* ---- Icons: Lucide through masks, sized by tokens, coloured by currentColor ------------------- */

.rp-icon {
  display: inline-block;
  flex: none;
  width: var(--rp-icon);
  height: var(--rp-icon);
  background: currentColor;
  -webkit-mask: var(--rp-i);
  mask: var(--rp-i);
  vertical-align: middle;
}

.rp-icon--sm {
  width: var(--rp-icon-sm);
  height: var(--rp-icon-sm);
}

.rp-icon--house { --rp-i: var(--rp-ic-house); }
.rp-icon--grid { --rp-i: var(--rp-ic-grid); }
.rp-icon--receipt { --rp-i: var(--rp-ic-receipt); }
.rp-icon--wrench { --rp-i: var(--rp-ic-wrench); }
.rp-icon--plus { --rp-i: var(--rp-ic-plus); }
.rp-icon--rating { --rp-i: var(--rp-ic-rating); }
.rp-icon--more { --rp-i: var(--rp-ic-more); }
.rp-icon--back { --rp-i: var(--rp-ic-back); }
.rp-icon--arrow { --rp-i: var(--rp-ic-arrow); }
.rp-icon--down { --rp-i: var(--rp-ic-down); }
.rp-icon--right { --rp-i: var(--rp-ic-right); }
.rp-icon--search { --rp-i: var(--rp-ic-search); }
.rp-icon--calendar { --rp-i: var(--rp-ic-calendar); }
.rp-icon--camera { --rp-i: var(--rp-ic-camera); }
.rp-icon--x { --rp-i: var(--rp-ic-x); }
.rp-icon--check { --rp-i: var(--rp-ic-check); }
.rp-icon--retry { --rp-i: var(--rp-ic-retry); }
.rp-icon--offline { --rp-i: var(--rp-ic-offline); }
.rp-icon--cloud-off { --rp-i: var(--rp-ic-cloud-off); }
.rp-icon--trash { --rp-i: var(--rp-ic-trash); }
.rp-icon--bell { --rp-i: var(--rp-ic-bell); }
.rp-icon--pin { --rp-i: var(--rp-ic-pin); }
.rp-icon--alert { --rp-i: var(--rp-ic-alert); }
.rp-icon--award { --rp-i: var(--rp-ic-award); }
.rp-icon--gift { --rp-i: var(--rp-ic-gift); }
.rp-icon--file { --rp-i: var(--rp-ic-file); }
.rp-icon--download { --rp-i: var(--rp-ic-download); }
.rp-icon--user { --rp-i: var(--rp-ic-user); }
.rp-icon--globe { --rp-i: var(--rp-ic-globe); }
.rp-icon--share { --rp-i: var(--rp-ic-share); }
.rp-icon--square-plus { --rp-i: var(--rp-ic-square-plus); }
.rp-icon--more-v { --rp-i: var(--rp-ic-more-v); }
.rp-icon--menu { --rp-i: var(--rp-ic-menu); }
.rp-icon--lock { --rp-i: var(--rp-ic-lock); }
.rp-icon--send { --rp-i: var(--rp-ic-send); }
.rp-icon--message { --rp-i: var(--rp-ic-message); }
.rp-icon--cal-plus { --rp-i: var(--rp-ic-cal-plus); }
.rp-icon--external { --rp-i: var(--rp-ic-external); }
.rp-icon--users { --rp-i: var(--rp-ic-users); }
.rp-icon--clock { --rp-i: var(--rp-ic-clock); }
.rp-icon--phone { --rp-i: var(--rp-ic-phone); }
.rp-icon--image { --rp-i: var(--rp-ic-image); }

/* ---- Photo stand-in: warm grey with the proportions written on it ----------------------------- */

.rp-ph {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  padding: var(--rp-sp-3);
  background: var(--rp-ph-fill);
  color: var(--rp-ph-text);
  font-family: var(--rp-font-mono);
  font-size: var(--rp-fs-micro);
  line-height: var(--rp-lh-snug);
}

.rp-ph--dark {
  background: var(--rp-ph-fill-dark);
  color: var(--rp-ph-dark-text);
}

/* ---- Motion ----------------------------------------------------------------------------------- */

@keyframes rp-spin { to { transform: rotate(360deg); } }
@keyframes rp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes rp-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes rp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rp-rise-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}