/**
 * Разделитель секции: линия → расширение → плашка → сужение → линия.
 *
 * <div class="hr-text hr-text-left" role="separator">
 *   <span class="hr-text-label">Подпись</span>
 * </div>
 *
 * Модификаторы: hr-text-left (короткая левая линия), hr-text-compact (меньше отступы).
 */
.hr-text {
    --hr-line: #dee2e6;
    --hr-fill: #f8f9fa;
    --hr-taper: 0.5rem;
    align-items: center;
    display: flex;
    margin: 1.5rem 0 1rem;
    width: 100%;
}

.hr-text::before,
.hr-text::after {
    background-color: var(--hr-line);
    content: '';
    flex: 1 1 auto;
    height: 1px;
}

.hr-text.hr-text-left::before {
    flex: 0 0 1rem;
}

.hr-text-label {
    background-color: var(--hr-fill);
    border-bottom: 1px solid var(--hr-line);
    border-top: 1px solid var(--hr-line);
    color: #6c757d;
    flex: 0 1 auto;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
    min-width: 0;
    padding: 0.2rem 0.75rem;
    position: relative;
    white-space: normal;
}

.hr-text-label::before,
.hr-text-label::after {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: '';
    height: calc(100% + 2px);
    position: absolute;
    top: -1px;
    width: var(--hr-taper);
}

.hr-text-label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12 L8 0 L8 24 Z' fill='%23f8f9fa'/%3E%3Cpath d='M0 12 L8 0' stroke='%23dee2e6' fill='none'/%3E%3Cpath d='M0 12 L8 24' stroke='%23dee2e6' fill='none'/%3E%3C/svg%3E");
    left: calc(-1 * var(--hr-taper));
}

.hr-text-label::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 24' preserveAspectRatio='none'%3E%3Cpath d='M8 12 L0 0 L0 24 Z' fill='%23f8f9fa'/%3E%3Cpath d='M8 12 L0 0' stroke='%23dee2e6' fill='none'/%3E%3Cpath d='M8 12 L0 24' stroke='%23dee2e6' fill='none'/%3E%3C/svg%3E");
    right: calc(-1 * var(--hr-taper));
}

.hr-text:not(:has(.hr-text-label))::before {
    flex: 1 1 auto;
}

.hr-text:not(:has(.hr-text-label))::after {
    display: none;
}

.hr-text.hr-text-compact {
    margin: 1rem 0 0.75rem;
}