/* Quotes checked against the specification (home page, main contractors). The first column is the bestek,
   the reference every quote is held against; rows are checked one by one when the panel scrolls into view
   (.qc-run while it plays), then the price rows and the finding appear. Without JS or with reduced motion
   it shows the finished state. */
.qc-tbl th[scope="row"], .qc-tbl thead th:first-child { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border-right: 1px solid var(--line-2); }
.qc-tbl thead th:first-child { color: var(--accent-hi); }
.qc-tbl th[scope="row"] { position: relative; text-align: left; font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; white-space: normal; color: var(--ink); padding: 11px 16px; border-bottom: 1px solid var(--line); width: 31%; }
.qc-tbl th[scope="row"] small { display: inline; margin-left: 9px; white-space: nowrap; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink-3); font-weight: 400; }
.qc-tbl tbody td, .qc-tbl tbody th { transition: background-color .25s ease; }
.qc-tbl td .mark { transition: opacity .28s ease, transform .28s ease; }
.mark.dev { color: var(--accent-hi); }
.mark.dev::before { border-radius: 1px; background: var(--accent); }
.qc-tbl tfoot th[scope="row"], .qc-tbl tfoot td { border-bottom: 1px solid var(--line); }
.qc-tbl tfoot tr:first-child th, .qc-tbl tfoot tr:first-child td { border-top: 1px solid var(--line-2); }
.qc-tbl tfoot td { color: var(--ink); font-size: 14px; }
.qc-price td { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.qc-price td.low, .qc-adj td.add { color: var(--warn); }
.qc-adj td { color: var(--ink-2); font-size: 13px; }
.qc-total td { font-size: 16px; font-weight: 500; }
.qc-total td { background: var(--panel-2); border-bottom: 0; }
.qc-total th[scope="row"] { background: color-mix(in srgb, var(--accent) 13%, var(--panel)); border-bottom: 0; }
.qc-adj, .qc-total, .qc .finding { transition: opacity .35s ease, transform .35s ease; }
.qc .tbl td, .qc-tbl th[scope="row"] { padding-top: 10px; padding-bottom: 10px; }
/* while the check runs */
.qc-run .qc-pending td .mark { opacity: 0; transform: translateY(4px); }
.qc-run .qc-active td { background: rgba(var(--ink-rgb), .06); }
.qc-run .qc-active th[scope="row"] { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.qc-run .qc-active th[scope="row"]::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.qc-run .qc-adj, .qc-run .qc-total { opacity: 0; }
.qc-run .finding { opacity: 0; transform: translateY(5px); }
@media (prefers-reduced-motion: reduce) { .qc-tbl td .mark, .qc-adj, .qc-total, .qc .finding, .qc-tbl tbody td, .qc-tbl tbody th { transition: none; } }
@media (max-width: 760px) {
  /* the bestek column stays put; the quotes scroll beside it */
  .qc-tbl { min-width: 590px; }
  .qc-tbl th[scope="row"], .qc-tbl thead th:first-child { position: sticky; left: 0; z-index: 1; width: 150px; min-width: 150px; padding-left: 12px; padding-right: 10px; }
  .qc-tbl thead th:first-child { white-space: normal; line-height: 1.35; }
  .qc-tbl th[scope="row"] { font-size: 13.5px; }
  .qc-tbl th[scope="row"] small { display: block; margin: 2px 0 0; white-space: normal; }
  .qc-price td { font-size: 16px; } .qc-total td { font-size: 15px; }
}