/* styles/sections/decision-timeline.css
 * Alignment Tax band (Product Leadership cth8C, Abstf, jOaPk): grained fern, the split intro
 * with the "who" line over the lede, the decision timeline on a white card, its caption, then
 * the hung pull quote with an anonymous attribution.
 * D and W (.decision-timeline): a month axis (label column 120, nine equal months), "The team"
 * avatar groups per period (153, 153, 153 and 229 wide, as drawn at both widths; they give way
 * below the D frame), "What changed" event chips, and the decision log: a 3px fern rule from
 * the first node to the card edge with a node and a note per decision.
 * M (.decision-spine, mfzCv): the 390 frame turns the timeline vertical: a legend, then month
 * rows on a 3px spine from the Feb node to the Oct node, with each team row above the month it
 * starts in. Both end in the Brief Answer strip (shot-kit.css). */
@layer sections {
  .alignment-band {
    overflow-x: clip;
    padding-block: 88px;
  }

  .alignment-band__intro {
    --intro-heading-lh: round(nearest, 1.05em, 1px);
    --intro-lede-size: 17px;
    --intro-lede-color: var(--mist-2);
    --intro-lede-lh: round(nearest, 1.5em, 1px);
  }

  .alignment-band__intro .section-intro__lede p {
    margin: 0;
  }

  .alignment-band__intro .section-intro__lede .alignment-band__who {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    color: var(--white);
  }

  .alignment-band__figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    margin: 40px 0 0;
  }

  .timeline-card {
    --window-edge: transparent;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 16px 24px;
    font-family: var(--font-body);
  }

  .timeline-card p,
  .timeline-card ol,
  .timeline-card ul {
    margin: 0;
  }

  .team-avatar {
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    background: var(--white);
    font-size: 9px;
    font-weight: 600;
    line-height: 11px;
    color: var(--ink);
  }

  .event-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    background: var(--ink-6);
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    color: var(--ink);
    white-space: nowrap;
  }

  .event-chip::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink-40);
  }

  .decision-note {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    line-height: 16px;
    color: var(--ink);
    /* Short label: balanced, so it does not end on one word (BRI-7805 J14) */
    --frame-wrap-style: balance;
    text-wrap-style: balance;
  }

  .decision-note__who {
    font-weight: 700;
    line-height: 14px;
    color: var(--fern);
  }

  .decision-node {
    display: block;
    flex: none;
    width: 12px;
    height: 12px;
  }

  /* ---------- D and W: horizontal timeline ---------- */
  .decision-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .decision-timeline__row {
    display: grid;
    grid-template-columns: 120px repeat(9, minmax(0, 1fr));
    align-items: center;
  }

  .decision-timeline__row + .decision-timeline__row {
    box-shadow: inset 0 1px var(--line);
  }

  .decision-timeline__axis {
    height: 40px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 14px;
    color: var(--ink-muted);
  }

  .decision-timeline__label {
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    color: var(--ink-muted);
  }

  .decision-timeline__team {
    display: flex;
    height: 72px;
  }

  .decision-timeline__team .decision-timeline__label {
    flex: none;
    width: 120px;
  }

  .team-period {
    display: flex;
    flex: 0 1 153px;
    align-items: center;
    align-self: stretch;
    gap: 4px;
    padding: 0 10px;
  }

  .team-period:last-child {
    flex-basis: 229px;
  }

  .team-period + .team-period {
    box-shadow: inset 1px 0 var(--line);
  }

  .decision-timeline__changes {
    height: 56px;
  }

  /* A flex cell, so the chip centres in the 56 row (17 down) instead of sitting on a line box */
  .decision-timeline__changes .decision-timeline__cell {
    display: flex;
    align-items: center;
  }

  .decision-timeline__log {
    position: relative;
    align-items: start;
    height: 96px;
  }

  .decision-timeline__log .decision-timeline__label {
    align-self: center;
  }

  /* The decision log rule: from the first node to the card's content edge */
  .decision-timeline__log::before {
    content: "";
    position: absolute;
    top: 26.5px;
    left: calc(120px + 6px);
    right: 0;
    height: 3px;
    background: var(--fern);
  }

  .decision-timeline__log .decision-timeline__cell {
    position: relative;
    padding-top: 22px;
  }

  .decision-timeline__log .decision-note {
    margin-top: 10px;
  }

  /* ---------- M: vertical spine ---------- */
  .decision-spine__legend {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 40px;
    padding: 8px 0 12px;
    box-shadow: inset 0 -1px var(--line);
  }

  .decision-spine__legend .event-chip {
    padding-block: 3px;
  }

  .decision-spine__key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    color: var(--ink-muted);
  }

  .decision-spine__key-node {
    width: 10px;
    height: 10px;
  }

  .decision-spine__list {
    position: relative;
    padding: 0;
    list-style: none;
  }

  /* Spine: Feb node center to Oct node center (Oct row is 48 tall, node center 8 down) */
  .decision-spine__list::before {
    content: "";
    position: absolute;
    top: calc(46px + 8px);
    bottom: 40px;
    left: calc(34px + 10px + 4.5px);
    width: 3px;
    background: var(--fern);
  }

  .decision-spine__team > p {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 46px;
    padding: 10px 0 10px 66px;
    box-shadow: inset 0 1px var(--line);
  }

  .decision-spine__team-label {
    margin-right: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    color: var(--ink-muted);
  }

  .decision-spine__month {
    display: flex;
    gap: 10px;
    min-height: 28px;
  }

  .decision-spine__name {
    flex: none;
    width: 34px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 14px;
    color: var(--ink-muted);
  }

  .decision-spine__rail {
    position: relative;
    flex: none;
    width: 12px;
    padding-top: 2px;
  }

  .decision-spine__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 16px;
  }

  .timeline-card__answer {
    gap: 14px;
    padding: 18px;
    border-radius: var(--radius-md);
  }

  .timeline-card__answer .brief-answer__text {
    gap: 6px;
  }

  .timeline-card__answer .brief-answer__question {
    font-size: 13px;
    line-height: 16px;
  }

  .timeline-card__answer .brief-answer__reply {
    font-size: 16px;
    line-height: 22px;
  }

  /* ---------- Quote ---------- */
  .leader-quote {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    margin: 40px 0 0;
    padding-top: 24px;
    box-shadow: inset 0 1px var(--white-20);
  }

  .leader-quote__text {
    margin: 0;
    padding-right: 24px;
  }

  .leader-quote__text p {
    position: relative;
    margin: 0;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    line-height: round(nearest, 1.05em, 1px);
    letter-spacing: -0.42px;
    color: var(--white);
  }

  .leader-quote__mark {
    position: absolute;
    top: 0;
    left: -30px;
  }

  .leader-quote__by {
    font-size: 16px;
    line-height: 19px;
    color: var(--mist-2);
  }

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

    .alignment-band__figure,
    .leader-quote {
      margin-top: 64px;
    }

    .timeline-card {
      gap: var(--space-16);
      padding: 8px 24px 24px;
    }

    .leader-quote__text {
      padding-right: 240px;
    }

    .leader-quote__text p {
      font-size: 40px;
      letter-spacing: -0.8px;
    }
  }

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

    /* W draws the quote on one line in 1440 (1680 less its 240 pad); from 1680 to 1920 the
       quote keeps that 1440 measure, so it never leaves "era.”" alone */
    .leader-quote__text {
      max-width: 1440px;
      padding-right: 0;
    }
  }

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