/* The listing's own rules (backlog P2-07/09/11, 2026-10-14), loaded by
   tenders.html alone through `page_styles`, like dashboard.css: app.css is at
   its line ceiling (`tests/test_web_design.py`) and these components have no
   reader outside /licitaciones and its quick view. Tokens are app.css's. */

/* P2-07: the result tabs reuse the record's strip, as links. */
.result-tabs { position: static; margin: 0 0 var(--space-12); }
.record-tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
a.record-tab { text-decoration: none; }

/* P2-09 (STV-17): the row's amount set apart as its right-hand figure, the
   buyer's initials beside the órgano, and «N lotes» as one more chip. */
.listing .td-figure { white-space: nowrap; vertical-align: top; }
.listing .row-figure { display: block; font-size: var(--text-lg); line-height: 1.3; letter-spacing: -0.01em; }
.buyer-line { display: inline-flex; align-items: flex-start; gap: var(--space-8); min-width: 0; }
.buyer-avatar { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grey); color: var(--ink-2); font-size: var(--text-xs); font-weight: var(--weight-ui); line-height: 1; }

/* P2-09 (STV-16): the dense table and its column chooser. */
.grid-columns { padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--line); }
.grid-columns summary { cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-ui); }
.grid-columns-form { display: grid; gap: var(--space-12); margin-top: var(--space-12); }
.grid-columns-form fieldset { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: 0; padding: 0; border: 0; }
.grid-table td, .grid-table th { vertical-align: top; }
.grid-table .t-nowrap { white-space: nowrap; }
.grid-table .grid-title { min-width: 280px; }
.grid-table .buyer-line .cell-clamp { max-width: 32ch; }

/* P2-11 (STV-19): the quick view's tabs, its four-date stepper and its
   lists. The dialog lives on the listing only, so its rules live here. */
.qv-tabs { position: static; margin: var(--space-16) 0 var(--space-12); }
.qv-panel[hidden] { display: none; }
.qv-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); margin: 0 0 var(--space-16); padding: 0; list-style: none; }
.qv-step { position: relative; padding-top: var(--space-16); border-top: 2px solid var(--line); font-size: var(--text-sm); }
.qv-step::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border: 2px solid var(--line); border-radius: 50%; background: var(--white); }
.qv-step--done { border-top-color: var(--ink); }
.qv-step--done::before { border-color: var(--ink); background: var(--ink); }
.qv-step--current::before { border-color: var(--field); box-shadow: 0 0 0 3px var(--grey); }
.qv-step-label { display: block; font-weight: var(--weight-ui); }
.qv-step-when { display: block; color: var(--muted); }
.qv-step--pending .qv-step-label { color: var(--muted); }
.qv-list { margin: 0; padding: 0; list-style: none; }
.qv-list li { padding: var(--space-8) 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.qv-list-lead { margin-right: var(--space-4); font-weight: var(--weight-ui); }
.qv-list-figure { white-space: nowrap; color: var(--ink-2); }
.qv-facts .label-hint { display: block; }
@media (max-width: 640px) { .qv-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-16); } }