/* styles/sections/role-document.css
 * Careers role body: the role title, the spec row and the numbered sections of one role, the
 * Apply now button and the fine print. Frames U9nezI / Y6lMi (1440), HDXXy / MIgHP (390),
 * U2hgH / eiKxx (1920). Rules are --line, inset (Pencil draws strokes inside the box); the
 * compensation rows take --line-2. Sections pad 32 over 48 under a top rule; paragraph
 * sections set their blocks 18 apart, list sections run their ruled items edge to edge.
 * Body copy 17 (M) and 18 (D, W) at 1.55; item text 17 beside a 210 lead (16/600) from D.
 * Between 900 and 1440 the lead and key columns keep the 1440 frame's 210:438 and 180:476
 * ratios, so a narrow body never squeezes the text column. */
@layer sections {
  .role__title {
    margin: 0 0 28px;
    font-size: 32px;
    font-weight: 600;
    line-height: round(nearest, 1.1em, 1px);
    letter-spacing: -0.01em;
    text-wrap: wrap;
  }

  .role-doc {
    display: flex;
    flex-direction: column;
  }

  /* Spec row: one layout that switches on the row's own width, not the viewport. Under 560px of
     row (390, and 900 to about 1110 where the column is narrow) it is the M frame's rows: key
     beside value, 12 above and below, a rule under each. From 560px (680 at 1440, 860 at 1920)
     it is the D frame's three equal cells: key over value, padding 14/16/16, a rule between cells
     and top and bottom. Every switch is a clamp() on a percentage of the row (margin, padding and
     flex-basis resolve against it): (100% - 560px) * 999 is huge past 560px and negative before.
     Inside a cell the key sits beside the value from 300px of cell content (the rows) and over
     it below that (the cells; the widest, W's first, is 271). Cells 2 and 3 always carry the left
     rule; as rows they sit 1px left of the row, which clips the rule away. */
  .role-spec {
    --spec-d: calc((100% - 560px) * 999);

    display: flex;
    flex-wrap: wrap;
    margin: 0;
    overflow: clip;
    box-shadow: inset 0 1px var(--line);
  }

  .role-spec__cell {
    display: flex;
    flex: 1 1 clamp(33.333%, -1 * var(--spec-d), 100%);
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-6) var(--space-16);
    min-width: 0;
    padding-block: clamp(12px, 12px + var(--spec-d), 14px) clamp(12px, 12px + var(--spec-d), 16px);
    padding-inline-end: clamp(0px, var(--spec-d), 16px);
    box-shadow: inset 0 -1px var(--line);
  }

  .role-spec__cell + .role-spec__cell {
    margin-inline-start: clamp(-1px, var(--spec-d), 0px);
    padding-inline-start: clamp(1px, 1px + var(--spec-d), 16px);
    box-shadow: inset 0 -1px var(--line), inset 1px 0 var(--line);
  }

  .role-spec__key,
  .role-rows__key {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--ink-55);
  }

  .role-spec__key {
    flex: 0 0 clamp(90px, (300px - 100%) * 999, 100%);
    line-height: round(nearest, 1.2em, 1px);
  }

  .role-spec__value {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-size: 16px;
    line-height: round(nearest, 1.2em, 1px);
    color: var(--ink);
  }

  /* Sections */
  .role-doc__section {
    display: flex;
    flex-direction: column;
    padding: 32px 0 48px;
    box-shadow: inset 0 1px var(--line);
  }

  .role-doc__section:focus {
    outline: none;
  }

  .role-doc__section--flow {
    gap: 18px;
  }

  .role-doc__heading {
    display: flex;
    align-items: baseline;
    gap: var(--space-20);
    margin: 0;
    padding-bottom: var(--space-8);
    font-size: 24px;
    font-weight: 600;
    line-height: round(nearest, 1.2em, 1px);
    letter-spacing: -0.28px;
    text-wrap: wrap;
  }

  .role-doc__num {
    flex: none;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: round(nearest, 2.6em, 1px);
    letter-spacing: 0.9px;
    color: var(--ink-55);
  }

  .role-doc__p,
  .role-doc__intro,
  .role-items--plain .role-item__rest,
  .role-cross__item,
  .role-steps__item {
    font-size: 17px;
    line-height: round(nearest, 1.55em, 1px);
    color: var(--ink-2);
  }

  .role-doc__p,
  .role-doc__intro {
    margin: 0;
  }

  .role-doc__p--after {
    margin-top: 18px;
  }

  .role-doc__intro {
    padding-bottom: 18px;
  }

  .role-doc strong {
    font-weight: 600;
    color: var(--ink);
  }

  /* Ruled items: a bold lead and the rest (stacked on M). */
  .role-items {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .role-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-block: 18px;
    box-shadow: inset 0 -1px var(--line);
  }

  .role-item__lead {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink);
  }

  .role-item__rest {
    font-size: 17px;
    line-height: round(nearest, 1.55em, 1px);
    color: var(--ink-2);
  }

  .role-doc__sub {
    margin: 0;
    padding: 28px 0 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 0;
    text-wrap: wrap;
  }

  .role-doc__sub--first {
    padding-top: 0;
  }

  /* × items */
  .role-cross {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .role-cross__item {
    display: flex;
    gap: var(--space-12);
    padding-block: 2px;
  }

  .role-cross__mark {
    flex: none;
    width: 9px;
    font-size: 16px;
    font-weight: 600;
    line-height: round(nearest, 1.6em, 1px);
    color: var(--fern);
  }

  /* Key and value rows (Compensation, Our stack) */
  .role-rows {
    margin: 0;
    box-shadow: inset 0 1px var(--line-2);
  }

  .role-rows__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-block: 14px;
    box-shadow: inset 0 -1px var(--line-2);
  }

  .role-rows__row:last-child {
    box-shadow: none;
  }

  .role-rows__key {
    line-height: round(nearest, 1.6em, 1px);
  }

  .role-rows__value {
    margin: 0;
    font-size: 17px;
    line-height: round(nearest, 1.55em, 1px);
    color: var(--ink);
  }

  /* Numbered steps (How to apply) */
  .role-steps {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .role-steps__item {
    display: flex;
    gap: var(--space-12);
  }

  .role-steps__num {
    flex: none;
    width: 20px;
    font-size: 17px;
    font-weight: 600;
    line-height: round(nearest, 1.6em, 1px);
    color: var(--fern);
  }

  /* Apply now and the fine print */
  .role-doc__apply {
    margin: 0;
    padding-bottom: 48px;
  }

  .role-doc__fine {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 24px;
    box-shadow: inset 0 1px var(--line);
  }

  .role-doc__fine p {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: round(nearest, 1.6em, 1px);
    color: var(--ink-55);
  }

  @media (min-width: 900px) {
    /* 48 at 1440; narrower, the title follows the viewport so the 680 column keeps its lines. */
    .role__title {
      font-size: min(48px, 3.3333vw);
      letter-spacing: -0.02em;
    }

    .role-doc__heading {
      font-size: 28px;
    }

    .role-doc__p,
    .role-doc__intro,
    .role-items--plain .role-item__rest,
    .role-cross__item,
    .role-steps__item {
      font-size: 18px;
    }

    .role-item {
      display: grid;
      grid-template-columns: minmax(0, 210fr) minmax(0, 438fr);
      gap: var(--space-32);
    }

    .role-items--plain .role-item {
      display: block;
    }

    .role-rows__row {
      display: grid;
      grid-template-columns: minmax(0, 180fr) minmax(0, 476fr);
      align-items: baseline;
      gap: var(--space-24);
    }
  }

  /* W keeps the 210 lead and 180 key of the 860 column, as cBNRL draws them. */
  @media (min-width: 1680px) {
    .role-item {
      grid-template-columns: 210px minmax(0, 1fr);
    }

    .role-rows__row {
      grid-template-columns: 180px minmax(0, 1fr);
    }
  }

  @media (forced-colors: active) {
    .role-spec,
    .role-rows {
      border-top: 1px solid;
    }

    .role-spec__cell,
    .role-item,
    .role-rows__row {
      border-bottom: 1px solid;
    }

    .role-spec__cell + .role-spec__cell {
      border-left: 1px solid;
    }

    .role-doc__section,
    .role-doc__fine {
      border-top: 1px solid;
    }
  }
}