/* Commerce screens (feat/commerce): Pricing, Upgrade, Billing, Premium upsells, Find workers, Team, photo and certificates.
   Same tokens as app.css; nothing here overrides a shared rule. */

/* ---------- prices ---------- */
.price-line { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-3) 0 0; }
.price { font-size: 2.5rem; line-height: 1.1; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.price-sm { font-size: var(--text-xl); line-height: var(--lh-xl); }
.price-per { color: var(--color-text-muted); font-size: var(--text-md); }
.price-then { color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-1) 0 0; }

/* ---------- Pricing page ---------- */
.hero-pricing h1 { max-width: 46rem; margin: 0 auto; text-wrap: balance; }
.pricing { padding-top: var(--space-6); padding-bottom: var(--space-7); display: flex; flex-direction: column; gap: var(--space-7); }
.plans { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--card-gap); align-items: start; }
.plan { display: flex; flex-direction: column; gap: var(--space-3); }
.plan h2 { font-size: var(--text-xl); line-height: var(--lh-xl); }
.plan > .btn, .plan-cta { margin-top: var(--space-2); }
.plan-cta { display: flex; flex-direction: column; gap: var(--space-2); }
.plan-cta .meta { margin: 0; }
.plan-plus { margin: var(--space-3) 0 0; font-weight: var(--weight-semibold); }
.plan .ticks { border-top: 1px solid var(--color-line); padding-top: var(--space-4); }
.plan-plus + .ticks { border-top: 0; padding-top: 0; }
.pricing p, .pricing li, .pricing h2 { text-wrap: pretty; }
.plan-premium { border: 2px solid var(--color-secondary); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ticks { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ticks li { display: flex; gap: var(--space-3); align-items: flex-start; line-height: 1.5; }
.ticks .i { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--color-success); stroke-width: 2.4; }
.pricing-section > .section-title { font-size: var(--text-xl); line-height: var(--lh-xl); margin-bottom: var(--space-4); }
.benefit-grid { gap: var(--card-gap); }
.benefit-grid h3, .pricing .grid-2 h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); }
.pricing .grid-2 { gap: var(--card-gap); }
.faq details { border-top: 1px solid var(--color-line); padding: var(--space-4) 0; }
.faq details:last-child { border-bottom: 1px solid var(--color-line); }
.faq summary { cursor: pointer; font-weight: var(--weight-semibold); }
.faq details p { margin: var(--space-2) 0 0; color: var(--color-text-muted); max-width: 46rem; line-height: 1.7; }

/* ---------- upsell (a Premium tool on a free account) ---------- */
.upsell { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4) var(--space-6); align-items: center; border-left: 4px solid var(--color-primary); }
.upsell h2 { font-size: var(--text-lg); line-height: var(--lh-lg); margin: var(--space-2) 0 var(--space-1); }
.upsell-text > .pill:first-child { margin-bottom: var(--space-1); }
.upsell p { color: var(--color-text-muted); margin: 0; max-width: 40rem; }
.upsell-cta { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.upsell-cta .price-line { margin: 0; }
.upsell-cta .price-then { margin: 0; }

/* ---------- Upgrade / extras summary ---------- */
.summary-card .pill { align-self: flex-start; }
.sum { margin: var(--space-2) 0; display: flex; flex-direction: column; }
.sum div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-line); font-size: var(--text-sm); }
.sum dt { color: var(--color-text-muted); }
.sum dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); white-space: nowrap; }
.sum .sum-total { border-top: 2px solid var(--color-text); font-size: var(--text-md); }
.sum .sum-total dt { color: var(--color-text); font-weight: var(--weight-semibold); }
.upgrade .form-card select { max-width: 100%; }
.upgrade { grid-template-columns: minmax(0, 1fr) 22rem; }
.upgrade > .summary-card { order: 2; }
@media (max-width: 1100px) { .upgrade { grid-template-columns: minmax(0, 1fr); } .upgrade > .summary-card { order: 0; } }
.plan-card .row { margin-top: var(--space-4); }
.plan-card .alert { margin: var(--space-4) 0 0; }
td.actions a + a { margin-left: var(--space-3); }
@media (max-width: 760px) { .invoice-table td[data-label] { align-items: flex-start; } }

