/* RIA Studio — fundações.
 *
 * Tudo fica sob .rs, porque o mesmo CSS é usado em duas situações:
 *   1. a página do Studio (documento nosso);
 *   2. o trilho sobreposto no instagram.com, dentro de um Shadow DOM.
 * Escopo em .rs garante que nada escape para a página do Instagram.
 *
 * As classes de tema (.rs-tema-claro / .rs-tema-escuro / .rs-tema-sistema)
 * ficam no mesmo elemento .rs; os tokens vêm de tokens.css.
 */

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

.rs {
  margin: 0;
  color: var(--rs-texto);
  font-family: var(--rs-fonte);
  font-size: var(--rs-corpo);
  font-weight: var(--rs-peso-corpo);
  line-height: var(--rs-entrelinha);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;

  /* escala tipográfica derivada da base de 15px */
  --rs-t-xs: 12px;
  --rs-t-sm: 13px;
  --rs-t-md: var(--rs-corpo);
  --rs-t-lg: 17px;
  --rs-t-xl: 20px;
  --rs-t-2xl: 24px;
  --rs-t-3xl: 30px;

  /* largura do trilho: recolhido e expandido */
  --rs-trilho-larg: 72px;
  --rs-trilho-larg-aberto: 304px;
}

.rs :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
  margin: 0;
}

.rs :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.rs :where(button) {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.rs :where(a) {
  color: var(--rs-primaria);
  text-decoration: none;
}

.rs :where(a:hover) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

.rs :where(svg) {
  display: block;
  flex: none;
  stroke-width: 1.5; /* peso de traço no estilo SF Symbols */
}

.rs :where(hr) {
  border: 0;
  border-top: 1px solid var(--rs-borda);
  margin: 0;
}

/* ------------------------------------------------------------------ foco */

.rs :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  border-color: color-mix(in oklab, var(--rs-anel) 50%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rs-anel) 20%, transparent);
}

/* --------------------------------------------------------------- títulos */

.rs-titulo {
  font-size: var(--rs-t-2xl);
  font-weight: var(--rs-peso-titulo);
  letter-spacing: var(--rs-tracking-display);
  line-height: 1.2;
}

.rs-subtitulo {
  font-size: var(--rs-t-lg);
  font-weight: var(--rs-peso-titulo);
  line-height: 1.3;
}

.rs-rotulo {
  font-size: var(--rs-t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rs-texto-2);
}

.rs-apoio {
  font-size: var(--rs-t-sm);
  color: var(--rs-texto-2);
}

.rs-mono {
  font-family: var(--rs-fonte-mono);
  font-size: var(--rs-t-sm);
}

/* ----------------------------------------------------------------- vidro
 *
 * Construção em duas camadas, como manda o contrato: superfície externa
 * refrativa (blur 2px) + camada interna de luz com a aresta de refração.
 * O ::after é decorativo e nunca captura ponteiro.
 */

.rs-vidro {
  position: relative;
  background: var(--rs-vidro);
  backdrop-filter: blur(var(--rs-blur)) saturate(var(--rs-satura));
  -webkit-backdrop-filter: blur(var(--rs-blur)) saturate(var(--rs-satura));
  border: var(--rs-borda-larg) solid var(--rs-borda);
  border-radius: var(--rs-raio-md);
  box-shadow: var(--rs-sombra-md), var(--rs-especular);
  transition: background var(--rs-t-normal) var(--rs-curva),
    border-color var(--rs-t-normal) var(--rs-curva),
    box-shadow var(--rs-t-normal) var(--rs-curva),
    transform var(--rs-t-rapido) var(--rs-curva);
}

.rs-vidro::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: var(--rs-refracao);
  pointer-events: none;
}

/* Conteúdo acima da camada de luz. */
.rs-vidro > * {
  position: relative;
  z-index: 1;
}

/* Níveis de profundidade: a opacidade é o eixo Z do sistema. */
.rs-vidro--recuado {
  background: var(--rs-trilho);
  box-shadow: var(--rs-sombra-sm), var(--rs-especular);
}

.rs-vidro--popover {
  background: var(--rs-popover);
  box-shadow: var(--rs-sombra-lg), var(--rs-especular);
}

