/* Оформление кабинета, админки и редактора.
 *
 * Взято из ultrabot: там эта система уже обкатана, и два интерфейса одного
 * автора не должны выглядеть чужими друг другу. Скопированы токены, шкалы
 * и поведение — не вёрстка: раскладка у нас своя.
 *
 * Что НЕ отсюда: сайты клиентов. У них своя тема в документе, и наш индиго
 * там был бы навязыванием.
 */

/* ── Шрифт ──
 * Своим файлом, а не из чужого CDN: страница обещает не ходить наружу,
 * и CSP это запрещает. Три подмножества из пяти — расширенные наборы
 * интерфейсу на русском не нужны, а весят они как основной.
 *
 * Порядок объявлений важен: при пересечении диапазонов побеждает последнее
 * правило, поэтому символьный набор идёт первым, а основные перекрывают его
 * там, где знак есть и у них.
 */
@font-face {
  font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-symbols.woff2) format('woff2');
  unicode-range: U+AB,U+B7,U+BB,U+2013-2014,U+20AC,U+20B4,U+20B8,U+20BA,U+20BD,U+2116,U+2190-2193,U+2304,U+25B8,U+25BE,U+26A0,U+2713,U+2715;
}
@font-face {
  font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Палитра ──
 * Акцент индиго, нейтраль уведена в холодный: серый должен читаться
 * выбранным, а не унаследованным.
 */
:root, :root[data-theme="light"] {
  --bg: #f6f7fb; --surface: #ffffff; --surface-2: #f1f3f9;
  --border: #e3e7f1; --border-soft: #edeff6;
  --text: #141827; --text-2: #5a6377; --text-3: #626b80;
  --accent: #4f46e5; --accent-hover: #4338ca; --accent-fg: #ffffff;
  --accent-soft: #eef1fe; --accent-ink: #4338ca;
  --ok: #15803d; --ok-soft: #eefaf1;
  --warn: #b45309; --warn-soft: #fdf5e7;
  --danger: #c81e1e; --danger-soft: #fdeeee;
  --veil: rgba(255,255,255,.86);
  --shadow: 0 1px 2px rgba(20,24,39,.05), 0 10px 26px -16px rgba(20,24,39,.22);
  --shadow-lg: 0 2px 4px rgba(20,24,39,.05), 0 24px 60px -24px rgba(20,24,39,.30);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0a0c12; --surface: #12151e; --surface-2: #181c27;
  --border: #252a37; --border-soft: #1c212c;
  --text: #e8eaf1; --text-2: #99a2b4; --text-3: #848da0;
  --accent: #5b5ef0; --accent-hover: #4a4de8; --accent-fg: #ffffff;
  --accent-soft: #1b1f3d; --accent-ink: #a5b0fb;
  --ok: #4ade80; --ok-soft: #10251a;
  --warn: #fbbf24; --warn-soft: #291d0c;
  --danger: #f87171; --danger-soft: #2a1315;
  --veil: rgba(18,21,30,.86);
  --shadow: 0 1px 2px rgba(0,0,0,.50), 0 12px 30px -18px rgba(0,0,0,.80);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.50), 0 30px 70px -30px rgba(0,0,0,.90);
  color-scheme: dark;
}
/* Системное предпочтение, пока человек не выбрал явно. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0c12; --surface: #12151e; --surface-2: #181c27;
    --border: #252a37; --border-soft: #1c212c;
    --text: #e8eaf1; --text-2: #99a2b4; --text-3: #848da0;
    --accent: #5b5ef0; --accent-hover: #4a4de8; --accent-fg: #ffffff;
    --accent-soft: #1b1f3d; --accent-ink: #a5b0fb;
    --ok: #4ade80; --ok-soft: #10251a;
    --warn: #fbbf24; --warn-soft: #291d0c;
    --danger: #f87171; --danger-soft: #2a1315;
    --veil: rgba(18,21,30,.86);
  --shadow: 0 1px 2px rgba(0,0,0,.50), 0 12px 30px -18px rgba(0,0,0,.80);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.50), 0 30px 70px -30px rgba(0,0,0,.90);
    color-scheme: dark;
  }
}

/* Одна шкала радиусов и шрифтов на всё. */
:root {
  --r-sm: 7px; --r: 9px; --r-md: 11px; --r-lg: 14px; --r-xl: 16px;
  --font: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box }
