/* styles/sections/load-figures.css
 * Essay figures about the load on the product team (website.pen komiq, BRqWQ, DHIxx): the team
 * of 2,000 waffle, the pressure card, the inbox and the questions. Cells, the heap, swatches and
 * handwritten notes are Pencil exports in assets/figures/modern-pdlc/. Where an export draws past
 * its node (spilled cells, tilted cards), the box keeps the node's size and the image overflows,
 * as the frame draws it. */
@layer sections {
  /* ---- Team of 2,000 (Fig 2) ---- */
  .essay-team__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-28);
    padding: var(--space-40) 0;
    box-shadow: inset 0 1.5px var(--ink), inset 0 -1px var(--ink);
  }

  .essay-team__legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .prose .essay-team__group {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    column-gap: var(--space-14);
    row-gap: var(--space-6);
    font-size: 16px;
    line-height: 22px;
  }

  .essay-team__swatch {
    grid-row: 1 / 3;
    width: 27px;
    height: 27px;
    margin-top: var(--space-10);
    background: center / 100% 100% no-repeat;
  }

  .essay-team__group--eng .essay-team__swatch {
    background-image: url("/assets/figures/modern-pdlc/swatch-engineers.png");
  }

  .essay-team__group--product .essay-team__swatch {
    background-image: url("/assets/figures/modern-pdlc/swatch-product.png");
  }

  .essay-team__group--support .essay-team__swatch {
    width: 28px;
    height: 28px;
    margin: 9.5px 0 0 -0.5px;
    background-image: url("/assets/figures/modern-pdlc/swatch-supporting.png");
  }

  .essay-team__number {
    font-family: var(--font-display);
    font-size: var(--t-h2-size);
    font-weight: 600;
    line-height: var(--t-h2-lh);
    letter-spacing: var(--t-h2-ls);
    color: var(--ink);
  }

  .essay-team__label {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 22px;
    color: var(--ink-2);
  }

  .essay-team__cells img {
    width: 100%;
    height: auto;
  }

  /* ---- Pressure (Fig 3) ---- */
  .essay-pressure__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-20);
    padding: var(--space-24) var(--space-20);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: inset 0 0 0 1px var(--line);
  }

  .essay-pressure__sped,
  .essay-pressure__landed {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .essay-pressure__sped {
    gap: var(--space-14);
  }

  .prose .essay-pressure__head {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 13px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .prose .essay-pressure__block {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin: 0;
    padding: var(--space-20);
    border-radius: var(--radius-sm);
    background: var(--fern);
    font-size: 14px;
    line-height: normal;
  }

  .essay-pressure__num {
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 600;
    line-height: 1;
    color: color-mix(in srgb, var(--white) 50%, transparent);
  }

  .essay-pressure__name {
    font-family: var(--font-display);
    font-size: var(--t-h5-size);
    font-weight: 600;
    line-height: var(--t-h5-lh);
    letter-spacing: -0.2px;
    color: var(--white);
  }

  .essay-pressure__desc {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 17px;
    color: var(--white-80);
  }

  .essay-pressure__arrow {
    flex: none;
    width: 28px;
  }

  /* The down arrow for D's stacked card (below); M's arrow already points down */
  .essay-pressure__arrow--down {
    display: none;
  }

  /* The heap box keeps the node's 302 x 439; the export adds the cards' shadow bleed, so the
     image is wider than the box and sits back by the node's origin inside it (13, 2 on M;
     3, 1 on D; 0 on W; measured against the frames). On M it spans the card up to 480px,
     like the pile, from a 4x export. */
  .essay-pressure__heap {
    aspect-ratio: 302 / 439;
    width: 100%;
    max-width: 480px;
    min-height: 0;
  }

  .essay-pressure__heap img {
    width: calc(100% * 330.5 / 302);
    max-width: none;
    height: auto;
    margin: calc(-100% * 2 / 302) 0 0 calc(-100% * 13 / 302);
  }

  /* ---- Inbox (Fig 5) ---- */
  .essay-inbox__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    padding: var(--space-40) 0;
    box-shadow: inset 0 1.5px var(--ink), inset 0 -1px var(--ink);
  }

  .prose .essay-inbox__figure {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-10);
    max-width: 330px;
    margin: 0;
  }

  .essay-inbox__number {
    font-family: var(--font-display);
    font-size: var(--t-display-xl-size);
    font-weight: 600;
    line-height: var(--t-display-xl-lh);
    letter-spacing: var(--t-display-xl-ls);
    color: var(--orange);
  }

  .essay-inbox__label {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 22px;
    color: var(--ink-2);
  }

  /* The note keeps the frame's text box (31px on BRqWQ), not just the exported ink */
  .essay-inbox__note {
    min-height: 31px;
  }

  .essay-inbox__note img {
    width: 117.5px;
    height: auto;
    margin: 5px 0 0 1px;
  }

  /* The inbox box keeps the node's size; spilled cells fall past it, over the rule */
  .essay-inbox__cells {
    position: relative;
    z-index: 1;
    aspect-ratio: 342 / 164;
    width: 100%;
    min-height: 0;
  }

  .essay-inbox__cells img {
    width: calc(100% * 376 / 342);
    max-width: none;
    height: auto;
  }

  /* ---- Questions (Fig 6) ---- */
  .essay-questions__list {
    container-type: inline-size;
    margin: 0;
    padding: 0;
    gap: 0;
    list-style: none;
    box-shadow: inset 0 1.5px var(--ink), inset 0 -1px var(--ink);
  }

  .prose .essay-questions__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-14);
    /* Rows narrower than the 390 frame's 342 open room above the text for the note */
    padding: calc(18px + max(0px, 342px - 100cqi) * 0.35) 0 18px;
    font-size: 23px;
    line-height: 24px;
    box-shadow: inset 0 -1px var(--line);
  }

  .prose .essay-questions__item:first-child {
    box-shadow: inset 0 1px var(--line), inset 0 -1px var(--line);
  }

  .prose .essay-questions__item:last-child {
    box-shadow: none;
  }

  .essay-questions__num {
    flex: none;
    width: 22px;
    font-family: var(--font-display);
    font-size: var(--t-h4-size);
    font-weight: 600;
    line-height: 1;
    color: var(--ink-55);
  }

  .essay-questions__text {
    font-family: var(--font-display);
    font-size: var(--t-h4-size);
    font-weight: 600;
    line-height: 24px;
    letter-spacing: var(--t-h4-ls);
    color: var(--ink);
  }

  /* On rows wider than the 390 frame's 342 the notes move right with the row, clear of the text */
  .essay-questions__note {
    position: absolute;
    top: var(--note-top-m);
    left: min(var(--note-left-m) + (100% - 342px) / 2, 100% - var(--note-w-m));
    width: var(--note-w-m);
    pointer-events: none;
  }

  .essay-questions__note img {
    width: 100%;
    height: auto;
  }

  /* Each note sits where the frame drops it: M beside the row (pulled in on narrow rows), D and
     W in the cell's top, placed and sized as a share of the 256px cell so narrower cells keep
     the note clear of the next numeral */
  .essay-questions__item:nth-child(1) {
    --note-top-m: 8.9px;
    --note-left-m: 247.3px;
    --note-w-m: 48px;
    --note-top: 30.3px;
    --note-left: 33.87%;
    --note-w: 24.41%;
  }

  .essay-questions__item:nth-child(2) {
    --note-top-m: 5.4px;
    --note-left-m: 251px;
    --note-w-m: 67.5px;
    --note-top: 29.5px;
    --note-left: 43.48%;
    --note-w: 34.18%;
  }

  .essay-questions__item:nth-child(4) {
    --note-top-m: 11px;
    --note-left-m: 250px;
    --note-w-m: 48.5px;
    --note-top: 30.7px;
    --note-left: 46.72%;
    --note-w: 24.61%;
  }

  .essay-questions__item:nth-child(5) {
    --note-top-m: 3.5px;
    --note-left-m: 249.7px;
    --note-w-m: 56px;
    --note-top: 25.1px;
    --note-left: 58.32%;
    --note-w: 28.32%;
  }

  @media (min-width: 900px) {
    .essay-team__body {
      flex-direction: row;
      justify-content: space-between;
      gap: var(--space-40);
    }

    .essay-team__legend {
      /* 360 in the frame; Chrome sets the longest label 0.8px wider than Pencil */
      flex: 0 1 361px;
      justify-content: space-between;
    }

    .essay-team__swatch {
      margin-top: 20.8px;
    }

    .essay-team__group--support .essay-team__swatch {
      margin-top: 20.3px;
    }

    .essay-team__number {
      font-size: var(--t-h1-size);
      line-height: var(--t-h1-lh);
      letter-spacing: var(--t-h1-ls);
    }

    .essay-team__cells {
      flex: 0 1 815px;
      align-self: flex-start;
    }

    /* Build block, arrow and heap share a row (komiq, DHIxx) */
    .essay-pressure {
      container-type: inline-size;
    }

    .essay-pressure__card {
      flex-direction: row;
      align-items: center;
      gap: var(--space-32);
      padding: 36px var(--space-32);
    }

    /* Where the heap would drop below 560px (a card narrower than 300 + 28 + 560 and two 32
       gaps, plus its 64 of padding) the card stacks as BRqWQ draws it: Build, the down
       arrow, the heap. */
    @container (width < 1016px) {
      .essay-pressure__card {
        flex-direction: column;
        align-items: flex-start;
      }

      .prose .essay-pressure__sped {
        flex: none;
        width: 300px;
      }

      .prose .essay-pressure__landed {
        flex: none;
        width: 100%;
      }

      .essay-pressure__arrow {
        display: none;
      }

      .essay-pressure__arrow--down {
        display: block;
      }
    }

    .essay-pressure__sped {
      flex: 0 0 300px;
    }

    .essay-pressure__num {
      font-size: 32px;
    }

    .essay-pressure__name {
      font-size: 24px;
      line-height: normal;
      letter-spacing: -0.3px;
    }

    .essay-pressure__landed {
      flex: 1 0 560px;
      min-width: 0;
    }

    .essay-pressure__heap {
      max-width: 584px;
      aspect-ratio: 584 / 340;
    }

    .essay-pressure__heap img {
      width: calc(100% * 587.5 / 584);
      margin: calc(-100% / 584) 0 0 calc(-100% * 3 / 584);
    }

    .essay-inbox__body {
      flex-direction: row;
      align-items: center;
      gap: var(--space-56);
    }

    .prose .essay-inbox__figure {
      flex: 0 0 330px;
    }

    .essay-inbox__note img {
      width: 152.5px;
      margin-top: 7px;
    }

    .essay-inbox__cells {
      flex: 1 1 0;
      min-width: 0;
      aspect-ratio: 654 / 304;
    }

    .essay-inbox__cells img {
      width: calc(100% * 714.5 / 654);
    }

    /* Five cells in one row, as komiq and DHIxx draw them. Below a 1440 viewport the question
       type and the cell padding step down with the width so a question keeps to three lines. */
    .essay-questions__list {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .prose .essay-questions__item {
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0;
      height: 220px;
      padding: var(--space-24) clamp(12px, 1.667vw, var(--space-24)) 28px;
      box-shadow: inset 1px 0 var(--line);
    }

    .prose .essay-questions__item:first-child {
      padding-left: 0;
      box-shadow: none;
    }

    .essay-questions__num {
      width: auto;
      font-size: 32px;
      color: var(--ink-50);
    }

    .essay-questions__text {
      font-size: clamp(20px, 2.222vw, var(--t-h4-size));
      line-height: var(--t-h4-lh);
    }

    /* Narrow cells keep each note at least at its 390-frame size */
    .essay-questions__note {
      top: var(--note-top);
      left: var(--note-left);
      width: max(var(--note-w), var(--note-w-m));
    }
  }

  @media (min-width: 1680px) {
    /* DHIxx draws the notes at komiq's size and place in its wider cells (same Caveat 26, same
       offsets), so they do not scale with the cell here */
    .essay-questions__item:nth-child(1) {
      --note-left: 86.7px;
      --note-w: 62.5px;
    }

    .essay-questions__item:nth-child(2) {
      --note-left: 111.3px;
      --note-w: 87.5px;
    }

    .essay-questions__item:nth-child(4) {
      --note-left: 119.6px;
      --note-w: 63px;
    }

    .essay-questions__item:nth-child(5) {
      --note-left: 149.3px;
      --note-w: 72.5px;
    }

    .essay-team__legend {
      flex-basis: 480px;
    }

    .essay-team__number {
      font-size: var(--t-display-sm-size);
      line-height: var(--t-display-sm-lh);
      letter-spacing: var(--t-display-sm-ls);
    }

    .essay-team__cells {
      flex-basis: 1034px;
    }

    .essay-pressure__heap {
      max-width: none;
      aspect-ratio: 904 / 360;
    }

    .essay-pressure__heap img {
      width: 100%;
      margin: 0;
    }

    .prose .essay-inbox__figure {
      flex-basis: 360px;
      max-width: 360px;
    }

    .essay-inbox__cells {
      aspect-ratio: 944 / 304;
    }

    .essay-inbox__cells img {
      width: calc(100% * 976.5 / 944);
    }

    .prose .essay-questions__item {
      height: 260px;
    }
  }
}