/* STPA in Depth. Uses the About STAMP parts, overview, rail and steps (the "as-" classes in about-stamp.css);
   its own rules are scoped to classes starting "ap-". */

/* One width for the parts (notes/STYLE-GUIDE.md, "Pages with a side rail"): every block in a part is the text's
   820px and starts at its left edge, so nothing sticks out past the text or sits off-center. Set once here, scoped to
   .ap-path (only this page has it), because other pages load this stylesheet for the ap- classes. Check with
   tools/check-alignment.js at 1440px. */
.ap-path .as-part > .container > *,
.ap-path .as-part .ap-walk > * { max-width: 820px; margin-left: 0; margin-right: 0; }

.ap-narrow { max-width: 820px; }
.ap-narrow h3 { margin: 40px 0 14px; }
.ap-h3-center { text-align: center; }
.as-part .ap-h3-center { margin-top: 72px; }
.ap-center-note { max-width: 720px; margin: 0 auto 32px; text-align: center; font-size: 17px; }

/* Part 1: what the failure-event model leaves out */
.ap-gaps { display: grid; gap: 10px; margin: 18px 0 24px; }
.ap-gaps li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; color: var(--navy-text); }
.ap-gaps .icon { flex: none; width: 18px; height: 18px; margin-top: .2em; color: #b45f3a; }



/* Part 2: jet bridge */
.ap-jet { display: flow-root; max-width: 1100px; margin-top: 56px; }
.ap-jet .ap-jet-fig { float: right; width: min(520px, 46%); margin: 4px 0 20px 48px; }
/* At the parts' 820px width: a bigger share for the crew loop and slimmer padding, so its labels stay legible (this page only) */
@media (min-width: 761px) { .ap-path .ap-jet .ap-jet-fig { width: 52%; margin-left: 32px; padding-left: 16px; padding-right: 16px; } }
@media (max-width: 760px) { .ap-jet .ap-jet-fig { float: none; width: auto; max-width: 520px; margin: 0 auto 24px; } }
.as-part .ap-jet h3 { margin-top: 0; }
.ap-jet .as-text > p { font-size: 16px; }
.ap-jet .ap-fixes-title { margin: 26px 0 10px; font-size: 18px; }
.ap-fixes { display: grid; gap: 10px; margin: 0; padding-left: 20px; list-style: disc; font-size: 16px; line-height: 1.55; }
.ap-fixes strong { color: var(--navy-text); }
.ap-questions { margin-bottom: 4px; }
/* Loss scenarios: groups that go around the control loop, colored like the diagram */
.ap-scn-groups { clear: right; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 4px 0 0; }
.ap-scn-groups.ap-scn-one { grid-template-columns: 1fr; max-width: 820px; }
.ap-scn-group { padding: 16px 20px 18px; border-radius: var(--radius); background: #fff; border: 1px solid #dfe7f1; }
.ap-scn-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-text); }
.ap-scn { display: grid; grid-template-columns: 100px 1fr; gap: 10px 10px; margin: 0; font-size: 15px; line-height: 1.5; }
.ap-scn dt { font-size: 13.5px; font-weight: 700; line-height: 1.35; padding-top: 2px; }
.ap-scn dd { margin: 0; }
.ap-k-ca { color: #2f6fb5; }
.ap-k-pm { color: #3c6b2c; }
.ap-k-fb { color: #9a4a10; }
.ap-k-cp { color: #475569; }
.ap-scn-end { margin-top: 14px; }
/* Lab example: a control loop with three views. Scrolling past the steps switches the view
   (site.js [data-scrolly]); the numbered buttons switch it too, with or without the script. */
.ap-lab { margin-top: 56px; }
.as-part .ap-lab h3 { margin-top: 0; }
.ap-scrolly { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 0 32px; align-items: start; margin-top: 20px; }
.ap-np-fig { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 16px); z-index: 2; margin: 0; padding-left: 16px; padding-right: 16px; }
.ap-steps { grid-column: 1; grid-row: 1; }
.ap-diagram-np { max-width: 560px; margin: 0 auto; }
.ap-np-fig .g-q, .ap-np-fig .g-s { display: none; }
#np-v-q:checked ~ svg .g-q, #np-v-s:checked ~ svg .g-s { display: inline; }
#np-v-s:checked ~ svg .g-ns { display: none; }
.ap-np-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0; font-size: 15px; font-weight: 600; color: var(--navy-text); text-align: center; }
.ap-np-hint .icon { flex: none; width: 18px; height: 18px; color: var(--steel); transform: scaleY(-1); } /* flipped so the finger points down at the buttons, as About STAMP does */
.ap-np-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; }
.ap-np-tabs label { display: inline-flex; align-items: center; padding: 7px 12px; border: 1.5px solid #9fb6d3; border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 600; color: var(--navy-text); cursor: pointer; }
.ap-np-tabs label:hover { border-color: var(--steel); }
#np-v-loop:checked ~ .ap-np-tabs [for="np-v-loop"], #np-v-q:checked ~ .ap-np-tabs [for="np-v-q"], #np-v-s:checked ~ .ap-np-tabs [for="np-v-s"] { background: var(--navy-text); border-color: var(--navy-text); color: #fff; }
#np-v-loop:focus-visible ~ .ap-np-tabs [for="np-v-loop"], #np-v-q:focus-visible ~ .ap-np-tabs [for="np-v-q"], #np-v-s:focus-visible ~ .ap-np-tabs [for="np-v-s"] { outline: 3px solid #7fa7d7; outline-offset: 2px; }
.ap-np-n { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; margin-right: 7px; border-radius: 50%; background: #e3ebf5; color: var(--navy-text); font-size: 12px; font-weight: 700; }
#np-v-loop:checked ~ .ap-np-tabs [for="np-v-loop"] .ap-np-n, #np-v-q:checked ~ .ap-np-tabs [for="np-v-q"] .ap-np-n, #np-v-s:checked ~ .ap-np-tabs [for="np-v-s"] .ap-np-n { background: #fff; }
.ap-np-short { display: none; }
.ap-step { padding: 8px 0 28px; }
.ap-step-h { display: flex; align-items: center; margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--navy-text); }
.ap-step-h .ap-np-n { width: 26px; height: 26px; margin-right: 10px; background: var(--navy-text); color: #fff; font-size: 14px; }
.ap-step p:not(.ap-step-h) { margin: 0; font-size: 16px; line-height: 1.65; }
.ap-np-qs { display: grid; gap: 8px; margin: 0; padding-left: 22px; list-style: decimal; font-size: 16px; line-height: 1.55; }
.ap-np-qs li::marker { font-weight: 700; color: var(--navy-text); }
/* With the script: each step gets room, and the step being read is the bright one. */
.is-scrolly .ap-step { display: flex; flex-direction: column; justify-content: center; min-height: 56vh; padding: 0; opacity: .35; transition: opacity .3s; }
.is-scrolly .ap-step.is-active { opacity: 1; }
.is-scrolly .ap-steps { padding-bottom: 12vh; }
.ap-lab .ap-scn-one { margin-top: 8px; }
.ap-lab .ap-fixes-title { margin: 28px 0 10px; font-size: 18px; }
.ap-scn-group .ap-scn-head { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--navy-text); }
@media (max-width: 899px) {
  .ap-scrolly { grid-template-columns: minmax(0, 1fr); }
  .ap-np-fig { grid-column: 1; top: calc(var(--header-h) + 45px); padding: 10px 12px 12px; box-shadow: 0 6px 16px rgba(20, 32, 56, .12); }
  .ap-np-fig .as-csm-title, .ap-np-hint { display: none; }
  .ap-steps { grid-row: 2; }
  .ap-np-tabs { gap: 6px; margin-top: 8px; flex-wrap: nowrap; }
  .ap-np-tabs label { padding: 5px 10px; font-size: 13px; }
  .ap-np-long { display: none; }
  .ap-np-short { display: inline; }
  .ap-np-n { width: 18px; height: 18px; margin-right: 5px; font-size: 11px; }
  .is-scrolly .ap-step { min-height: 52vh; }
  .is-scrolly .ap-steps { padding: 12px 0 18vh; }
}
@media (max-width: 360px) {
  .ap-np-fig { padding: 8px 8px 10px; }
  .ap-np-tabs { gap: 4px; }
  .ap-np-tabs label { padding: 4px 8px; font-size: 12px; }
  .ap-np-n { width: 16px; height: 16px; margin-right: 4px; font-size: 10px; }
}
.ap-compare { margin-top: 20px; }
.ap-compare p { margin: 4px 0 0; font-size: 16px; }
.ap-compare .ap-compare-label { margin: 0 0 2px; font-weight: 700; color: var(--navy-text); }
@media (max-width: 900px) { .ap-scn-groups { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ap-scn { grid-template-columns: 1fr; gap: 2px; } .ap-scn dd { margin-bottom: 10px; } }
.ap-lab > p:last-child { margin-top: 20px; }
.ap-loss-steps li::marker { font-weight: 700; color: var(--navy-text); }
.ap-diagram-jet { max-width: 460px; margin: 0 auto; }

.ap-views { max-width: 960px; margin: 0 auto; gap: 20px; }
.ap-view { padding: 26px 28px 22px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.ap-view-label { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ap-view h4 { margin: 14px 0 6px; font-size: 15px; font-weight: 600; }
.ap-view ul { display: grid; gap: 4px; padding-left: 18px; list-style: disc; font-size: 15px; }
.ap-view-foot { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--navy-text); }
.ap-view-old { border-top: 6px solid #9aa4b2; }
.ap-view-old .ap-view-label { color: #6b7686; }
.ap-view-new { border-top: 6px solid var(--steel); }
.ap-view-new .ap-view-label { color: var(--steel-text); }

/* Which Fixes Work Best: text, then the ranking as a funnel centered under the text, then the pull quote (as on CAST in Depth) */
.ap-precedence { margin-top: 72px; }
.as-part .ap-precedence h3 { margin: 0 0 14px; }
.ap-precedence-text p { font-size: 16px; }
.ap-rank-fig { margin: 24px 0 0; }
.ap-rank-fig figcaption { margin-top: 12px; font-size: 14px; text-align: center; color: var(--text); }
.ap-rank { display: grid; gap: 8px; max-width: 640px; margin: 0 auto; }
.ap-rank li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 10px; color: #fff; font-size: 16px; font-weight: 600; }
.ap-rank li:nth-child(1) { background: #1a3a66; }
.ap-rank li:nth-child(2) { background: #2a5891; margin: 0 3%; }
.ap-rank li:nth-child(3) { background: #3f74b4; margin: 0 6%; }
.ap-rank li:nth-child(4) { background: #7d9fc9; margin: 0 9%; color: var(--navy-text); }
.ap-rank li:nth-child(5) { background: #b8c9de; margin: 0 12%; color: var(--navy-text); }
.ap-rank-letter { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgb(0 0 0 / 16%); font-size: 13px; }
.ap-rank li:nth-child(n+4) .ap-rank-letter { background: rgb(255 255 255 / 40%); }
.ap-rank-text { flex: 1 1 160px; }
.ap-rank-tag { margin-left: auto; background: #fff; color: var(--navy-text); }
.ap-rank-ends.pull-quote { margin: 28px 0 0; }
.ap-rank-ends.pull-quote p { margin: 0; font-size: 21px; line-height: 1.3; }
.ap-rank-ends.pull-quote p + p { margin-top: 10px; }
.ap-rank-ends.pull-quote strong { color: var(--steel-text); }
@media (max-width: 760px) { .ap-rank-ends.pull-quote p { font-size: 19px; } }

/* Part 2: three views of the winter takeoff */
.ap-takeoff-intro { margin-top: 48px; }
.ap-views3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: 28px 0 0; }
.ap-view .ap-model { margin: 10px 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ap-model-svg { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; }
/* At the parts' 820px width the three view cards are about 260px wide: slimmer side padding, and the model
   drawings run into it, so their labels stay legible (this page only). */
.ap-path .ap-views3 .ap-view { padding-left: 18px; padding-right: 18px; }
.ap-path .ap-views3 .ap-model-svg { width: calc(100% + 12px); max-width: none; margin: 0 -6px; }
.ap-views3 .ap-view-label + h4 { margin-top: 0; }
.ap-views3 .ap-view ul { gap: 8px; line-height: 1.5; }
.ap-views3 .ap-view strong { color: var(--navy-text); }
.ap-ca { text-decoration: underline; text-decoration-color: #2f6fb5; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ap-view > p:not(.ap-view-label):not(.ap-view-foot) { margin: 0; font-size: 15px; line-height: 1.55; }
.ap-views3 .ap-view-foot { font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.45; }
.ap-views3 .ap-view-new { border-top-color: var(--steel); background: #fff; }

/* Part 3: the four conditions around a control loop */
.ap-conditions { display: grid; grid-template-columns: 1fr minmax(0, 320px) 1fr; grid-template-areas: "goal loop model" "action loop obs"; gap: 20px 24px; max-width: 1100px; margin: 40px auto; align-items: center; }
.ap-diagram-cond { grid-area: loop; }
.ap-conditions { position: relative; }
.ap-conditions .leader-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ap-conditions .leader-layer path { fill: none; stroke: #8fa8c8; stroke-width: 2; }
.ap-conditions .leader-layer circle { fill: var(--steel); stroke: #fff; stroke-width: 2; }
.ap-cond-where { margin: 10px 0 0 !important; font-size: 13px !important; font-weight: 600; color: var(--steel-text); }
.ap-conditions.has-leaders .ap-cond-where { display: none; }
.ap-cond-goal { grid-area: goal; }
.ap-cond-model { grid-area: model; }
.ap-cond-action { grid-area: action; }
.ap-cond-obs { grid-area: obs; }
.ap-cond { padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.ap-cond .icon-tile { width: 44px; height: 44px; border-radius: 10px; background: var(--steel-soft); color: var(--steel); font-size: 22px; }
.as-part .ap-cond h3 { margin: 14px 0 6px; font-family: var(--font-body); font-size: 18px; font-weight: 600; letter-spacing: 0; }
.ap-cond p { margin: 0; font-size: 15px; line-height: 1.55; }

/* Part 4: each step beside what it produces */
.ap-s4 { display: grid; gap: 16px; max-width: 1040px; margin: 0 auto; }
.ap-s4 li { display: grid; grid-template-columns: 48px 1fr 1fr; gap: 16px; align-items: stretch; }
.ap-s4-num { display: grid; place-items: center; align-self: center; width: 48px; height: 48px; border-radius: 50%; background: var(--steel-text); color: #fff; font-weight: 700; }
.ap-s4-do, .ap-s4-get { padding: 20px 22px 18px; border-radius: 12px; }
.ap-s4-do { background: #fff; box-shadow: var(--shadow); }
.ap-s4-get { position: relative; border: 1px solid #f0c39c; background: #fffaf5; }
.ap-s4-get::before { content: ""; position: absolute; top: 50%; left: -12px; width: 0; height: 0; margin-top: -8px; border: 8px solid transparent; border-left-color: #de7a22; }
.ap-s4-label { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-text); }
.ap-s4-get .ap-s4-label, .ap-produces .ap-s4-label, .ap-lhc-get .ap-s4-label { color: #b35714; }
.as-part .ap-s4-do h3 { margin: 0 0 8px; font-family: var(--font-body); font-size: 18px; font-weight: 600; letter-spacing: 0; }
.ap-s4 h4 { margin-bottom: 8px; font-size: 17px; font-weight: 600; }
.ap-s4 p:not(.ap-s4-label) { margin: 0; font-size: 15px; line-height: 1.55; }

/* Worked example: what each step produces */
.ap-lhc-get { border-color: #f0c39c; background: #fffaf5; }
.ap-produces { max-width: 1040px; margin-top: 20px; padding: 20px 24px 18px; border: 1px solid #f0c39c; border-radius: 12px; background: #fffaf5; }
.ap-produces h4 { margin-bottom: 10px; font-size: 17px; font-weight: 600; }
.ap-produces ul { display: grid; gap: 6px; padding-left: 18px; list-style: disc; font-size: 15px; line-height: 1.5; color: var(--navy-text); }
.ap-produces .ap-plain { padding-left: 0; list-style: none; }
.ap-produces > p:not(.ap-s4-label) { margin: 10px 0 0; font-size: 15px; }
.ap-produces-wide { margin: 0 0 56px; }
.ap-solutions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
.ap-solution { padding: 14px 16px; border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.ap-solution .tag { margin-bottom: 8px; }
.ap-solution p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--navy-text); }


/* Part 5: the worked example, step by step */
.ap-walk { margin-top: 56px; }
.ap-walk-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.ap-walk-num { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--steel-text); color: #fff; font-weight: 700; }
.as-part .ap-walk-head h3 { margin: 0; font-size: 26px; }
.ap-lhc { grid-template-columns: repeat(3, 1fr); max-width: none; gap: 16px; }
.ap-lhc-col { padding: 22px 22px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-tint); }
.ap-lhc-col h4 { margin-bottom: 12px; font-size: 16px; font-weight: 600; }
.ap-lhc-col ul { display: grid; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--navy-text); }
.ap-id { display: inline-block; min-width: 40px; margin-right: 8px; padding: 1px 7px; border-radius: 6px; background: var(--navy-bg); color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.ap-ref { white-space: nowrap; font-size: 13px; color: var(--text); }
.ap-walk-split { align-items: start; }
.ap-walk-split .as-text > p { font-size: 16px; }
.ap-uca-wrap { margin-top: 8px; }
.ap-uca th { font-size: 14px; }
.ap-uca td { font-size: 14.5px; }
.ap-uca td:first-child { width: 14%; }
.ap-uca .ap-uca-hit, .ap-uca tbody tr:nth-child(even) td.ap-uca-hit { background: #fdf0e6; box-shadow: inset 0 0 0 2px #e7b48c; }
.ap-uca-hit .ap-id { display: block; width: max-content; margin-bottom: 6px; background: #b35714; }
.ap-walk-next { margin: 16px 0 0; font-size: 16px; font-weight: 600; color: var(--navy-text); }




/* Part 5: the worked example's control structure and Step 4 scenario */
.ap-walk-stack .as-text > p { font-size: 16px; }
.ap-cs-fig { max-width: 820px; margin: 20px 0 0; }
.ap-diagram-cs { max-width: 560px; margin: 0 auto; }
.ap-real { max-width: 1040px; margin-top: 20px; padding: 18px 22px; border-left: 4px solid var(--navy-btn); border-radius: 0 10px 10px 0; background: #f2f5f9; }
.ap-real h4 { margin-bottom: 6px; font-size: 17px; font-weight: 600; }
.ap-real p { margin: 0; font-size: 15.5px; color: var(--navy-text); }
.ap-scn-fig { max-width: 820px; margin: 8px 0 0; }
.ap-diagram-scn { max-width: 680px; margin: 0 auto; }
.ap-scenario { max-width: 820px; margin: 20px 0 0; padding: 16px 20px; border-left: 4px solid #2f6fb5; border-radius: 0 10px 10px 0; background: #f2f7fc; font-size: 16px; color: var(--navy-text); }
.ap-scenario strong { color: var(--navy-text); }
/* Phones get the scenario as a numbered list instead of the diagram, whose text would be too small */
.ap-scn-steps, .ap-scn-actual { display: none; }
.ap-scn-steps { counter-reset: scn; display: none; gap: 10px; text-align: left; }
.ap-scn-steps li { position: relative; padding: 10px 12px 10px 44px; border-radius: 8px; background: #e1f0d8; font-size: 15px; line-height: 1.45; color: var(--navy-text); counter-increment: scn; }
.ap-scn-steps li::before { content: counter(scn); position: absolute; left: 12px; top: 10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy-btn); color: #fff; font-size: 12px; font-weight: 700; }
.ap-scn-steps strong { display: block; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #3c6b2c; }
.ap-scn-steps .ap-scn-uca { background: #fdecea; }
.ap-scn-steps .ap-scn-uca strong { color: #b42318; }
.ap-scn-steps .ap-scn-fb { background: #fbe6d6; }
.ap-scn-steps .ap-scn-fb strong { color: #b35714; }
.ap-scn-actual { margin: 12px 0 0; font-weight: 700; color: #b42318; }
.ap-uca .ap-uca-na { color: #56687f; font-style: italic; }

/* Part 6: more scenarios for the same unsafe control action, one question each */
.ap-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0 24px; }
.ap-more-card { padding: 20px 22px 18px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.ap-more-card p { margin: 0; font-size: 15px; line-height: 1.55; }
.ap-more-done { background: #eef2f6; box-shadow: none; border: 1px solid #dde4ec; }
.ap-more-done p:not(.ap-more-q):not(.ap-more-seen) { color: #5c6b7f; }
.ap-more-card .ap-more-seen { margin-top: 12px; padding-top: 10px; border-top: 1px solid #d3dbe5; font-weight: 700; color: var(--navy-text); }
.ap-more-q { margin: 12px 0 6px !important; font-size: 16px !important; font-weight: 600; color: var(--navy-text); }
.ap-loop-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ap-tag-fb { background: #fbe6d6; color: #9a4a10; }
.ap-tag-dm { background: #e1f0d8; color: #3c6b2c; }
.ap-tag-cp { background: #e3e7ec; color: #3d4f6b; }
.ap-tag-ctrl { background: #e8eef6; color: #2a65a8; } /* 5.1:1; --steel-text is 4.4:1 on this fill */
.ap-tag-new { background: #ece8f5; color: #5b4a8a; }
.ap-more-card { display: flex; flex-direction: column; align-items: flex-start; }
.ap-more-card > p { align-self: stretch; }
.ap-more-card .ap-nhtsa { display: block; margin: auto 0 0; margin-top: auto !important; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--text); }
.ap-nhtsa::before { content: "✓ "; color: #3c8b5a; }
.ap-more-new { border: 1px dashed #9fb3cc; box-shadow: none; background: #fbfcfe; }

.ap-elsewhere { max-width: 820px; margin-top: 32px; padding: 22px 24px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.as-part .ap-elsewhere h3 { margin: 0 0 8px; font-size: 22px; }
.ap-elsewhere p { margin: 0 0 8px; font-size: 15px; }
.ap-elsewhere ul { display: grid; gap: 6px; padding-left: 18px; list-style: disc; font-size: 15px; line-height: 1.55; color: var(--navy-text); }

/* Part 7 */
.ap-blind { max-width: 820px; margin: 8px 0 24px; gap: 16px; }
.ap-blind-card { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-tint); }
.ap-blind-card .icon-tile { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--steel-soft); color: var(--steel); font-size: 20px; }
.ap-blind-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--navy-text); }
.ap-blind-stpa { border-color: #b9d0ea; background: #eaf2fb; }
.ap-blind-stpa .icon-tile { background: var(--steel); color: #fff; }

@media (max-width: 1100px) {
  .ap-conditions { grid-template-columns: 1fr 1fr; grid-template-areas: "loop loop" "goal model" "action obs"; }
  .ap-diagram-cond { max-width: 320px; margin: 0 auto; }
  .ap-views3 { grid-template-columns: 1fr; max-width: 560px; }
  .ap-more { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .ap-more { grid-template-columns: 1fr; }
  .ap-diagram-scn { display: none; }
  .ap-scn-steps { display: grid; }
  .ap-scn-actual { display: block; }
  .ap-lhc { grid-template-columns: 1fr; }
  .ap-conditions { grid-template-columns: 1fr; grid-template-areas: "loop" "goal" "model" "action" "obs"; }
  .ap-rank li { margin: 0 !important; font-size: 15px; }
  .ap-s4 li { grid-template-columns: 1fr; gap: 10px; }
  .ap-s4-num { justify-self: start; width: 40px; height: 40px; }
  .ap-s4-get::before { top: -12px; left: 24px; margin: 0; border-left-color: transparent; border-bottom-color: #de7a22; }
  .as-part .ap-walk-head h3 { font-size: 22px; }
  .ap-view { padding: 22px 20px 18px; }
}
/* Part 3: its heading starts at the text's left edge and is the text's width, like every other part (style guide, pages with a side rail) */
.ap-head-left { max-width: 820px; margin-left: 0; text-align: left; }
.ap-head-left .as-lede { max-width: none; margin-left: 0; margin-right: 0; }
/* Part 4: the shifter photo beside the by-wire opening, inside the 820px text column like every other part */
.ap-sbw { display: flow-root; }
.ap-sbw-fig { float: right; width: min(280px, 34%); margin: 4px 0 16px 40px; }
.ap-sbw-fig img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.ap-sbw-fig figcaption { margin-top: 10px; font-size: 14px; line-height: 1.45; text-align: center; color: var(--text); }
@media (max-width: 760px) { .ap-sbw-fig { float: none; width: auto; max-width: 320px; margin: 0 auto 24px; } }
/* Part 4, Step 1: losses, hazards and constraints line up in rows across the three cards */
.ap-lhc-rows { grid-template-rows: auto auto auto; row-gap: 0; }
.ap-lhc-rows .ap-lhc-col { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; }
.ap-lhc-rows .ap-lhc-head { align-self: end; }
.ap-lhc-rows .ap-lhc-head h4 { margin-bottom: 0; }
.ap-lhc-rows .ap-lhc-head .ap-s4-label { margin-bottom: 4px; }
.ap-lhc-rows .ap-lhc-col ul { display: contents; }
.ap-lhc-rows li { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--navy-text); }
.ap-lhc-rows .ap-id { min-width: 0; margin: 2px 0 0; text-align: center; }
@media (max-width: 760px) {
  .ap-lhc-rows { grid-template-rows: none; row-gap: 16px; }
  .ap-lhc-rows .ap-lhc-col { display: block; grid-row: auto; }
  .ap-lhc-rows .ap-lhc-col ul { display: grid; gap: 10px; margin-top: 12px; }
}
.ap-lhc-rows.ap-lhc-two { grid-template-columns: repeat(2, 1fr); }
.ap-produces .ap-sc-list { padding-left: 0; list-style: none; gap: 8px; }
.ap-sc-list li { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: start; }
.ap-sc-list .ap-id { min-width: 0; margin: 2px 0 0; text-align: center; }
@media (max-width: 760px) { .ap-lhc-rows.ap-lhc-two { grid-template-columns: 1fr; } }
.ap-real p + p { margin-top: 10px; }
.ap-callout { margin: 24px 0; padding: 28px 30px; }
@media (max-width: 760px) { .ap-callout { padding: 22px 20px; } }
/* Part 6: more evidence from other industries */
.ap-evidence { margin-top: 28px; padding: 24px 28px 20px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.as-part .ap-evidence h3 { margin: 0 0 8px; }
.ap-evidence > p { margin: 0; font-size: 16px; }
.ap-evidence ul { display: grid; gap: 8px; margin: 12px 0 14px; padding-left: 20px; list-style: disc; font-size: 15.5px; line-height: 1.55; color: var(--navy-text); }
.ap-evidence strong { color: var(--navy-text); }
@media (max-width: 760px) { .ap-evidence { padding: 20px 18px 16px; } }
.ap-evidence li > a { color: var(--steel-text); }
.ap-evidence li > a strong { color: inherit; }


/* ---- Dark mode, generated by tools/darkmode.py when the site is built. Don't edit this part in site/; change the light rule in src/, or add a hand-written dark rule. ---- */
@media (prefers-color-scheme: dark) {
  .ap-gaps .icon { color: #f8a582; }
  .ap-scn-group { background-color: #111620; border-color: #333945; }
  .ap-k-ca { color: #8dc5ff; }
  .ap-k-pm { color: #a3d793; }
  .ap-k-fb { color: #feaf82; }
  .ap-k-cp { color: #bbcbe3; }
  .ap-np-hint .icon { color: #7ebaf9; }
  .ap-np-tabs label { border-color: #3e4d5f; background-color: #111620; }
  .ap-np-tabs label:hover { border-color: #4892dc; }
  #np-v-loop:checked ~ .ap-np-tabs [for="np-v-loop"], #np-v-q:checked ~ .ap-np-tabs [for="np-v-q"], #np-v-s:checked ~ .ap-np-tabs [for="np-v-s"] { background-color: #142038; border-color: #95a5c4; color: #ffffff; }
  #np-v-loop:focus-visible ~ .ap-np-tabs [for="np-v-loop"], #np-v-q:focus-visible ~ .ap-np-tabs [for="np-v-q"], #np-v-s:focus-visible ~ .ap-np-tabs [for="np-v-s"] { outline-color: #3e536d; }
  .ap-np-n { background-color: #202631; }
  #np-v-loop:checked ~ .ap-np-tabs [for="np-v-loop"] .ap-np-n, #np-v-q:checked ~ .ap-np-tabs [for="np-v-q"] .ap-np-n, #np-v-s:checked ~ .ap-np-tabs [for="np-v-s"] .ap-np-n { background-color: #111620; }
  .ap-step-h .ap-np-n { background-color: #142038; color: #ffffff; }
  @media (max-width: 899px) {
    .ap-np-fig { box-shadow: 0 6px 16px rgb(0 0 0 / 0.46); }
  }
  .ap-view { background-color: #111620; }
  .ap-view-old { border-top-color: #4c535c; }
  .ap-view-old .ap-view-label { color: #b3bfd0; }
  .ap-view-new { border-top-color: #4892dc; }
  .ap-rank li { color: #ffffff; }
  .ap-rank li:nth-child(1) { background-color: #1a3a66; }
  .ap-rank li:nth-child(2) { background-color: #2a5891; }
  .ap-rank li:nth-child(3) { background-color: #3f74b4; }
  .ap-rank li:nth-child(4) { background-color: #384f6a; }
  .ap-rank li:nth-child(5) { background-color: #3b4552; }
  .ap-rank-letter { background-color: rgb(0 0 0 / 16%); }
  .ap-rank li:nth-child(n+4) .ap-rank-letter { background-color: rgb(17 22 32 / 40%); }
  .ap-rank-tag { background-color: #111620; }
  .ap-ca { text-decoration-color: #8dc5ff; }
  .ap-views3 .ap-view-new { border-top-color: #4892dc; background-color: #111620; }
  .ap-cond { background-color: #111620; }
  .ap-cond .icon-tile { color: #7ebaf9; }
  .ap-s4-num { background-color: #2f6fb5; color: #ffffff; }
  .ap-s4-do { background-color: #111620; }
  .ap-s4-get { border-color: #553c25; background-color: #141923; }
  .ap-s4-get .ap-s4-label, .ap-produces .ap-s4-label, .ap-lhc-get .ap-s4-label { color: #f7a97d; }
  .ap-lhc-get { border-color: #553c25; background-color: #141923; }
  .ap-produces { border-color: #553c25; background-color: #141923; }
  .ap-solution { background-color: #111620; }
  .ap-walk-num { background-color: #2f6fb5; color: #ffffff; }
  .ap-id { color: #ffffff; }
  .ap-uca .ap-uca-hit, .ap-uca tbody tr:nth-child(even) td.ap-uca-hit { background-color: #1a202a; box-shadow: inset 0 0 0 2px #000000; }
  .ap-uca-hit .ap-id { background-color: #b35714; }
  .ap-real { border-left-color: #8ba5d4; background-color: #181e28; }
  .ap-scenario { border-left-color: #2f6fb5; background-color: #171d27; }
  .ap-scn-steps li { background-color: #21291c; }
  .ap-scn-steps li::before { color: #ffffff; }
  .ap-scn-steps strong { color: #a3d793; }
  .ap-scn-steps .ap-scn-uca { background-color: #1b212c; }
  .ap-scn-steps .ap-scn-uca strong { color: #ffa99a; }
  .ap-scn-steps .ap-scn-fb { background-color: #2f231b; }
  .ap-scn-steps .ap-scn-fb strong { color: #f7a97d; }
  .ap-scn-actual { color: #ffa99a; }
  .ap-uca .ap-uca-na { color: #b1c5df; }
  .ap-more-card { background-color: #111620; }
  .ap-more-done { background-color: #1b212b; border-color: #343a46; }
  .ap-more-done p:not(.ap-more-q):not(.ap-more-seen) { color: #b3c3da; }
  .ap-more-card .ap-more-seen { border-top-color: #373d49; }
  .ap-tag-fb { background-color: #2f231b; color: #feaf82; }
  .ap-tag-dm { background-color: #21291c; color: #a3d793; }
  .ap-tag-cp { background-color: #232934; color: #b8cdef; }
  .ap-tag-ctrl { background-color: #1e242e; color: #91c8ff; }
  .ap-tag-new { background-color: #202631; color: #ccbcff; }
  .ap-nhtsa::before { color: #82d19c; }
  .ap-more-new { border-color: #414e5e; background-color: #131823; }
  .ap-elsewhere { background-color: #111620; }
  .ap-blind-card .icon-tile { color: #7ebaf9; }
  .ap-blind-stpa { border-color: #354353; background-color: #1b212b; }
  .ap-blind-stpa .icon-tile { color: #ffffff; }
  .ap-evidence { background-color: #111620; }
}