/* Набор Rusau Learn для песочниц-станций всех курсов серии (просьба Артёма 14.10.2026: у песочниц
   общий вайб, элементы и айдентика с платформой learn.rusau.net).

   Источник значений – stepimy-learn/src/app/globals.css и tilda/tokens.css: цифры не подбирались
   заново, контраст пар там уже проверен, расхождение означало бы два разных бренда. Мир курса
   (сцена, наставник, питомец, рамки) – отдельный слой поверх этого набора.

   Тема – атрибут data-theme на <html> ("dark" по умолчанию, как в Learn; ставит kit.js). */

@font-face { font-family: "Golos Text"; src: url(fonts/golos.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Podkova"; src: url(fonts/podkova.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(fonts/manrope.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --rk-surface: #efe8da;
  --rk-raised: #faf5ea;
  --rk-sunken: #e4d9c4;
  --rk-line: rgb(90 62 26 / 0.16);
  --rk-line-strong: rgb(90 62 26 / 0.3);
  --rk-field: #8a7658;
  --rk-ink: #241a10;
  --rk-ink-2: #54432d;
  --rk-ink-3: #6a5740;
  --rk-accent: #7f520c;
  --rk-accent-hover: #67410a;
  --rk-on-accent: #fff8e7;
  --rk-ok: #1f6f47;
  --rk-warn: #8a5309;
  --rk-danger: #b3273c;
  --rk-brand-purple: #5b3a86;
  --rk-torch: #b8860b;
  --rk-torch-glow: rgb(184 134 11 / 0.35);
  --rk-moss: #2f7d55;
  --rk-blood: #8e2b3f;
  --rk-stone: #ded2b9;
  --rk-gold-soft: #f0e2be;
  --rk-visor-plate: linear-gradient(180deg, #faf5ea, #f2ecdf); /* сплошная: элементы не просвечивают (Артём 14.10.2026) */
  --rk-visor-edge: rgb(127 82 12 / 0.55);
  --rk-visor-gold: #7f520c;
  --rk-shadow-card: 0 1px 2px rgb(74 48 12 / 0.1), 0 3px 12px rgb(74 48 12 / 0.08);
  --rk-vignette: rgb(0 0 0 / 0.16);

  /* Золото кнопок – отдельно от акцента текста: на пергаменте #d9ad33 буквами не читается (1,9:1). */
  --rk-btn: #d9ad33;
  --rk-btn-hover: #ecc451;
  --rk-btn-ink: #1a1408;

  /* Свод (шапка и подвал) темный в любой теме – как в Learn. */
  --rk-top: #171326;
  --rk-top-ink: #ece2ce;
  --rk-top-ink-2: #a99cc4;
  --rk-top-gold: #d9ad33;

  --rk-radius: 14px;
  --rk-radius-sm: 10px;
  --rk-font: "Golos Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --rk-font-carved: "Podkova", Georgia, "Times New Roman", serif;
  --rk-font-hud: "Manrope", "Golos Text", system-ui, sans-serif;
  --rk-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --rk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  color-scheme: light;
}
:root[data-theme="dark"] {
  --rk-surface: #120e1c;
  --rk-raised: #1b1529;
  --rk-sunken: #241d38;
  --rk-line: rgb(217 173 51 / 0.14);
  --rk-line-strong: rgb(217 173 51 / 0.32);
  --rk-field: #8c7fa8;
  --rk-ink: #ece2ce;
  --rk-ink-2: #b3a6c8;
  --rk-ink-3: #968aae;
  --rk-accent: #d9ad33;
  --rk-accent-hover: #ecc451;
  --rk-on-accent: #1a1408;
  --rk-ok: #6fd39a;
  --rk-warn: #e8a33d;
  --rk-danger: #ff8a9e;
  --rk-brand-purple: #b78ef0;
  --rk-torch: #d9ad33;
  --rk-torch-glow: rgb(217 173 51 / 0.45);
  --rk-moss: #2b4a3a;
  --rk-blood: #4a2030;
  --rk-stone: #241f33;
  --rk-gold-soft: color-mix(in srgb, #d9ad33 14%, #1b1529);
  --rk-visor-plate: linear-gradient(180deg, #1b1529, #181225);
  --rk-visor-edge: rgb(217 173 51 / 0.5);
  --rk-visor-gold: #cbb98f;
  --rk-shadow-card: 0 1px 2px rgb(0 0 0 / 0.5), 0 4px 16px rgb(0 0 0 / 0.35);
  --rk-vignette: rgb(0 0 0 / 0.4);
  color-scheme: dark;
}

/* Без мигания: до сборки страницы (kit.js) – невидима, затем плавно проявляется. */
html.rk-boot body { opacity: 0; }
body { transition: opacity .18s ease-out; }

body.rk {
  margin: 0; min-height: 100vh;
  font-family: var(--rk-font); color: var(--rk-ink); -webkit-font-smoothing: antialiased;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, var(--rk-vignette)) fixed, var(--rk-surface);
}
body.rk::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--rk-grain); opacity: .05; mix-blend-mode: overlay;
}
body.rk > * { position: relative; z-index: 1; }
body.rk h1, body.rk h2, body.rk h3 { font-family: var(--rk-font-carved); font-weight: 600; letter-spacing: .01em; }
body.rk a { color: var(--rk-accent); }
/* Ссылка-кнопка: чернила кнопки, а не золото ссылок (иначе золото на золоте – текст пропадает). */
body.rk a.btn, body.rk a.rk-btn { color: var(--rk-btn-ink); }
.rk-hud { font-family: var(--rk-font-hud); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-variant-numeric: tabular-nums; }

/* Свод: логотип Rusau Learn, название станций курса, переключатель темы */
.rk-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px clamp(16px, 3vw, 40px); min-height: 60px;
  background: var(--rk-top); color: var(--rk-top-ink); border-bottom: 1px solid rgb(217 173 51 / .22);
}
.rk-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--rk-top-ink) !important; }
.rk-brand img { width: 46px; height: auto; display: block; }
.rk-brand b { font-family: var(--rk-font-carved); font-weight: 600; font-size: 1.05rem; letter-spacing: .01em; }
.rk-platform {
  font-family: var(--rk-font-hud); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--rk-top-gold) !important; text-decoration: none; min-height: 34px; display: inline-flex; align-items: center;
  padding: 0 12px; border-radius: 999px; border: 1px solid rgb(217 173 51 / .45); background: color-mix(in srgb, #d9ad33 10%, #171326);
}
.rk-platform:hover { background: color-mix(in srgb, #d9ad33 20%, #171326); }
.rk-nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rk-nav a {
  font-family: var(--rk-font-hud); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--rk-top-ink) !important; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center;
  padding: 0 14px; border-radius: 999px; border: 1px solid rgb(236 226 206 / .22); background: #1e1932;
}
.rk-nav a:hover { border-color: var(--rk-top-gold); color: var(--rk-top-gold) !important; }
.rk-theme {
  min-width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; cursor: pointer; background: #1e1932; border: 1px solid rgb(236 226 206 / .22); color: var(--rk-top-gold);
  padding: 0 14px 0 12px;
}
/* Подпись "Светлая"/"Темная" – в манере "Все станции"; на телефоне шапке не хватает места, там только значок. */
.rk-theme-t {
  font-family: var(--rk-font-hud); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--rk-top-ink);
}
@media (max-width: 640px) { .rk-theme { padding: 0; width: 40px; } .rk-theme-t { display: none; } }
.rk-theme:hover { border-color: var(--rk-top-gold); }
.rk-theme svg { width: 18px; height: 18px; }