html, body { margin: 0; background: var(--bg); color: var(--text) }
body {
  font-family: var(--font); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* Однопалубная a и прямая l: иначе Inter путает l и I. */
  font-feature-settings: 'cv05' 1, 'cv11' 1;
}

h1 { font-size: 23px; font-weight: 650; letter-spacing: -.02em; margin: 0 }
h2 { font-size: 18px; font-weight: 650; letter-spacing: -.015em; margin: 0 }
h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin: 0 }
a { color: var(--accent-ink); text-decoration: none }
a:hover { text-decoration: underline; text-underline-offset: 2px }
code, pre, kbd { font-family: var(--mono) }
::selection { background: var(--accent-soft); color: var(--accent-ink) }

/* Видимый фокус с клавиатуры — единый на всё, мышью не мешает. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px }

/* Полосы прокрутки под тему: системные светлые полосы на тёмном фоне
   выдают недоделанный интерфейс. */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent }
::-webkit-scrollbar { width: 10px; height: 10px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box }

/* ── Поля ── */
input, select, textarea, button {
  font: inherit; color: inherit; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  padding: .5rem .7rem; transition: border-color .15s, box-shadow .15s, background .15s;
}
input, select, textarea { width: 100% }
input::placeholder, textarea::placeholder { color: var(--text-3) }
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
/* Обычный шрифт: в многострочных полях чаще пишут текст, а не код.
   Моноширинный включают там, где он к месту — например, у site.json. */
textarea { resize: vertical }
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0 }
input[type="color"] { padding: 2px; height: 2.1rem }

/* ── Кнопки ── */
button {
  background: var(--accent); color: var(--accent-fg); border-color: transparent;
  font-weight: 600; cursor: pointer; width: auto;
}
button:hover:not(:disabled) { background: var(--accent-hover) }
button:active:not(:disabled) { transform: translateY(.5px) }
button:disabled { opacity: .55; cursor: default }

button.ghost {
  background: var(--surface); color: var(--text);
  border-color: var(--border); font-weight: 500;
}
button.ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text-3) }

button.danger {
  background: var(--surface); color: var(--danger);
  border-color: var(--border); font-weight: 500;
}
button.danger:hover:not(:disabled) { background: var(--danger-soft); border-color: currentColor }

button.tiny { padding: .2rem .45rem; font-size: 12px; font-weight: 500 }

/* ── Карточки и списки ── */
.card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 1.1rem 1.25rem; margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.card h2 { margin-bottom: .9rem }

.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem }

label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: .25rem }
.muted { color: var(--text-2); font-size: 13px }
.dim { color: var(--text-3); font-size: 12px }

.item { border-top: 1px solid var(--border-soft); padding: .85rem 0 }
.item:first-of-type { border-top: 0 }

/* ── Сообщения ── */
.msg {
  padding: .6rem .85rem; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface-2); margin-bottom: 1rem;
}
.msg.bad { color: var(--danger); background: var(--danger-soft); border-color: transparent }
.msg.ok { color: var(--ok); background: var(--ok-soft); border-color: transparent }
.msg.warn { color: var(--warn); background: var(--warn-soft); border-color: transparent }

.badge {
  font-size: 11.5px; font-weight: 500; padding: .12rem .5rem; border-radius: 99px;
  border: 1px solid var(--border); color: var(--text-2); background: var(--surface-2);
}
.badge.ok { color: var(--ok); background: var(--ok-soft); border-color: transparent }
.badge.warn { color: var(--warn); background: var(--warn-soft); border-color: transparent }

.hidden { display: none !important }

/* Движение — коротко, а тем, кто его выключил, не показываем вовсе. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ── окно выбора ────────────────────────────────────────────────────────────
 *
 * Общее для редактора и кабинета: одно и то же окно «что добавить» и
 * «с чего начать». Держать его в двух местах значило бы получить два
 * похожих окна с разными отступами.
 */
.picker { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(15, 18, 30, .45); padding: 1rem }
.picker .sheet { background: var(--surface); border-radius: var(--r-xl); padding: 1.2rem;
  width: min(46rem, 100%); max-height: 86vh; overflow: auto;
  box-shadow: var(--shadow-lg) }
