#browser-room{width:calc(100vw - 2rem);max-width:1600px;height:calc(100dvh - 2rem);max-height:none;box-sizing:border-box;border:1px solid #b5c7cc;border-radius:12px;padding:1rem;color:#183b40;background:#f7faf9;overflow:auto;font:15px/1.5 system-ui,sans-serif}
#browser-room::backdrop{background:#123d44aa}#browser-room [hidden]{display:none!important}#browser-room .browser-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}#browser-room h2{margin:0}#browser-room p{margin:.5rem 0;overflow-wrap:anywhere}#browser-room button,#browser-room select,#browser-room input:not([type=checkbox]),#browser-room textarea{font:inherit;min-height:40px;border:1px solid #91a8ac;border-radius:6px;background:white;color:#183b40;padding:.4rem .6rem;box-sizing:border-box;max-width:100%}#browser-room button{cursor:pointer}#browser-room button:disabled{opacity:.5;cursor:not-allowed}#browser-room :focus-visible{outline:3px solid #087e91;outline-offset:3px}#browser-room .browser-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:1rem}#browser-room section{min-width:0}#browser-room section>label{display:block;margin-top:.5rem}#browser-room section>select,#browser-room textarea{width:100%}#browser-room .browser-controls{display:flex;gap:.4rem;flex-wrap:wrap;align-items:end}#browser-room .browser-controls>label{max-width:100%}#browser-room img{display:block;max-width:100%;height:auto;border:1px solid #c6d4d7}#browser-room .browser-screen{margin:.5rem 0;background:#e7eeee;min-height:60px;overflow:auto}#browser-room #browser-image{cursor:crosshair}#browser-room details{margin:.7rem 0}#browser-room summary{cursor:pointer;font-weight:650}#browser-room li{margin-bottom:.4rem}#browser-room #browser-start,#browser-room #browser-save{background:#116b73;color:white}#browser-room #browser-history button{display:block;width:100%;text-align:left;margin-top:.4rem}#browser-room #browser-status{padding:.4rem .6rem;background:#e4efed;border-radius:5px}
@media(max-width:760px){#browser-room{width:100vw;height:100dvh;padding:.6rem;border-radius:0}#browser-room .browser-grid{grid-template-columns:1fr}#browser-room .browser-grid>section:first-child{order:2}#browser-room .browser-head{align-items:start}#browser-room h2{font-size:1.15rem}}

#browser-room .browser-screen{position:relative}#browser-highlight{position:absolute;outline:3px solid #db342b;pointer-events:none;box-sizing:border-box}

#browser-room #browser-tools{position:sticky;top:0;z-index:3;background:#f7faf9;padding:.4rem 0;border-bottom:1px solid #b5c7cc}#browser-highlight{outline-color:#076bb3;scroll-margin-block:150px 32px}#browser-room .browser-screen{overflow:clip}#browser-room .browser-hint{font-size:.85rem}#browser-room #browser-focus-warnings:not(:empty){border-left:4px solid #98701b;padding:.4rem .6rem;background:#fff4d8}#browser-room #browser-flow-panel{margin-top:0}#browser-room #browser-flow-panel select{width:100%}#browser-room #browser-saved-journey{max-height:300px;overflow:auto}#browser-room #browser-journey-detail{overflow-wrap:anywhere}

/* Keep session controls in view; each working column scrolls independently. */
#browser-room[open]{display:flex;flex-direction:column;overflow:hidden;gap:.4rem}
#browser-room .browser-head,#browser-room>.browser-controls,#browser-room>#browser-status{flex-shrink:0}
#browser-room>#browser-status{margin:0;font-size:.85rem;padding:.2rem .5rem}
#browser-room .browser-grid{flex:1;min-height:0;grid-template-columns:280px minmax(0,1fr)}
#browser-room .browser-grid>section{overflow:auto;min-height:0;scroll-padding:90px 8px;padding:0 .3rem .5rem}
#browser-room #browser-tools{top:0;margin:0;padding:.25rem 0}
#browser-room #browser-focus{font-size:.85rem;margin:.2rem 0}
#browser-room #browser-location,#browser-room #browser-selector{font-size:.85rem}
#browser-room[data-busy=true] button:disabled:not([data-browser-local]){cursor:wait}
#browser-room .browser-head h2{font-size:1.2rem}
#browser-room>.browser-controls select{max-width:min(35vw,380px)}
@media(max-width:760px){
 #browser-room .browser-grid{grid-template-columns:1fr;grid-template-rows:minmax(180px,3fr) minmax(120px,2fr);gap:.4rem}
 #browser-room .browser-grid>section:first-child{border-top:1px solid #b5c7cc;padding-top:.4rem}
 #browser-room>.browser-controls{gap:.2rem}
 #browser-room>.browser-controls select{max-width:150px}
 #browser-room #browser-tools{gap:.2rem}
 #browser-room button,#browser-room select{font-size:.85rem}
}

#browser-room #browser-keyboard-help{font-size:.8rem;margin:.15rem 0}

#browser-room #browser-navigation{position:sticky;top:0;z-index:4;background:#f7faf9;padding-bottom:.3rem;border-bottom:1px solid #b5c7cc}
#browser-room #browser-tools{position:static;border-bottom:0}
#browser-room #browser-keyboard[aria-pressed=true]{background:#116b73;color:white;border-color:#116b73}
#browser-room .browser-grid>section:last-child{scroll-padding-top:var(--browser-navigation-height,150px)}
#browser-highlight{scroll-margin-top:8px}

#browser-room #browser-flow-active>label{display:block;margin-top:.4rem}
#browser-room #browser-flow-trigger,#browser-room #browser-step-assessment{width:100%}
#browser-room #browser-flow-action,#browser-room #browser-flow-record{background:#116b73;color:white}
#browser-room .browser-comparison{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
#browser-room .browser-comparison figure{margin:0;min-width:0}
#browser-room .browser-comparison figcaption{font-weight:650;margin:.4rem 0}
#browser-room #browser-flow-results button{margin:.25rem 0}
@media(max-width:760px){#browser-room .browser-comparison{grid-template-columns:1fr}}

#browser-room #scenario-panel label{display:block;margin-top:.35rem}
#browser-room #scenario-panel select,#browser-room #scenario-panel input{width:100%}
#browser-room #scenario-open{margin-bottom:.5rem}
#browser-room #scenario-panel{overflow:visible}
#browser-room #scenario-summary{margin:.8rem 0;padding:.6rem;border:1px solid #b5c7cc;border-radius:6px}
#browser-room #scenario-summary button{margin:.3rem .4rem .3rem 0}
#browser-room #scenario-next,#browser-room #scenario-record{background:#116b73;color:white}
