/* ═══════════════════════════════════════════════════════════════
   ДИЗАЙН-СИСТЕМА · neurodiversity.com.ua
   Спільний файл для index.html і neurodiversity.html.

   Порядок розділів:
     1. Токени
     2. Сторінка й типографіка
     3. Поверхні: panel / card / accent
     4. Рух
     5. Якорі й фокус
     6. Компоненти (повзунки, поля, пілюлі, айсберг, футер)
     7. Точкові виправлення теми
   ═══════════════════════════════════════════════════════════════ */


/* ── 1. ТОКЕНИ ───────────────────────────────────────────────── */

:root {
  /* Поверхні - світла тема */
  --page-1: #F0EAD8;
  --page-2: #E8DFC8;
  --page-3: #DDD4BA;

  --surface-quiet:  rgba(255, 252, 242, 0.52);
  --surface-card:   rgba(255, 252, 242, 0.92);
  --surface-accent: rgba(203, 219, 200, 0.55);

  --line:        rgba(140, 120, 90, 0.26);
  --line-strong: rgba(140, 120, 90, 0.42);

  --accent:      #2D5A45;
  --accent-soft: #3D7A5F;

  /* Типографічна шкала - 5 ступенів + два заголовкові */
  --fs-hero:  clamp(2rem, 7vw, 3rem);
  --fs-h2:    clamp(1.6rem, 5vw, 2.25rem);
  --fs-h3:    1.25rem;      /* 20px */
  --fs-body:  1.0625rem;    /* 17px */
  --fs-sm:    0.9375rem;    /* 15px */
  --fs-xs:    0.8125rem;    /* 13px */
  --fs-label: 0.75rem;      /* 12px */

  /* Вимір рядка */
  /* Вимір задано в rem, а не в ch, навмисно. З ch обмеження залежало
     від кегля елемента, і в одній секції виходило чотири різні
     ширини: підзаголовок 507px, проза 686, акордеон 798, картка 840.
     Права межа ставала рваною. Фіксовані 43rem дають ~70 символів
     при 17px і не чіпають дрібніший текст у вузьких картках.        */
  --measure:      43rem;   /* ≈688px - основна ширина прози */
  --measure-read: 43rem;   /* та сама: розділятись їм нема сенсу */

  --header-h: 4rem;

  --radius-card:  1rem;
  --radius-panel: 0.875rem;
}

html.dark {
  --surface-quiet:  rgba(45, 90, 69, 0.20);
  --surface-card:   rgba(45, 90, 69, 0.34);
  --surface-accent: rgba(61, 122, 95, 0.22);

  --line:        rgba(61, 122, 95, 0.34);
  --line-strong: rgba(61, 122, 95, 0.50);

  --accent:      #6CB89A;
  --accent-soft: #52997A;
}


