/* Execution Rights, pre-launch presence site: the presence-only rules.
   7 Oct 2026 (Tim): the site takes the sandbox site's formatting exactly, navy only. sandbox.css (loaded first) is the
   sandbox's own stylesheet, copied by tools/snap_sandbox.py; the markup carries the sandbox components' classes and
   <html class="dark"> permanently. What is here covers what the sandbox does with JavaScript (the sticky header's
   backdrop, the phone menu), which this site does without, plus the presence site's own accessibility rules. */

/* Main takes focus from the skip link (tabindex=-1); no ring around the whole page (6 Oct 2026). */
#main:focus, #main:focus-visible { outline: none; }

/* ---------- header ----------
   The sandbox paints the sticky header's backdrop from a script once the page scrolls. Here the backdrop is always
   the page navy (at the top of the page that is what the sandbox shows), and where the browser supports scroll-driven
   animations (CSS only), it takes the sandbox's scrolled look after the first 60 px, as the sandbox's script does. */
#header > div:first-child { background-color: var(--aw-color-bg-page); }
@supports (animation-timeline: scroll()) {
  @media (min-width: 48rem) {
    #header > div:first-child { animation: ps-header-scrolled linear both; animation-timeline: scroll(root); animation-range: 59px 60px; }
  }
}
@keyframes ps-header-scrolled {
  to { background-color: #030621e6; border-bottom: 1px solid rgb(106 114 130 / 0.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}

/* 7 Oct 2026 (live review item 2): on phones the button is a copy that follows the logo in the markup, so the keyboard
   order matches the two rows; the original button is hidden there, and the copy is hidden on wider screens. This
   default has to come before the phone rule below. */
.ps-head-cta-m { display: none; }

/* Phones (below 768 px). The sandbox hides its nav behind a hamburger menu, which needs JavaScript. With two links,
   the nav is a row under the logo and the button, in the sandbox nav's own type, and the two-row header scrolls away
   with the page instead of staying fixed. */
@media (max-width: 47.98rem) {
  #header { position: relative; }
  .ps-head { display: grid; grid-template-columns: auto auto; grid-template-areas: "logo cta" "nav nav"; justify-content: space-between; align-items: center; padding-bottom: 0; }
  .ps-head-logo { grid-area: logo; justify-self: start; }
  .ps-head-cta { display: none; }
  .ps-head-cta-m { grid-area: cta; justify-self: end; display: flex; align-items: center; }
  .ps-head-nav { grid-area: nav; display: flex; justify-content: center; overflow: visible; }
  .ps-head-nav ul { flex-direction: row; justify-content: center; width: auto; font-size: 0.9375rem; }
}
/* 7 Oct 2026 (live review item 5): the header button is at least 44 px tall, the recommended touch target. */
.ps-head .btn-primary { min-height: 2.75rem; }
/* 7 Oct 2026 (final QA): at 320 px the nav row was 6 px wider than the screen; narrower link padding below 360 px. */
@media (max-width: 22.49rem) { .ps-head-nav ul a { padding-left: 0.5rem; padding-right: 0.5rem; } }

/* ---------- the drawing ----------
   6 Oct 2026 (readability): one drawing per position. Desktop: under the hero. Below 1024 px: after the problem
   section, with the Slot's own top padding. */
.ps-drawing-wide { display: none; }
.ps-drawing-narrow { padding-top: 2.75rem; }
@media (min-width: 64rem) { .ps-drawing-wide { display: block; } .ps-drawing-narrow { display: none; } }

/* ---------- concept page FAQ ----------
   A question linked from llms.txt or a citation lands below the sticky header.
   7 Oct 2026 (live review item 1, Tim: option a): a collapsed question's link target is an empty span inside its
   answer, so the browser opens the question itself and it is announced expanded (Chromium; Firefox 139+). The span is
   pinned to the top of the item, so the link lands on the question. This replaces the 6 Oct CSS reveal, which showed
   the answer while the question stayed closed. No JavaScript. */
.er-question h3, .er-qs [id^="q-"] { scroll-margin-top: 6.5rem; }  /* 7 Oct 2026 (final QA): clears the 82 px header */
.er-qs details { position: relative; }
.er-qs .ps-anchor { position: absolute; top: 0; left: 0; scroll-margin-top: 3.5rem; }  /* heading lands at 6.5rem, as an open one does */

/* ---------- Contact ---------- the address is a full-size tap target. */
.ps-mail { display: inline-block; padding-block: 2px; overflow-wrap: anywhere; }

/* ---------- footer ----------
   The sandbox footer grid, with the presence site's two link columns inside a labeled nav. The nav takes the grid's
   own columns (subgrid), so the columns sit where the sandbox's do; on wide screens they take the right-hand two. */
.ps-footnav { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 2rem; }
@media (min-width: 64rem) {
  .ps-footnav { grid-column: 5 / -1; }
  .ps-footnav > :first-child { grid-column: 5 / span 2; }
}
/* Tap targets of at least 24 px (the sandbox's footer links are 20 px tall); the list spacing is reduced to match,
   so the rows keep the sandbox's spacing. */
footer ul a, footer div.text-sm > a { display: inline-block; padding-block: 2px; }
footer li.mb-2 { margin-bottom: 0.25rem; }