/* ==========================================================================
   HX Console — Phase 4 design layer
   Loaded after hx-phase3.css.

   The read-only document viewer. It deliberately does not look like the edit
   form: no field boxes, no save bar. A document being read should not invite
   being changed, and looking different is the cheapest way to say so.
   ========================================================================== */

.dv { display: flex; flex-direction: column; gap: 18px; }

.dv-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--line-strong);
}
.dv-ref {
    font-family: var(--mono);
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
    font-feature-settings: 'tnum' 1, 'zero' 1;
}
.dv-date { margin-top: 2px; font-size: var(--t-sm); color: var(--text-3); }
.dv-badges { display: flex; gap: 6px; flex-wrap: wrap; }

.dv-party { }
.dv-party strong { display: block; font-size: var(--t-lg); color: var(--text); margin-top: 3px; }

/* Meta reads as pairs, not as a form. A definition list is the honest element
   for it and prints correctly without extra work. */
.dv-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px 22px;
    margin: 0;
    padding: 14px 16px;
    background: var(--surface-2);
    border-radius: var(--r-sm);
}
.dv-meta > div { min-width: 0; }
.dv-meta dt {
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-3); margin-bottom: 3px;
}
.dv-meta dd {
    margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--text);
    word-break: break-word;
}

.dv-section + .dv-section { margin-top: 16px; }
.dv-section .eyebrow { margin-bottom: 8px; }

/* Read-only, so no hover lift and no pointer: nothing here is clickable. */
.dv-table tbody tr:hover { background: var(--dt-row); }
.dv-table tbody tr:nth-child(even):hover { background: var(--dt-row-alt); }

.dv-foot {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 340px);
    gap: 22px;
    align-items: start;
    padding-top: 4px;
}
.dv-note p { margin: 4px 0 0; font-size: var(--t-sm); color: var(--text-2); line-height: 1.6; }

.dv-totals { width: 100%; }
.dv-totals tbody tr,
.dv-totals tbody tr:nth-child(even),
.dv-totals tbody tr:hover { background: transparent; }
.dv-totals tbody td {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-sm);
    color: var(--text-2);
}
.dv-totals tbody td.num { color: var(--text); }
.dv-totals tr.is-grand td {
    border-top: 2px solid var(--line-strong);
    border-bottom: 2px solid var(--line-strong);
    padding-top: 10px; padding-bottom: 10px;
    font-weight: 700;
    color: var(--text);
}
.dv-totals tr.is-grand td.num .money { font-size: var(--t-lg); }
.dv-totals tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 860px) {
    .dv-foot { grid-template-columns: 1fr; gap: 16px; }
    /* The totals matter more than the note on a small screen, so they lead. */
    .dv-totals-wrap { order: -1; }
    .dv-ref { font-size: var(--t-lg); }
    .dv-meta { grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 12px 13px; }
}

@media (max-width: 480px) {
    .dv-meta { grid-template-columns: 1fr; }
}