/* One office row at every width. Panels never create a lower row. */
main{grid-template-rows:0 64px minmax(0,1fr) 44px 20px 0;gap:6px}
.page-title,.disclaimer{display:none}
.workspace{position:relative;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:stretch}
.workspace:has(>aside:not([hidden])){grid-template-columns:minmax(0,1fr) min(340px,42%)}
.workspace>.stage{grid-column:1;grid-row:1;height:100%;min-height:0}
.workspace>aside{grid-column:2;grid-row:1;min-height:0;height:100%;min-width:0}
.workspace>.inspector{display:flex;flex-direction:column}
.inspector-top{display:flex;align-items:center;flex-shrink:0;padding:7px 12px 0}
#close-inspector{font-size:20px;padding:0 5px;background:none;border:0;margin-left:8px}
#agent-id{margin-left:auto}
.inspector #profile{flex-shrink:0;border-right:0;padding:10px 12px}
.inspector .portrait{float:left;margin:0 10px 5px 0;width:35px;height:35px;font-size:21px}
.inspector #profile h2{font-size:15px}
.inspector .tabs{flex-shrink:0}
.inspector #profile-body{min-height:0;flex:1;overflow:auto}
.comms-sidebar{position:relative}
.comms-heading,.channel-picker,.conversation-title{flex-shrink:0}
#channel-messages{flex:1 1 0;min-height:0;overflow:auto}
#channel-form{flex-shrink:0;background:#14202b}
#market-source{max-height:35%;flex-shrink:0}
#market-source[open]{position:absolute;left:0;right:0;bottom:0;max-height:70%;z-index:5;background:#192a34;border:1px solid #4d626e}
/* Keep the composer accessible even while inspecting the demo data. */
.comms-sidebar:has(#market-source[open]) #market-source{bottom:50px}
.legend{flex-wrap:wrap;gap:5px 9px}
.scene-label{max-width:calc(100% - 32px)}
.scene-label h2{font-size:14px}
.scene-label p,.scene-label .eyebrow{display:none}
.metrics small{display:none}
.metrics article:last-child strong{float:none;margin:3px 0}
@media(max-width:720px){
 main{grid-template-rows:0 51px minmax(0,1fr) 40px 18px 0;gap:5px}
 .comms-sidebar{grid-row:1}
}
@media(max-width:560px){
 .workspace:has(>aside:not([hidden])){grid-template-columns:minmax(0,1fr)}
 .workspace>aside{grid-area:1 / 1;position:absolute;right:0;top:0;bottom:0;width:min(300px,78%);z-index:8;box-shadow:-10px 0 24px #0006}
 .workspace:has(>aside:not([hidden])) .scene-label{display:none}
 .comms-heading{padding:8px 10px}
 .conversation-title{padding:7px 10px}
 #channel-form{padding:8px 7px}
}
@media(max-width:720px) and (max-height:600px){
 main{grid-template-rows:0 40px minmax(0,1fr) 34px 16px 0;gap:4px}
 .metrics article{padding:3px 5px}
 .metrics strong{margin:1px 0}
 .controlbar button{padding:5px 7px}
 .comms-heading{padding:5px 10px}
 .conversation-title{padding:4px 10px}
}

@media(min-width:721px){main{grid-template-rows:0 104px minmax(0,1fr) 44px 20px 0;}}
#pnl-breakdown{white-space:normal;line-height:1.3}
#connected-accounts .connected-account{margin:10px 0;border:1px solid #344854;border-radius:8px;background:#111d25;overflow:hidden}
#connected-accounts .connected-account>summary{display:flex;align-items:center;gap:10px;padding:14px 12px;cursor:pointer;list-style:none}
#connected-accounts .connected-account>summary::-webkit-details-marker{display:none}
#connected-accounts .connected-account>summary::before{content:'▸';color:#b9f279;flex:none}
#connected-accounts .connected-account[open]>summary::before{content:'▾'}
#connected-accounts .connected-account>summary>span:first-of-type{flex:1;min-width:0;overflow-wrap:anywhere}
#connected-accounts .connected-account summary b{display:block;font-size:14px}
#connected-accounts .connected-account summary small{display:block;font-size:11px;color:#aebdc6;margin-top:3px}
#connected-accounts .account-state{font-size:10px;max-width:110px;color:#b7c8bc;text-align:right}
#connected-accounts .account-details{padding:4px 12px 14px;border-top:1px solid #344854}
#connected-accounts .account-details>article{padding:0;border:0;background:transparent;margin:0}
#connected-accounts .connection-hint{font-size:12px;color:#aebdc6}
#connected-accounts #connection-chooser{margin:18px 0;border:1px solid #455864;border-radius:8px;padding:12px}
#connected-accounts #connection-chooser>summary{cursor:pointer;font-weight:600}
#connected-accounts #connection-form-status,#connected-accounts #connection-notice{display:block;white-space:normal;overflow-wrap:anywhere;font-size:13px}
#connected-accounts #connection-form-status:not(:empty),#connected-accounts #connection-notice:not(:empty){margin:12px 0;padding:12px;background:#20313b;border-radius:6px;border-left:3px solid currentColor}
#connected-accounts .negative{color:#ff7184}#connected-accounts .positive{color:#b9f279}

#direction-performance details{border:1px solid #354954;border-radius:8px;padding:12px;margin:10px 0}#direction-performance summary{cursor:pointer;line-height:1.7}#direction-performance .direction-result{font-size:18px;margin:10px 0}#direction-performance select{width:100%;min-width:0}#direction-performance .tabs button[aria-pressed=true]{background:#b9f279;color:#142018}