/* ═══ ТЕМА «WOMEN IN TECH» ═══════════════════════════════════════════
   Владелец, 29.08.2026: «сейчас Women in Tech — продолжение тёмной, а я
   хочу продолжение светлой: белый фон с розовеньким, как в админке,
   только более розовое и приятное».

   ЧТО ЭТО ЗНАЧИТ ПО СМЫСЛУ. Тема называется именем движения, и раньше
   она была «той же панелью, только в бордовом» — то есть тёмной комнатой
   с розовой подсветкой. Светлая версия читается иначе: это не подсветка
   поверх стали, а другой материал — бумага, на которой розовое работает
   краской, а не свечением.

   ГДЕ ПРОХОДИТ ГРАНЬ С «ПРИЯТНО». Розовым красим то же, что латунью в
   базовой теме: марку, цифры, кнопки, линии шкалы. Фон остаётся почти
   белым с едва тёплым румянцем — розовый фон под розовым текстом
   съедает контраст, и страница из «приятной» становится нечитаемой.
   Насыщенная роза живёт в акцентах, где её видно, а не в подложке.

   Меняются ТОЛЬКО переменные — правило то же, что у двух других тем. */
:root[data-theme="pink"] {
  --deep:      #fbf2f6;
  --hull:      #ffffff;
  --hull-hi:   #fffafc;
  --brass:     #b03a6a;   /* роза вместо латуни */
  --brass-dim: #e3a9c2;
  --water:     #f0dfe8;
  --water-hi:  #8d3f86;
  --over:      #c0453f;
  --over-hi:   #97302b;
  --idle:      #d3bcc7;
  --idle-hi:   #6b5560;
  --paper:     #24101a;
  --mute:      #7d6570;
  --line:      #f0dbe4;

  --ink2:        #55414c;
  --on-brass:    #ffffff;
  --brass-hi:    #c9497c;
  --mark:        #59183a;
  --brand-ink:   #b03a6a;
  --brass-wash:  rgba(176,58,106,.10);
  --water-wash:  rgba(141,63,134,.10);
  --over-wash:   rgba(192,69,63,.10);
  --over-glow:   rgba(192,69,63,.45);
  --glow-a:      #fce6f0;
  --glow-b:      #f7e9f4;
  --pit:         #fbeff5;
  --well:        #fdf4f8;
  --well-hi:     #f9e9f1;
  --sheet:       #ffffff;
  --shadow:      rgba(60,20,40,.18);
  --shadow-hard: rgba(60,20,40,.22);
  --ring:        rgba(255,255,255,.9);
  --paper-72:    rgba(36,16,26,.72);
  --paper-45:    rgba(36,16,26,.5);
  /* Стекло — как в светлой теме, с розовым румянцем: над водой оно
     обязано быть непрозрачным, иначе тёмный текст тонет в воде. */
  --film-hi:      rgba(255,250,252,.94);
  --film-lo:      rgba(255,246,250,.84);
  --film-edge:    rgba(176,58,106,.16);
  --film-edge-hi: rgba(176,58,106,.26);
  --film-top:     rgba(255,255,255,.75);
  --film-top-hi:  rgba(255,255,255,.95);
  --film-dark-hi: rgba(255,250,252,.95);
  --film-dark-lo: rgba(255,246,250,.87);
  --water-band-hi: rgba(141,63,134,.16);
  --water-band-lo: rgba(141,63,134,.05);
  --water-edge:    rgba(141,63,134,.55);
  --over-edge:     rgba(192,69,63,.6);
  --brass-edge:    rgba(176,58,106,.35);
  --idle-edge:     rgba(107,85,96,.45);

  /* Вода в розовой теме — роза и слива, а не бирюза: прибор обязан
     принадлежать той же странице, что и всё вокруг него. */
  --wave-over-top:   192, 69, 63;
  --wave-over-bot:   124, 34, 40;
  --wave-over-crest: 236, 150, 140;
  --wave-good-top:   176, 58, 106;
  --wave-good-bot:   96, 28, 62;
  --wave-good-crest: 244, 168, 200;
  --wave-idle-top:   150, 122, 138;
  --wave-idle-bot:   88, 66, 80;
  --wave-idle-crest: 214, 190, 202;
}

