/* styles/sections/loop-timeline.css
 * A team's own loop as a timeline (Product Teams: n8Xa7q, PJoae, fbRYw). D and W
 * (.loop-timeline): nine stages along an axis, two leaks called out above it, the Jira and
 * Brief bars under it and the return path around it (Pencil exports, stretched to the
 * figure). Stages sit at the frame's fractions of the width: 5% in, 11.25% apart. M
 * (.loop-list): the stages run down a spine, the bars run beside them on the same grid
 * rows, and a legend names the bars. Dots, axis and bars are the frame's plain filled shapes. */
@layer sections {
  .loop-section {
    padding-block: var(--section-xl) var(--section-md);
  }

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

  .loop-figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    margin: 0;
  }

  /* ---------- D and W ---------- */
  .loop-timeline {
    --x0: 5%;
    --step: 11.25%;
    --leak-shift: 8px;
    position: relative;
    height: 360px;
  }

  .loop-timeline__return {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .loop-timeline__return--w {
    display: none;
  }

  .loop-timeline__axis {
    position: absolute;
    top: 169px;
    left: var(--x0);
    width: calc(100% - 2 * var(--x0));
    height: 2px;
    background: var(--ink);
  }

  .loop-timeline__arrow {
    position: absolute;
    top: 164px;
    left: calc(var(--x0) - 16px);
  }

  /* --i: the stage's index, set inline */
  .loop-timeline__stage {
    --i: 0;
  }

  .loop-timeline__stages {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .loop-timeline__dot,
  .loop-timeline__name,
  .loop-timeline__leak {
    position: absolute;
    --at: calc(var(--x0) + var(--i) * var(--step));
  }

  .loop-timeline__dot {
    top: 162px;
    left: calc(var(--at) - 8px);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--white);
    outline: 2px solid var(--ink);
    outline-offset: -1px;
  }

  .loop-timeline__stage--leak .loop-timeline__dot {
    background: var(--orange);
    outline: 0;
  }

  /* 15px from 1160 (frame size at 1440 and 1920), easing to 13px at 900 so neighbours stay clear */
  .loop-timeline__name {
    top: 186px;
    left: calc(var(--at) - 60px);
    width: 120px;
    font-size: clamp(13px, 13px + (100vw - 900px) * 2 / 260, 15px);
    line-height: round(nearest, 1.2em, 1px);
    text-align: center;
    color: var(--ink);
  }

  .loop-timeline__stage:first-child .loop-timeline__name,
  .loop-timeline__stage:last-child .loop-timeline__name {
    top: 188px;
  }

  .loop-timeline__stage--leak .loop-timeline__name {
    font-weight: 600;
  }

  /* Leak: callout above its stage, with the orange leader down to the dot */
  .loop-timeline__leak {
    top: 0;
    left: calc(var(--at) - var(--leak-shift));
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: min(420px, 4 * var(--step) - 16px);
    padding-left: var(--space-8);
  }

  .loop-timeline__leak::before {
    content: "";
    position: absolute;
    top: 92px;
    left: var(--leak-shift);
    width: 1.5px;
    height: 70px;
    background: var(--orange);
  }

  .loop-timeline__leak-title,
  .loop-timeline__leak-quote {
    margin: 0;
  }

  .loop-timeline__leak-title {
    font-size: 16px;
    font-weight: 600;
    line-height: round(nearest, 1.2em, 1px);
    color: var(--orange-ink);
  }

  /* The quotes track normally: the frames' negative tracking read far too tight at 13px
     (Stephan, Oct 16) */
  .loop-timeline__leak-quote {
    font-size: 13px;
    line-height: 19px;
    letter-spacing: normal;
    color: var(--ink-2);
  }

  /* Bars: the label sits 14 under its 8px bar */
  .loop-timeline__bar {
    position: absolute;
    margin: 0;
    padding-top: var(--space-14);
    font-size: 13px;
    font-weight: 600;
    line-height: round(nearest, 1.2em, 1px);
  }

  .loop-timeline__bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    border-radius: var(--radius-sm);
  }

  .loop-timeline__bar--jira {
    top: 226px;
    left: calc(var(--x0) + 2 * var(--step));
    width: calc(100% - 2 * var(--x0) - 2 * var(--step));
    color: var(--ink-muted);
  }

  .loop-timeline__bar--jira::before {
    background: var(--chip-edge);
  }

  .loop-timeline__bar--brief {
    top: 272px;
    left: var(--x0);
    width: calc(100% - 2 * var(--x0));
    color: var(--fern);
  }

  .loop-timeline__bar--brief::before {
    background: var(--fern);
  }

  /* "next cycle" sits on the return path; its page fill masks the line under it (88 wide) */
  .loop-timeline__next {
    position: absolute;
    top: 334px;
    left: calc(50% - 44px);
    width: 88px;
    margin: 0;
    background: var(--white);
    font-size: 13px;
    line-height: round(nearest, 1.2em, 1px);
    text-align: center;
    color: var(--ink-muted);
  }

  /* ---------- M ---------- */
  .loop-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .loop-list__body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    grid-template-rows: repeat(9, auto);
    column-gap: var(--space-16);
    padding: 0 0 var(--space-32) var(--space-20);
  }

  .loop-list__stages {
    position: relative;
    display: grid;
    grid-row: 1 / span 9;
    grid-column: 1;
    grid-template-rows: subgrid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Spine: from the first dot's centre to the last's */
  .loop-list__stages::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 9px;
    left: 7px;
    width: 2px;
    background: var(--ink);
  }

  .loop-list__stage {
    display: flex;
    gap: var(--space-12);
  }

  .loop-list__dot {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--white);
    outline: 2px solid var(--ink);
    outline-offset: -1px;
  }

  .loop-list__stage--leak .loop-list__dot {
    background: var(--orange);
    outline: 0;
  }

  .loop-list__content {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--space-10);
    min-width: 0;
    padding-bottom: 22px;
  }

  .loop-list__stage:last-child .loop-list__content {
    padding-bottom: 0;
  }

  .loop-list__name {
    font-size: 15px;
    line-height: 17px;
    color: var(--ink);
  }

  .loop-list__stage--leak .loop-list__name {
    font-weight: 600;
  }

  .loop-list__leak {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-left: -0.75px;
    padding: 2px 0 2px var(--space-12);
    border-left: 1.5px solid var(--orange);
  }

  .loop-list__leak-title,
  .loop-list__leak-quote {
    margin: 0;
  }

  .loop-list__leak-title {
    font-size: 16px;
    font-weight: 600;
    line-height: round(nearest, 1.2em, 1px);
    color: var(--orange-ink);
  }

  .loop-list__leak-quote {
    font-size: 13px;
    line-height: 19px;
    letter-spacing: normal;
    color: var(--ink-2);
  }

  /* Bars run from 4 below a row's top to 5 above the last row's end, as PJoae draws them */
  .loop-list__bar {
    grid-column: 2;
    width: 8px;
    margin-block: 4px 5px;
    border-radius: var(--radius-sm);
  }

  .loop-list__bar--jira {
    grid-row: 3 / 10;
    margin-left: 2px;
    background: var(--chip-edge);
  }

  .loop-list__bar--brief {
    grid-row: 1 / 10;
    margin-left: 18px;
    background: var(--fern);
  }

  /* Return path: the 342 export, cropped to the 40px it draws in, stretched to the list */
  .loop-list__return {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40px;
    overflow: hidden;
  }

  .loop-list__return > img {
    display: block;
    width: 342px;
    max-width: none;
    height: 100%;
  }

  .loop-list__arrow {
    position: absolute;
    top: 2px;
    left: 11px;
  }

  .loop-list__next {
    position: absolute;
    bottom: 7px;
    left: 40px;
    margin: 0;
    font-size: 13px;
    line-height: round(nearest, 1.2em, 1px);
    color: var(--ink-muted);
  }

  .loop-list__legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin: 0;
    padding: 11px 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
  }

  .loop-list__key {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    font-size: 13px;
    font-weight: 600;
    line-height: round(nearest, 1.2em, 1px);
  }

  .loop-list__key::before {
    content: "";
    flex: none;
    width: 8px;
    height: 20px;
    border-radius: 3px;
  }

  .loop-list__key--jira {
    color: var(--ink-muted);
  }

  .loop-list__key--jira::before {
    background: var(--chip-edge);
  }

  .loop-list__key--brief {
    color: var(--fern);
  }

  .loop-list__key--brief::before {
    background: var(--fern);
  }

  @media (width >= 900px) {
    .loop-section__inner {
      gap: var(--space-56);
    }

    /* The caption starts on the return box's edge: its stroke is 24 in from the export's
       1280 (1680 on W), stretched to the figure (BRI-7805 J33) */
    .loop-figure > .figure-caption {
      padding-inline-start: calc(24 / 1280 * 100%);
    }
  }

  @media (width >= 1680px) {
    .loop-timeline {
      --leak-shift: 10px;
    }

    .loop-timeline__return--d {
      display: none;
    }

    .loop-timeline__return--w {
      display: block;
    }

    .loop-figure > .figure-caption {
      padding-inline-start: calc(24 / 1680 * 100%);
    }

  }
}