/* ---------- 3.0.10 · the final review's fixes (his yes, 24 Oct); no word changes ---------- */
@media (min-width: 701px) {
  /* 2 · the lifecycles' outcome: the reviewer and the status take their own line under the outcome, so "Flagged · escalated to MLRO" never runs into it */
  main #workforce .wf-out .wf-o { grid-column: 2 / 4; }
  main #workforce .wf-out .wf-rev { grid-column: 2 / 4; grid-row: 2; justify-self: end; flex-direction: row; align-items: center; gap: 10px; }
  /* 3 · the review steps keep their progress bar's room when they are not current, so the list holds still as the steps advance */
  main #tour .tr-rail button .bar { display: block; visibility: hidden; }
  main #tour .tr-rail button[aria-current="step"] .bar { visibility: visible; }
  /* 4 · calibration: the cards' field labels in the label style of every other card (and of the phone's calibration) */
  main #calibration .cl-row > span:first-child, main #calibration .kv > span:first-child { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--sub); }
  main #calibration .cl-row { grid-template-columns: 124px minmax(0, 1fr); }
  /* 5 · the decision card's reviewer row lines up with the rows above it (it was taking 9 px of side padding from the pill style) */
  main #manifesto .mf-rec .who { padding-left: 0; padding-right: 0; }
  /* 8 · names: one colour per role, as on the phone: the risk word in the risk colour, the finding in ink, the escalation as the amber pill */
  main #example .lens.cm .r-word { color: var(--bad); }
  main #example .lens.cm .r-find { color: var(--ink); }
  main #example .lens .x2-tag.rev { color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px rgba(146,64,14,.2); }
  main #example .lens .x2-tag.rev.handoff { box-shadow: inset 0 0 0 1px rgba(146,64,14,.2), 0 0 0 4px rgba(146,64,14,.12); }
}
@media (min-width: 901px) and (max-width: 1280px) {
  /* 6 · the shift at laptop widths: the drawings' band sits on the text column, and the drawings stay inside it */
  main #shift .sh-band::before { margin-inline: 0; }
  main #shift .sh-panel .sh-art { margin-inline: 0; }
  main #shift .sh-band .sh-art.c2::before, main #shift .sh-band .sh-art.c3::before { left: -22px; }
}
@media (min-width: 901px) {
  /* C · the header returns on the way up, as on the phone, in light or dark glass by the chapter under it; at the top it is the header as it was */
  header.nav.d-pin { position: fixed; z-index: 60; transform: translateY(-100%); background: rgba(250,250,250,.86); -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px); box-shadow: 0 1px 0 var(--line); transition: transform .28s cubic-bezier(.3,.7,.2,1), background-color .35s ease; }
  header.nav.d-pin.d-show { transform: none; }
  header.nav.d-pin.d-dark { background: rgba(14,14,18,.72); box-shadow: 0 1px 0 rgba(250,250,250,.08); }
  header.nav.d-pin.d-dark .brand b { color: #FAFAFA; }
  header.nav.d-pin.d-dark .brand span, header.nav.d-pin.d-dark .nav-links a { color: #C9C9D1; }
  header.nav.d-pin.d-dark .btn.sm { background: #F4F4F6; color: #0A0A0A; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { header.nav.d-pin { transition: none; } }
@media (max-width: 700px) {
  /* 5 · the three article cards share one inset (the lead card's, so no spacing shrinks) */
  main > section#insights .art2 .art2-body { padding: 22px 26px; gap: 10px; }
}
/* ---------- end 3.0.10 ---------- */