/* The room stays visible while the visitor chooses, then confirms attendance. */
#start:has(.attendance-choice){--attendance-color:#43634b;padding-bottom:calc(28px + env(safe-area-inset-bottom))!important}
#start:has(.attendance-choice)[data-attendance=present]{--attendance-color:#ad5735}
#start:has(.attendance-choice)>.wrap{display:flex;flex-direction:column;min-height:0}
#start:has(.attendance-choice) .journey-animation{flex:1;min-height:0;max-height:none;width:100%;max-width:720px;margin:0 auto 12px;display:flex;align-items:stretch;justify-content:center;overflow:hidden}
#start:has(.attendance-choice) .journey-animation one-mm-moving-home{display:flex;flex-direction:column;width:100%;height:100%;min-height:0}
#start:has(.attendance-choice) #journey-choices{flex-shrink:0;margin-top:0}
#start:has(.attendance-choice) .sectionhead{margin-bottom:8px;flex-shrink:0}
#start:has(.attendance-choice) .attendance-choice{margin:0}
#start:has(.attendance-choice) .attendance-choice button{min-height:86px;padding:12px 16px!important;gap:5px;transition:background .2s,border-color .2s,color .2s}
#start:has(.attendance-choice) .attendance-choice button[data-attendance=absent][aria-pressed=true]{background:#43634b;border-color:#43634b;color:#fffdf6}
#start:has(.attendance-choice) .attendance-choice button[data-attendance=present][aria-pressed=true]{background:#ad5735;border-color:#ad5735;color:#fffdf6}
#start:has(.attendance-choice) .attendance-choice button[aria-pressed=true] small,#start:has(.attendance-choice) .attendance-choice button[aria-pressed=true] span{color:#fff6e9}
#start:has(.attendance-choice) #journey-result:not(:empty){position:static;flex-shrink:0;border:0;backdrop-filter:none;background:transparent;padding:0;margin:0;width:100%}
#start .attendance-confirm-area{width:100%;max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
#start #attendance-confirm-hint{font-size:12px;line-height:1.4;color:#697162;margin:10px 0 0;text-align:center;letter-spacing:0}
#start #attendance-confirm{width:100%;min-height:56px;border-radius:10px;font-size:15px;font-weight:600;background:var(--attendance-color);border-color:var(--attendance-color);color:#fff;transition:background .2s,border-color .2s}
#start #attendance-confirm:hover:not(:disabled){background:var(--attendance-color)!important;filter:brightness(.94)}
#start #attendance-confirm:disabled{background:#dce0d5;border-color:#dce0d5;color:#707866;opacity:1;cursor:default}
@media(max-width:760px){
 #start:has(.attendance-choice){padding-top:10px!important;padding-bottom:calc(28px + env(safe-area-inset-bottom))!important}
 #start:has(.attendance-choice) .journey-animation{margin-bottom:10px}
 #start:has(.attendance-choice) .attendance-choice .choice-grid{gap:10px}
 #start:has(.attendance-choice) .attendance-choice button{min-height:82px!important;padding:10px 12px!important;gap:4px}
 #start:has(.attendance-choice) .attendance-choice strong{font-size:17px;line-height:1.3}
 #start:has(.attendance-choice) .attendance-choice small{font-size:9px;line-height:1.2;letter-spacing:1px}
 #start:has(.attendance-choice) .attendance-choice span{font-size:10px;line-height:1.4}
 #start:has(.attendance-choice) .screen-back{min-height:36px;margin-bottom:4px}
 #start:has(.attendance-choice) .sectionhead{margin-bottom:6px}
 #start #attendance-confirm-hint{font-size:11px;margin-top:8px}
 #start .attendance-confirm-area{gap:7px}
}
@media(max-width:760px) and (max-height:680px){
 #start:has(.attendance-choice) h2{font-size:23px!important;line-height:1.3;margin:4px 0 6px!important}
 #start:has(.attendance-choice) .attendance-choice button{min-height:76px!important;padding:8px 10px!important}
 #start:has(.attendance-choice) .attendance-choice strong{font-size:16px}
 #start:has(.attendance-choice) .sectionhead>p{font-size:10px;line-height:1.4;margin:3px 0}
 #start:has(.attendance-choice) .journey-animation{margin-bottom:8px}
 #start #attendance-confirm-hint{margin-top:6px}
 #start #attendance-confirm{min-height:54px}
}
/* Both choice steps leave the same comfortable gap below their main action. */
#start[data-choice-step="2"]{padding-bottom:calc(108px + env(safe-area-inset-bottom))!important}
#start[data-choice-step="2"] #journey-result:not(:empty){padding-bottom:calc(28px + env(safe-area-inset-bottom))}
#start[data-choice-step="2"] .journey-next #journey-continue{min-height:56px}
@media(max-width:760px){
 #start[data-choice-step="2"] #journey-result:not(:empty){padding:12px 16px calc(28px + env(safe-area-inset-bottom))}
 #start[data-choice-step="2"] #journey-choices{flex-shrink:0}
}

#start .attendance-confirm-area{padding-top:10px}