/* The marketplace's public pages (/marketplace, /hire-a-drone-pilot,
   /drone-jobs, /drone-jobs/<state>; Marketplace Phase B, 2026-11-02). On top
   of site-a.css; the site's one accent colour (--accent) only. */
.mk-page .mk-crumbs { padding-top: 24px; font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px; }
.mk-page .mk-crumbs a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
.mk-page .mk-crumbs + .mk-hero { padding-top: 24px; }

.mk-row-cta, .mk-box-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 20px !important; }
.mk-after-steps { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.mk-cta-more { margin-top: 22px; font-size: 15px; color: var(--ink-2); }
.mk-page .pa-box { display: flex; flex-direction: column; }
.mk-page .pa-box .mk-box-cta { margin-top: auto !important; padding-top: 18px; }

/* Open-job cards */
.mk-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.mk-job { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; background: var(--bg); color: inherit; text-decoration: none; transition: border-color 0.2s ease; }
.mk-job:hover { border-color: var(--accent); }
.mk-job-title { font-size: 18px; letter-spacing: -0.02em; margin: 0 0 6px; }
.mk-job-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; font-size: 14px; color: var(--ink-2); }
.mk-job-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 0 0 16px; }
.mk-job-facts dt { font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.mk-job-facts dd { margin: 2px 0 0; font-weight: 600; font-size: 15px; }
.mk-job .pa-card-more { margin-top: auto; }
.mk-empty p { margin: 0; }
.mk-empty p + p { margin-top: 10px; }

/* The state list */
.mk-states { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 20px; }
.mk-states li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.mk-states a { color: var(--ink); text-decoration: none; }
.mk-states a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.mk-states .mk-count { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.mk-states .mk-has a { font-weight: 600; }
.mk-states .mk-has .mk-count { color: var(--accent); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .mk-job { transition: none; } }