/* A trade's own page (trade_pages/show), on the home page's bands and shelves (home.css): the job in the hero with its
   papers, the core screens four steps across, and the rest of the app by name. Loaded only there. */

.tp-job { width: min(100%, 34rem); }
.tp-job-who { margin-top: .75rem; color: var(--color-ink-soft); font-family: var(--intro-mono); font-size: .75rem; }
.tp-job-papers { display: grid; margin-top: .25rem; }
.tp-job-papers li { display: flex; align-items: center; gap: .75rem; padding: .625rem 0; border-bottom: 1px dashed var(--intro-rule); }
.tp-job-papers li > svg { color: var(--color-indigo); }
.tp-job-papers li > span:nth-child(2) { flex: 1; min-width: 0; }
.tp-job-papers b { display: block; font-size: var(--text-small); font-weight: 650; line-height: 1.3; }
.tp-job-papers small { display: block; margin-top: .125rem; color: var(--color-ink-soft); font-size: .8125rem; }
.tp-state { flex-shrink: 0; padding: .1875rem .5rem; border-radius: 9999px; background: color-mix(in oklab, var(--color-key-green) 16%, transparent); color: light-dark(#2f7a4d, #82cd9b); font-size: .75rem; font-weight: 650; white-space: nowrap; }
.tp-state.is-next { background: color-mix(in oklab, var(--color-key-sky) 18%, transparent); color: var(--color-indigo); }

.tp-page .home-shelf-grid.tp-shelves { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tp-tool-still { color: var(--color-ink-muted); }
.tp-tool-still:hover { box-shadow: none; }
.tp-also { margin-top: 1.5rem; }

@media (max-width: 79.99rem) {
  .tp-page .home-shelf-grid.tp-shelves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .tp-page .home-shelf-grid.tp-shelves { grid-template-columns: minmax(0, 1fr); }
  .tp-job-papers li { gap: .5rem; }
}