/* ---------- Find workers ---------- */
.filters-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
.field-btn { justify-content: flex-end; }
.filters-card { margin-bottom: var(--space-5); }
.worker-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.worker-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; }
.worker-card-text p { margin: var(--space-1) 0 0; }
.worker-card .card-title a { color: var(--color-text); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.team-list .person-text { display: flex; flex-direction: column; min-width: 0; }
.team-list .person-text .meta { overflow-wrap: anywhere; }
.team-list .row { flex-wrap: nowrap; }

/* ---------- photo and certificates ---------- */
.avatar-lg { width: 96px; height: 96px; font-size: var(--text-xl); }
.profile-photo { width: 96px; height: 96px; border-radius: var(--radius-full); object-fit: cover; flex: none; border: 1px solid var(--color-line); }
.profile-top { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-3); }
.profile-top .lead { margin: 0 0 var(--space-2); }
.profile-top .btn .i { width: 1.1em; height: 1.1em; }
.file-rows { display: flex; flex-direction: column; margin-top: var(--space-3); }
.file-row { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-top: 1px solid var(--color-line); }
.file-row:last-child { padding-bottom: 0; }
.file-row-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.file-row-text .row { margin-top: var(--space-2); }
.file-icon { width: 96px; height: 96px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: var(--color-surface-2); color: var(--color-text-muted); }
.file-icon .i { width: 40px; height: 40px; }
.upload-btn { position: relative; overflow: hidden; }
.upload-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.upload-btn:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.alert-form { margin-top: var(--space-4); }
.limit-note .row { margin-top: var(--space-3); }
.static-value { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
#photoT, #alertT, .qual-row { scroll-margin-top: 80px; }
.file-actions { flex-wrap: wrap; gap: var(--space-2); }
.file-actions form { margin: 0; }
.file-msg { margin: var(--space-2) 0 0; }
/* qualifications: the worker's rows (certificate + actions) and the employer's list */
.qual-rows { margin-top: var(--space-3); }
.qual-rows li.qual-row { display: block; padding: var(--space-3) 0; }
.qual-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.qual-text .file-actions { margin-top: var(--space-1); }
.qual-text .file-actions .qual-delete { margin-left: auto; }
.mini-title + .add-row { border-top: 0; padding-top: 0; margin-top: calc(var(--space-2) - var(--space-4)); }
.form-card > .mini-title { margin-bottom: 0; }
@media (max-width: 640px) { .qual-text .file-actions .qual-delete { margin-left: 0; flex-basis: 100%; margin-top: var(--space-1); } }
.qual-delete .btn { color: var(--color-danger); }
.cert-line a { overflow-wrap: anywhere; }
.qual-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cert-line { display: flex; align-items: flex-start; gap: var(--space-1); overflow-wrap: anywhere; }
.cert-line .i, .cert-fact .i { width: 1.1em; height: 1.1em; flex: none; margin-top: 0.15em; }
.cert-fact { display: inline-flex; align-items: center; gap: var(--space-1); margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.qual-list .qual-text { display: flex; flex-direction: column; min-width: 0; }
.line-list.qual-list a.btn { color: var(--color-text) !important; font-weight: var(--weight-semibold); flex: none; }
.line-list.qual-list a.btn .i { width: 1.1em; height: 1.1em; }
.filters-grid-workers { grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto; }
.field-check .check { min-height: 2.75rem; align-items: center; white-space: nowrap; font-size: var(--text-sm); }
.field-check .check input { margin-top: 0; width: 1.125rem; height: 1.125rem; }

@media (max-width: 1100px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan-premium { order: -1; }
  .upsell { grid-template-columns: minmax(0, 1fr); }
  .filters-grid, .filters-grid-workers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .price { font-size: 2.125rem; }
  .pricing { gap: var(--space-6); padding-top: var(--space-5); }
  .filters-grid, .filters-grid-workers { grid-template-columns: minmax(0, 1fr); }
  .field-check .check { min-height: 0; }
  .worker-card { grid-template-columns: auto minmax(0, 1fr); }
  .worker-card > .btn { grid-column: 1 / -1; }
  .file-row { align-items: flex-start; }
  .profile-photo, .avatar-lg, .file-icon { width: 72px; height: 72px; }
}
.line-list.qual-list .cert-none, .line-list.qual-list .cert-fact { flex: none; margin: 0; }