/*
 * task-strip.css — per-task preparation strip
 *
 * One strip per O*NET task row. Three encoded dimensions on a single
 * stacked-bar mark:
 *   - segment count   = number of matched courses
 *   - segment fill    = course level (100 .. 500)
 *   - segment width   = cosine similarity (normalized so the row sums
 *                       to 1.0; remaining gap = "unmatched", hatched)
 *
 * The level palette mirrors templates/matches.html lines 71-74 so the
 * page-header faculty-readiness bar and the per-task strips share one
 * visual vocabulary. Defining the palette as CSS custom properties is
 * the single source of truth for both surfaces.
 */

:root {
  /* Course-level fills (luminance-ordered: lower level == warmer/lighter). */
  --level-100: #fdba74;  /* orange-300  — Introductory   */
  --level-200: #fbbf24;  /* amber-400   — Foundational   */
  --level-300: #34d399;  /* emerald-400 — Competent      */
  --level-400: #059669;  /* emerald-600 — Job-Ready      */
  --level-500: #064e3b;  /* emerald-900 — Graduate       */
  --level-unknown: #94a3b8;  /* slate-400 — no level parsed */
}

.task-strip-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  align-items: center;
  width: 100%;
}

.task-strip-host {
  /* Reserve vertical space so the page does not jump when JS hydrates
   * the strip after the initial paint. 22px == strip height + 2px
   * inner margins. */
  min-height: 22px;
  width: 100%;
}

.task-strip-svg {
  width: 100%;
  height: 22px;
  display: block;
}

/* Sparkline variant for /program/<pid> occupation rows. */
.task-strip-host--compact {
  min-height: 12px;
}

.task-strip-svg--compact {
  height: 12px;
}

/* Visually-hidden but assistive-tech-available data table fallback
 * (WCAG 1.1.1 — non-text content has a text alternative). Tailwind
 * provides .sr-only but we redeclare here so the CSS file is
 * self-contained for non-Tailwind contexts.
 *
 * IMPORTANT: this class lives on a <div> wrapper, not directly on
 * the <table>. A <table> element's `display: table` ignores
 * `width: 1px` because table layout sizes from content min-width;
 * a <div>'s `display: block` honors it. Putting this on a <table>
 * caused the table to render at ~1700 px wide and leak into the
 * document scrollWidth, producing a 1354 px horizontal-overflow on
 * iPhone 13 (mobile audit, 2026-05). The wrapper div clips the
 * inner table via overflow: hidden; AT still walks the DOM and
 * sees a fully-formed <table> with caption/thead/tbody. */
.task-strip-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile: keep the strip readable at 390px width. Below 480px the
 * task label moves above the strip rather than beside it (handled in
 * the template grid; this CSS is a fallback for older browsers). */
@media (max-width: 480px) {
  .task-strip-row {
    grid-template-columns: 1fr;
  }
}