/* ============================================================
   SculkWard — глобальная дизайн-система (рескин в стиле mistral.ai)
   Тёплая кремовая «бумага», near-black чернила, фирменный
   block-flame градиент как единственный горячий акцент.
   Загружается на КАЖДОЙ странице (лендинг/логин/панель/админка) —
   здесь живут токены, базовая типографика и общие компоненты.
   Шрифты подключаются <link>-ом из base.html (Google Fonts).
   ============================================================ */

:root {
  /* ---- тёплая палитра «бумаги» ---- */
  --paper:    #faf4ea;   /* фон страницы — тёплая слоновая кость */
  --paper-2:  #f2e9d8;   /* утопленные секции / sunken cream */
  --surface:  #ffffff;   /* карточки, поля ввода */
  --ink:      #1a1512;   /* основной текст — тёплый near-black */
  --ink-2:    #5c5347;   /* вторичный текст */
  --ink-3:    #6e6557;   /* приглушённый / подписи (AA ≥4.5:1 на бумаге) */
  --ink-faint:#8b8173;   /* НЕ для текста — только декор/иконки */
  --line:     #ece1cf;   /* тихая линия-разделитель */
  --line-2:   #ddd0b8;   /* бордер интерактива */

  /* ---- тёмные тёплые поверхности (код, футер, dark-секции) ---- */
  --night:    #181310;
  --night-2:  #221a13;
  --on-night: #f4eadb;   /* кремовый текст на тёмном */
  --on-night-dim: #b9ad99;

  /* ---- фирменный flame (block-gradient Mistral) ---- */
  --yellow: #ffd900;
  --gold:   #ffc400;
  --amber:  #ffa110;
  --orange: #ff8105;
  --flame:  #fa520f;     /* ядро акцента — ТОЛЬКО заливки/иконки (как текст не проходит AA) */
  --flame-hi: #fb6424;   /* hover / светлее — декор */
  --flame-deep: #e1380a;
  /* текстовые/кнопочные варианты flame, проходящие WCAG AA */
  --flame-ink: #bf3d08;  /* flame как ТЕКСТ/ссылка: 4.94:1 на бумаге */
  --flame-ink-d: #992f06;/* hover ссылки */
  --flame-btn: #cf3f08;  /* фон кнопки под белый текст: 4.8:1 */
  --flame-btn-d: #b8380a;/* hover кнопки (темнее → контраст растёт) */
  --danger: #c22f06;     /* опасное действие: белый текст 5.6:1 */
  --danger-d: #a82806;
  --flame-grad: linear-gradient(102deg,
      #ffd900 0%, #ffba0a 24%, #ff8105 46%, #fb6424 68%, #fa520f 86%, #e1380a 100%);
  --flame-tint: #fff3e2; /* очень светлый амбер-фон для chip/hover */

  /* ---- амбер-тонированные тени (не серые — фишка Mistral) ---- */
  --sh-sm: 0 1px 2px rgba(90,45,12,.05), 0 2px 6px rgba(120,62,20,.05);
  --sh:    0 4px 16px -6px rgba(120,62,20,.16), 0 12px 34px -16px rgba(90,45,12,.14);
  --sh-lg: 0 18px 50px -14px rgba(120,62,20,.24);
  --glow:  0 10px 34px -8px rgba(250,82,15,.42);

  /* ---- шрифты ---- */
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  /* ---- ритм ---- */
  --maxw: 1120px;
  --r: 14px; --r-sm: 9px; --r-lg: 22px; --r-pill: 999px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 92% -8%, rgba(255,161,16,.10), transparent 55%),
    radial-gradient(80% 60% at 0% 0%, rgba(250,82,15,.05), transparent 50%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--flame); color: #fff; }

/* ----------------------------- шапка ----------------------------- */

header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(18px, 4vw, 40px);
  background: rgba(250, 244, 234, .88);                      /* solid-фолбэк без color-mix */
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.brandmark svg { display: block; width: 26px; height: 26px; }
.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand-sub {
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 500;
}
@media (max-width: 560px) { .brand-sub { display: none; } }
.topnav { margin-left: auto; display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); }
.topnav a {
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: color .15s ease;
}
.topnav a:hover { color: var(--ink); }
.topnav .nav-cta {
  color: #fff;
  background: var(--ink);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.topnav .nav-cta:hover { background: var(--flame); color: #fff; }
@media (max-width: 680px) { .topnav .nav-link { display: none; } }

/* ----------------------------- main / типографика ----------------------------- */

main { max-width: 760px; margin: 0 auto; padding: 48px 22px 80px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;                 /* авторитет от размера, не от жирности (как Mistral) */
  letter-spacing: -0.012em;
  line-height: 1.12;
  color: var(--ink);
}
h1 { font-size: clamp(30px, 5vw, 44px); margin: 0 0 18px; }
h2 { font-size: clamp(22px, 3vw, 30px); margin: 40px 0 16px; }
h3 { font-size: 19px; margin: 0 0 8px; }

a { color: var(--flame-ink); text-decoration-color: color-mix(in srgb, var(--flame-ink) 40%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--flame-ink-d); text-decoration-color: var(--flame-ink); }

p { margin: 0 0 14px; }
.muted { color: var(--ink-3); font-size: 14px; }
.err { color: var(--danger); font-weight: 600; }

/* ----------------------------- формы / кнопки ----------------------------- */

form { margin: 16px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

input, select {
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink);
  padding: 11px 13px;
  border-radius: var(--r-sm);
  min-width: 220px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--flame);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--flame) 22%, transparent);
}