/* ── 2. СТОРІНКА Й ТИПОГРАФІКА ───────────────────────────────── */

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background: linear-gradient(155deg, var(--page-1) 0%, var(--page-2) 45%, var(--page-3) 100%);
  background-attachment: fixed;
  text-rendering: optimizeLegibility;
}
html.dark body {
  background: linear-gradient(155deg, #122A1E 0%, #0A1810 55%, #1C3A2E 100%);
}

/* Заголовки самі знаходять місце для перенесення - без примусових <br>.
   hyphens: auto тут НЕ вживаємо: у Chrome немає українських правил
   переносу, тож він рвав "нейровідмінності" посеред слова без дефіса. */
h1, h2, h3, h4 {
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Вимір рядка. Ставиться на контейнер прози, не на кожен абзац. */
.measure      { max-width: var(--measure); }
.measure-read { max-width: var(--measure-read); }

/* Проза не розтягується на всю ширину колонки, якою широкою вона б
   не була: після ~70 символів око губить початок наступного рядка.
   Обмеження в ch, тому масштабується разом із кеглем - 17px дає
   ~640px, 15px ~520px.

   Це правило звільняє від необхідності пам'ятати про .measure у
   кожному новому абзаці: коли колонка розширилась до 848px, окремі
   абзаци таймлайну дійшли до 92 символів саме через це.
   Виняток - .wide для блоків, які мають займати всю ширину.        */
main :is(p, li):not(.wide) { max-width: var(--measure); }
main :is(.wide, .wide *)   { max-width: none; }

/* Bionic Reading */
.bio-b { font-weight: 700; }
html.dark .bio-b { color: #E4F2EE; }


/* ── 3. ПОВЕРХНІ ─────────────────────────────────────────────── */

/* Рівень 1 - тиха панель. Для акордеонів, списків, службових блоків.
   Найчастіша поверхня: не мусить привертати увагу.                  */
.panel {
  background: var(--surface-quiet);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}

/* Рівень 2 - картка. Лише для того, що справді має виступати:
   кактус, айсберг, вартість, конструктор, форма запису.             */
.card {
  background: var(--surface-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
}

/* Рівень 3 - акцент. Попередження, цитати, лінія підтримки.         */
.accent-block {
  background: var(--surface-accent);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
}

/* ── Смуга на всю ширину ───────────────────────────────────────
   Три блоки - кактус, вартість, запис - мають читатись як
   "зупинки" серед однорідної стрічки секцій.

   Фон розтягується за межі колонки через box-shadow, а clip-path
   зрізає його по вертикалі. Так смуга дістає до країв екрана,
   не змінюючи ширини елемента й не створюючи горизонтального
   скролу - на відміну від прийомів на 100vw, які ловлять ширину
   смуги прокрутки.                                               */
.band {
  --band: rgba(222, 213, 189, 0.55);
  background: var(--band);
}
html.dark .band {
  --band: rgba(18, 42, 30, 0.55);
}

/* До 1024px бічного змісту немає - смуга може дістати до країв
   екрана. Фон розтягується box-shadow'ом, а clip-path зрізає його
   по вертикалі: так смуга не створює горизонтального скролу, на
   відміну від прийомів на 100vw.                                  */
@media (max-width: 1023.98px) {
  .band {
    box-shadow: 0 0 0 100vmax var(--band);
    clip-path: inset(0 -100vmax);
  }
}

/* Від 1024px з'являється бічний зміст, і смуга на всю ширину
   перетинала його - колонка тексту переставала читатись як цілісний
   блок, а сама смуга виглядала несиметрично (контент зсунутий
   праворуч, тінт по центру екрана). Тому тут смуга стає панеллю,
   рівною по краях із рештою сторінки.                              */
@media (min-width: 1024px) {
  .band {
    border-radius: 1.5rem;
    margin-left: -1.75rem;
    margin-right: -1.75rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

/* ── Градієнтна панель хедера ──────────────────────────────────
   Градієнт тут вирішує дві задачі: дає сторінці одну сильну
   "точку входу" замість рівної стрічки секцій і збирає портрет
   із текстом в один блок - раніше фото просто висіло збоку.

   Градієнт навмисно вузького діапазону (різниця світлості між
   кутами менша за 8%): цього досить, щоб площина перестала бути
   пласкою, і замало, щоб десь просів контраст тексту.            */
.hero-panel {
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(146, 186, 158, 0.30) 0%, rgba(146, 186, 158, 0) 58%),
    linear-gradient(152deg, #F7F2E4 0%, #EFE7D2 52%, #E4DAC0 100%);
  border: 1px solid rgba(140, 120, 90, 0.28);
  border-radius: 1.5rem;
}
html.dark .hero-panel {
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(82, 153, 122, 0.26) 0%, rgba(82, 153, 122, 0) 58%),
    linear-gradient(152deg, #17301F 0%, #102217 55%, #1B3A2B 100%);
  border-color: rgba(61, 122, 95, 0.42);
}

/* М'якший градієнт для карток, які мають трохи виступати:
   форма запису й запрошення в освітній розділ.                   */
.soft-panel {
  background: linear-gradient(158deg, rgba(255, 252, 242, 0.96) 0%, rgba(243, 236, 219, 0.92) 100%);
  border: 1px solid rgba(140, 120, 90, 0.34);
  border-radius: 1rem;
}
html.dark .soft-panel {
  background: linear-gradient(158deg, rgba(45, 90, 69, 0.42) 0%, rgba(28, 58, 46, 0.34) 100%);
  border-color: rgba(61, 122, 95, 0.45);
}

/* Портрет: рамка замість голого зображення, щоб фото читалось
   як частина композиції, а не як вставлений прямокутник.         */
.portrait {
  border-radius: 1.25rem;
  border: 1px solid rgba(140, 120, 90, 0.40);
  box-shadow: 0 2px 10px rgba(90, 74, 48, 0.14);
}
html.dark .portrait {
  border-color: rgba(61, 122, 95, 0.50);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* ── Список упізнавання ("Чи це про вас?") ────────────────────
   Сім однакових панелей поспіль читались як таблиця. Тепер це
   редакційний список: великі цифри задають масштаб, тонка лінія
   розділяє пункти, рамок немає взагалі.                          */
.recognise > li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.recognise > li:first-child { padding-top: 0; }
.recognise > li:last-child  { border-bottom: 0; padding-bottom: 0; }

.recognise .n {
  font-family: Nunito, ui-sans-serif, sans-serif;
  font-weight: 900;
  font-size: 2.1rem;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: rgba(61, 122, 95, 0.42);
  user-select: none;
}
html.dark .recognise .n { color: rgba(108, 184, 154, 0.40); }

@media (min-width: 640px) {
  .recognise > li { grid-template-columns: 3.5rem 1fr; }
  .recognise .n   { font-size: 2.6rem; }
}


/* ── Виносна цитата ───────────────────────────────────────────
   Одна велика типографічна пауза на сторінці. Лапка декоративна
   й прихована від екранних читачів.                              */
.pullquote {
  position: relative;
  padding-left: 2.75rem;
}
.pullquote::before {
  content: '"';
  position: absolute;
  left: 0;
  top: -0.35rem;
  font-family: Nunito, ui-sans-serif, sans-serif;
  font-weight: 900;
  font-size: 3.6rem;
  line-height: 1;
  color: rgba(61, 122, 95, 0.34);
}
html.dark .pullquote::before { color: rgba(108, 184, 154, 0.34); }


/* ── Іконка підходу ───────────────────────────────────────────
   Ліва колонка з лінійним значком - щоб три однакові панелі
   перестали бути трьома однаковими панелями.                    */
.approach {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0 1.15rem;
  align-items: start;
}


/* Коротка риска над заголовком секції. Найдешевший спосіб дати
   сторінці ритм: око чіпляється за початок кожного розділу.      */
.section-rule::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 1.25rem;
  background: var(--accent-soft);
}
html.dark .section-rule::before { background: var(--accent); }

/* Попередження про важкий вміст - той самий акцент, тепліший тон.   */
.warn-block {
  background: rgba(214, 196, 160, 0.45);
  border-left: 3px solid #A68E6D;
  border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
}
html.dark .warn-block {
  background: rgba(120, 100, 60, 0.22);
  border-left-color: #C6AF93;
}


/* ── 4. РУХ ──────────────────────────────────────────────────── */
/* Жодного руху: анімації й трансформи миттєві.
   Дозволено тільки зміну кольору - вона не рухає нічого на екрані,
   але прибирає відчуття, що інтерфейс "клацає".                     */

*, *::before, *::after {
  animation: none !important;
  animation-duration: 0s !important;
  transition-property: color, background-color, border-color, fill, stroke, opacity !important;
  transition-duration: 120ms !important;
  transition-timing-function: ease !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
  html { scroll-behavior: auto !important; }
}


/* ── 5. ЯКОРІ Й ФОКУС ────────────────────────────────────────── */

/* Без цього кожен перехід зі змісту ховає заголовок під липким
   хедером, і людина потрапляє в середину абзацу.                    */
[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 6px;
}
html.dark :focus-visible { outline-color: #6CB89A; }

/* ── Лосось проти течії ────────────────────────────────────────
   Ілюстрація до фінальної цитати розділу 6. Кольори тримаємо
   тут, а не в атрибутах SVG, бо інакше в темній темі риба
   лишалась би темною на темному. Протитечійність читається з
   двох речей: риба дивиться ліворуч, а лінії води згасають
   ліворуч і мають вістря праворуч.
   Рухів немає навмисне - сторінка для людей із сенсорною
   чутливістю, і рибі не треба плисти по-справжньому.           */
.salmon-art {
  --fish-back:  #2D5A45;
  --fish-body:  #567F6B;
  --fish-belly: #DDD4BA;
  --fish-fin:   #3D7A5F;
  --fish-edge:  #234737;
  --fish-spot:  #1E3D2E;
  --fish-eye:   #F0EAD8;
  --stream:     #2D5A45;
  display: block;
  width: 100%;
  max-width: 31rem;
  height: auto;
}
html.dark .salmon-art {
  --fish-back:  #52997A;
  --fish-body:  #6CB89A;
  --fish-belly: #A8D8C2;
  --fish-fin:   #52997A;
  --fish-edge:  #8FD3B8;
  --fish-spot:  #24493A;
  --fish-eye:   #0A1810;
  --stream:     #6CB89A;
}

/* Мінімальна зона натискання - 44px по висоті.
   Стосується пілюль глосарію, чипсів, перемикачів.                  */
.tap-target {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Крапки-перемикачі голосів мають 6px - у них важко влучити
   пальцем. Сама крапка лишається дрібною, а мішень розширює
   невидима зона: на всю висоту рядка і на весь крок між
   сусідніми крапками, щоб вони не перекривались.                   */
.voices-dot { position: relative; }
.voices-dot::after {
  content: '';
  position: absolute;
  inset: -12px -3px;
}


/* ── Липка панель дії на телефоні ──────────────────────────────
   На вузьких екранах кнопки "Записатись" у хедері немає: там уже
   три круглі кнопки, і четверта не влазить у 375px. Через це
   форма запису лишалась на 25-му екрані з 30 без жодного
   короткого шляху.

   Панель тиха навмисно: без тіні й без кольорової заливки, лише
   тонка межа - щоб не тиснути на людину, яка ще читає.            */
#action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: rgba(237, 229, 206, 0.94);
  border-top: 1px solid rgba(168, 160, 144, 0.55);
  padding: 0.6rem 1.25rem calc(0.6rem + env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
}
html.dark #action-bar {
  background: rgba(15, 35, 25, 0.94);
  border-top-color: rgba(61, 122, 95, 0.5);
}
@supports (backdrop-filter: blur(8px)) {
  #action-bar { backdrop-filter: blur(8px); }
}
#action-bar.is-visible { opacity: 1; visibility: visible; }

/* Від 640px кнопка є в хедері - панель зайва */
@media (min-width: 640px) { #action-bar { display: none; } }


/* ── Перемикач сторінок ────────────────────────────────────────
   Сайт складається з двох частин, і це має бути видно з першого
   погляду, а не з підпису в списку посилань. Сегментований
   перемикач показує обидві й підсвічує поточну.                   */
.page-switch {
  display: inline-flex;
  padding: 3px;
  border-radius: 9999px;
  background: rgba(196, 186, 160, 0.42);
  border: 1px solid rgba(140, 120, 90, 0.28);
}
html.dark .page-switch {
  background: rgba(28, 58, 46, 0.55);
  border-color: rgba(61, 122, 95, 0.40);
}
.page-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 0.95rem;
  border-radius: 9999px;
  white-space: nowrap;
  color: #3A3226;
}
html.dark .page-switch a { color: #C0DFDA; }
.page-switch a:hover { background: rgba(255, 252, 242, 0.55); }
html.dark .page-switch a:hover { background: rgba(45, 90, 69, 0.45); }

.page-switch a[aria-current="page"] {
  background: #FFFCF2;
  color: #142E1E;
  box-shadow: 0 1px 3px rgba(90, 74, 48, 0.18);
}
html.dark .page-switch a[aria-current="page"] {
  background: #3D7A5F;
  color: #FDFBF7;
  box-shadow: none;
}

/* Той самий перемикач у мобільному аркуші - на всю ширину */
#toc-sheet .page-switch { display: flex; width: 100%; }
#toc-sheet .page-switch a { flex: 1; justify-content: center; min-height: 44px; }

/* Кнопка EN: великі літери сидять у верхній частині рядка, тож
   геометричний центр і оптичний не збігаються. Зсуваємо на піксель. */
.en-badge { line-height: 1; padding-top: 1px; }


/* ── Англомовний блок ──────────────────────────────────────────
   Згорнутий за замовчуванням: він стоїть у шляху української
   аудиторії до форми. Розкривається кнопкою EN у хедері.          */
#english > summary { list-style: none; cursor: pointer; }
#english > summary::-webkit-details-marker { display: none; }
#english[open] > summary .en-chevron { transform: rotate(180deg); }


/* ── Список використаних джерел ────────────────────────────────
   Теж згорнутий: він потрібен небагатьом, але тим, кому
   потрібен, потрібен цілком.                                     */
#sources > summary { list-style: none; cursor: pointer; }
#sources > summary::-webkit-details-marker { display: none; }
#sources[open] > summary .src-chevron { transform: rotate(180deg); }

/* Висячий відступ: другий і подальші рядки запису зсунуті
   праворуч, як в APA. Так око чіпляється за прізвище автора.     */
.ref-list { list-style: none; padding-left: 0; }
.ref-list > li {
  padding-left: 1.75rem;
  text-indent: -1.75rem;
}
/* DOI - довгий нерозривний рядок: на телефоні він виносив би
   блок за край екрана.                                           */
.ref-list a { overflow-wrap: anywhere; }


/* ── 6. КОМПОНЕНТИ ───────────────────────────────────────────── */

/* FAQ / акордеон - напрямок шеврона */
.chevron-open { transform: rotate(180deg); }

/* ══ Конструктор сесії - повзунки ══
   --pct оновлюється через JS для заповнення треку. */
:root {
  --range-fill:  #3D7A5F;
  --range-track: #C8B898;
}
html.dark {
  --range-fill:  #52997A;
  --range-track: #2D5A45;
}
.custom-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 9999px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--range-fill)  var(--pct, 50%),
    var(--range-track) var(--pct, 50%)
  );
}
.custom-range::-moz-range-track {
  height: 5px;
  border-radius: 9999px;
  background: linear-gradient(
    to right,
    var(--range-fill)  var(--pct, 50%),
    var(--range-track) var(--pct, 50%)
  );
}
.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #2D5A45;
  border: 3px solid #C8BFA8;
  box-shadow: 0 1px 6px rgba(0,0,0,0.20);
  cursor: grab;
}
.custom-range:active::-webkit-slider-thumb { cursor: grabbing; }
.custom-range::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #2D5A45;
  border: 3px solid #C8BFA8;
  box-shadow: 0 1px 6px rgba(0,0,0,0.20);
  cursor: grab;
}
html.dark .custom-range::-webkit-slider-thumb { background: #52997A; border-color: #0A1810; }
html.dark .custom-range::-moz-range-thumb    { background: #52997A; border-color: #0A1810; }
.custom-range:focus-visible {
  outline: 3px solid #52997A;
  outline-offset: 5px;
  border-radius: 4px;
}

/* Поля форм */
.pref-input {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 0.75rem;
  font-size: var(--fs-sm);
  background: rgba(200, 210, 196, 0.50);
  border: 1px solid rgba(148, 160, 140, 0.70);
  color: #2A2418;
}
html.dark .pref-input {
  background: rgba(45,90,69,0.40);
  border: 1px solid rgba(61,122,95,0.50);
  color: #F6F0E8;
}
.pref-input::placeholder { color: #6E6454; }
html.dark .pref-input::placeholder { color: #A68E6D; }
.pref-input:focus { outline: 3px solid #3D7A5F; outline-offset: 2px; }
textarea.pref-input { display: block; }

/* Пілюлі-радіо (формат сесії + нагадування) */
.format-option input:checked + .format-label,
.remind-option input:checked + .remind-label {
  background: #2D5A45;
  border-color: #2D5A45;
  color: #fff;
}
html.dark .format-option input:checked + .format-label,
html.dark .remind-option input:checked + .remind-label {
  background: #52997A;
  border-color: #52997A;
  color: #F6F0E8;
}

/* Галочка "долучити профіль" */
#send-prefs-checkbox:checked ~ div svg { display: block; }

/* Активний пункт лівого сайдбара */
aside nav a { border-left: 2px solid transparent; }
aside nav a.text-forest-800 { border-left-color: #3D7A5F; }
html.dark aside nav a.dark\:text-forest-200 { border-left-color: #52997A; }

/* Хвиля у футері */
.footer-wave { fill: rgba(185,178,160,0.5); }
html.dark .footer-wave { fill: rgba(28,58,46,0.40); }


/* ── 7. ТОЧКОВІ ВИПРАВЛЕННЯ ТЕМИ ─────────────────────────────── */

/* Tailwind gray-* дає холодний нейтральний сірий.
   Нам потрібен теплий, у стилі старого паперу.                      */
html:not(.dark) .text-gray-800 { color: #241F16 !important; }
html:not(.dark) .text-gray-700 { color: #2F2A1E !important; }
html:not(.dark) .text-gray-600 { color: #3A3226 !important; }
html:not(.dark) .text-gray-500 { color: #4A4132 !important; }
html:not(.dark) .text-gray-400 { color: #554B39 !important; }

/* forest-* на насиченому піщаному фоні губиться */
html:not(.dark) .text-forest-400 { color: #2D5A45 !important; }
html:not(.dark) .text-forest-500 { color: #285039 !important; }
html:not(.dark) .text-forest-600 { color: #1E4230 !important; }
html:not(.dark) .text-forest-800 { color: #142E1E !important; }

/* Темна тема: найдрібніші мітки були на межі 4.5:1 */
html.dark .text-forest-600 { color: #6CB89A !important; }
html.dark .text-sand-500   { color: #C6AF93 !important; }

/* Ті самі мітки, задані через dark:-варіант. Під смугою фон стає
   темнішим, і на 12px вони провалювались до 4.25:1.               */
html.dark .dark\:text-sand-500 { color: #DDD0BB !important; }

/* Тут була спроба перекрити dark:text-forest-300 через !important -
   вона ж перебивала й dark:aria-pressed:text-white, тож натиснуті
   перемикачі ("Соломія", "Що видно назовні") втрачали білий текст.
   Правильне лікування - у розмітці: там, де є dark:-варіант, не
   ставити text-forest-600, бо саме його ловить правило вище.       */

html:not(.dark) .bg-forest-100 { background-color: #C8D8C4 !important; }
html:not(.dark) .bg-forest-50  { background-color: #D4E0D0 !important; }

html:not(.dark) .border-sand-300 { border-color: #A8A090 !important; }
html:not(.dark) .bg-sand-300     { background-color: #A8A090 !important; }

html:not(.dark) .format-label,
html:not(.dark) .remind-label {
  background: rgba(195, 205, 190, 0.55) !important;
  border-color: rgba(148, 160, 140, 0.70) !important;
  color: #2F2A1E !important;
}