/* Responsive layout refinements for desktop, tablet, and phone browsers. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-wrap:break-word}
img,svg,video{max-width:100%}
main,section,figure,.intro,.snapshot>div,.failure-grid>div,.resources>div{min-width:0}
header{padding-left:max(40px,env(safe-area-inset-left));padding-right:max(40px,env(safe-area-inset-right))}
nav{flex-wrap:wrap}
nav a,.back,.primary,.text-link,.history-controls button,footer a{min-height:44px}
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.record summary{grid-template-columns:125px minmax(0,1fr) 150px 20px}
.record h3{overflow-wrap:anywhere}
.task-detail{grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr)}

@media(min-width:1400px){
  .hero{gap:90px}
  .hero-photo img{height:390px}
}

/* iPad landscape and smaller laptop windows */
@media(min-width:801px) and (max-width:1100px){
  .wrap{width:calc(100% - 56px)}
  header{height:auto;min-height:90px;padding-top:14px;padding-bottom:14px;gap:10px 24px;flex-wrap:wrap}
  .brand{font-size:12px}.brand span{display:none}
  nav{font-size:13px;gap:8px 18px}.back{font-size:12px}
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;padding:52px 0}
  .hero .lead{font-size:18px}.hero-photo img{height:auto;aspect-ratio:4/3;object-fit:cover}
  .photo-caption{font-size:9px;letter-spacing:.7px;gap:10px}
  .snapshot{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px}
  .facts strong{font-size:30px}.facts>div{padding-left:18px}.facts p{font-size:11px}
  .section-heading{display:block}.section-heading p:last-child{max-width:680px;margin-top:16px}
  .record summary{grid-template-columns:95px minmax(0,1fr) 135px 20px;gap:14px}
  .record h3{font-size:17px}.record-content{margin-left:109px;margin-right:24px}
  .task-detail{grid-template-columns:minmax(0,1fr) minmax(220px,.72fr);gap:28px}
  .failure-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}
  .resources{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:38px}
  .loop-diagram{padding:30px}
}

/* iPad portrait and large phones */
@media(min-width:601px) and (max-width:800px){
  header{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
  .wrap{width:calc(100% - 48px)}
  .hero-photo{max-width:620px}.hero-photo img{width:100%;aspect-ratio:16/10;object-fit:cover}
  .facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .facts>div:nth-child(3){border-left:1px solid var(--line);padding-left:20px}
  .facts strong{font-size:27px}.facts p{font-size:11px}
  .task-detail{grid-template-columns:1fr}.task-detail img{max-height:360px}
  .loop-diagram{max-width:620px;margin:auto}
}

/* Phone browsers */
@media(max-width:600px){
  body{line-height:1.72}
  header{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  .wrap{width:calc(100% - 36px)}
  nav{overflow-x:auto;display:flex;justify-content:space-between;gap:6px 16px;padding-bottom:2px;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}nav a{flex:0 0 auto;font-size:11px;white-space:nowrap}
  .hero{gap:26px;padding-top:30px}.hero .lead{font-size:17px}.primary{width:100%;justify-content:space-between;margin-top:14px}
  .meta{line-height:2.2}.hero-photo{width:100%;padding:10px}.photo-caption{display:block}.photo-caption span{display:block;margin-top:3px}
  .snapshot{padding-top:28px}.snapshot h2{font-size:25px}
  .facts{gap:20px 0}.facts>div{padding-left:16px}.facts strong{font-size:27px}
  .lineage{font-size:16px;gap:9px}.bar-row{grid-template-columns:58px minmax(0,1fr) 34px}
  .history-controls{align-items:center}.history-controls button{padding:6px 0}
  .record summary{grid-template-columns:minmax(0,1fr) 24px}.record-content{margin-right:0}
  .status{font-size:11px;overflow-wrap:anywhere}.task-detail img{max-height:none;height:auto}
  .failure-stat{align-items:flex-start;flex-direction:column;gap:5px}.failure-stat strong{font-size:38px}.failure-stat span{max-width:none}
  .loop-diagram{min-height:0;padding:22px 14px;gap:8px}.loop-diagram span,.loop-diagram b{padding:9px 10px}.loop-diagram i{font-size:11px}
  .resources summary{font-size:14px;min-height:52px;align-items:center}
  footer{align-items:flex-start;flex-direction:column}
}

@media(max-width:360px){
  .wrap{width:calc(100% - 28px)}
  header{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .facts p{font-size:10px}.loop-diagram i{display:none}
}

.footer-branding{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}

@media(hover:none) and (pointer:coarse){
  summary{min-height:48px}.repo-links a{padding-top:17px;padding-bottom:17px}
}