/* CAST in Depth. Uses the About STAMP parts, overview and rail ("as-" classes in about-stamp.css) and STPA in Depth's
   steps, views and worked-example blocks ("ap-" classes in stpa-in-depth.css); its own rules start "ac-". */

/* One width for the parts (see notes/STYLE-GUIDE.md, "Pages with a side rail"). The rail pushes each part's content
   to the right and the text is an 820px column at the left of that area. Every block in a part, text, cards, tables
   and diagrams alike, is the text's width and starts at its left edge, so nothing sticks out past the text or sits
   off-center. This one rule sets it for the whole page; don't give a block its own max-width or margin: auto.
   Scoped to .ac-path, a class only this page's rail wrapper has. Check with tools/check-alignment.js. */
main .ac-path .as-part > .container > *,
main .ac-path .as-part .ap-walk > * { max-width: 820px; margin-left: 0; margin-right: 0; }
.as-path .as-part .section-head { max-width: 820px; margin-left: 0; text-align: left; }

/* Overview: three groups side by side on wide screens */
.as-map.ac-map { grid-template-columns: repeat(3, 1fr); }
.ac-map .as-map-group { padding: 26px 26px 22px; }

.ac-note { max-width: 820px; margin: 16px 0 0; font-size: 15px; font-style: italic; color: var(--text); text-wrap: pretty; }

