/* styles/sections/stack-diagram.css
 * Stack band (Product Leadership zxuk1, pNPXK, gyRZM): the intro (heading over a 640 lede), then
 * the stack diagram and its caption. D and W: five AI layers (64 tall, label 220 then vendor
 * chips 28 apart), a 12px gap, the grained fern Brief layer, a 12px gap, Systems of record; the
 * annotation column (240) holds the "Changes every year" bracket beside the AI layers and the
 * "Stays" bracket beside the Brief layer. Each bracket is three crops of its Pencil export: the top
 * cap (tick and 1.5 of stroke) and bottom cap at their own size, and a slice of the left stroke
 * stretched between them, so it draws exactly two ticks at any row height (narrow D widths wrap
 * the chips) with the export's 1.5px strokes unscaled (a 1.5px border width computes to 1px). The connectors
 * in the frames (QvvPX, SADoD) are empty 12px frames: the gaps.
 * M (pNPXK): one column in reading order, the notes ruled on the left (1.5px, ink and fern)
 * after the layers they describe, and each layer's chips as one middot-joined line. */
@layer sections {
  .stack-band {
    padding-block: 56px 88px;
  }

  .stack-band__intro {
    --intro-heading-lh: round(nearest, 1.05em, 1px);
    --intro-gap: var(--space-20);
    --intro-lede-pad: 0px;
    --intro-lede-size: 17px;
    --intro-lede-lh: round(nearest, 1.5em, 1px);
    margin-bottom: var(--space-40);
  }

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

  .stack-diagram p,
  .stack-diagram ul {
    margin: 0;
  }

  .stack-diagram__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }

  .stack-diagram__ai {
    padding: 0;
    list-style: none;
  }

  .stack-layer {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-block: 14px;
    box-shadow: inset 0 1px var(--line);
  }

  .stack-layer__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

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

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

  .stack-layer__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    padding: 0;
    list-style: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: -0.2px;
    color: var(--ink-2);
  }

  .stack-layer__chips-m {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    white-space: pre-wrap;
    color: var(--ink-2);
  }

  .stack-diagram__brief {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    margin-top: var(--space-24);
    padding: 18px;
    border-radius: var(--radius-md);
  }

  .stack-diagram__brief .stack-layer__label {
    gap: 4px;
  }

  .stack-diagram__brief .stack-layer__name {
    color: var(--white);
  }

  .stack-diagram__brief .stack-layer__desc {
    color: var(--white-70);
  }

  .stack-diagram__brief-line {
    font-size: 16px;
    line-height: 19px;
    color: var(--white-85);
  }

  .stack-diagram__systems {
    margin-top: var(--space-24);
    box-shadow: inset 0 -1px var(--line);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }

  .stack-diagram__systems .stack-layer {
    gap: 0;
    padding-block: 0;
  }

  .stack-note {
    display: flex;
    gap: var(--space-20);
    padding: 6px 0 6px 14px;
    box-shadow: inset 1.5px 0 var(--ink);
  }

  .stack-note__bracket {
    display: none;
  }

  .stack-note__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-top: 2px;
  }

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

  .stack-note--stays .stack-note__title {
    color: var(--fern);
  }

  .stack-note__body {
    font-size: 14px;
    line-height: 21px;
    color: var(--ink-muted);
  }

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

    .stack-band__intro {
      --intro-lede-size: 18px;
      margin-bottom: var(--space-64);
    }

    .stack-band__intro .section-intro__lede {
      max-width: 640px;
    }

    .stack-diagram__grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 240px;
      grid-template-rows: auto 12px auto 12px auto;
      grid-template-areas:
        "ai changes"
        ". ."
        "brief stays"
        ". ."
        "systems .";
      gap: 0 var(--space-20);
    }

    .stack-diagram__ai { grid-area: ai; }
    .stack-note--changes { grid-area: changes; }
    .stack-note--stays { grid-area: stays; }

    .stack-layer,
    .stack-diagram__systems .stack-layer {
      flex-direction: row;
      align-items: center;
      gap: 0;
      min-height: 64px;
      padding-block: 13px;
    }

    .stack-layer__label {
      flex: none;
      width: 220px;
    }

    /* --chip-w (inline) is the frame's whole-pixel text box for each chip */
    .stack-layer__chips > li {
      --chip-w: auto;
      min-width: var(--chip-w);
    }

    .stack-diagram__brief {
      grid-area: brief;
      flex-direction: row;
      align-items: center;
      gap: var(--space-24);
      height: 96px;
      margin-top: 0;
      padding: 0 24px;
    }

    .stack-diagram__brief .stack-layer__label {
      align-self: center;
    }

    .stack-diagram__systems {
      grid-area: systems;
      margin-top: 0;
    }

    .stack-note {
      align-items: stretch;
      padding: 0;
      box-shadow: none;
    }

    .stack-note__bracket {
      display: block;
      flex: none;
      width: 10px;
      background:
        url("/assets/figures/product-leadership/bracket-changes-top.svg") 0 0 / 10.75px 3px no-repeat,
        url("/assets/figures/product-leadership/bracket-changes-mid.svg") 0 3px / 10.75px calc(100% - 6px) no-repeat,
        url("/assets/figures/product-leadership/bracket-changes-bottom.svg") 0 100% / 10.75px 3px no-repeat;
    }

    .stack-note__bracket--stays {
      background:
        url("/assets/figures/product-leadership/bracket-stays-top.svg") 0 0 / 10.75px 3px no-repeat,
        url("/assets/figures/product-leadership/bracket-stays-mid.svg") 0 3px / 10.75px calc(100% - 6px) no-repeat,
        url("/assets/figures/product-leadership/bracket-stays-bottom.svg") 0 100% / 10.75px 3px no-repeat;
    }
  }

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

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