/* Printquote app screens: status labels, fact lists, data rows (table on desktop,
   stacked cards on phones), prices. */

/* ---------- status: the text label carries it, the tint is a second cue ---------- */
.status {
  display: inline-block; padding: 0 var(--s-2); border-radius: 999px;
  font: 600 var(--step--1) / 1.5 var(--font-body);
  color: var(--muted); background: var(--surface); border: var(--hairline) solid var(--rule);
  vertical-align: middle; white-space: nowrap;
}
.status--open, .status--active { color: var(--brand-deep); background: var(--brand-tint); border-color: transparent; }
.status--held { color: var(--muted); background: var(--surface); border-color: var(--rule); }
.status--accepted, .status--won { color: var(--ink); border-color: var(--ink); background: var(--ground); }

/* ---------- facts (dl) ---------- */
.facts { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-6); max-width: var(--w-list); }
.facts dt { color: var(--muted); font-weight: 400; }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 29.99rem) {
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-bottom: var(--s-3); }
}

.files { list-style: none; padding: 0; margin: 0 0 var(--s-3); max-width: var(--w-list); }
.files li { padding: var(--s-3) 0; border-top: var(--hairline) solid var(--rule); font-variant-numeric: tabular-nums; }
.files li:last-child { border-bottom: var(--hairline) solid var(--rule); }
.files .file-name { font-weight: 600; }
.files .file-meta { display: block; color: var(--muted); font-size: var(--step--1); }

/* ---------- data rows ---------- */
.rows { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-bottom: var(--s-5); }
.rows caption { caption-side: top; text-align: left; color: var(--muted); font-size: var(--step--1); padding-bottom: var(--s-3); }
.rows th {
  text-align: left; font-size: var(--step--1); color: var(--muted); font-weight: 600;
  padding: var(--s-2) var(--s-3); border-bottom: 2px solid var(--ink); vertical-align: bottom;
}
.rows td { padding: var(--s-3); border-bottom: var(--hairline) solid var(--rule); vertical-align: top; }
.rows th:first-child, .rows td:first-child { padding-left: 0; }
.rows th.num, .rows td.num { text-align: right; }
.rows .row-title { font-weight: 600; }
.rows .muted, .muted { color: var(--muted); }
.rows td.go { text-align: right; white-space: nowrap; padding-block: var(--s-2); }
.rows th { white-space: nowrap; }

/* phones: each row becomes a stacked card in the same order */
@media (max-width: 47.99rem) {
  .rows, .rows tbody, .rows tr, .rows td { display: block; width: 100%; }
  .rows caption { display: block; }
  .rows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rows tr { padding: var(--s-4) 0; border-top: var(--hairline) solid var(--rule); }
  .rows tr:last-child { border-bottom: var(--hairline) solid var(--rule); }
  .rows td, .rows td:first-child { padding: var(--s-1) 0; border: 0; text-align: left; }
  .rows td.num { text-align: left; }
  .rows td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
  .rows td.no-label::before { display: none; }
  .rows td.go { padding-top: var(--s-3); }
  .rows td.go .btn, .rows td.go button { width: 100%; }
  .rows td:empty { display: none; }
}

/* ---------- prices (quote rows live in detail.css) ---------- */
.price {
  font: 700 var(--step-1) / 1.2 var(--font-display);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- sections and cards (my quotes, won jobs, reviews) ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); margin: var(--s-7) 0 var(--s-4); }
.section-head h2 { margin: 0; }
.section-head .count { color: var(--muted); }
.list { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.list > li, .card { padding: var(--s-4) 0; border-top: var(--hairline) solid var(--rule); }
.list > li:last-child { border-bottom: var(--hairline) solid var(--rule); }
.card { border-bottom: var(--hairline) solid var(--rule); margin-bottom: var(--s-4); }
.card h3 { margin-bottom: var(--s-2); }
.card .actions { margin-bottom: 0; }
.item-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4); }
.item-line .grow { flex: 1 1 var(--w-field); }
.empty { color: var(--muted); padding: var(--s-4) 0; border-top: var(--hairline) solid var(--rule); }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); margin: var(--s-3) 0 0; }
.inline-form label { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--step--1); flex: 1 1 var(--w-field); }

.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); margin-bottom: var(--s-6); max-width: var(--w-form); }
.filter label { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--step--1); flex: 1 1 var(--w-field); }

.review { padding: var(--s-4) 0; border-top: var(--hairline) solid var(--rule); max-width: var(--measure); }
.review .stars { font-weight: 600; font-variant-numeric: tabular-nums; }
.review p { margin: var(--s-2) 0 0; }

.two-col { display: grid; gap: var(--s-6); }
@media (min-width: 60rem) {
  .two-col { grid-template-columns: minmax(0, var(--w-form)) minmax(0, var(--w-aside)); justify-content: start; gap: var(--s-8); }
}
.two-col > div > h2:first-child { margin-top: 0; }
.aside { border-left: 3px solid var(--rule); padding-left: var(--s-4); color: var(--muted); font-size: var(--step--1); align-self: start; }
.aside h2 { font-size: var(--step-0); font-family: var(--font-body); font-weight: 600; color: var(--ink); margin: 0 0 var(--s-2); }
.aside p:last-child { margin-bottom: 0; }

.back { margin-top: var(--s-7); }