/* ============================================================
   MEDINA EDU — СЛОЙ МАКЕТА № 1188 (задание цеха № 1193)
   Версия: 1.26.0   (обязана совпадать с MEL_TEMA_VER в medina-tema.php)
   ------------------------------------------------------------
   Владелец утвердил макеты 1188 (тёмная «Medina Luxury» и светлая
   «Манускрипт») словом 16.10.2026: «делай весь сайт».

   Слой идёт ПОСЛЕДНИМ, после тёмной палитры и `medina-manuskript.css`,
   и не трогает их значений. Он задаёт то, чего в палитре не было:
   золотую нить по краю блоков в тёмной теме, свет сверху карточки,
   мягкую тень, кнопки с изумрудным переливом, узор-гирих на фоне,
   переключатель темы «солнце / луна», арку у номера урока.

   Откат — убрать ссылку на этот файл в `mel_tema_css_tag()`:
   страница вернётся к прежнему виду целиком.
   ============================================================ */

:root {
  --sl-nit: oklch(0.8 0.09 82 / 0.22);
  --sl-nit-silnaya: oklch(0.8 0.09 82 / 0.5);
  --sl-svet: linear-gradient(180deg, oklch(1 0 0 / 0.035), transparent 40%);
  --sl-ten: 0 1px 0 oklch(1 0 0 / 0.05) inset, 0 24px 48px -28px oklch(0 0 0 / 0.7);
  --sl-ten-tiho: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 10px 24px -18px oklch(0 0 0 / 0.6);
  --sl-izumrud: oklch(0.7 0.115 160);
  --sl-izumrud-2: oklch(0.62 0.11 160);
  --sl-na-izumrude: oklch(0.17 0.03 165);
  --sl-izumrud-myagko: oklch(0.7 0.115 160 / 0.13);
  --sl-zoloto: oklch(0.82 0.1 82);
  --sl-karta-2: oklch(0.238 0.024 165);
  --sl-uzor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23d9b56a' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M28 14l4 6h7v7l6 4-6 4v7h-7l-4 6-4-6h-7v-7l-6-4 6-4v-7h7z'/%3E%3Cpath d='M0 28h11M45 28h11M28 0v11M28 45v11'/%3E%3C/g%3E%3C/svg%3E");
}
/* Край блока в тёмной теме — золотая нить макета, а не серо-зелёная черта; фон чуть глубже.
   Только для тёмной: светлая палитра объявлена РАНЬШЕ с тем же весом, и `:root` здесь перебил бы её. */
:root:not([data-me-theme="light"]) {
  --me-border-soft: var(--sl-nit);
  --me-canvas: oklch(0.165 0.018 168);
}

[data-me-theme="light"] {
  --sl-nit: oklch(0.79 0.045 82);
  --sl-nit-silnaya: oklch(0.62 0.08 74);
  --sl-svet: linear-gradient(180deg, oklch(1 0 0 / 0.6), transparent 35%);
  --sl-ten: 0 1px 2px oklch(0.36 0.04 80 / 0.1), 0 22px 40px -26px oklch(0.36 0.04 80 / 0.5);
  --sl-ten-tiho: 0 1px 2px oklch(0.36 0.04 80 / 0.09), 0 8px 18px -12px oklch(0.36 0.04 80 / 0.32);
  --sl-izumrud: oklch(0.44 0.09 158);
  --sl-izumrud-2: oklch(0.38 0.085 158);
  --sl-na-izumrude: oklch(0.985 0.012 90);
  --sl-izumrud-myagko: oklch(0.44 0.09 158 / 0.09);
  --sl-zoloto: oklch(0.5 0.1 70);
  --sl-karta-2: oklch(0.972 0.013 88);
  --sl-uzor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23875814' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M28 14l4 6h7v7l6 4-6 4v7h-7l-4 6-4-6h-7v-7l-6-4 6-4v-7h7z'/%3E%3Cpath d='M0 28h11M45 28h11M28 0v11M28 45v11'/%3E%3C/g%3E%3C/svg%3E");
  --me-border-soft: var(--sl-nit);
}

/* ── Фон страницы: едва заметный гирих ── */
body { background-image: var(--sl-uzor); background-attachment: fixed; }

/* ── Заголовки: Literata полужирная, плотнее ── */
h1, h2, h3 { letter-spacing: -0.012em; }

/* ── Шапка: стекло над узором, нить снизу ── */
.k-top, .p-top, .kl-top {
  background: color-mix(in oklch, var(--me-bar) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--me-rule);
}
.k-brand-t { font-family: "Literata", Georgia, serif; font-weight: 600; letter-spacing: -0.01em; }

/* ── Карточки: свет сверху, нить по краю, мягкая тень, скругление 18 ── */
.k-card, .k-hero, .mel-pu-kartochka, .kl-tip, .k-alt-card {
  border-radius: 18px;
  background-image: var(--sl-svet);
  box-shadow: var(--sl-ten);
}
/* Кайму плашки доступа (`k-hero`) не трогаем: она говорит состоянием — оплачено, долг, пауза. */
.k-card, .mel-pu-kartochka, .kl-tip, .k-alt-card { border-color: var(--sl-nit); }
.k-hero.is-ok { background-image: linear-gradient(180deg, var(--sl-izumrud-myagko), transparent 70%); }

