/* styles/sections/lifecycle-figures.css
 * Essay figures about the lifecycle itself (website.pen komiq, BRqWQ, DHIxx): the seven-stage
 * step map, the AI transformation staircases and the categorization figure. Paths, bars, piles
 * and handwritten notes are Pencil exports in assets/figures/modern-pdlc/; the type around them
 * is live. Shared figure caption (artifacts.css) with the essay's label column on W. */
@layer sections {
  .essay-fig {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  /* The M frame boxes the caption label at 23px. artifacts.css (a later layer) sets its line
     to 13px below 900 (23px from 900, as D and W draw it), so the essay pads the other 10px. */
  @media (max-width: 899px) {
    .essay-fig__caption .figure-caption__label {
      padding-block: 5px;
    }
  }

  .essay-fig .essay-fig__caption {
    margin: 0;
  }

  /* ---- Step map (Fig 1). M: stages down the left, the idea's path beside them. D and W:
     stages across, an SDLC row, then the PDLC row with the exported path. ---- */
  /* The 390 frame draws the handwritten notes 12px past the 342 column; the region takes that
     12px from the gutter. Narrower than that, the map keeps its width and the region scrolls. */
  .essay-map__scroll {
    margin-right: -12px;
    padding-right: 12px;
  }

  .essay-map__grid {
    display: grid;
    min-width: 342px;
    grid-template-columns: minmax(150px, 1fr) 180px;
    grid-template-areas:
      "step pdlc"
      "stages path";
    column-gap: var(--space-12);
    box-shadow: inset 0 1.5px var(--ink), inset 0 -2px var(--fern);
  }

  .essay-map__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: normal;
    color: var(--ink-muted);
  }

  .essay-map__label strong {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.3px;
    color: var(--ink);
  }

  .essay-map__label--step {
    grid-area: step;
    padding-block: var(--space-12);
    box-shadow: inset 0 -1px var(--ink);
  }

  .essay-map__label--pdlc {
    grid-area: pdlc;
    padding-block: var(--space-12);
    box-shadow: inset 0 -1px var(--ink);
  }

  .essay-map__label--sdlc {
    display: none;
  }

  .essay-map__stages {
    grid-area: stages;
  }

  .prose .essay-map__stage {
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 61px;
    padding: var(--space-12) 0;
    font-size: 12px;
    line-height: normal;
    box-shadow: inset 0 1px var(--line);
  }

  .prose .essay-map__stage:first-child {
    box-shadow: none;
  }

  .prose .essay-map__stage.is-current {
    height: 163px;
  }

  .essay-map__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    column-gap: var(--space-8);
    row-gap: 3px;
  }

  .essay-map__num {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.3px;
    color: var(--ink-55);
  }

  .essay-map__name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.3px;
    color: var(--ink);
  }

  .essay-map__desc {
    grid-column: 1 / -1;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 14px;
    color: var(--ink-muted);
  }

  /* M: the block runs inline, "Build · QA · ...", under its own label line,
     "SDLC · where coding agents work" (the row label beside the grid on D) */
  .essay-map__sdlc {
    display: block;
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-sm);
    background: var(--fern);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 17px;
    color: var(--white);
  }

  .essay-map__sdlc-label {
    display: block;
    margin-bottom: var(--space-4);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--white-70);
  }

  .essay-map__path {
    grid-area: path;
    position: relative;
  }

  .essay-map__path img {
    width: 192px;
    max-width: none;
    height: auto;
  }

  /* ---- Staircases (AI transformation). Bars are the export; labels and details are live. ---- */
  /* The staircase follows its heading directly; the 20px spacer is below it only */
  .essay-stairs {
    gap: 0;
    margin-top: 0;
  }

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

  /* Stage labels: the li text is the title, the Roman numeral its own span. Titles not yet
     reached are ink 60% (4.6:1); the frame's ink 40% is 2.3:1 at 15px. */
  .essay-stairs__labels {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin: 0;
    padding: var(--space-14) 0 0;
    list-style: none;
    box-shadow: inset 0 1.5px var(--ink);
  }

  .prose .essay-stairs__label {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: -0.2px;
    color: var(--ink-60);
  }

  /* The frame's numeral ink 50% is 3.3:1; at 21px that needs 4.5:1, so M uses ink 60%.
     From D the numeral is 28px, large text, and takes the frame's ink 50%. */
  .essay-stairs__num {
    flex: none;
    width: 34px;
    font-size: 21px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--ink-60);
  }

  .prose .essay-stairs__label.is-current {
    color: var(--ink);
  }

  .is-current > .essay-stairs__num {
    color: var(--fern);
  }

  .essay-stairs__details {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    padding: 36px 0 28px;
    box-shadow: inset 0 -1px var(--line);
  }

  .essay-stairs__detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding-left: var(--space-16);
    box-shadow: inset 2px 0 var(--fern);
  }

  .prose .essay-stairs__head {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-h5-size);
    line-height: 21px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }

  .essay-stairs__head strong {
    font-weight: 600;
  }

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

  .essay-stairs .essay-fig__caption {
    padding-top: var(--space-16);
  }

  /* ---- Categorization (Fig 7) ---- */
  .essay-sort__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-32);
    padding: var(--space-32) 0;
    box-shadow: inset 0 1.5px var(--ink), inset 0 -1px var(--ink);
  }

  .essay-sort__scattered,
  .essay-sort__placed {
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
    width: 100%;
  }

  .prose .essay-sort__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);
  }

  /* On M the pile grows past the frame's 342 with the column, from a 4x export, up to 480 so
     its card text stays near the frame's size */
  .essay-sort__pile {
    max-width: 480px;
  }

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

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

  .essay-sort__stages {
    margin: 0;
    padding: 0;
    gap: 0;
    list-style: none;
    box-shadow: inset 0 2px var(--fern);
  }

  .prose .essay-sort__stage {
    display: grid;
    grid-template-columns: 24px auto;
    justify-content: start;
    align-items: center;
    gap: var(--space-8) var(--space-12);
    padding: var(--space-12) 0;
    font-size: 17px;
    line-height: normal;
    box-shadow: inset 0 -1px var(--line);
  }

  .essay-sort__num {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-55);
  }

  .essay-sort__name {
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 23.5px;
    font-weight: 600;
    letter-spacing: -0.19px;
    color: var(--ink);
  }

  /* Chips are inline blocks; the commas between them are text for screen readers and the
     .md sibling, set at font-size 0 so they take no room. A wrapped line starts flush. */
  .essay-sort__chips {
    grid-column: 1 / -1;
    margin-bottom: calc(-1 * var(--space-8));
    font-size: 0;
    line-height: 0;
  }

  .essay-sort__chip {
    display: inline-block;
    margin: 0 var(--space-8) var(--space-8) 0;
    padding: 7px 11px;
    border-radius: 3px;
    background: var(--mist);
    font-family: var(--font-body);
    font-size: 14px;
    font-style: normal;
    line-height: 17px;
    white-space: nowrap;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--fern-30);
  }

  /* The last chip carries no end margin, so a full row (Refinement on M) still fits */
  .essay-sort__chip:last-child {
    margin-inline-end: 0;
  }

  @media (min-width: 900px) {
    /* Step map: label column 152, seven equal stage columns, rows 112 / 212 / 300. Below a
       1440 viewport the stage type steps down toward 16/12px; under 1048px of figure the grid
       keeps that width and the region scrolls (.table-scroll, a keyboard tab stop). */
    .essay-map {
      --map-name: clamp(16px, 1.389vw, 20px);
      --map-desc: clamp(12px, 0.973vw, 14px);
      --map-num: clamp(26px, 2.223vw, 32px);
    }

    .essay-map__scroll {
      margin-right: 0;
      padding-right: 0;
    }

    .essay-map__grid {
      min-width: 1048px;
      grid-template-columns: minmax(0, 152fr) minmax(0, 1128fr);
      grid-template-rows: auto auto auto;
      grid-template-areas:
        "step stages"
        "sdlc stages"
        "pdlc path";
      column-gap: 0;
      box-shadow: inset 0 1.5px var(--ink);
    }

    .essay-map__label {
      justify-content: center;
      gap: var(--space-4);
      padding: 0 var(--space-16) 0 0;
      font-size: 13px;
      box-shadow: none;
    }

    /* Label text boxes are 28px tall on the frames: Sub sits 28 (PDLC) or 32 (SDLC) below */
    .essay-map__label strong {
      font-size: 20px;
      line-height: 28px;
    }

    .essay-map__label--step {
      height: 112px;
      padding-block: 0;
    }

    .essay-map__label--sdlc {
      display: flex;
      grid-area: sdlc;
      height: 212px;
      box-shadow: inset 0 1px var(--line);
    }

    .essay-map__label--pdlc {
      grid-area: pdlc;
      z-index: 1;
      justify-content: flex-start;
      gap: 0;
      padding: 112px 0 0;
      pointer-events: none;
    }

    .essay-map__label--pdlc span {
      max-width: 130px;
      line-height: 18px;
    }

    .essay-map__path {
      grid-column: 1 / -1;
      grid-row: 3;
      box-shadow: inset 0 2px var(--fern), inset 0 -2px var(--fern);
    }

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

    .essay-map__stages {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .prose .essay-map__stage {
      display: grid;
      grid-template-rows: 112px 212px;
      gap: 0;
      height: auto;
      padding: 0;
      box-shadow: inset 1px 0 var(--line);
    }

    /* Every column keeps its left rule on D, the first one too (it divides it from the labels) */
    .prose .essay-map__stage:first-child {
      box-shadow: inset 1px 0 var(--line);
    }

    .prose .essay-map__stage.is-current {
      height: auto;
    }

    /* The SDLC row: a paper cell under every stage but Build, which holds the block. The cell
       paints over the column, so it carries the column's left rule as well as its top rule. */
    .prose .essay-map__stage::after {
      content: "";
      grid-row: 2;
      background: var(--paper);
      box-shadow: inset 1px 0 var(--line), inset 0 1px var(--line);
    }

    .prose .essay-map__stage.is-current::after {
      grid-column: 1;
      background: none;
    }

    .essay-map__head {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: var(--space-6);
      padding: var(--space-16) var(--space-14);
    }

    .essay-map__num {
      font-size: var(--map-num);
      letter-spacing: 0;
      color: var(--ink-50);
    }

    .is-current .essay-map__num {
      color: var(--fern);
    }

    .essay-map__name {
      font-size: var(--map-name);
    }

    .essay-map__desc {
      font-size: var(--map-desc);
      line-height: normal;
    }

    /* Build's block sits 10px inside its SDLC cell: fern, r4, 14/14/16 padding, one item
       per line */
    .essay-map__sdlc {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      grid-row: 2;
      grid-column: 1;
      gap: 7px;
      margin: var(--space-10);
      padding: var(--space-14) var(--space-14) var(--space-16);
      font-size: 14px;
      /* The frame's item boxes are 17px tall: a 24px pitch with the 7px gap */
      line-height: 17px;
    }

    .essay-map__sdlc-label,
    .essay-map__sdlc-sep {
      display: none;
    }

    /* Staircase labels: seven columns, V spanning two */
    .essay-stairs__labels {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2fr) repeat(2, minmax(0, 1fr));
      gap: 0;
      min-height: 84px;
    }

    .prose .essay-stairs__label {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-6);
      padding-right: var(--space-14);
    }

    .essay-stairs__num {
      width: auto;
      font-size: 28px;
    }

    :not(.is-current) > .essay-stairs__num {
      color: var(--ink-50);
    }

    .prose .essay-stairs__head {
      line-height: 25px;
    }

    /* Each detail's rule ends with its own text, as komiq draws Stages III to V */
    .essay-stairs__details {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--space-40);
    }

    .essay-stairs__detail {
      flex: 1 1 0;
      min-width: 0;
    }

    /* Categorization: pile, arrow, placed list in a row */
    .essay-sort__body {
      flex-direction: row;
      align-items: center;
      gap: var(--space-40);
    }

    .essay-sort__pile {
      max-width: none;
    }

    /* The pile gives way first between frame widths, down to 260px */
    .essay-sort__scattered {
      flex: 0 1 420px;
      min-width: 260px;
    }

    /* The placed list keeps komiq's 545px (chip column at 206 plus Refinement's 339px of
       chips) until the pile is down to 260 (260 + 28 arrow + two 40 gaps = 368) */
    .essay-sort__placed {
      flex: 1 1 400px;
      min-width: min(545px, 100% - 368px);
      container-type: inline-size;
    }

    /* komiq: number, name and chips share the row, every row's chips at one column */
    .prose .essay-sort__stage {
      grid-template-columns: 24px 150px auto;
      gap: var(--space-8) var(--space-16);
      min-height: 56px;
      padding: var(--space-12) 0;
    }

    .essay-sort__num {
      font-size: 20px;
    }

    .essay-sort__name {
      font-size: 18px;
      letter-spacing: -0.2px;
    }

    .essay-sort__chips {
      grid-column: auto;
      white-space: nowrap;
    }

    /* Narrower than that (900 to about 1070), every row takes BRqWQ's layout: chips under
       the name */
    @container (width < 545px) {
      .prose .essay-sort__stage {
        grid-template-columns: 24px auto;
      }

      .essay-sort__chips {
        grid-column: 1 / -1;
        white-space: normal;
      }
    }
  }

  @media (min-width: 1680px) {
    /* The label column lines the text up with the essay column, 320px in (artifacts.css sets
       flex: none, so the width is the basis) */
    .essay-fig__caption .figure-caption__label {
      width: 312px;
    }

    .essay-map__grid {
      grid-template-columns: minmax(0, 152fr) minmax(0, 1528fr);
    }

    .essay-stairs__bars img {
      margin-top: -53px;
    }

    .prose .essay-stairs__head {
      font-size: 28px;
      line-height: 29px;
    }
  }
}