/* Токены и сброс Mini App Job4U.
   Палитра «Шесть ритмов»: у каждого из шести типов личности (RIASEC) свой цвет,
   акцент приложения — цвет главного типа пользователя (html[data-type]), второй
   тип — в фигурах (html[data-type2]). Фон и карточки — фирменные, в светлом и
   тёмном варианте (html[data-scheme], выставляет app.js по теме Telegram).
   Компоненты берут цвета только из семантических переменных ниже. */

:root {
  /* --- шесть типов: основной цвет и «чернила» (текст и кнопки на светлом фоне) */
  --c-r: #22A06B; --c-r-ink: #177A50;   /* Практик        — нефрит   */
  --c-i: #3A6FF8; --c-i-ink: #2A57D6;   /* Аналитик       — кобальт  */
  --c-a: #8B5CF6; --c-a-ink: #6D3FE0;   /* Творец         — фиолет   */
  --c-s: #FF6B57; --c-s-ink: #D4452F;   /* Наставник      — коралл   */
  --c-e: #F5A524; --c-e-ink: #A86A00;   /* Лидер          — шафран   */
  --c-c: #0EA5B7; --c-c-ink: #0A7C8A;   /* Систематизатор — бирюза   */

  --brand: var(--c-i);    --brand-ink: var(--c-i-ink);
  --brand-2: var(--c-a);

  /* --- база поверхностей; оттенок бренда подмешивается в app.js тем же процентом */
  --ink:          #1E1B3A;
  --page-base:    #F6F5FA;  --page-mix: 5%;
  --header-base:  #FFFFFF;  --header-mix: 10%;
  --card-base:    #FFFFFF;  --card-mix: 0%;

  /* --- surfaces ------------------------------------------------------- */
  --bg-secondary:   color-mix(in srgb, var(--brand) var(--page-mix), var(--page-base));
  --header-bg:      color-mix(in srgb, var(--brand) var(--header-mix), var(--header-base));
  --section-bg:     color-mix(in srgb, var(--brand) var(--card-mix), var(--card-base));
  --bg:             var(--section-bg);
  --bottom-bar-bg:  var(--bg-secondary);

  /* --- text ----------------------------------------------------------- */
  --text:           var(--ink);
  --subtitle:       color-mix(in srgb, var(--ink) 78%, var(--card-base));
  --hint:           color-mix(in srgb, var(--ink) 56%, var(--card-base));
  --link:           var(--brand-ink);
  --accent:         var(--brand-ink);
  --destructive:    #D93C3C;
  --positive:       var(--c-r-ink);
  --section-header-text: var(--hint);

  /* --- controls ------------------------------------------------------- */
  --button:         var(--brand-ink);
  --button-text:    #FFFFFF;
  --separator:      color-mix(in srgb, var(--ink) 10%, transparent);
  --knob:           #FFFFFF;

  /* --- safe areas (0 outside Telegram / on old clients) --------------- */
  --safe-top:       var(--tg-safe-area-inset-top, 0px);
  --safe-bottom:    var(--tg-safe-area-inset-bottom, 0px);
  --safe-left:      var(--tg-safe-area-inset-left, 0px);
  --safe-right:     var(--tg-safe-area-inset-right, 0px);
  --content-top:    var(--tg-content-safe-area-inset-top, 0px);
  --content-bottom: var(--tg-content-safe-area-inset-bottom, 0px);
  /* Use these two for page padding; correct in windowed AND fullscreen mode. */
  --pad-top:        calc(var(--safe-top) + var(--content-top));
  --pad-bottom:     calc(var(--safe-bottom) + var(--content-bottom));

  /* --- spacing (4px grid) --------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* --- radii ---------------------------------------------------------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 18px; --r-2xl: 22px; --r-pill: 999px;

  /* --- type ----------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --fs-large: 24px; --fs-title: 20px; --fs-headline: 17px; --fs-body: 16px;
  --fs-subhead: 15px; --fs-caption: 13px; --fs-caption2: 11px;
  --lh-tight: 1.25; --lh-body: 1.4;

  /* --- misc ----------------------------------------------------------- */
  --tap: 44px;                       /* minimum touch target */
  --hairline: 0.5px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 200ms;

  color-scheme: light;
}