.picker h3 { margin-bottom: .8rem }
.picker label { display: block; margin: .6rem 0 .2rem; font-size: 12.5px; color: var(--text-2) }
.picker .sheet > input { width: 100% }
.picker .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .5rem }
/* Цвет текста — не наследие от общей кнопки (та белая на цветном фоне):
   без него название непройденной карточки не видно вовсе, белым по
   белому. У того же окна в editor.html цвет прописан — здесь забыли. */
.picker .grid button { text-align: left; padding: .6rem .7rem; font-weight: 500;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text) }
.picker .grid button[aria-pressed="true"] { border-color: var(--accent);
  background: var(--accent-soft); color: var(--accent-ink) }
.picker .grid button:hover { border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-ink) }
.picker .grid b { display: block; font-weight: 600; margin-bottom: .1rem }
.picker .grid span { font-size: 11.5px; color: var(--text-3) }

/* Живое превью стартера. Страница внутри свёрстана на широкий экран,
   поэтому показываем её как есть и уменьшаем целиком: обрезать по ширине
   значило бы показать половину и назвать это превью. */
.previewbox { margin-top: .7rem }
.previewbox .preview { width: 200%; height: 40rem; border: 1px solid var(--border);
  border-radius: var(--r); background: #fff; display: block;
  transform: scale(.5); transform-origin: 0 0; margin-bottom: -20rem }
.previewbox p { margin-top: .5rem; font-size: 11.5px }
@media (max-width: 640px) {
  /* На телефоне окно у́же, и половина масштаба оставила бы марку
     нечитаемой: показываем треть ширины, но крупнее. */
  .previewbox .preview { width: 300%; height: 45rem; transform: scale(.333);
    margin-bottom: -30rem }
}

/* Прежние рода сайта — свёрнуты и не первые, но никуда не делись:
   тот же выбор, что и у основного рода, только не в один экран с ним. */
.picker details.kind-advanced { margin-top: .7rem }
.picker details.kind-advanced summary { cursor: pointer; padding: .3rem 0;
  font-size: 12.5px; color: var(--text-2); list-style: none }
.picker details.kind-advanced summary::-webkit-details-marker { display: none }
.picker details.kind-advanced summary::before { content: '▸ '; color: var(--text-3) }
.picker details.kind-advanced[open] summary::before { content: '▾ ' }
.picker details.kind-advanced .grid { margin-top: .5rem }

/* ── Подсветка кода ──────────────────────────────────────────────────
 *
 * Здесь, а не в редакторе: те же цвета показывает образец в настройках,
 * и держать их в двух местах значит однажды показать не то, что выбрали.
 *
 * Цвета заданы переменными, а правило одно. Иначе не выходит: тёмная
 * тема кабинета и выбранная тема подсветки — два независимых выбора,
 * и правила с разным весом всегда перебивали бы друг друга. Переменные
 * же решаются порядком: выбранная тема стоит ниже и побеждает.
 */
:root {
  --code-com: #8b93a6; --code-tag: #2563eb; --code-att: #7c3aed;
  --code-str: #b45309; --code-num: #0f766e;
}
:root[data-theme="dark"] {
  --code-com: #6e7788; --code-tag: #7dd3fc; --code-att: #d8b4fe;
  --code-str: #fcd34d; --code-num: #5eead4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --code-com: #6e7788; --code-tag: #7dd3fc; --code-att: #d8b4fe;
    --code-str: #fcd34d; --code-num: #5eead4;
  }
}

/* Выбранная тема подсветки. Ниже общих — и потому сильнее них. */
:root[data-hl="soft"] {
  --code-com: #94a3b8; --code-tag: #64748b; --code-att: #475569;
  --code-str: #0e7490; --code-num: #4d7c0f;
}
:root[data-hl="contrast"] {
  --code-com: #555; --code-tag: #0000cc; --code-att: #7b00b3;
  --code-str: #a33000; --code-num: #00695c;
}
:root[data-hl="contrast"][data-theme="dark"] {
  --code-com: #9aa4b2; --code-tag: #93c5fd; --code-att: #e9d5ff;
  --code-str: #ffd166; --code-num: #7dffe3;
}
:root[data-hl="warm"] {
  --code-com: #a8a29e; --code-tag: #9a3412; --code-att: #a16207;
  --code-str: #4d7c0f; --code-num: #7c2d12;
}

.com { color: var(--code-com); font-style: italic }
.tag, .sel { color: var(--code-tag) }
.att, .kw, .prop { color: var(--code-att) }
.str { color: var(--code-str) }
.num { color: var(--code-num) }