/* Why Use STPA?, Why Use CAST? and Why use STAMP?: long evidence pages.
   Everything is scoped to .pg-why-use, which wraps each page below its banner. */

/* One reading column, as wide as the old pages' text (1024px). */
.pg-why-use .wu-col { max-width: 1024px; margin-left: auto; margin-right: auto; }
.pg-why-use .container.wu-col { max-width: calc(1024px + 2 * var(--gutter)); }
.pg-why-use .wu-toc-band { padding: 56px 0; }
.pg-why-use .toc { max-width: 1024px; }
.pg-why-use .accordion { max-width: none; margin: 24px 0 8px; }
.pg-why-use .wu-acc-sans .accordion-item > summary { font-family: var(--font-body); font-size: 17px; }
.pg-why-use .accordion-body p, .pg-why-use .accordion-body li { font-size: 16px; }
.pg-why-use .wu-source { font-size: 15px; }

/* Headings: a heavy rule over some section titles, and the two-line "Evidence:" heads. */
.pg-why-use .prose h2.wu-rule { padding-top: 28px; border-top: 4px solid var(--navy-bg); }
.pg-why-use .prose .wu-evidence-head { margin-top: 48px; font-family: var(--font-head); font-size: clamp(22px, 2.4vw, 26px); font-weight: 700; line-height: 1.3; }
.pg-why-use .prose ul.wu-numbered { list-style: none; padding-left: 0; }
.pg-why-use .prose ul.wu-spaced li { margin-bottom: .9em; }
.pg-why-use .wu-credit { font-size: 14px; color: var(--text); }

/* Tables. Muted cells for the "traditional" column; on phones, tables marked
   .wu-stack turn each row into a card with its column names (data-label). */
.pg-why-use .data-table a { text-decoration: none; }
.pg-why-use .data-table a:hover { text-decoration: underline; }
.pg-why-use .data-table td.wu-muted { color: #56687f; }
@media (min-width: 761px) {
  .pg-why-use .wu-evidence td:first-child { width: 20%; }
  .pg-why-use .wu-evidence td:nth-child(2) { width: 24%; }
}
@media (max-width: 760px) {
  .pg-why-use .table-wrap:has(.wu-stack) { overflow: visible; border: 0; background: none; }
  .pg-why-use .wu-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pg-why-use .wu-stack, .pg-why-use .wu-stack tbody, .pg-why-use .wu-stack tr, .pg-why-use .wu-stack td { display: block; width: auto; }
  .pg-why-use .wu-stack tr { margin-bottom: 14px; padding: 6px 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
  .pg-why-use .wu-stack tbody tr:nth-child(even) td { background: none; }
  .pg-why-use .wu-stack td { padding: 8px 18px; border: 0; }
  .pg-why-use .wu-stack td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-text);
  }
}

/* "Show more rows": the first rows show; the rest (.wu-extra) open with the button,
   a label for a hidden checkbox, so it needs no script. */
.pg-why-use .wu-more { text-align: center; }
.pg-why-use .wu-more .table-wrap { text-align: left; }
.pg-why-use .wu-more-toggle:not(:checked) ~ .table-wrap .wu-extra { display: none; }
.pg-why-use .wu-more-toggle:checked ~ .wu-more-btn .wu-more-show,
.pg-why-use .wu-more-toggle:not(:checked) ~ .wu-more-btn .wu-more-hide { display: none; }
.pg-why-use .wu-more-toggle:focus-visible ~ .wu-more-btn { outline: 3px solid var(--steel); outline-offset: 2px; }

