/* ============================================
   GET STARTED — the first-run checklist on /talent-management

   Replaced onboarding-tour.css, which styled a modal that took over the page.
   This one sits IN the page, above the positions list, and is present only
   while a step is outstanding — so it has to read as part of the dashboard,
   not as an interruption pinned on top of it.
   ============================================ */

@layer components {
  .talent-management-page {
    .get-started {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
      padding: var(--space-xl);
      border-radius: var(--radius-lg);
      margin-block-end: var(--space-xl);

      .get-started-head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-md);
      }

      .get-started-intro {
        h2 {
          font-size: var(--fs-large);
          font-weight: var(--fw-semibold);
          line-height: 1.25;
          /* Three sentences that are meant to land as three lines on a wide
             screen and wrap naturally below that. */
          max-inline-size: 34ch;
          margin: 0;
        }

        p {
          font-size: var(--fs-xsmall);
          max-inline-size: 56ch;
          margin-block-start: var(--space-sm);
          margin-block-end: 0;
        }
      }

      .get-started-progress {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--space-xs);
        /* Never squeezed to nothing by the headline beside it. */
        flex-shrink: 0;
      }

      .get-started-count {
        font-size: var(--fs-xxsmall);
        font-weight: var(--fw-semibold);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin: 0;
      }

      .get-started-meter {
        inline-size: 132px;
        block-size: 4px;
        border: none;
        border-radius: var(--radius-pill);
        /* appearance:none is what lets the pseudo-elements in the theme layer
           paint at all; without it the platform widget wins. */
        appearance: none;
        overflow: hidden;
      }

      .get-started-steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-md);
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .get-started-step {
        display: flex;
        /* Same reset as the setup bar: base-local.css's prose rule
           `li + li { margin-block-start: var(--space-xs) }` offsets every card
           but the first inside this grid row. */
        margin-block-start: 0;
      }

      .get-started-step-body {
        display: flex;
        flex-direction: column;
        inline-size: 100%;
        padding: var(--space-md);
        border-radius: var(--radius-md);
        transition:
          transform var(--time-fast) var(--ease-standard),
          border-color var(--time-fast) var(--ease-standard),
          background var(--time-fast) var(--ease-standard);

        &:hover {
          transform: translateY(-2px);
        }
      }

      .get-started-step-mark {
        display: grid;
        place-items: center;
        inline-size: 26px;
        block-size: 26px;
        border-radius: 50%;
        margin-block-end: var(--space-md);
        flex-shrink: 0;
      }

      .get-started-step-number {
        font-size: var(--fs-xxsmall);
        font-weight: var(--fw-semibold);
        line-height: 1;
      }

      .get-started-step-name {
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
        margin: 0;
      }

      .get-started-step-blurb {
        font-size: var(--fs-xxsmall);
        line-height: 1.5;
        margin-block-start: var(--space-2xs);
        margin-block-end: 0;
      }

      .get-started-step-foot {
        /* Pins the footer to the bottom so the four cards' labels line up
           however unevenly the blurbs wrap. */
        margin-block-start: auto;
        padding-block-start: var(--space-md);
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-2xs);
        font-size: var(--fs-tiny);
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      .get-started-step-state {
        font-weight: var(--fw-semibold);
      }

      .get-started-foot {
        font-size: var(--fs-xxsmall);
        margin: 0;
      }

      /* One column below the point where four cards stop holding a readable
         line length; two in between. */
      @media (width < 1100px) {
        .get-started-steps {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (width < 640px) {
        padding: var(--space-lg);

        .get-started-steps {
          grid-template-columns: 1fr;
        }

        .get-started-progress {
          align-items: flex-start;
        }
      }
    }
  }
}

/* ================================================
   THEME
   ================================================ */
@layer theme {
  .talent-management-page {
    .get-started {
      background: var(--surface-elevated);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);

      .get-started-intro h2 {
        color: var(--text-primary);
      }

      .get-started-count {
        color: var(--text-secondary);
      }

      .get-started-meter {
        background: var(--border-subtle);
        /* Firefox paints the track on the element itself, WebKit on
           ::-webkit-progress-bar; both need saying. */
        color: var(--accent-primary);
      }

      .get-started-meter::-webkit-progress-bar {
        background: var(--border-subtle);
      }

      .get-started-meter::-webkit-progress-value {
        background: var(--accent-primary);
      }

      .get-started-meter::-moz-progress-bar {
        background: var(--accent-primary);
      }

      .get-started-step-body {
        background: var(--bg-primary);
        border: 1px solid var(--border-subtle);
        color: var(--text-secondary);

        &:hover {
          border-color: var(--accent-primary);
        }
      }

      .get-started-step-name {
        color: var(--text-primary);
      }

      .get-started-step-foot {
        color: var(--text-secondary);
      }

      .get-started-step-mark {
        background: oklch(from var(--text-secondary) l c h / 0.12);
        color: var(--text-secondary);
      }

      /* Done reads as settled, not as the thing to look at: the tick carries
         the success colour, the card itself steps back. */
      .is-done .get-started-step-mark {
        background: oklch(from var(--color-success) l c h / 0.15);
        color: var(--color-success);
      }

      /* The tick and its tinted circle carry "done"; the label stays secondary
         text. Setting it in --color-success measured 4.22:1 against the card in
         the light theme, under AA for a 10px label, and darkening the token
         only for this one use would have cost the dark theme legibility in the
         other direction. */
      .is-done .get-started-step-state {
        color: var(--text-secondary);
      }

      /* The one card that is asking for something. Ringed rather than filled,
         so it sits above the others without competing with the page's own
         primary button. */
      .is-current .get-started-step-body {
        border-color: var(--accent-primary);
        box-shadow: 0 0 0 1px var(--accent-primary);
      }

      .is-current .get-started-step-mark {
        background: var(--accent-primary);
        color: var(--button-text-color);
      }

      .is-current .get-started-step-state {
        color: var(--accent-primary);
      }

      /* Not reachable yet. De-emphasised through the mark alone, never through
         opacity on the card: at 0.72 the blurb measured 3.58:1 against the card
         it sits on, and an "up next" step nobody can read defeats the reason
         all four are shown at once — a new recruiter reading the whole shape of
         the job before starting any of it. The number badge fading back, next
         to a green tick and a ringed current card, carries the ordering on its
         own. */
      .is-upcoming .get-started-step-mark {
        background: oklch(from var(--text-secondary) l c h / 0.08);
        color: var(--text-secondary);
      }

      .get-started-foot {
        color: var(--text-secondary);
      }
    }
  }
}