﻿/* ===================================================================
   High Voltage · конструктор шапки эпизода + оформление готовой шапки
   в посте. Порт nc-episode.css Ноты, адаптирован под rusff (тут нет
   --pun/--acc7/--acc8 форумных переменных — палитра своя, компонентно
   скоуплена под .hvep-panel / .custom_tag_hvep, как в hv-accept-form.css).
   Скрипт стилей не инжектит.
=================================================================== */

.hvep-panel, .custom_tag_hvep {
  --hvep-bg: #fff;
  --hvep-border: #d8cdbf;
  --hvep-accent: #a85e39;
  --hvep-accent2: #626e60;
  --hvep-text: #2b2320;
  --hvep-muted: #8a7b6c;
}
:root.dark .hvep-panel, body.dark .hvep-panel,
:root.dark .custom_tag_hvep, body.dark .custom_tag_hvep {
  --hvep-bg: #232323;
  --hvep-border: #484848;
  --hvep-accent: #c87a54;
  --hvep-accent2: #8fa08c;
  --hvep-text: #ded9cd;
  --hvep-muted: #b4a9a3;
}

/* ---------- кнопка в ряду кнопок формы ---------- */
.hvep-toggle-btn {
  border: 1px solid #a85e39;
  background: transparent;
  color: #a85e39;
  border-radius: 6px;
  padding: 5px 10px;
  font: inherit;
  cursor: pointer;
}
.hvep-toggle-btn:hover { background: #a85e39; color: #fff; }

/* ---------- панель-конструктор ---------- */
.hvep-panel {
  display: none;
  background: var(--hvep-bg);
  border: 1px solid var(--hvep-border);
  border-radius: 10px;
  padding: 16px;
  margin: 0 0 16px;
  color: var(--hvep-text);
  font-size: 13px;
}
.hvep-panel.hvep-open { display: block; }

.hvep-head { font-weight: 700; font-size: 15px; margin-bottom: 10px; color: var(--hvep-accent); }
.hvep-row { margin-bottom: 10px; position: relative; }
.hvep-row label { display: block; margin-bottom: 3px; font-weight: 600; color: var(--hvep-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.hvep-row-2 { display: flex; gap: 12px; }
.hvep-row-2 > div { flex: 1; }

.hvep-panel input[type=text],
.hvep-panel input[type=date],
.hvep-panel textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--hvep-border); border-radius: 6px;
  padding: 6px 8px; font: inherit; background: transparent; color: var(--hvep-text);
}
.hvep-panel textarea { resize: vertical; }

.hvep-more { margin: 4px 0 10px; }
.hvep-more summary { cursor: pointer; color: var(--hvep-muted); font-size: 12px; margin-bottom: 8px; }

.hvep-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; min-height: 20px; }
.hvep-chip { background: var(--hvep-accent2); color: #fff; border-radius: 20px; padding: 3px 10px 4px; display: inline-flex; gap: 6px; align-items: center; font-size: 11px; }
.hvep-chip i { cursor: pointer; font-style: normal; opacity: .8; }
.hvep-chip i:hover { opacity: 1; }

.hvep-sug { display: none; position: relative; z-index: 20; border: 1px solid var(--hvep-border); border-radius: 6px; background: var(--hvep-bg); max-height: 160px; overflow-y: auto; margin-top: 2px; }
.hvep-sug.hvep-open { display: block; }
.hvep-sug div { padding: 5px 9px; cursor: pointer; font-size: 12px; }
.hvep-sug div:hover { background: var(--hvep-accent); color: #fff; }
.hvep-none { opacity: .6; font-style: italic; }

.hvep-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hvep-btn {
  border: 1px solid var(--hvep-accent); background: transparent; color: var(--hvep-accent);
  border-radius: 6px; padding: 7px 14px; cursor: pointer; font: inherit; font-size: 12px;
}
.hvep-btn:hover { background: var(--hvep-accent); color: #fff; }
.hvep-btn.hvep-primary { background: var(--hvep-accent); color: #fff; }

.hvep-msg { margin-top: 8px; font-size: 11px; color: var(--hvep-muted); min-height: 14px; }
.hvep-preview {
  margin-top: 10px; padding: 10px; border: 1px dashed var(--hvep-border); border-radius: 6px;
  white-space: pre-wrap; word-break: break-word; font-size: 11px; color: var(--hvep-muted);
}

/* ===================================================================
   Готовая шапка в посте — custom_tag_hvep*
=================================================================== */

.custom_tag_hvep {
  display: block;
  max-width: 620px;
  margin: 0 auto 14px;
  padding: 14px 16px;
  background: rgba(168, 94, 57, .06);
  border: 1px solid var(--hvep-border);
  border-radius: 10px;
  color: var(--hvep-text);
  text-align: center;
}
.custom_tag_hvep > p { margin: 0; }

.custom_tag_hvepm { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
.custom_tag_hvepm > p { display: contents; }
.custom_tag_hvepm img { max-width: 180px; max-height: 180px; border-radius: 8px; object-fit: cover; }

.custom_tag_hvep[data-lay="portrait"] .custom_tag_hvepm img { max-width: 260px; max-height: 320px; }
.custom_tag_hvep[data-lay="noimage"] .custom_tag_hvepm { display: none; }

.custom_tag_hvepb { max-width: 400px; margin: 0 auto; text-align: center; }
.custom_tag_hvepb > p { margin: 0; }

.custom_tag_hvepi { display: block; margin-bottom: 6px; }
.custom_tag_hvepi[data-r="title"] { font-size: 17px; font-weight: 700; color: var(--hvep-accent); margin-bottom: 8px; }
.custom_tag_hvepi[data-r="place"], .custom_tag_hvepi[data-r="date"] {
  display: inline-block; font-size: 11px; color: var(--hvep-muted); text-transform: uppercase; letter-spacing: .04em;
}
.custom_tag_hvepi[data-r="place"]::after { content: " · "; }
.custom_tag_hvepi[data-r="quote"] {
  font-style: italic; font-size: 13px; padding: 8px 0; margin: 8px 0;
  background: linear-gradient(var(--hvep-border), var(--hvep-border)) bottom / 100% 1px no-repeat;
}
.custom_tag_hvepi[data-r="names"] { font-size: 12px; color: var(--hvep-accent2); margin: 6px 0; }
.custom_tag_hvepi[data-r="desc"] { font-size: 13px; line-height: 1.5; margin-top: 8px; }

.custom_tag_hvepa {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 11px; color: var(--hvep-muted); cursor: pointer;
}
.custom_tag_hvepa::before { content: "♪"; color: var(--hvep-accent); }

/* пустые <p>/<br> от переводов строк bb-кода */
.custom_tag_hvep p:empty, .custom_tag_hvepb p:empty { display: none; }
