/* Общие токены и детали кита и инбокса. Всё рисуется плоскими заливками и рамками в 1–2 px:
   то, что StyleBoxFlat в Godot повторяет один в один. Без градиентов, размытия и теней. */
:root{
  --pit:#0c0b0a;      /* фон за панелями */
  --iron:#161412;     /* панель */
  --iron-2:#1f1c19;   /* поднятая деталь, строка под мышью */
  --iron-3:#2b2723;   /* выбранная строка, нажатая кнопка */
  --seam:#3a342d;     /* шов между панелями, рамка покоя */
  --brass:#8f7647;    /* рамка выбранного */
  --text:#f7f5ff;
  --muted:#b8b4cc;
  --dim:#857f93;
  --gold:#ffd23c;     /* только «ваш ход» */
  --warn:#ffc53a;
  --stop:#ff3d5a;
  --ok:#bfe8c9;
  --display:"Playfair Display SC",serif;
  --body:"Fira Sans",sans-serif;
  --digits:"Fira Sans Condensed",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--pit);color:var(--text);font:500 15px/1.4 var(--body)}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
.display{font-family:var(--display);font-weight:900;letter-spacing:.01em;color:#fff}
.num{font-family:var(--digits);font-weight:800;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .dim{color:var(--dim)}
.label{font:600 13px/1.2 var(--body);color:var(--muted)}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 14px;
  background:var(--iron-2);border:1px solid var(--seam);border-radius:2px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--iron-3);border-color:var(--dim)}
.btn:focus-visible,.row:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--text);outline-offset:1px}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#17130a}
.btn.gold:hover{background:#ffe07a}
.btn.quiet{background:transparent}
.btn[disabled]{background:transparent;border-color:var(--seam);color:var(--dim);cursor:default}
.btn.on{background:var(--iron-3);border-color:var(--brass)}
.btn.small{min-height:28px;padding:0 10px;font-size:13px}

/* Клавиша */
.cap{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 6px;
  background:var(--pit);border:1px solid var(--dim);border-radius:2px;font:800 13px/1 var(--digits);color:var(--text)}

/* Статус слота: читается по фигуре, слову и яркости. Чем ближе к билду, тем светлее. */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:1px solid var(--seam);border-radius:2px;
  font:600 13px/1 var(--body);white-space:nowrap;color:var(--dim)}
.chip svg{flex:none}
/* Статусы только контуром: заливка оставлена одному главному действию на экране */
.chip{color:var(--muted)}
.chip.work{border-color:#6a6254;color:#d9d5e6}
.chip.review,.chip.fix{border-color:var(--muted);color:var(--text)}
.chip.ok{border:2px solid var(--text);color:#fff;padding:0 7px}
.chip.build{border-color:var(--text);color:#fff}
/* «Ваш ход» золотым контуром: у звуковика это правки, у Рафаэля это проверка */
.kit .chip.fix,.inbox .chip.review{border-color:var(--gold);color:var(--gold)}
.glyph{display:inline-flex;color:var(--muted)}
.glyph.work{color:#d9d5e6}.glyph.review,.glyph.ok,.glyph.build,.glyph.fix{color:var(--text)}
.kit .glyph.fix,.inbox .glyph.review{color:var(--gold)}

/* Пометки задания */
.mark{display:inline-flex;align-items:center;height:20px;padding:0 6px;border:1px solid var(--dim);border-radius:2px;font:600 12px/1 var(--body);color:var(--muted)}
.mark.urgent{border:2px solid var(--text);color:#fff;padding:0 5px}
.mark.important{border-color:var(--text);color:var(--text)}

/* Проверки дубля */
.check{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:start;padding:5px 0}
.check .ico{width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:2px;font:800 13px/1 var(--digits);margin-top:1px}
.check.pass .ico{border:1px solid var(--ok);color:var(--ok)}
.check.warn .ico{background:var(--warn);color:#17130a}
.check.block .ico{background:var(--stop);color:#fff}
.check b{font-weight:600}
.check .why{display:block;font-size:13px;color:var(--muted)}
.check .val{font:800 15px/1.3 var(--digits);font-variant-numeric:tabular-nums;white-space:nowrap}
.check.block .val{color:#fff}.check.block b::after{content:": не отправится";color:#fff;font-weight:600}

/* Волна */
.wave{display:block;width:100%;height:100%}

/* Поля */
.field{width:100%;background:var(--pit);border:1px solid var(--seam);border-radius:2px;padding:8px 10px;color:var(--text)}
.field::placeholder{color:var(--dim)}
textarea.field{resize:vertical;min-height:64px;line-height:1.4}

/* Лента */
.feed{display:flex;flex-direction:column;gap:10px}
.feed .item{display:grid;grid-template-columns:78px 1fr;gap:10px}
.feed .when{font:800 13px/1.5 var(--digits);color:var(--dim);font-variant-numeric:tabular-nums}
.feed .who{font-weight:600}
.feed .q{border:1px solid var(--muted);padding:6px 8px;border-radius:2px}
.feed .q .a{margin:6px 0 0 14px;padding-top:6px;border-top:1px solid var(--seam)}
.feed .q .a .when{margin-left:6px}
.feed .ev{color:var(--muted);font-size:13px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}