/* ============================================================
   Instructions to a law firm (js-lms/legal_instruction_view.js): shared by the
   lender's instruction window and the law firm's workspace, so it uses only the
   --vantage-* and --lms-* tokens both pages load from brand.css.
   ============================================================ */

.li { display: flex; flex-direction: column; gap: 18px; font-size: 13px; color: var(--vantage-text); }
.li h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.li-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.li-ref { font-weight: 600; }
.li-sub { color: var(--vantage-text-2); }
.li-note { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.li-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 0; }
.li-facts div { min-width: 0; }
.li-facts dt { font-size: 12px; color: var(--vantage-text-2); }
.li-facts dd { margin: 0; overflow-wrap: anywhere; }

.li-props { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.li-props li { overflow-wrap: anywhere; }

.li-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.li-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--vantage-line); }
.li-row:first-child { border-top: 0; }
.li-row-main { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.li-row-side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.li-row a { color: var(--vantage-text); text-decoration: underline; text-underline-offset: 2px; }
.li-empty { color: var(--vantage-text-2); margin: 0; }
.li-tag { font-size: 12px; color: var(--vantage-text-2); }

.li-cp-answer { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 260px; }
.li-cp-answer select, .li-cp-answer input, .li-form select, .li-form input, .li-form textarea {
    font: inherit;
    color: var(--vantage-text);
    background: var(--vantage-surface);
    border: 1px solid var(--vantage-line);
    border-radius: 6px;
    padding: 6px 8px;
    min-width: 0;
    max-width: 100%;
}
.li-cp-answer input { flex: 1 1 140px; }
.li-form { display: flex; flex-direction: column; gap: 12px; }
.li-form label { display: block; font-size: 12px; color: var(--vantage-text-2); margin-bottom: 3px; }
.li-form select, .li-form input[type="text"], .li-form input[type="date"], .li-form textarea { width: 100%; box-sizing: border-box; }
.li-form textarea { min-height: 72px; resize: vertical; }
.li-form [aria-invalid="true"] { border-color: var(--lms-danger-ink, #b3261e); }
.li-checks { display: flex; flex-direction: column; gap: 6px; }
.li-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--vantage-text); margin: 0; }
.li-check input { margin-top: 2px; }

.li-btn {
    font: inherit;
    padding: 5px 12px;
    border: 1px solid var(--vantage-line);
    border-radius: 6px;
    background: transparent;
    color: var(--vantage-text);
    cursor: pointer;
}
.li-btn:hover { background: var(--vantage-fill); }
.li-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.li-btn-primary { background: var(--vantage-accent); color: var(--vantage-bg); border-color: transparent; font-weight: 600; }
.li-btn-primary:hover { opacity: 0.88; background: var(--vantage-accent); }
.li-btn-danger { color: var(--lms-danger-ink, #b3261e); }
.li-btn:focus-visible, .li-cp-answer select:focus-visible, .li-cp-answer input:focus-visible,
.li-form select:focus-visible, .li-form input:focus-visible, .li-form textarea:focus-visible { outline: 2px solid var(--vantage-text); outline-offset: 2px; }

.li-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.li-msg { font-size: 12.5px; color: var(--vantage-text-2); }
.li-msg-error { color: var(--lms-danger-ink, #b3261e); }

.li-skeleton { height: 40px; border-radius: 8px; background: var(--vantage-fill); animation: li-pulse 1.4s ease-in-out infinite; }
@keyframes li-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .li-skeleton { animation: none; } }
@media (max-width: 480px) { .li-row-side { width: 100%; } }