/* UX 2.3 — employee onboarding dashboard only.
   This file is deliberately presentation-only. It must never alter module,
   introduction, routing, permissions, task or database behaviour. */

[data-tour="welcome"] > .mb-8.space-y-5 {
  display: grid;
  gap: 1rem;
}

/* Neutralise Tailwind space-y margins because the dashboard now uses grid gap. */
[data-tour="welcome"] > .mb-8.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0;
}

/* Keep system feedback closest to the top of the page. */
[data-tour="welcome"] > .mb-8.space-y-5 > div[aria-live="polite"],
[data-tour="welcome"] > .mb-8.space-y-5 > div[class*="border-red-200"] {
  order: 0;
}

/* Now → Next → Journey → Learning/help → reference material. */
[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(1) { order: 1; }
[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(3) { order: 2; }
[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(2) { order: 3; }
[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(4) { order: 4; }
[data-tour="welcome"] > .mb-8.space-y-5 > details:nth-of-type(1) { order: 5; }
[data-tour="welcome"] > .mb-8.space-y-5 > details:nth-of-type(2) { order: 6; }
[data-tour="welcome"] > .mb-8.space-y-5 > details:nth-of-type(3) { order: 7; }
[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(5) { order: 8; }
[data-tour="welcome"] > .mb-8.space-y-5 > div[class*="border-onboarding-info"] { order: 9; }

/* 1. NOW — quieter orientation and a dominant next action. */
[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(1) {
  border-color: #e5e7eb;
  box-shadow: 0 12px 32px rgb(15 23 42 / 0.055);
  background:
    radial-gradient(circle at 92% 18%, rgb(var(--color-brand-primary) / 0.06), transparent 27%),
    #fff;
}

[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(1) > .grid {
  gap: 1rem;
  padding: 1.15rem;
}

[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(1) h1 {
  margin-top: 0.35rem;
  font-size: clamp(1.45rem, 2vw, 2rem);
}

[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(1) > .grid > div:first-child > p {
  max-width: 42rem;
}

[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(1) > .grid > div:nth-child(2) {
  border-color: rgb(var(--color-brand-primary) / 0.22);
  background: #fff;
  box-shadow: 0 14px 34px rgb(var(--color-brand-primary) / 0.08);
}

[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(1) > .grid > div:nth-child(2) h2 {
  font-size: 1.05rem;
  line-height: 1.45rem;
}

[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(1) > .grid > div:nth-child(2) button {
  min-height: 2.85rem;
  box-shadow: 0 8px 18px rgb(var(--color-brand-primary) / 0.15);
}

/* 2. NEXT — this is the practical work surface directly after the hero. */
[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(3) {
  gap: 0.85rem;
}

[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(3) > article {
  border-color: #e5e7eb;
  box-shadow: 0 6px 20px rgb(15 23 42 / 0.035);
}

[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(3) > article:first-child {
  border-color: rgb(var(--color-brand-primary) / 0.16);
}

[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(3) > article:first-child > .mt-4 > div {
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(3) > article:first-child > .mt-4 > div:hover {
  border-color: rgb(var(--color-brand-primary) / 0.2);
  background: rgb(var(--color-brand-primary) / 0.018);
  transform: translateY(-1px);
}

/* Guidance should read as supportive context, not another primary task list. */
[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(3) > article:nth-child(2) {
  background: #fbfcfe;
}

[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(3) > article:nth-child(2) .space-y-2\.5 > div {
  background: #fff;
}

/* 3. JOURNEY — compress the six phase cards into a light progress strip. */
[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(2) {
  padding: 1rem;
  box-shadow: none;
}

[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(2) > .flex:first-child h2 {
  font-size: 0.95rem;
}

[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(2) > .mt-5.grid {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.8rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
  scrollbar-width: thin;
}

[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(2) > .mt-5.grid > div {
  min-width: 8.7rem;
  flex: 1 0 0;
  padding: 0.7rem;
  border-radius: 0.85rem;
  box-shadow: none;
}

[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(2) > .mt-5.grid > div p.mt-3 {
  margin-top: 0.5rem;
}

/* 4. LEARNING AND HELP — secondary to current work, still fully available. */
[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(4) {
  gap: 0.85rem;
}

[data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(4) > article {
  box-shadow: none;
}

/* Full plan and feedback stay available as deliberate drill-downs. */
[data-tour="welcome"] > .mb-8.space-y-5 > details:nth-of-type(2),
[data-tour="welcome"] > .mb-8.space-y-5 > details:nth-of-type(3) {
  box-shadow: none;
}

@media (min-width: 1024px) {
  [data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(1) > .grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(26rem, 1.22fr);
    align-items: stretch;
    padding: 1.35rem 1.5rem;
  }

  [data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(1) > .grid > div:first-child {
    align-self: center;
  }

  /* After first use, the greeting does not need a long permanent explanation. */
  [data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(1) > .grid > div:first-child > p {
    display: none;
  }

  [data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(3) {
    grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 0.75fr);
  }
}

@media (max-width: 767px) {
  [data-tour="welcome"] > .mb-8.space-y-5 {
    gap: 0.75rem;
  }

  [data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(1),
  [data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(2),
  [data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(3) > article,
  [data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(4) > article,
  [data-tour="welcome"] > .mb-8.space-y-5 > details {
    border-radius: 1.15rem;
  }

  [data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(1) > .grid {
    padding: 1rem;
  }

  [data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(1) > .grid > div:nth-child(2) {
    padding: 1rem;
    border-radius: 1rem;
  }

  [data-tour="welcome"] > .mb-8.space-y-5 > section:nth-of-type(2) > .mt-5.grid > div {
    min-width: 8.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-tour="welcome"] > .mb-8.space-y-5 *,
  [data-tour="welcome"] > .mb-8.space-y-5 *::before,
  [data-tour="welcome"] > .mb-8.space-y-5 *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}