/* A quiet arrival detail inside the existing scrolling mission content. */
.outfit-arrival{display:grid;grid-template-columns:48px minmax(0,1fr) 44px;align-items:center;gap:9px;padding:7px 9px;margin:0 0 8px;border:1px solid #c6d1b2;border-radius:12px;background:#edf2df;color:#304b37}
.outfit-arrival>.character-portrait{width:48px;height:48px;border-radius:50%;background:#dce8c6}
.outfit-arrival-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.outfit-arrival-copy>small{font-size:11px;line-height:1.2;color:#526447}
.outfit-arrival-copy>strong{font-size:16px;line-height:1.2;overflow-wrap:anywhere}
.outfit-arrival>.outfit-arrival-hear{width:44px;min-width:44px;height:44px;margin:0}
.outfit-arrival+.picture-mission{margin-top:8px}
.dialog-card:has(.outfit-arrival)>#speech-stop.inline-speech{grid-column:1;grid-row:2;align-self:center;justify-self:start;margin:0;min-height:44px;max-width:100%;padding:8px 10px;font-size:14px}
.dialog-card:has(.outfit-arrival):has(>#speech-stop:not([hidden]))>#dialog-title{visibility:hidden}
@media(max-width:360px),(max-height:430px) and (orientation:landscape){
 .outfit-arrival{grid-template-columns:40px minmax(0,1fr) 44px;padding:5px 7px;gap:7px;margin-bottom:6px}
 .outfit-arrival>.character-portrait{width:40px;height:40px}
 .outfit-arrival-copy>strong{font-size:14px}
 .outfit-arrival-copy>small{font-size:10px}
 .outfit-arrival+.picture-mission{margin-top:6px}
}
/* The very short landscape card has one header row. Its speaker and exit
   stay fixed while the outfit and mission pictures share the scroll area. */
@media(max-height:430px) and (orientation:landscape){
 .dialog-card:has(.outfit-arrival){grid-template-columns:minmax(0,1fr) 44px 44px;grid-template-rows:auto minmax(0,1fr) auto;gap:6px;padding:10px 12px;height:100%}
 .dialog-card:has(.outfit-arrival)>#dialog-eyebrow{display:none}
 .dialog-card:has(.outfit-arrival)>#dialog-title{grid-column:1;grid-row:1;align-self:center;font-size:22px;line-height:1.1;margin:0}
 .dialog-card:has(.outfit-arrival)>#speech-stop.inline-speech{grid-row:1}
 .dialog-card:has(.outfit-arrival)>#dialog-hear{grid-column:2;grid-row:1;margin:0}
 .dialog-card:has(.outfit-arrival)>#dialog-close{grid-column:3;grid-row:1;margin:0}
 .dialog-card:has(.outfit-arrival)>#dialog-content{grid-column:1/-1;grid-row:2}
 .dialog-card:has(.outfit-arrival)>#dialog-action{grid-column:1/-1;grid-row:3;margin:0;min-height:48px}
}