/* Тёмный вариант: цвета типов светлее, кнопки — яркая заливка с тёмным текстом */
:root[data-scheme="dark"] {
  --c-r: #3CCB8C; --c-r-ink: #3CCB8C;
  --c-i: #6E95FF; --c-i-ink: #6E95FF;
  --c-a: #A98BFF; --c-a-ink: #A98BFF;
  --c-s: #FF8A7A; --c-s-ink: #FF8A7A;
  --c-e: #FFC155; --c-e-ink: #FFC155;
  --c-c: #3CC8D8; --c-c-ink: #3CC8D8;

  --ink:          #F1EFFA;
  --page-base:    #12111A;  --page-mix: 6%;
  --header-base:  #15141E;  --header-mix: 16%;
  --card-base:    #1D1B28;  --card-mix: 5%;

  --destructive:  #FF6B6F;
  --button:       var(--brand);
  --button-text:  #15131F;

  color-scheme: dark;
}

/* Акцент — цвет главного типа, второй цвет фигур — второго типа */
:root[data-type="R"] { --brand: var(--c-r); --brand-ink: var(--c-r-ink); }
:root[data-type="I"] { --brand: var(--c-i); --brand-ink: var(--c-i-ink); }
:root[data-type="A"] { --brand: var(--c-a); --brand-ink: var(--c-a-ink); }
:root[data-type="S"] { --brand: var(--c-s); --brand-ink: var(--c-s-ink); }
:root[data-type="E"] { --brand: var(--c-e); --brand-ink: var(--c-e-ink); }
:root[data-type="C"] { --brand: var(--c-c); --brand-ink: var(--c-c-ink); }
:root[data-type2="R"] { --brand-2: var(--c-r); }
:root[data-type2="I"] { --brand-2: var(--c-i); }
:root[data-type2="A"] { --brand-2: var(--c-a); }
:root[data-type2="S"] { --brand-2: var(--c-s); }
:root[data-type2="E"] { --brand-2: var(--c-e); }
:root[data-type2="C"] { --brand-2: var(--c-c); }

/* Android draws 0.5px as nothing on some densities. */
[data-platform="android"] { --hairline: 1px; }

/* --- reset ------------------------------------------------------------ */

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;               /* the document never scrolls — .app-scroll does */
  overscroll-behavior: none;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg-secondary);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
a { color: var(--link); text-decoration: none; }
img, svg, video { max-width: 100%; display: block; }

/* Chrome-like surfaces should not be selectable; content should. */
.app-header, .app-bar, .cell__title, .segmented { user-select: none; -webkit-user-select: none; }

/* --- app frame -------------------------------------------------------- */

.app {
  height: 100dvh;
  height: var(--tg-viewport-stable-height, 100dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  background: var(--bg-secondary);
}

.app-header {
  padding: calc(var(--pad-top) + var(--sp-2)) var(--sp-4) var(--sp-2);
  background: var(--header-bg);
  flex: 0 0 auto;
}

.app-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: 0;                 /* у каждой вкладки свой верхний отступ: панель фильтров прилипает к краю */
  padding-bottom: calc(var(--sp-5) + var(--pad-bottom));
}

/* Only when MainButton is genuinely wrong for the screen. */
.app-bar {
  flex: 0 0 auto;
  padding: var(--sp-3) var(--sp-4) max(var(--sp-3), var(--pad-bottom));
  background: var(--bottom-bar-bg);
  border-top: var(--hairline) solid var(--separator);
}

/* --- motion ----------------------------------------------------------- */

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