* { box-sizing: border-box; }
:root { color-scheme: light; font-family: system-ui, sans-serif; color: #17252a; background: #f6f8f7; }
body { margin: 0; line-height: 1.5; }
a { color: #165a48; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #165a48; outline-offset: 4px; }
.chooser { max-width: 68rem; margin: 0 auto; padding: 2rem 1rem; }
h1 { margin: .25rem 0 1rem; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; }
h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.eyebrow { margin: 0; font-weight: 650; }
.intro { max-width: 48rem; }
.versions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin: 2rem 0; padding: 0; list-style: none; }
.version { display: flex; flex-direction: column; align-items: flex-start; padding: 1.25rem; background: white; border: 1px solid #d6dfda; border-radius: .5rem; }
.version p { margin: .3rem 0 1rem; }
.version .action { margin-top: auto; }
.action { display: inline-flex; align-items: center; min-height: 44px; padding: .6rem .85rem; background: #165a48; color: white; border-radius: .3rem; font-weight: 650; }
.baseline { overflow-wrap: anywhere; font-size: .875rem; }
.viewer { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.viewer-header { padding: .5rem 1rem; border-bottom: 1px solid #b8c8bf; background: #fff; }
.viewer-nav { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.25rem; row-gap: .2rem; }
.viewer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.viewer-title { margin: 0; font-size: 1rem; }
.notice { margin: .2rem 0 0; font-size: .875rem; }
.viewer-main { min-height: 0; display: flex; }
.viewer-main:focus { outline: none; }
.viewer-main iframe { flex: 1; width: 100%; height: 100%; min-height: 0; border: 0; background: white; }
.open-app { display: none; }
.skip-link { position: absolute; top: -8rem; left: 1rem; z-index: 1; padding: .7rem; background: #fff; }
.skip-link:focus { top: .5rem; }
summary { cursor: pointer; min-height: 44px; display: list-item; padding: .6rem 0; }
summary:focus-visible { outline: 3px solid #165a48; outline-offset: 3px; }
.version-details { font-size: .875rem; }
.version-details p { margin: .3rem 0; }

/* Phones and short landscape screens: no frame. A header above a frame leaves the
   app too little room and creates nested scrolling, so link to the full app. */
@media (max-width: 767px), (max-height: 500px) {
  .viewer { display: block; height: auto; min-height: 100vh; }
  .viewer-main { display: block; padding: 1.25rem 1rem; }
  .viewer-main iframe, .viewer-nav .open-direct { display: none; }
  .open-app { display: flex; justify-content: center; width: 100%; font-size: 1.05rem; }
}