/* styles/sections/launch-panel.css
 * Hero with the "Launches across the lifecycle" panel (Product Leadership hero v6eaUZ, kG7qE,
 * HBJA5; panel I6M0Ps, vEgyb, OwfL4). Grained fern band; the hero-copy recipe beside a white
 * panel (radius 8, no edge): title, the stage axis, four launch rows on a seven-column lane with
 * guides, then the Brief Answer strip with the decision history.
 * D: copy 510 + 40 + panel 730, top aligned. W: 720 + 80 + 880. Between 900 and the D frame the
 * row wraps (the panel keeps at least 640px) instead of squeezing. M stacks; each launch row
 * draws its name over its lane, as mfzCv does.
 * Lane bars are fractions of the lane (--w, --x from the 1440 frame; the 390 and 1920 frames draw
 * the same fractions). The reopen markers on the Payment provider row are a Pencil export per
 * frame width, placed on the Refine column. */
@layer sections {
  .launch-hero {
    padding-block: 72px 56px;
  }

  .launch-hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
  }

  .launch-hero__copy {
    --hero-actions-gap: var(--space-8);
    --hero-deck-lh: round(nearest, 1.45em, 1px);
    --hero-heading-lh: round(nearest, 0.95em, 1px);
  }

  .launch-panel {
    --window-edge: transparent;
    --name-w: 0px;
    --slip-w: 40px;
    --row-pad: 24px;
    margin: 0;
    font-family: var(--font-body);
  }

  .launch-panel p,
  .launch-panel ol,
  .launch-panel ul {
    margin: 0;
  }

  .launch-panel__title {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 48px;
    padding-inline: var(--row-pad);
    box-shadow: inset 0 -1px var(--shot-rule-cool);
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
  }

  .launch-panel__grid {
    min-width: 342px;
    padding: 4px var(--row-pad) 0;
  }

  /* Below the M frame's 342px panel the lanes keep their drawn width and scroll sideways */
  .launch-panel__scroll {
    overflow-x: auto;
  }

  /* Axis: spacer (the name column), seven stage columns, the Slip column */
  .launch-panel__axis {
    display: grid;
    grid-template-columns: var(--name-w) minmax(0, 1fr) var(--slip-w);
    align-items: center;
    height: 32px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 13px;
    color: var(--app-ink-2);
  }

  .launch-panel__stages {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    padding: 0;
    list-style: none;
    text-align: center;
  }

  .launch-panel__slip-head {
    text-align: right;
  }

  .launch-panel__rows {
    padding: 0;
    list-style: none;
  }

  .launch-row {
    --row-h: 52px;
    --bar-top: 17px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: var(--name-w) minmax(0, 1fr) var(--slip-w);
    align-items: center;
    min-height: var(--row-h);
    box-shadow: inset 0 1px var(--shot-rule-cool);
  }

  .launch-row--open {
    --row-h: 60px;
    --bar-top: 21px;
    background: var(--app-amber-soft);
  }

  .launch-row__name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
  }

  .launch-row__name,
  .launch-row__name > p:first-child {
    flex-direction: row;
    align-items: center;
    gap: 7px;
  }

  .launch-row--open .launch-row__name {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-left: 8px;
  }

  .launch-row--open .launch-row__name > p:first-child {
    display: flex;
  }

  .launch-row__note {
    padding-left: 14px;
    font-size: 11px;
    font-weight: 400;
    line-height: 13px;
    color: var(--app-amber-ink);
  }

  .launch-row__slip {
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    text-align: right;
    color: var(--app-amber-ink);
  }

  /* Lane: guides at the six inner column edges, 8px short of the row's foot */
  .launch-lane {
    position: relative;
    align-self: stretch;
    display: block;
  }

  .launch-lane::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 8px;
    left: calc(100% / 7);
    right: 0;
    background: linear-gradient(to right, var(--shot-guide) 1px, transparent 1px) 0 0 / calc(100% / 6) 100% repeat-x;
  }

  /* --x and --w come inline from the build script, per bar */
  .launch-lane > span {
    --x: 0px;
    --w: 0px;
    position: absolute;
    top: var(--bar-top);
    height: 10px;
  }

  /* Plan: a 1.5 stroke centred on the edge, as Pencil strokes it. Two 0.75 spreads, because Chrome
     snaps a 1.5px outline to whole pixels at 1x and hides it under the done bar. */
  .launch-lane__plan {
    left: 0;
    width: var(--w, 0px);
    border-radius: 3px;
    box-shadow: 0 0 0 0.75px var(--app-track), inset 0 0 0 0.75px var(--app-track);
  }

  .launch-lane__done {
    left: 0;
    width: var(--w, 0px);
    border-radius: 3px 0 0 3px;
    background: var(--fern-app);
  }

  .launch-lane__over {
    left: var(--x, 0px);
    width: var(--w, 0px);
    border-radius: 0 3px 3px 0;
    background: var(--orange);
  }

  /* Reopen markers: the export is the Refine column plus 2px each side (4px on M) */
  .launch-lane__reopen {
    position: absolute;
    top: 8px;
    left: calc(300% / 7 - 4px);
    width: calc(100% / 7 + 8px);
    height: auto;
  }

  .launch-panel__answer {
    padding: 24px 16px 28px;
    box-shadow: inset 0 1px var(--shot-rule-cool);
  }

  .answer-history {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: 0;
    list-style: none;
  }

  .answer-history__item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: var(--space-10);
  }

  .answer-history__date {
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    color: var(--app-ink-2);
  }

  /* The diamond export runs 0.61px past its 10px wrap, as the frame draws it */
  .answer-history__mark {
    flex: none;
    width: 10.61px;
    height: 10.61px;
    margin: 2px calc(6px - 0.61px) 0 0;
  }

  .answer-history__text {
    font-size: 12px;
    line-height: 16px;
  }

  /* M: name over lane; lane 1fr beside the 40px slip */
  @media (width < 900px) {
    .launch-panel {
      --row-pad: 16px;
    }

    .launch-panel__axis {
      align-items: start;
      height: 28px;
    }

    .launch-panel__stages {
      grid-column: 1 / 3;
      font-size: 9px;
      line-height: 11px;
    }

    .launch-row {
      --bar-top: 7px;
      grid-template-columns: minmax(0, 1fr) var(--slip-w);
      grid-template-rows: auto 32px;
      row-gap: 4px;
      min-height: 0;
      padding-block: 10px 6px;
    }

    .launch-row--open {
      --bar-top: 7px;
    }

    .launch-row__name {
      grid-column: 1 / -1;
    }

    .launch-lane::before {
      bottom: 0;
    }

    .launch-row--open .launch-lane {
      grid-column: 1;
      grid-row: 2;
    }
  }

  @media (min-width: 900px) {
    .launch-hero {
      padding-block: 120px 96px;
    }

    .launch-hero__inner {
      flex-flow: row wrap;
      align-items: flex-start;
      gap: var(--space-40);
    }

    .launch-hero__copy {
      flex: 0 0 510px;
    }

    .launch-panel {
      --name-w: 168px;
      --slip-w: 52px;
      /* 640 keeps every stage column at least 53px (Roadmap fits); below about 1340 the row wraps */
      flex: 1 1 640px;
      min-width: 0;
    }

    .launch-lane__reopen {
      top: 18px;
      left: calc(300% / 7 - 2px);
      width: calc(100% / 7 + 4px);
    }

    .launch-panel__answer {
      padding-inline: 24px;
    }

    .answer-history {
      flex-direction: row;
      gap: var(--space-16);
    }

    .answer-history__item {
      display: flex;
      flex-direction: column;
      gap: 2px;
      width: 120px;
    }
  }

  @media (min-width: 1680px) {
    .launch-hero {
      padding-block: 144px 115px;
    }

    .launch-hero__inner {
      gap: var(--space-80);
    }

    /* From 1680 the copy and heading grow from the D frame's 510 / 88 to the W frame's
       720 / 120 at 1920, so the panel widens from 850 to 880 instead of dropping to 640 */
    .launch-hero__copy {
      --hero-heading-size: clamp(88px, 88px + (100vw - 1680px) * 32 / 240, 120px);
      flex-basis: clamp(510px, 510px + (100vw - 1680px) * 210 / 240, 720px);
    }

    .launch-panel {
      /* The name and slip columns grow from the D frame's 168 / 52 at 1680 to the W frame's
         240 / 56 at 1920, so the stage columns stay wide where the panel is narrowest */
      --name-w: clamp(168px, 168px + (100vw - 1680px) * 0.3, 240px);
      --slip-w: clamp(52px, 52px + (100vw - 1680px) / 60, 56px);
    }
  }
}