/* Shared minimum readable type and touch targets, loaded after page styles. */
a, button, summary { min-height: 44px !important; }
a { display: inline-flex; align-items: center; }
button { min-width: 44px; }
summary { display: flex; align-items: center; cursor: pointer; }
summary::after { content: '+'; margin-left: auto; padding-left: 12px; }
details[open] > summary::after { content: '−'; }
summary:has(> span)::after { content: none; }
small { font-size: max(12px, 1em); }
:where(a,button,summary):focus-visible { outline: 3px solid #2f5bff; outline-offset: 4px; }
.page-footer :focus-visible, .b-footer :focus-visible { outline-color: white; }
.skip-link { min-height: 44px; }
.b-guide-link { font-size: 14px; line-height: 22px; margin-top: 12px; }
.b-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
.b-hero-actions > a:not(.button) { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.b-intro .b-description { max-width: 1020px; font-size: 21px; line-height: 32px; }
.b-step blockquote { font-size: 22px; line-height: 30px; }
.catalog-lines { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 32px; list-style: none; padding: 0; margin: 28px 0; }
.catalog-lines li { border-top: 1px solid #dce1e7; padding: 18px 0; display: flex; flex-direction: column; gap: 8px; }
.catalog-lines strong { font-size: 16px; }
.catalog-lines span { font-size: 12px; line-height: 20px; color: #566171; }
.help-hero .help-notice { margin-top: 28px; }
.connector-placeholder { background: #f6f7f9; padding: 20px; margin-top: 20px; }
.connector-placeholder code { display: block; white-space: normal; overflow-wrap: anywhere; font: inherit; font-size: 14px; line-height: 24px; margin-top: 12px; }
.recording-notice { margin-bottom: 16px; }
.transcript-note { padding: 16px 0; font-size: 14px; line-height: 24px; }
#video-dialog > .transcript-note { margin: 0; padding: 18px 24px 0; color: #e4ebf5; }
.b-wide-dialog .demo-toolbar > div { flex-wrap: wrap; }
.video-footer { gap: 24px; }
.video-footer > span { font-size: 12px; line-height: 20px; }
/* Script-free homepage: navigation and informational panels stay readable. */
html:not(.js-ready) .direction-b dialog { display: block; position: static; margin: 32px auto; width: calc(100% - 48px); max-width: 1000px; max-height: none; overflow: visible; }
html:not(.js-ready) .direction-b #task-dialog { display: none; }
html:not(.js-ready) .direction-b .dialog-close,
html:not(.js-ready) .direction-b [data-screen],
html:not(.js-ready) .direction-b .b-menu { display: none; }
html:not(.js-ready) .direction-b .b-header-inner { flex-wrap: wrap; padding-block: 20px; }
@media(max-width:700px) {
 .b-intro .b-description { font-size: 18px; line-height: 28px; }
 .catalog-lines { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; }
 .b-starter-foot .b-inline-link { min-height: 44px; }
 .b-footer-main { min-width: 0; }
 .b-footer-bottom nav > * { min-height: 44px; }
 .b-footer-bottom nav { gap: 8px 20px; }
 .b-hero-actions { gap: 12px; }
 .b-access-buttons .button { white-space: normal; }
 html:not(.js-ready) .direction-b .b-nav { display: flex; position: static; flex-direction: column; width: 100%; box-shadow: none; border: 0; padding: 0; gap: 0; }
 .page-footer nav { gap: 8px 20px; }
 .case-header { flex-wrap: wrap; }
 .video-footer { flex-wrap: wrap; }
 .page-header .wordmark { flex-shrink: 0; }
 .page-header nav { flex-wrap: wrap; }
}

/* Keep every navigation destination available at phone sizes. */
@media(max-width:700px) {
 .page-header { flex-wrap: wrap; padding-block: 16px; gap: 8px 24px; }
 .page-header .home-link { display: inline-flex; }
 .top > .wrap { flex-wrap: wrap; }
 .top nav { flex-wrap: wrap; }
 .top nav a:last-child { display: inline-flex; }
}