.rs-vidro--modal {
  background: color-mix(in oklab, var(--rs-popover) 100%, white 12%);
  border-radius: var(--rs-raio-xl);
  box-shadow: var(--rs-sombra-xl), inset 0 4px 20px rgba(255, 255, 255, 0.4);
}

.rs-vidro--plano::after {
  display: none; /* listas longas: uma camada só, por performance */
}

.rs-vidro--interativo:hover {
  background: color-mix(in oklab, var(--rs-vidro) 100%, white 10%);
  border-color: color-mix(in oklab, var(--rs-borda) 100%, white 10%);
  box-shadow: var(--rs-sombra-lg), inset 0 4px 24px rgba(255, 255, 255, 0.4);
}

.rs-vidro--interativo:active {
  transform: scale(0.99);
  box-shadow: var(--rs-sombra-sm), inset 0 2px 12px rgba(255, 255, 255, 0.2);
}

/* No escuro a camada interna de luz precisa ser bem mais discreta: sobre um
 * cartão translúcido de 10%, outro branco de 10% deixa tudo leitoso. */
.rs-tema-escuro .rs-vidro::after {
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset -10px -8px 0 -11px rgba(255, 255, 255, 0.75);
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .rs-vidro {
    background: var(--rs-vidro-opaco);
  }
  .rs-vidro--recuado {
    background: var(--rs-trilho-opaco);
  }
  .rs-vidro::after {
    display: none;
  }
}

/* --------------------------------------------------------- lavagens de cor
 *
 * Duas manchas pastel atrás do vidro. Sem orbes neon: o fundo é quieto,
 * o interesse visual vem das superfícies.
 */

.rs-lavagens {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.rs-lavagens::before,
.rs-lavagens::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}

.rs-lavagens::before {
  top: -10%;
  left: -8%;
  width: 52%;
  height: 52%;
  background: color-mix(in oklab, var(--rs-primaria) 26%, transparent);
}

.rs-lavagens::after {
  right: -10%;
  bottom: -12%;
  width: 44%;
  height: 44%;
  background: color-mix(in oklab, var(--rs-acento) 18%, transparent);
}

.rs-tema-escuro .rs-lavagens::before {
  background: color-mix(in oklab, var(--rs-primaria) 16%, transparent);
}

.rs-tema-escuro .rs-lavagens::after {
  background: color-mix(in oklab, var(--rs-acento) 12%, transparent);
}

/* ------------------------------------------------------------- barra de rolagem */

.rs ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.rs ::-webkit-scrollbar-track {
  background: transparent;
}

.rs ::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--rs-texto-2) 28%, transparent);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

.rs ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--rs-texto-2) 48%, transparent);
  background-clip: content-box;
}

/* ------------------------------------------------------------- utilitários */

.rs-linha {
  display: flex;
  align-items: center;
  gap: var(--rs-e3);
}

.rs-linha--entre {
  justify-content: space-between;
}

.rs-coluna {
  display: flex;
  flex-direction: column;
  gap: var(--rs-e3);
}

.rs-cresce {
  flex: 1;
  min-width: 0;
}

.rs-corta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-corta-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rs-oculto {
  display: none !important;
}

/* O atributo hidden perde para qualquer regra de classe com display.
 * Sem isto, um badge com [hidden] continua ocupando espaço. */
.rs [hidden] {
  display: none !important;
}

/* Visível só para leitor de tela. */
.rs-so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------- entrada em cena */

@keyframes rs-sobe {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rs-aparece {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rs-pulsa {
  50% {
    opacity: 0.45;
  }
}

.rs-entra {
  animation: rs-sobe var(--rs-t-lento) var(--rs-curva) both;
}

.rs-entra-escala {
  animation: rs-aparece var(--rs-t-normal) var(--rs-curva) both;
}

/* Esqueleto de carregamento. */
.rs-esqueleto {
  background: color-mix(in oklab, var(--rs-texto-2) 18%, transparent);
  border-radius: var(--rs-raio-sm);
  animation: rs-pulsa 1.6s ease-in-out infinite;
}

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