button, .btn {
  font: inherit;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--flame-btn);
  color: #fff;
  border: 1px solid transparent;
  padding: 11px 22px;
  border-radius: var(--r-pill);                /* единый язык кнопок-пилюль на всех страницах */
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .2s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
button:hover, .btn:hover { background: var(--flame-btn-d); box-shadow: var(--glow); transform: translateY(-1px); }
button:active, .btn:active { transform: translateY(0); }

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: var(--sh-sm);
}
.btn-secondary:hover { background: var(--surface); border-color: var(--ink); box-shadow: var(--sh); color: var(--ink); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-d); }

:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; border-radius: 4px; }

/* ----------------------------- таблицы ----------------------------- */

table { width: 100%; border-collapse: collapse; margin: 14px 0; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { color: var(--ink-3); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
tr:hover td { background: color-mix(in srgb, var(--paper-2) 55%, transparent); }

/* ----------------------------- код ----------------------------- */

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--flame-tint);
  border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--line));
  color: #9a3a06;
  padding: 1px 6px;
  border-radius: 6px;
}

/* ----------------------------- общие компоненты (логин/панель) ----------------------------- */

/* карточка-секрет нового ключа */
.secret {
  background: var(--flame-tint);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line));
  border-left: 3px solid var(--flame);
  border-radius: var(--r);
  padding: 16px 18px;
  margin: 18px 0;
  box-shadow: var(--sh-sm);
}
.secret code { display: inline-block; margin-top: 6px; font-size: 14px; background: var(--surface); }

/* лёгкая карточка-обёртка для форм входа/панели */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(22px, 4vw, 34px);
  box-shadow: var(--sh);
}

/* центрированный экран входа */
.auth { max-width: 440px; margin: clamp(40px, 8vh, 90px) auto; padding: 0 22px; }
.auth h1 { text-align: left; }
.auth form { flex-direction: column; align-items: stretch; }
.auth input { min-width: 0; width: 100%; }
.auth button { width: 100%; }

.logout-form { margin-top: 32px; }
.inline-form { display: inline-flex; gap: 8px; margin: 0; }

/* тумблер «двойная модерация» — сбрасываем глобальную геометрию input */
.dual-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-2); }
.dual-toggle input[type="checkbox"] {
  min-width: 0; width: 17px; height: 17px; padding: 0; margin: 0;
  accent-color: var(--flame); cursor: pointer;
}

/* ----------------------------- адаптив базовый ----------------------------- */

@media (max-width: 620px) {
  input, select { min-width: 0; width: 100%; }
  form { gap: 8px; }
}

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