/* ── Шапка: навигация и переключатель темы ──────────────────────────── */
.top-nav {
  display: flex;
  gap: 18px;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.top-nav a { color: var(--mute); text-decoration: none; }
.top-nav a:hover { color: var(--brass); }

/* ВХОД ДЛЯ СВОИХ. Рядом с «Start free», но тише её: кнопка зовёт
   завести кабинет, а эта ссылка — вернуться в уже заведённый. Одним
   весом их делать нельзя, иначе витрина перестаёт продавать; прятать
   тоже нельзя — человек не должен искать вход по карте сайта. */
.signin {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
  margin-left: 18px;
  white-space: nowrap;
}
.signin:hover { color: var(--brass); }

/* ── ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ: ВЫПАДАЮЩИЙ СПИСОК ────────────────────────────
   Был ряд кнопок с подписями. Тем стало три, и «Women in Tech» из них
   самая длинная — ряд занял бы половину шапки, а владелец сказал прямо:
   «переключатель занимает много места».

   Теперь в шапке видна только выбранная тема, остальные разворачиваются
   вниз. Список стоит СПРАВА краем (right: 0): он у правого края экрана, и
   выравненный по левому краю кнопки уезжал бы за границу окна. */
.thm { position: relative; display: inline-flex; }
.thm-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--sheet);
  color: var(--mute);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 11px;
  cursor: pointer;
  white-space: nowrap;
}
.thm-head:hover { border-color: var(--brass-dim); color: var(--paper); }
.thm-caret { width: 9px; height: 6px; opacity: .7; transition: transform .12s ease; }
.thm.open .thm-caret { transform: rotate(180deg); }
.thm-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  min-width: 100%;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--hull);
  box-shadow: 0 18px 40px -22px var(--shadow);
}
.thm.open .thm-list { display: flex; }
.thm-o {
  display: flex;
  align-items: center;
  gap: 7px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}
.thm-o:hover { background: var(--well); color: var(--paper); }
.thm-o.on { background: var(--hull-hi); color: var(--paper); }
.thm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.top .top-link { margin-left: 0; }

/* Второстепенная кнопка. Одна главная на экран: две одинаково яркие
   означают, что мы сами не знаем, чего хотим от человека. */
.btn-ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--brass-dim);
}
.btn-ghost:hover { background: var(--brass-wash); border-color: var(--brass); }
.hero-fine { margin: 14px 0 0; color: var(--mute); font-size: 13px; }

/* ── Возможности: шесть карточек ───────────────────────────────────── */
.feats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  max-width: 1100px;
}
/* Сетка на просветах, а не на рамках: шесть карточек с собственными
   рамками дают двойные линии там, где они соседствуют. */
.feat { background: var(--hull); padding: 22px 20px 24px; }
.feat h3 {
  margin: 0 0 8px;
  font-family: var(--disp);
  font-variation-settings: 'wdth' 90, 'wght' 700;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--brass);
}
.feat p { margin: 0; color: var(--ink2); font-size: 14.5px; line-height: 1.55; }

/* ── Строчки-«таблетки» под разделом Jira ──────────────────────────── */
.pills { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pills li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--mute);
}

/* ── Вопросы ───────────────────────────────────────────────────────── */
.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  padding: 14px 0;
  font-family: var(--disp);
  font-variation-settings: 'wdth' 92, 'wght' 620;
  font-size: 16.5px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ' +'; color: var(--brass-dim); }
.faq details[open] summary::after { content: ' –'; }
.faq p { margin: 0 0 16px; color: var(--ink2); font-size: 15px; max-width: 68ch; }
.faq a { color: var(--brass); }

/* ── Про нас ───────────────────────────────────────────────────────── */
.about-say { max-width: 68ch; }
.about-say p { color: var(--ink2); }
.about-num {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin: 30px 0 0;
  max-width: 900px;
}
.about-num div { border-top: 2px solid var(--brass-dim); padding-top: 14px; }
.about-num b {
  display: block;
  font-family: var(--mono);
  font-size: 25px;
  color: var(--brass);
  letter-spacing: -.02em;
}
.about-num span { color: var(--mute); font-size: 13.5px; }

@media (max-width: 900px) {
  /* Навигацию НЕ прячем — раньше display:none оставлял телефон без
     дороги к ценам вовсе. Ссылки становятся второй строкой шапки и
     скроллятся пальцем: родной скролл лучше самодельного бургера. */
  .top { flex-wrap: wrap; row-gap: 10px; }
  .top-nav {
    order: 10;
    flex-basis: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-left: 0;
  }
  .top-nav::-webkit-scrollbar { display: none; }
  .top-nav a { flex: none; }
}