@import url("p1.css");

body { background: var(--color-charcoal-raised); }
.shell { background: var(--color-canvas); }
.site-header { color: var(--color-on-dark); background: var(--color-charcoal); border-bottom-color: var(--color-dark-rule); }
.site-header :focus-visible, .search-panel :focus-visible { outline-color: var(--color-accent); }
.search-panel { background: var(--color-charcoal); color: var(--color-on-dark); padding-top: var(--space-8); padding-bottom: var(--space-8); }
.search-caption { color: var(--color-muted-on-dark); margin-bottom: var(--space-2); }
.search-panel h1 { font-size: 32px; font-weight: 700; margin-bottom: var(--space-6); letter-spacing: 0.02em; }
.trade-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-2); }
.trade-link { border-bottom-color: var(--color-dark-rule); }
.trade-name { min-height: 56px; font-size: var(--text-medium); font-weight: 600; }
.trade-name .icon { color: var(--color-accent); width: 20px; height: 20px; }
.area-picker { border-color: var(--color-dark-rule); background: var(--color-charcoal-raised); margin-top: var(--space-8); }
.area-label { color: var(--color-muted-on-dark); }
.area-picker summary { min-height: 64px; }
.area-picker summary > .icon:first-child { color: var(--color-accent); }
.area-options a { border-color: var(--color-dark-rule); }
.jobs-section { border-top: 0; }
.section-head h2 { font-weight: 700; }
.job-card { border: 0; box-shadow: none; border-radius: var(--radius-small); }
.job-photo > img { aspect-ratio: 1.5; }
.job-copy { padding: var(--space-6); }
.job-heading h3 { font-weight: 700; }
.pay strong { font-weight: 750; }
.site-footer { background: var(--color-paper); }
.detail-header { background: var(--color-charcoal); }
.detail-visual > img { height: 244px; }
.detail-visual .verified { bottom: var(--space-4); }
.detail-intro { background: var(--color-charcoal); color: var(--color-on-dark); padding-top: var(--space-6); }
.detail-intro .pay strong { font-weight: 750; }
.detail-intro .pay > span:first-child { color: var(--color-accent); }
.intro-meta { color: var(--color-muted-on-dark); }
.detail-intro h1 { font-size: 32px; font-weight: 700; }
.detail-reply { border-color: var(--color-dark-rule); }
.detail-reply > .icon { color: var(--color-accent); }
.detail-section { margin: var(--space-4) var(--space-4) 0; background: var(--color-paper); border: 0; border-radius: var(--radius-small); padding: var(--space-6); }
.detail-section h2 { font-weight: 700; }
.apply-guide { margin: var(--space-4) var(--space-4) var(--space-8); padding: var(--space-6); background: var(--color-paper); }
.apply-dock { box-shadow: none; }
.primary { font-weight: 700; }
@media (min-width: 40rem) {
  .shell { border-inline: 0; }
  .search-panel h1 { font-size: 36px; }
  .detail-visual > img { height: 320px; }
  .detail-section, .apply-guide { margin-inline: var(--space-6); padding-inline: var(--space-8); }
}
@media (hover: hover) {
  .site-header .help-button:hover { background: var(--color-charcoal-raised); }
  .search-panel .area-picker summary:hover, .search-panel .area-options a:hover { background: var(--color-dark-rule); }
}
@media (max-width: 22.4375rem) {
  .job-copy { padding: var(--space-4); }
}