/* Keep the phase title on one line and reserve less space for confirmations. */
.card-panel{height:100%}
.card-button{display:flex;align-items:center;justify-content:center;flex:1 1 0;height:100%}
.card-button img{height:100%;width:100%;object-fit:contain}
@media(max-width:620px){
 .phase-control select{width:72px;max-width:72px}
 .flow-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .flow-actions button:only-child{grid-column:1/-1}
 .flow-actions button:last-child:nth-child(3){grid-column:1/-1}
 .flow-actions button{min-height:44px;font-size:13px;padding:8px 9px}
}
@media(max-height:520px) and (min-width:621px){
 .instruction{grid-template-rows:auto minmax(0,1fr) 30px auto;gap:5px;padding:9px 15px 7px}
 .instruction-heading .eyebrow,.instruction .source{display:none}
 .instruction-heading h2{font-size:24px;margin:0}
 .reader-navigation{min-height:30px}
 .flow-actions button{min-height:34px;padding:6px 9px;font-size:12px}
 .card-button{max-height:calc(100% - 68px)}
 .card-meta{font-size:11px;gap:4px}
 .tie-button{font-size:10px;min-height:27px;padding:4px 7px}
 .card-panel .private-strip{display:flex;flex-wrap:wrap;gap:3px}
 .card-panel .private-strip button{flex:1;min-width:32px}
 .card-panel .private-strip img{display:none}
 .card-panel:has(.private-strip) .card-button{max-height:calc(100% - 94px)}
}