/* styles/sections/rework-lanes.css
 * Rework band (Product Leadership zHvG0, fW9A1, AnUhS): white with a dither edge on top, the split
 * intro, the rework figure, then the stat row and its source line.
 * Figure: legend (right aligned from D, stacked on M), a run label, a week axis and lanes between
 * 1.5px ink rules. From D a lane is a 240px label beside its track; on M the label sits over
 * the track and the axis spans the width. Track pieces (bars, pills, the Brief node, the note)
 * are placed with --x and --w: fractions of the 1040px track of the 1440 frame on D and W (the
 * 1920 frame draws the same fractions), and the 390 frame's own positions (--x-m, --w-m) on M.
 * Stat values are display-sm on M, display-md on D and display-lg on W, as the frames draw them. */
@layer sections {
  .rework-band {
    padding-block: 88px 72px;
  }

  .rework-band__intro {
    --intro-heading-lh: round(nearest, 1.05em, 1px);
    --intro-lede-size: 16px;
    --intro-lede-lh: round(nearest, 1.5em, 1px);
    margin-bottom: var(--space-24);
  }

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

  .rework-figure p {
    margin: 0;
  }

  .rework-legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 14px;
    color: var(--ink-muted);
  }

  .rework-legend > li {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .rework-legend__swatch {
    flex: none;
    width: 16px;
    height: 8px;
    border-radius: 2px;
  }

  .rework-legend__swatch--first { background: var(--rule-edge); }
  .rework-legend__swatch--rework { background: var(--orange); }
  .rework-legend__swatch--brief { background: var(--fern); }

  .rework-run {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 8px;
  }

  .rework-run--brief {
    padding-top: 40px;
  }

  .rework-run__name {
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    color: var(--ink);
  }

  .rework-run__ticket {
    font-size: 13px;
    line-height: 16px;
    color: var(--ink-muted);
  }

  .rework-scroll {
    overflow-x: auto;
  }

  /* Below the M frame's 342px track the lanes keep their drawn width and scroll sideways */
  .rework-lanes {
    position: relative;
    min-width: 342px;
  }

  /* Pencil strokes sit inside the box: the ink rules overlay the first and last rows */
  .rework-lanes::after {
    content: "";
    position: absolute;
    inset: 0;
    border-block: 1.5px solid var(--ink);
    pointer-events: none;
  }

  .rework-lanes__axis {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    height: 44px;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 12px;
    color: var(--ink-muted);
  }

  .rework-lanes__axis > span:first-child {
    display: none;
  }

  .rework-lanes__axis > span:not(:first-child) {
    display: flex;
    align-items: center;
    padding-left: 3px;
    box-shadow: inset 1px 0 var(--line);
    white-space: nowrap;
  }

  .rework-lane {
    box-shadow: inset 0 1px var(--line);
  }

  .rework-lane__label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 40px;
    padding-right: 16px;
  }

  .rework-lane__title {
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    color: var(--ink);
  }

  .rework-lane__sub {
    font-size: 13px;
    line-height: 16px;
    color: var(--ink-muted);
  }

  .rework-lane--brief {
    background: var(--paper);
  }

  .rework-lane--brief .rework-lane__title {
    color: var(--fern);
  }

  .rework-lane__track {
    position: relative;
    height: 72px;
    background: linear-gradient(to right, var(--shot-rule-cool) 1px, transparent 1px) 0 0 / 12.5% 100% repeat-x;
  }

  .rework-lane--brief .rework-lane__track {
    height: 80px;
  }

  /* --x, --w (D and W) and --x-m, --w-m (M) come inline from the build script, per piece */
  .rework-lane__track > * {
    --x: 0px;
    --w: auto;
    --x-m: 0px;
    --w-m: auto;
    --pw: 0px;
    position: absolute;
    left: var(--x-m, 0px);
  }

  .rework-lane__baseline {
    top: 36px;
    right: 0;
    height: 1px;
    background: var(--line);
  }

  .lane-bar {
    top: 31px;
    width: var(--w-m, auto);
    height: 10px;
    border-radius: 3px;
  }

  .lane-bar--first { background: var(--rule-edge); }
  .lane-bar--rework { background: var(--orange); }
  .lane-bar--brief { background: var(--fern); }

  .lane-pill {
    top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    white-space: nowrap;
  }

  .lane-pill--done {
    background: var(--shot-done);
    color: var(--fern-app);
  }

  .lane-pill--rework {
    background: var(--shot-rework);
    color: var(--shot-rework-ink);
  }

  .lane-pill__icon {
    flex: none;
    width: 12px;
    height: 12px;
  }

  /* The node export carries the 2px white stroke outside the 16px circle */
  .rework-lane__track > picture {
    top: 27px;
    left: 1px;
  }

  .rework-lane__node {
    display: block;
    width: 18px;
    height: 18px;
  }

  .rework-lane__freed {
    top: 52px;
    left: 8px;
    font-size: 13px;
    font-style: italic;
    line-height: 16px;
    color: var(--ink-muted);
  }

  .rework-band .figure-note {
    margin-top: 0;
  }

  /* ---------- Stats ---------- */
  .rework-stats {
    --stat-pad-top: 27px;
    --stat-row-gap: 28px;
    --stat-source-gap: 0px;
    margin-top: var(--space-24);
  }

  .rework-stats .stat__value {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-display-sm-size);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: var(--t-display-sm-ls);
  }

  .rework-stats .stat__caption {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
  }

  .rework-stats .stat-row__item + .stat-row__item {
    box-shadow: inset 1px 0 var(--line);
  }

  .rework-stats__source {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    margin-top: -4px;
    font-size: 13px;
    line-height: 16px;
    color: var(--ink-muted);
  }

  @media (min-width: 900px) {
    .rework-band {
      padding-block: 144px 120px;
    }

    .rework-band__intro {
      margin-bottom: var(--space-32);
    }

    .rework-legend {
      flex-direction: row;
      justify-content: flex-end;
    }

    .rework-run {
      flex-direction: row;
      align-items: center;
    }

    .rework-run__ticket {
      padding-top: 1px;
    }

    .rework-lanes__axis {
      grid-template-columns: 240px repeat(8, minmax(0, 1fr));
      font-size: 12px;
      line-height: 14px;
    }

    .rework-lanes__axis > span:first-child {
      display: block;
    }

    .rework-lanes__axis > span:not(:first-child) {
      padding-left: 8px;
    }

    .rework-lane {
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr);
    }

    .rework-lane__track,
    .rework-lane--brief .rework-lane__track {
      height: 72px;
    }

    .rework-lane__track > * {
      left: var(--x, 0);
    }

    .lane-bar {
      width: var(--w, 0px);
    }

    /* On narrow D tracks (900 to about 1100) a pill near the end holds at the track edge, the
       rework bar stops 8px short of the Rebuilt pill (75), and the note starts 8px after the
       "Built once" pill (25% + 178), so nothing overlaps or overflows; at 1440 and 1920 each
       sits where the frame draws it. */
    .lane-pill {
      left: min(var(--x, 0px), 100% - var(--pw, 0px));
    }

    .lane-bar--rework {
      width: min(var(--w, 0px), 100% - var(--x, 0px) - 83px);
    }

    .rework-lane__track > picture {
      left: 1px;
    }

    .rework-lane__freed {
      top: 28px;
      left: max(532 / 1040 * 100%, 25% + 186px);
    }

    .rework-stats {
      --stat-pad-top: 39px;
      --stat-row-gap: 0px;
      margin-top: var(--space-32);
    }

    .rework-stats .stat__value {
      font-size: var(--t-display-md-size);
      letter-spacing: var(--t-display-md-ls);
    }

    .rework-stats__source {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-24);
      margin-top: 32px;
    }

    .rework-stats__source > .arrow-link {
      flex: none;
      white-space: nowrap;
    }
  }

  @media (min-width: 1680px) {
    .rework-band {
      padding-block: 173px 144px;
    }

    .rework-stats .stat__value {
      font-size: var(--t-display-lg-size);
      letter-spacing: var(--t-display-lg-ls);
    }

    .rework-lane__track > picture {
      left: 2px;
    }

    /* The W frame's start node is 22 x 16 (24 x 18 with its stroke) */
    .rework-lane__node {
      width: 24px;
    }
  }

  /* Between 900 and the D frame the heading scales with the viewport (56 at 1440) and the lede gives way */
  @media (min-width: 900px) {
    .rework-band__intro {
      --intro-heading-size: min(var(--t-h1-size), 3.9vw);
      --intro-lede-measure: min(420px, 29.2vw);
    }
  }
}