/* Кнопки как в Learn: золотая основная, вторичная – обводка цветом кромки визора */
.rk-btn {
  font: 600 .95rem/1 var(--rk-font); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 12px; cursor: pointer; text-decoration: none;
  background: var(--rk-btn); color: var(--rk-btn-ink); border: 0; transition: background .15s, transform .15s;
}
.rk-btn:hover { background: var(--rk-btn-hover); }
.rk-btn--ghost { background: transparent; color: var(--rk-ink); box-shadow: inset 0 0 0 1px var(--rk-visor-edge); }
.rk-btn--ghost:hover { background: var(--rk-sunken); }

/* Плита визора: карточка Learn */
.rk-card { background: var(--rk-visor-plate); border-left: 1px solid var(--rk-visor-edge); border-radius: 12px; box-shadow: var(--rk-shadow-card); }
.rk-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px; font-size: .75rem; font-weight: 500; }

/* Подвал-свод */
.rk-foot {
  margin-top: 40px; padding: 18px clamp(16px, 3vw, 40px); background: var(--rk-top); color: var(--rk-top-ink-2);
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: .85rem;
}
.rk-foot a { color: var(--rk-top-gold) !important; text-decoration: none; }

@media (max-width: 560px) {
  .rk-top { flex-wrap: nowrap; gap: 8px; padding-left: 12px; padding-right: 12px; }
  .rk-brand { gap: 6px; min-width: 0; }
  .rk-brand img { width: 34px; }
  .rk-brand b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rk-platform { padding: 0 8px; font-size: .62rem; flex: none; }
  .rk-pl-full { display: none; }
  .rk-nav { flex: none; }
  .rk-nav a { padding: 0 10px; }
}