/* ==========================================================================
   HX Console — Phase 3 design layer
   Loaded after hx-phase2.css.

     1. Product stock history — the three-column summary panel
     2. Reconciliation notes
   ========================================================================== */

/* ==========================================================================
   1. Stock history summary
   --------------------------------------------------------------------------
   Three columns: what came in, what went out, and the balance. That is how a
   stock figure is actually checked — read down one side, down the other, and
   see whether the difference is the number you expected. Collapsing to one
   column on a phone keeps the same reading order.
   ========================================================================== */

.sh-title {
    margin: 0 0 18px;
    font-family: var(--font);
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
}
.sh-code {
    font-family: var(--mono);
    font-size: var(--t-base);
    font-weight: 600;
    color: var(--text-3);
    font-feature-settings: 'tnum' 1, 'zero' 1;
}

.sh-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    align-items: start;
}

.sh-col { min-width: 0; }
.sh-col .eyebrow { margin-bottom: 9px; }

/* The summary is a figures list, not a data grid: no zebra, no hover, no
   header. Borrowing the full table treatment here would make three short lists
   look like three reports. */
.sh-table { width: 100%; }
.sh-table tbody tr,
.sh-table tbody tr:nth-child(even),
.sh-table tbody tr:hover { background: transparent; }
.sh-table tbody td {
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-sm);
    color: var(--text-2);
}
.sh-table tbody td.num {
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}
.sh-table tbody tr:last-child td {
    border-bottom: 0;
    border-top: 2px solid var(--line-strong);
    padding-top: 11px;
}
.sh-table td.sh-strong { color: var(--text); font-weight: 700; }

.sh-unit {
    font-family: var(--font);
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-3);
    letter-spacing: 0;
}

.sh-stock {
    font-family: var(--mono);
    font-size: var(--t-num);
    font-weight: 700;
    padding: 4px 11px;
    font-feature-settings: 'tnum' 1, 'zero' 1;
}
.sh-stock .sh-unit { color: inherit; opacity: .8; }

/* ==========================================================================
   2. Reconciliation note
   --------------------------------------------------------------------------
   Whether the documents account for the stock on hand is the most useful thing
   on this screen, so it is stated in words rather than left as two figures for
   the reader to subtract.
   ========================================================================== */

.sh-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 11px 13px;
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    line-height: 1.5;
}
.sh-note svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }

.sh-note.is-ok {
    background: var(--pos-soft, color-mix(in srgb, var(--pos) 12%, transparent));
    color: var(--text-2);
    border: 1px solid color-mix(in srgb, var(--pos) 32%, transparent);
}
.sh-note.is-warn {
    background: var(--warn-soft, color-mix(in srgb, var(--warn) 14%, transparent));
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
}
.sh-note.is-warn svg { fill: var(--warn); }

@media (max-width: 1080px) {
    .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    /* The balance column carries the answer, so on two columns it takes the
       full width underneath rather than being squeezed beside a figures list. */
    .sh-col:last-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .sh-grid { grid-template-columns: 1fr; gap: 22px; }
    .sh-col:last-child { grid-column: auto; }
    .sh-title { font-size: var(--t-lg); }
    .sh-table tbody td { padding: 10px 0; }
}