/* Part 1: the jet bridge, its two explanations, and the ranking of fixes (rules first written for About STPA) */
/* The story wraps around the operator's control loop, which sits level with the heading; the block keeps the page's reading width */
.ac-jet { display: flow-root; max-width: 820px; margin-top: 56px; }
.as-part .ac-jet h3 { margin-top: 0; }
.as-csm.ac-jet-fig { float: right; width: 400px; margin: 0 0 24px 44px; padding: 22px 22px 18px; }
.ac-jet-fig .as-csm-title { margin-bottom: 14px; font-size: 19px; }
.ac-diagram-jet { max-width: 460px; margin: 0 auto; }
.as-part .ac-jet-views { margin-top: 0; }
.ac-jet-up { margin-top: 56px; }
.as-part .ac-jet-up h3, .as-part .ac-jet-fix h3 { margin-top: 0; }
.ac-diagram-mgmt { max-width: 620px; }
.as-csm.ac-cs-fig.ac-loop-fig { margin-top: 40px; }
.ac-uca-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1040px; margin: 20px auto 0; }
.ac-uca-row .ac-ctrl-row { background: #fdf0e6; }
.ac-uca-row p:not(.ac-ctrl-label) { margin: 0; font-size: 15px; line-height: 1.5; color: var(--navy-text); }
.ac-jet-fix { margin-top: 48px; margin-bottom: 64px; }

.ac-precedence { margin-top: 72px; }
.as-part .ac-precedence h3 { margin: 0 0 14px; }
.ac-precedence > p { font-size: 16px; }
/* The ranking as a funnel centered under the text, as on STPA in Depth: each bar steps in from both sides */
.ac-rank-fig { margin: 24px 0 0; }
.ac-rank { display: grid; gap: 8px; max-width: 640px; margin: 0 auto; }
.ac-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; }
.ac-rank li:nth-child(1) { background: #1a3a66; }
.ac-rank li:nth-child(2) { background: #2a5891; margin: 0 3%; }
.ac-rank li:nth-child(3) { background: #3f74b4; margin: 0 6%; }
.ac-rank li:nth-child(4) { background: #7d9fc9; margin: 0 9%; color: var(--navy-text); }
.ac-rank li:nth-child(5) { background: #b8c9de; margin: 0 12%; color: var(--navy-text); }
.ac-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; }
.ac-rank li:nth-child(n+4) .ac-rank-letter { background: rgb(255 255 255 / 40%); }
.ac-rank-text { flex: 1 1 160px; }
.ac-rank-tag { margin-left: auto; background: #fff; color: var(--navy-text); }
.ac-rank-fig figcaption { margin-top: 12px; font-size: 14px; text-align: center; color: var(--text); }
.ac-rank-ends.pull-quote { margin: 28px 0 0; }
.ac-rank-ends.pull-quote p { margin: 0; font-size: 21px; line-height: 1.3; }
.ac-rank-ends.pull-quote p + p { margin-top: 10px; }
.ac-rank-ends.pull-quote strong { color: var(--steel-text); }

/* Part 2: two reports on one accident, then the wording table */
.ap-views.ac-reports { margin-top: 32px; }
/* Two reports, and Step 5's RCA vs CAST: the closing sentence sits in a tinted box in the card's accent color, in the body font */
.ac-reports .ap-view-foot, .ac-recs .ap-view-foot { margin: 18px 0 0; padding: 12px 14px; border-top: 0; border-left: 4px solid #9aa4b2; border-radius: 0 8px 8px 0; background: #eef1f5; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.5; }
.ac-reports .ap-view-new .ap-view-foot, .ac-recs .ap-view-new .ap-view-foot { border-left-color: var(--steel); background: var(--steel-soft); }
.as-part .ac-reports h4 { margin: 14px 0 6px; font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.ac-report-what { margin: 0; font-size: 15px; color: var(--navy-text); }
.ac-words { max-width: 960px; margin: 72px auto 0; }
.ac-words-table td:first-child { width: 36%; font-weight: 600; color: var(--navy-text); }
.ac-words-table td { font-size: 15px; }

/* Worked example, Step 2 */
.as-csm.ac-cs-fig { max-width: 820px; margin: 24px 0 0; }
.ac-diagram-cs { max-width: 720px; margin: 0 auto; }
/* On narrow screens the diagram's labels are too small to read, so a button opens it full size over the page (site.js, data-enlarge), as on Automotive */
.ac-enlarge { display: none; margin: 12px auto 0; padding: 0; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 700; color: var(--navy-btn); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 760px) { .ac-enlarge { display: block; } }
.ac-cs-fig.is-enlarged { position: fixed; inset: 0; z-index: 200; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; max-width: none; margin: 0; padding: 12px; border-radius: 0; overflow: auto; background: #fff; }
.ac-cs-fig.is-enlarged .ac-enlarge { order: -1; position: sticky; top: 0; left: 0; z-index: 1; margin: 0 0 10px; padding: 9px 16px; border-radius: 8px; background: var(--navy-btn); color: #fff; text-decoration: none; }
.ac-cs-fig.is-enlarged .ac-diagram-cs { flex: none; width: 720px; max-width: none; }
.ac-cs-fig.is-enlarged figcaption, .ac-cs-fig.is-enlarged .as-csm-title { display: none; }

/* Worked example, Step 3: controller analyses in the CAST template */
.ac-ctrls { gap: 20px; margin-top: 8px; align-items: start; }
.ac-ctrl { padding: 22px 24px 20px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.ac-ctrl h4 { margin: 0 0 14px; font-size: 19px; font-weight: 700; }
.ac-ctrl-row { padding: 12px 14px; border-radius: 8px; background: var(--bg-tint); }
.ac-ctrl-row + .ac-ctrl-row, .ac-ctrl-stop + .ac-ctrl-row { margin-top: 8px; }
.ac-ctrl-label { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-text); }
.ac-ctrl-row ul { display: grid; gap: 5px; padding-left: 18px; list-style: disc; font-size: 15px; line-height: 1.5; color: var(--navy-text); }
.ac-ctrl-contrib { background: #fdecea; }
.ac-ctrl-contrib .ac-ctrl-label { color: #b42318; }
.ac-ctrl-pm { background: #e1f0d8; }
.ac-ctrl-pm .ac-ctrl-label { color: #3c6b2c; }
.ac-ctrl-cf { background: #fdf0e6; }
.ac-ctrl-wrong { background: #fdecea; }
.ac-ctrl-wrong .ac-ctrl-label { color: #b42318; }
.ac-ctrl-cf .ac-ctrl-label { color: #9a4a10; }
.ac-ctrl-stop { margin: 10px 0 0; padding: 0 4px; font-size: 15px; font-style: italic; color: var(--navy-text); }

.ac-up-title { margin: 40px 0 14px; font-size: 19px; font-weight: 600; }
.ac-up { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ac-up-card { padding: 18px 18px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ac-up-card h5 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--navy-text); }
.ac-up-card p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; }
.ac-up-card strong { color: var(--navy-text); }
.ac-up-card strong.ac-wrong { color: #b42318; }

/* Worked example, Step 4 */
.ac-flaws { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 8px; }
.ac-flaw { padding: 18px 20px 16px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.ac-flaw p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--navy-text); }

/* Worked example, Step 5 */
.ap-views.ac-recs { max-width: 1040px; margin: 0; }
.ac-thirty { display: flex; gap: 16px; align-items: flex-start; max-width: 1040px; margin-top: 24px; padding: 22px 24px; border: 1px solid #b9d0ea; border-radius: 12px; background: #eaf2fb; }
.ac-thirty .icon-tile { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--steel); color: #fff; font-size: 22px; }
.ac-thirty h4 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.ac-thirty p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--navy-text); }

/* Part 5: which method fits */
.ac-fits { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; max-width: 820px; margin: 0 0 40px; align-items: start; }
.ac-fit { padding: 18px 20px 16px; border: 1px solid var(--line); border-top: 4px solid #8a96a8; border-radius: 12px; background: var(--bg-tint); }
.ac-fit p { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--navy-text); }
/* The CAST card lists three kinds of event, separated by thin rules */
.ac-fit-list { margin: 4px 0 0; padding: 0; list-style: none; }
.ac-fit-list li { padding: 10px 0; font-size: 15px; line-height: 1.5; color: var(--navy-text); }
.ac-fit-list li + li { border-top: 1px solid var(--line); }
.ac-fit-list li:last-child { padding-bottom: 0; }
.ac-fit-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #3d4f6b; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.ac-fit-stpa { border-top-color: var(--steel); background: #f2f7fc; }
.ac-fit-stpa .ac-fit-tag { background: var(--steel-text); }

/* Part 6: choosing the first event */
.ac-choose { max-width: 960px; margin: 8px 0 32px; gap: 16px; }
.ac-choose-col { display: flex; flex-direction: column; padding: 20px 22px 18px; border-top: 5px solid #9fb3cc; border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.ac-choose-high { border-top-color: var(--navy-btn); }
.ac-choose-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ac-choose-col h4 { margin: 0; font-size: 17px; font-weight: 600; }
/* Severity gauge: three bars of rising height, filled to the event's level */
.ac-sev { display: inline-flex; align-items: flex-end; gap: 3px; flex: none; height: 18px; }
.ac-sev i { display: block; width: 6px; border-radius: 2px; background: #dbe3ec; }
.ac-sev i:nth-child(1) { height: 8px; }
.ac-sev i:nth-child(2) { height: 13px; }
.ac-sev i:nth-child(3) { height: 18px; }
.ac-choose-low .ac-sev i.on { background: #9fb3cc; }
.ac-choose-high .ac-sev i.on { background: var(--navy-btn); }
.ac-choose-block { padding: 12px 14px; border-radius: 8px; }
.ac-choose-block + .ac-choose-block { margin-top: 8px; }
.ac-choose-pro { background: #e9f4e3; }
.ac-choose-con { flex: 1; background: #fdf0e6; }
.ac-choose-pro .list-head { color: #3c6b2c; }
.ac-choose-con .list-head { color: #9a4a10; }
.ac-choose-block .list-head { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ac-choose-block ul { display: grid; gap: 6px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--navy-text); }

@media (max-width: 1100px) {
  .ac-jet { display: flex; flex-direction: column; }
  .as-csm.ac-jet-fig { float: none; order: 1; width: auto; max-width: 520px; margin: 8px auto 0; }
  .as-map.ac-map { grid-template-columns: 1fr; }
  .ac-up { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .ac-uca-row { grid-template-columns: 1fr; }
  .ac-rank li { margin: 0 !important; font-size: 15px; }
  .ac-rank-ends.pull-quote p { font-size: 19px; }
  .ac-up, .ac-fits { grid-template-columns: 1fr; }
  .ac-words-table td:first-child { width: auto; }
  .ac-ctrl { padding: 18px 16px 16px; }
  .ac-thirty { flex-direction: column; padding: 20px 18px; }
}

/* Plain bullets (no check or cross icons), as on About STAMP. */
.ac-bullets { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.ac-bullets li { position: relative; padding-left: 20px; color: var(--navy-text); }
.ac-bullets li::before { content: ""; position: absolute; left: 3px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: #7d8ea6; }


/* Part 4: two worked examples, one shown at a time. Radio buttons before the switches and the
   cases pick the case with CSS alone; site.js only scrolls back up after a pick at the bottom. */
.ac-cases { margin-top: 8px; }
.ac-case-switch { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow); }
.ac-case-switch-end { margin-top: 56px; }
.ac-case-prompt { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--navy-text); }
.ac-case-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ac-case-opt { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 2px solid var(--steel-faint); border-radius: var(--radius-sm); background: var(--bg-tint); cursor: pointer; transition: border-color .15s, background .15s; }
.ac-case-opt:hover { border-color: var(--steel); }
.ac-case-kind { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-text); }
.ac-case-name { font-size: 18px; font-weight: 600; color: var(--navy-text); }
.ac-case-radio-h:checked ~ .ac-case-switch .ac-case-opt-h,
.ac-case-radio-a:checked ~ .ac-case-switch .ac-case-opt-a { border-color: var(--navy-btn); background: var(--navy-btn); cursor: default; }
.ac-case-radio-h:checked ~ .ac-case-switch .ac-case-opt-h *,
.ac-case-radio-a:checked ~ .ac-case-switch .ac-case-opt-a * { color: #fff; }
.ac-case-radio-h:checked ~ .ac-case-switch .ac-case-opt-h .ac-case-kind,
.ac-case-radio-a:checked ~ .ac-case-switch .ac-case-opt-a .ac-case-kind { color: #b9d5f3; }
.ac-case-radio-h:focus-visible ~ .ac-case-switch:not(.ac-case-switch-end) .ac-case-opt-h,
.ac-case-radio-a:focus-visible ~ .ac-case-switch:not(.ac-case-switch-end) .ac-case-opt-a { outline: 3px solid var(--steel); outline-offset: 2px; }
.ac-case-radio-h:not(:checked) ~ .ac-case-h,
.ac-case-radio-a:not(:checked) ~ .ac-case-a { display: none; }
.ac-case { padding-top: 40px; }
.as-part .ac-case > .as-text:first-child { margin-bottom: 0; }

/* The worked examples (src/partials/cast-example-*.html). The two controller
   cards stack. Each row shows its first item, and its caret opens the rest (site.css .show-more-toggle
   hides .more items). "Show the full analysis" opens every row in the card. The link to the CAST Handbook ends each example. */
.ac-ctrls-stack { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 8px; }
.ac-row-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.ac-row-toggle::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 4px 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.show-more-toggle:checked + .ac-row-toggle::after { transform: rotate(225deg); margin-top: 4px; }
.show-more-toggle:focus-visible + .ac-row-toggle { outline: 3px solid var(--steel); outline-offset: 2px; }
.ac-all-toggle:checked ~ .ac-ctrl-row .more { display: list-item; }
.ac-all-toggle:checked ~ .ac-ctrl-row .ac-row-toggle { pointer-events: none; }
.ac-all-toggle:checked ~ .ac-ctrl-row .ac-row-toggle::after { display: none; }
.ac-all-btn { display: table; margin: 14px auto 0; }
.ac-all-toggle:checked ~ .ac-all-btn .show-more-show, .ac-all-toggle:not(:checked) ~ .ac-all-btn .show-more-hide { display: none; }
.ac-all-toggle:focus-visible ~ .ac-all-btn { outline: 3px solid var(--steel); outline-offset: 2px; }
.ac-handbook-link { margin: 24px 0 0; }

@media (max-width: 640px) {
  .ac-case-switch { padding: 14px; }
  .ac-case-opts { gap: 8px; }
  .ac-case-opt { padding: 10px 12px; }
  .ac-case-name { font-size: 16px; }
  .ac-case-switch-end { margin-top: 40px; }
}
/* Below 1280px the Page Overview is a bar under the header; going back to the switch clears it too. */
@media (max-width: 1279.98px) { .ac-case-switch { scroll-margin-top: 48px; } }


/* ---- 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) {
  .ac-uca-row .ac-ctrl-row { background-color: #1a202a; }
  .ac-rank li { color: #ffffff; }
  .ac-rank li:nth-child(1) { background-color: #1a3a66; }
  .ac-rank li:nth-child(2) { background-color: #2a5891; }
  .ac-rank li:nth-child(3) { background-color: #3f74b4; }
  .ac-rank li:nth-child(4) { background-color: #384f6a; }
  .ac-rank li:nth-child(5) { background-color: #3b4552; }
  .ac-rank-letter { background-color: rgb(0 0 0 / 16%); }
  .ac-rank li:nth-child(n+4) .ac-rank-letter { background-color: rgb(17 22 32 / 40%); }
  .ac-rank-tag { background-color: #111620; }
  .ac-reports .ap-view-foot, .ac-recs .ap-view-foot { border-left-color: #4c535c; background-color: #1b212c; }
  .ac-reports .ap-view-new .ap-view-foot, .ac-recs .ap-view-new .ap-view-foot { border-left-color: #4892dc; }
  .ac-enlarge { color: #bbd6ff; }
  .ac-cs-fig.is-enlarged { background-color: #111620; }
  .ac-cs-fig.is-enlarged .ac-enlarge { color: #ffffff; }
  .ac-ctrl { background-color: #111620; }
  .ac-ctrl-contrib { background-color: #1b212c; }
  .ac-ctrl-contrib .ac-ctrl-label { color: #ffa99a; }
  .ac-ctrl-pm { background-color: #21291c; }
  .ac-ctrl-pm .ac-ctrl-label { color: #a3d793; }
  .ac-ctrl-cf { background-color: #1a202a; }
  .ac-ctrl-wrong { background-color: #1b212c; }
  .ac-ctrl-wrong .ac-ctrl-label { color: #ffa99a; }
  .ac-ctrl-cf .ac-ctrl-label { color: #feaf82; }
  .ac-up-card { background-color: #111620; }
  .ac-up-card strong.ac-wrong { color: #ffa99a; }
  .ac-flaw { background-color: #111620; }
  .ac-thirty { border-color: #354353; background-color: #1b212b; }
  .ac-thirty .icon-tile { color: #ffffff; }
  .ac-fit { border-top-color: #505865; }
  .ac-fit-tag { background-color: #3d4f6b; color: #ffffff; }
  .ac-fit-stpa { border-top-color: #4892dc; background-color: #171d27; }
  .ac-fit-stpa .ac-fit-tag { background-color: #2f6fb5; }
  .ac-choose-col { border-top-color: #414e5e; background-color: #111620; }
  .ac-choose-high { border-top-color: #8ba5d4; }
  .ac-sev i { background-color: #272d38; }
  .ac-choose-low .ac-sev i.on { background-color: #414e5e; }
  .ac-choose-pro { background-color: #1e241b; }
  .ac-choose-con { background-color: #1a202a; }
  .ac-choose-pro .list-head { color: #a3d793; }
  .ac-choose-con .list-head { color: #feaf82; }
  .ac-bullets li::before { background-color: #7d8ea6; }
  .ac-case-opt { border-color: #313b45; }
  .ac-case-opt:hover { border-color: #4892dc; }
  .ac-case-radio-h:checked ~ .ac-case-switch .ac-case-opt-h,
.ac-case-radio-a:checked ~ .ac-case-switch .ac-case-opt-a { border-color: #8ba5d4; }
  .ac-case-radio-h:checked ~ .ac-case-switch .ac-case-opt-h *,
.ac-case-radio-a:checked ~ .ac-case-switch .ac-case-opt-a * { color: #ffffff; }
  .ac-case-radio-h:focus-visible ~ .ac-case-switch:not(.ac-case-switch-end) .ac-case-opt-h,
.ac-case-radio-a:focus-visible ~ .ac-case-switch:not(.ac-case-switch-end) .ac-case-opt-a { outline-color: #4892dc; }
  .show-more-toggle:focus-visible + .ac-row-toggle { outline-color: #4892dc; }
  .ac-all-toggle:focus-visible ~ .ac-all-btn { outline-color: #4892dc; }
}