/* =============================================================================
   Fluxology Jobs — app-specific styling
   -----------------------------------------------------------------------------
   The shell, cards, badges, controls and dialog all come from the shared
   design-system layer (ds-tokens.css + ds-dashboard.css). Only what is unique
   to the jobs dashboard lives here.
   ============================================================================= */

/* Jobs runs five filter controls plus the active-only checkbox. */
.controls {
  grid-template-columns: minmax(240px, 1fr) repeat(4, minmax(140px, 180px)) auto;
}

/* The trade-track chip is the card's category marker; it reads as a quiet
   outline rather than competing with the fit-band badge beside it. */
.badge.track {
  color: var(--dash-body);
  border-color: var(--dash-border-strong);
  background: transparent;
}

/* Career-fit line in the card footer. */
.date .score { color: var(--dash-accent-text); }

@media (max-width: 1180px) {
  .controls { grid-template-columns: repeat(3, 1fr); }
  .search { grid-column: 1 / -1; }
}

@media (max-width: 670px) {
  .controls { grid-template-columns: 1fr; }

  /* The live-status text is redundant beside the refresh control on a phone,
     but it is an aria-live region — hide it visually, keep it for assistive
     technology. Behaviour preserved from the pre-overhaul stylesheet. */
  .live {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}