/* ==========================================================================
   pages/workspace-extra.css — a few workspace pieces this app needs that the
   shared sheets do not carry: the sub-heading row and the quotation rows.
   ========================================================================== */

/* A sub-heading that opens a new block inside the workspace column. */
.page-head--sub { padding-block-start: var(--s-5); border-top: 1px solid var(--ink); }
.page-head--sub h2 { font-size: var(--t-l); line-height: var(--lh-head); letter-spacing: var(--track-head); }

/* Label/value pairs read as pairs, so they stop short of the full column. */
.facts { max-width: 60rem; }

/* A labelled strip of tokens (requested scope, coverage). */
.tagged { display: grid; gap: var(--s-2); }
.tagged__label { font-size: var(--t-s); color: var(--grey-text); }
.tagged .chip-row { margin-block-start: calc(var(--s-3) * -1); }

/* A quotation: money as type, terms beneath, actions on the end. */
.quote-rows { display: grid; }
.quote-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-5); padding-block: var(--s-5); border-top: 1px solid var(--rule); }
.quote-row__id { flex: 1 1 18rem; min-width: 0; }
.quote-row__name { font-weight: 500; }
.quote-row__sub { font-size: var(--t-s); color: var(--grey-text); }
.quote-row__total { flex: none; font-size: var(--t-l); font-weight: 500; letter-spacing: var(--track-head); font-variant-numeric: tabular-nums; }
.quote-row__terms { flex-basis: 100%; max-width: 40em; color: var(--grey-text); font-size: var(--t-s); }
.quote-row__actions { display: flex; flex: none; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; }

/* Figures sit on the right of their column, so their headers do too. */
.table th.table__num { text-align: end; }
.table .table__sub { display: block; font-size: var(--t-s); color: var(--grey-text); }

/* Reference figures read better two-up than as one long ladder. */
.facts--split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-7); max-width: none; }
.supplier-terms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-7); margin-block-start: var(--s-6); }
.supplier-terms .prose { margin-block-start: var(--s-2); }
@media (max-width: 63.99rem) { .facts--split, .supplier-terms { grid-template-columns: 1fr; } }

/* A total is a figure on a line, not a heading. */
.total-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding-block-start: var(--s-4); border-top: 1px solid var(--ink); }
.total-line span { color: var(--grey-text); }
.total-line strong { font-size: var(--t-l); font-weight: 500; letter-spacing: var(--track-head); font-variant-numeric: tabular-nums; }