/* Why use STAMP?: traditional vs. STAMP side-by-side cards. */
.pg-why-use .wu-pairs { display: grid; gap: 32px; margin-top: 40px; }
.pg-why-use .wu-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.pg-why-use .wu-side { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); font-size: 15px; line-height: 1.6; color: var(--navy-text); }
.pg-why-use .wu-trad { background: #f1f1f1; border: 2px solid #d9d9d9; }
.pg-why-use .wu-stamp { background: #e4eef9; border: 1px solid #c9dcf1; }
.pg-why-use .wu-side-head { padding: 18px 22px; font-family: var(--font-head); font-size: 22px; letter-spacing: .02em; }
.pg-why-use .wu-trad .wu-side-head { background: #e4e4e4; }
.pg-why-use .wu-stamp .wu-side-head { background: #bfd9f2; }
.pg-why-use .wu-side-body { padding: 22px; }
.pg-why-use .wu-side-body > :last-child { margin-bottom: 0; }
.pg-why-use .wu-label { margin: 0 0 12px; font-family: var(--font-head); font-size: 16px; font-weight: 600; letter-spacing: .06em; }
.pg-why-use .wu-view-title { margin-bottom: 10px; font-weight: 600; font-size: 16px; }
.pg-why-use .wu-side hr { margin: 24px 0; border: 0; border-top: 1px solid rgb(20 32 56 / 8%); }
.pg-why-use .wu-list { margin: 0 0 1em; padding-left: 1.1em; list-style: disc; }
.pg-why-use .wu-list-plain { padding-left: 0; list-style: none; }
.pg-why-use .wu-example { margin-top: 16px; padding: 18px 16px; border-radius: 10px; background: #c6dcf3; }
.pg-why-use .wu-example p:last-child { margin-bottom: 0; }

/* Why use STAMP?: the STPA / STPA-Sec / CAST cards. */
.pg-why-use .wu-method { display: flex; flex-direction: column; padding: 28px 22px 22px; border-top: 8px solid var(--wu-c); font-size: 16px; }
.pg-why-use .wu-method-stpa { --wu-c: var(--navy-bg); }
.pg-why-use .wu-method-sec { --wu-c: #4a8fdc; }
.pg-why-use .wu-method-cast { --wu-c: #3a5480; }
.pg-why-use .wu-method .icon-tile { background: var(--wu-c); color: #fff; }
.pg-why-use .wu-method h3 { margin-top: 28px; font-family: var(--font-head); font-size: 24px; }
.pg-why-use .wu-method-sub { margin: 10px 0 18px; font-size: 13px; color: var(--steel-text); }
.pg-why-use .wu-method ul { margin: 0 0 24px; padding-left: 2.4em; list-style: disc; }
.pg-why-use .wu-method strong { color: var(--navy-text); }
.pg-why-use .wu-method-btn { align-self: flex-start; margin-top: auto; border-radius: 0; }
.pg-why-use .wu-after-cards { margin-top: 96px; }

/* "Ready to ..." boxes: buttons and their lines of text, one under the other. */
.pg-why-use .wu-cta-stack { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 24px; }
.pg-why-use .wu-cta-stack p { margin: 0 auto; }
.pg-why-use .wu-cta-stack .btn + p { margin-top: 8px; }
.pg-why-use .wu-cta-close { margin-top: 8px !important; }
.pg-why-use .wu-btn-glass { background: rgb(255 255 255 / 45%); border-color: rgb(255 255 255 / 70%); }

/* Why Use STPA?: the cost chart and the briefing buttons. */
.pg-why-use .wu-chart { margin: 24px 0 28px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.pg-why-use .prose .wu-chart img { margin: 0 auto; border-radius: 0; }
.pg-why-use .wu-briefing .btn { text-decoration: none; }
.pg-why-use .wu-briefing .btn-outline { border-width: 1px; }

@media (max-width: 760px) {
  .pg-why-use .wu-pair { grid-template-columns: 1fr; gap: 16px; }
  .pg-why-use .wu-toc-band { padding: 36px 0; }
  .pg-why-use .wu-after-cards { margin-top: 40px; }
  .pg-why-use .wu-chart { padding: 12px; }
  .pg-why-use .wu-cta-stack .btn { align-self: stretch; }
}

/* Long addresses (the NASA link) and link names wrap instead of widening phone pages. */
.pg-why-use .prose, .pg-why-use .data-table { overflow-wrap: break-word; }
.pg-why-use .wu-more-btn { margin-top: 4px; }


/* ---- 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) {
  .pg-why-use .prose h2.wu-rule { border-top-color: #8fa5cd; }
  .pg-why-use .data-table td.wu-muted { color: #b1c5df; }
  @media (max-width: 760px) {
    .pg-why-use .wu-stack tr { background-color: #111620; }
  }
  .pg-why-use .wu-more-toggle:focus-visible ~ .wu-more-btn { outline-color: #4892dc; }
  .pg-why-use .wu-trad { background-color: #1b212b; border-color: #373e49; }
  .pg-why-use .wu-stamp { background-color: #1e242f; border-color: #333f4b; }
  .pg-why-use .wu-trad .wu-side-head { background-color: #252b36; }
  .pg-why-use .wu-stamp .wu-side-head { background-color: #2a3948; }
  .pg-why-use .wu-side hr { border-top-color: rgb(149 165 196 / 8%); }
  .pg-why-use .wu-example { background-color: #293643; }
  .pg-why-use .wu-method { border-top-color: #4a8fdc; }
  .pg-why-use .wu-method-sec { --wu-c: #4a8fdc; }
  .pg-why-use .wu-method-cast { --wu-c: #3a5480; }
  .pg-why-use .wu-method .icon-tile { color: #ffffff; }
  .pg-why-use .wu-btn-glass { background-color: rgb(17 22 32 / 45%); border-color: rgb(42 49 60 / 70%); }
  .pg-why-use .wu-chart { background-color: #111620; }
}