/* ── Кнопки ── */
.k-btn, .mel-pu-knopka, .kz-send, .k-out {
  border-radius: 12px; font-weight: 700; letter-spacing: 0.005em;
  transition: transform .15s, box-shadow .15s, background-color .15s;
}
.k-btn-main, .kz-send, .k-out {
  background: linear-gradient(180deg, var(--sl-izumrud), var(--sl-izumrud-2));
  color: var(--sl-na-izumrude); border-color: transparent;
  box-shadow: 0 1px 0 oklch(1 0 0 / .25) inset, 0 14px 28px -14px color-mix(in oklch, var(--sl-izumrud) 80%, transparent);
}
.k-btn-main:hover, .kz-send:hover, .k-out:hover { transform: translateY(-1px); }
.k-btn:not(.k-btn-main), .mel-pu-knopka {
  background-color: var(--sl-karta-2); border: 1px solid var(--sl-nit); box-shadow: var(--sl-ten-tiho);
}
@media (prefers-reduced-motion: reduce) {
  .k-btn-main:hover, .kz-send:hover, .k-out:hover { transform: none; }
}

/* ── Поля ввода: мягкое кольцо изумруда при вводе ── */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], textarea, select {
  border-radius: 12px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none; border-color: var(--sl-izumrud);
  box-shadow: 0 0 0 4px var(--sl-izumrud-myagko);
}

/* ── Боковое меню кабинета: выбранный раздел — светлая плашка с золотой меткой ── */
.mel-pu__punkt { border-radius: 10px; }
.mel-pu__punkt--vybran {
  position: relative;
  background: var(--sl-karta-2) !important; color: var(--me-text) !important;
  box-shadow: var(--sl-ten-tiho);
}
.mel-pu__punkt--vybran::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--sl-zoloto);
}

/* ── Номер урока — арка ── */
.k-lesson-n {
  border-radius: 23px 23px 8px 8px;
  border-color: var(--sl-nit-silnaya);
  background-image: radial-gradient(120% 70% at 50% 0%, color-mix(in oklch, var(--sl-zoloto) 22%, transparent), transparent 70%);
  color: var(--sl-zoloto);
}

/* ── Метки состояния — таблетки ── */
.mel-pu-chip, .kt-chip, .kt-badge { border-radius: 999px; }

/* ── Переключатель темы: «солнце / луна» в таблетке, подпись — для чтеца экрана ── */
.me-tema {
  position: relative; gap: 0; padding: 3px; border-radius: 999px;
  background: var(--me-bg); border: 1px solid var(--me-rule); color: var(--me-faint);
}
.me-tema > span:last-child {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.me-tema .me-tema-z {
  width: 60px; height: 26px; border: 0; border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a89a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") 8px 50% / 14px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9b56a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E") calc(100% - 8px) 50% / 14px no-repeat,
    linear-gradient(var(--sl-karta-2), var(--sl-karta-2)) calc(100% - 1px) 50% / 28px 24px no-repeat;
}
[data-me-theme="light"] .me-tema .me-tema-z {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23875814' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") 8px 50% / 14px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857a66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E") calc(100% - 8px) 50% / 14px no-repeat,
    linear-gradient(oklch(1 0 0), oklch(1 0 0)) 1px 50% / 28px 24px no-repeat;
}
.me-tema:hover { border-color: var(--sl-nit-silnaya); }
/* На узкой шапке — один знак нынешней темы (луна или солнце): таблетка из двух выпирала за край окна
   в классе при увеличении 125 % (`test-razmer-stranicy.js`). Кнопка — под палец, 44 × 44. */
@media (max-width: 560px) {
  .me-tema { padding: 3px; min-width: 44px; min-height: 44px; justify-content: center; }
  .me-tema .me-tema-z { width: 30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9b56a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E") 50% 50% / 15px no-repeat; }
  [data-me-theme="light"] .me-tema .me-tema-z {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23875814' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") 50% 50% / 15px no-repeat; }
}

/* ── «Мой урок» — как в макете: спокойная карточка, номер в арке слева ── */
:root body .k-card.k-my { background-color: var(--me-surface); border-color: var(--sl-nit); }
:root body .k-my .k-lesson-n { background-color: var(--me-bg); border-color: var(--sl-nit-silnaya); color: var(--sl-zoloto); }
.k-my .k-lesson-n.is-ar {
  font: 700 calc(30px*var(--me-fzb,1))/1 "Lotus Shamy", "KFGQPC Uthmanic Hafs", serif; padding-top: 4px;
}
@media (min-width: 700px) {
  .k-card.k-my { position: relative; padding-left: 196px; min-height: 236px; }
  .k-my .k-lesson-n {
    position: absolute; left: 20px; top: 20px; width: 150px; height: 184px;
    border-radius: 75px 75px 14px 14px; flex-direction: column; gap: 10px;
    border: 1px solid var(--sl-nit-silnaya);
    box-shadow: inset 0 0 0 9px var(--me-surface), inset 0 0 0 10px var(--sl-nit);
  }
  .k-my .k-lesson-n.is-ar { font-size: calc(62px*var(--me-fzb,1)); padding-top: 18px; }
  .k-my .k-lesson-n.is-ar::after {
    content: "урок"; font: 700 10px/1 "Manrope", sans-serif; letter-spacing: .2em;
    text-transform: uppercase; color: var(--me-faint);
  }
  .k-my .k-lesson { min-height: 0; }
  .k-my .k-lesson-t b { font: 600 calc(20px*var(--me-fzb,1))/1.25 "Literata", Georgia, serif; }
}