.direction-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 17px 20px; margin-bottom: 24px; border: 1px solid #b6c8ba; border-left: 5px solid #247443; border-radius: 12px; background: #f1f7f2; color: #173e26; }
.direction-mark strong { font-size: clamp(23px, 3vw, 30px); line-height: 1.15; font-weight: 750; }
.direction-mark > span { font-size: 14px; line-height: 1.5; max-width: 55ch; }
.direction-mark[data-direction="issued"] { border-color: #abc8e7; border-left-color: #245e95; background: #f0f6fd; color: #173f67; }
.direction-mark[data-direction="both"] { border-color: #b8c5cc; border-left-color: #435761; background: #f3f6f8; color: #293e49; }
.direction-mark--compact { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 12px; margin: 0 0 9px; width: fit-content; max-width: 100%; }
.direction-mark--compact strong { font-size: 19px; }
.direction-mark--compact > span { font-size: 12px; }
@media (max-width: 600px) { .direction-mark { padding: 14px; gap: 7px; } .direction-mark:not(.direction-mark--compact) { align-items: flex-start; flex-direction: column; } }