/* 03-steps.css - P3 How it works (sticky steps). Every selector begins with
   .s-steps or .js .s-steps, per spec 4.4. Tokens, resets, .mock, .card,
   .pill, .tag, .list-reset and the reveal system are base.css (P1); this
   file only adds the steps-specific layout and the two mock variants that
   are not literal .mock-row usage (the screening scan rows and the pill
   cluster on a finding card). */

.s-steps__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* panel: sticky, cross-fading mock layers. No position:relative here on
   purpose - a sticky element is already the containing block for the
   absolutely positioned layers (spec 5/P3). */
.s-steps__panel {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  height: calc(100vh - var(--nav-h) - 64px);
  max-height: 640px;
  min-height: 480px;
  border-radius: var(--r-panel);
  background: var(--panel-bg);
  transition: background .4s;
  padding: 40px;
}

.s-steps__layer {
  position: absolute;
  inset: 40px;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity .4s;
}
.s-steps__panel[data-active="1"] [data-layer="1"] { opacity: 1; }
.s-steps__panel[data-active="2"] [data-layer="2"] { opacity: 1; }
.s-steps__panel[data-active="3"] [data-layer="3"] { opacity: 1; }
.s-steps__panel[data-active="4"] [data-layer="4"] { opacity: 1; }

/* the mock inside a layer never fills the panel edge to edge */
.s-steps .mock {
  max-width: 460px;
  width: 100%;
}

/* mock 1: the uploaded-file tag sits on its own line above the rows */
.s-steps .mock .tag {
  display: block;
  width: max-content;
  margin-bottom: 10px;
}

/* mock 2: screening rows (label + clause stacked left, verdict pill right)
   and the scanning bar. This is not .mock-row (that is a 3-column
   ref/desc/val grid); the screening list is 2 columns per spec 5/P3. */
.s-steps__scan-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.s-steps__scan-row:last-child {
  border-bottom: none;
}
.s-steps__scan-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.s-steps__scan-row-title {
  font: 500 14px/1.3 var(--font-sans);
  color: var(--ink);
}
.s-steps__scan-row-cite {
  color: var(--ink-64);
}
.s-steps .mock__body {
  position: relative;
}
.s-steps__scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  width: 3px;
  background: var(--cedar);
  display: none;
}
.js .s-steps__scan {
  display: block;
  animation: s-steps-scan 2.4s linear infinite alternate;
}
@keyframes s-steps-scan {
  from { left: 14px; }
  to { left: calc(100% - 17px); }
}
@media (prefers-reduced-motion: reduce) {
  .js .s-steps__scan { display: none; }
}

/* mock 3: the pill cluster above a finding card title */
.s-steps__pills {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

/* steps list */

.s-steps .step {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.s-steps .step:last-child {
  min-height: 50vh;
}
.js .s-steps .step:not(.is-active) {
  opacity: .4;
  transition: opacity .3s;
}

.s-steps .step__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.s-steps .step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  font: 500 14px var(--font-sans);
  color: var(--ink);
}
.s-steps .step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
}
.s-steps .step__icon svg {
  width: 16px;
  height: 16px;
}
.s-steps .step__icon--yellow { background: var(--yellow); }
.s-steps .step__icon--blue { background: var(--blue); }
.s-steps .step__icon--pink { background: var(--pink); }
.s-steps .step__icon--paper3 { background: var(--paper-3); }

.s-steps .step__title {
  margin-bottom: 8px;
  text-wrap: balance;
}
.s-steps .step__body {
  font-size: var(--fs-body);
  color: var(--ink-64);
  max-width: 420px;
}

/* tablet: 810 to 1199 */
@media (max-width: 1199px) {
  .s-steps__grid {
    gap: 40px;
  }
  .s-steps__panel {
    padding: 24px;
  }
  .s-steps .step {
    min-height: 60vh;
  }
}

/* mobile: <= 809, panel becomes a sticky strip under the nav, steps scroll
   beneath it */
@media (max-width: 809px) {
  .s-steps__grid {
    grid-template-columns: 1fr;
  }
  .s-steps__panel {
    position: sticky;
    top: var(--nav-h);
    height: 38vh;
    min-height: 260px;
    padding: 16px;
    z-index: 2;
    margin-inline: calc(-1 * var(--gutter));
    border-radius: 0;
  }
  .s-steps__layer {
    inset: 16px;
  }
  .s-steps .step {
    min-height: 60vh;
  }
  .s-steps .step:last-child {
    min-height: 60vh;
  }
  .s-steps .step:first-child {
    padding-top: 32px;
  }
}

/* below 480px: panel goes static, shows layer 1 only, steps stop dimming */
@media (max-width: 479px) {
  .s-steps__panel {
    position: static;
    height: auto;
    min-height: 0;
  }
  .s-steps__layer[data-layer="2"],
  .s-steps__layer[data-layer="3"],
  .s-steps__layer[data-layer="4"] {
    display: none;
  }
  .s-steps__layer[data-layer="1"] {
    position: static;
    opacity: 1;
  }
  .js .s-steps .step:not(.is-active) {
    opacity: 1;
  }
}