/* ===================================================================
   High Voltage · список ролей — оформление.
   Скрипт стилей НЕ инжектит: дизайн правится здесь, без правки JS.

   Неймспейс hvrt-* (high voltage roles table). Модалка живёт внутри
   страницы форума, а у форума есть правила на label/input/p через
   #pun-… — по специфичности они бьют одиночный класс, поэтому
   раскладочные свойства помечены !important, а на чужих потомков
   модалки стоит явный сброс.
=================================================================== */

.hvrt { color: inherit; font-size: 13px; line-height: 1.5; }

/* ---------- шапка ---------- */
.hvrt-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.hvrt-search { flex: 1 1 220px; min-width: 160px; padding: 6px 10px; border: 1px solid rgba(128,128,128,.35);
               border-radius: 4px; background: transparent; color: inherit; font: inherit; }
.hvrt-count { opacity: .6; font-size: 12px; white-space: nowrap; }
.hvrt-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.hvrt-who { opacity: .6; font-size: 11px; }

.hvrt-btn { padding: 4px 10px; border: 1px solid rgba(128,128,128,.4); border-radius: 4px;
            background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.hvrt-btn:hover { border-color: currentColor; }
.hvrt-primary { font-weight: 600; }
.hvrt-warn { opacity: .75; }

/* ---------- список ---------- */
.hvrt-org { margin: 0 0 22px; }
.hvrt-org-title { margin: 0 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; }
.hvrt-group-title { margin: 12px 0 4px; font-size: 13px; opacity: .75; font-weight: 600; }

.hvrt-list { list-style: none; margin: 0; padding: 0; }
.hvrt-role { display: flex; align-items: baseline; gap: 10px; flex-wrap: nowrap;
             border-bottom: 1px dotted rgba(128,128,128,.25); }
.hvrt-name { flex: 0 0 auto; font-weight: 600; }
.hvrt-age { font-weight: 400; opacity: .6; }
.hvrt-age::before { content: ", "; }
.hvrt-ability { flex: 1 1 40%; opacity: .85; }
.hvrt-has-desc { cursor: help; border-bottom: 1px dashed currentColor; }
.hvrt-empty { opacity: .35; }
.hvrt-app { flex: 0 0 auto; opacity: .7; font-style: italic; }
.hvrt-sex { font-style: normal; opacity: .8; }
.hvrt-position { flex: 0 0 auto; opacity: .6; font-size: 12px; }
.hvrt-position::before { content: "— "; }

.hvrt-role-npc { opacity: .85; }
.hvrt-npc-badge {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid currentColor;
  opacity: .65;
}

/* раса — просто буква в кружке, без иконочного шрифта (FA-глиф рисовался
   квадратом-«тофу» вне разметки самой темы форума) */
.hvrt-race { flex: 0 0 auto; font-style: normal; font-weight: 700; font-size: 10px;
             width: 15px; height: 15px; line-height: 15px; text-align: center;
             border-radius: 50%; opacity: .8; }
.hvrt-race-human { background: rgba(98,110,96,.18); color: #626E60; }
.hvrt-race-mutant { background: rgba(168,94,57,.18); color: #A85E39; }

.hvrt-racepick { margin: -4px 0 10px; }
.hvrt-desc { flex: 1 1 100%; margin: 2px 0 6px; padding-left: 12px;
             border-left: 2px solid rgba(128,128,128,.3); opacity: .8; font-size: 12px; }
.hvrt-pen { flex: 0 0 auto; margin-left: auto; text-decoration: none; opacity: .5; }
.hvrt-pen:hover { opacity: 1; }
.hvrt-none { opacity: .6; font-style: italic; }

/* ---------- модалка ---------- */
.hvrt-modal-back { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.5);
                   display: flex; align-items: flex-start; justify-content: center; padding: 40px 12px; overflow: auto; }
.hvrt-modal { width: 100%; max-width: 460px; padding: 18px 20px; border-radius: 6px;
              background: #f6f3ee; color: #23201c; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
/* цвета взяты из живой тёмной темы форума (см. hv-accept-form.css), а
   не подобраны на глаз — тот вариант читался холодным/сизым */
body.dark .hvrt-modal { background: #232323; color: #ded9cd; }

/* чужие правила форума не должны лезть внутрь; свои элементы не трогаем */
.hvrt-modal *:not([class^="hvrt-"]) { float: none !important; text-align: left !important; }

.hvrt-modal-title { margin: 0 0 12px !important; font-size: 15px !important; }
.hvrt-modal h4 { margin: 16px 0 6px !important; font-size: 13px !important; opacity: .8; }
.hvrt-modal label { display: block !important; width: 100% !important; margin: 0 0 10px !important;
                    float: none !important; font-size: 12px !important; opacity: .9; }
.hvrt-modal input, .hvrt-modal select, .hvrt-modal textarea {
  display: block !important; width: 100% !important; margin-top: 3px !important; padding: 5px 8px !important;
  border: 1px solid rgba(128,128,128,.45) !important; border-radius: 4px !important;
  background: transparent !important; color: inherit !important; font: inherit !important; box-sizing: border-box !important;
}
.hvrt-modal textarea { resize: vertical; }
.hvrt-inline { display: inline-flex !important; align-items: center; gap: 4px; width: auto !important; margin-right: 14px !important; }
.hvrt-inline input { display: inline-block !important; width: auto !important; margin: 0 !important; }
.hvrt-sexpick { margin: -4px 0 10px; }

.hvrt-hint { font-size: 11px; opacity: .65; margin: -6px 0 10px; }
.hvrt-warned { opacity: 1; font-weight: 600; }
.hvrt-actions { display: flex; gap: 8px; margin-top: 14px; }
.hvrt-modal-msg { margin-top: 10px; font-size: 12px; opacity: .8; min-height: 16px; }
.hvrt-bad { opacity: 1; font-weight: 600; }

/* строки словарей */
.hvrt-rows { list-style: none; margin: 0; padding: 0; }
.hvrt-rows li { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.hvrt-rows input, .hvrt-rows select { margin-top: 0 !important; }
.hvrt-rows .o-sort, .hvrt-rows .hvrt-uses { flex: 0 0 52px; text-align: center; }
.hvrt-uses { font-size: 11px; opacity: .6; }
.hvrt-addrow { display: flex; gap: 6px; margin-top: 8px; }
.hvrt-addrow input { margin-top: 0 !important; }

/* ---------- саджест ----------
   Живёт в body и позиционируется скриптом: внутри модалки его обрезало
   бы её overflow. Фон и рамка помечены !important — у форума есть
   правила с #id, которые иначе выигрывают, и список висел прозрачным. */
.hvrt-sug { position: fixed; z-index: 10001; overflow-y: auto;
            background: #fff !important; color: #23201c !important;
            border: 1px solid rgba(0,0,0,.25) !important; border-radius: 4px;
            box-shadow: 0 8px 24px rgba(0,0,0,.25); }
body.dark .hvrt-sug { background: #2c2c2c !important; color: #ded9cd !important; border-color: rgba(255,255,255,.15) !important; }
.hvrt-sug-item { display: flex; justify-content: space-between; gap: 10px; padding: 5px 9px; cursor: pointer; font-size: 12px; }
.hvrt-sug-item:hover { background: rgba(128,128,128,.18); }
.hvrt-sug-note { opacity: .55; font-size: 11px; white-space: nowrap; }