.demo-help-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.demo-help-toolbar p{margin:0;flex:1 1 240px;font-size:.9rem;color:#41564e}
.demo-help-toggle{border:1px solid #8da99c;border-radius:8px;background:#fffef9;color:#075644;padding:9px 14px;font:inherit;cursor:pointer}
.demo-help-toggle[aria-pressed="true"]{background:#075644;color:#fffef9}
.demo-help-toggle:focus-visible,[data-demo-help]:focus-visible{outline:2px solid #075644;outline-offset:3px}
.demo-help-tooltip{position:fixed;z-index:10000;box-sizing:border-box;width:max-content;max-width:min(330px,calc(100vw - 24px));padding:12px 15px;border:1px solid #8da99c;border-radius:10px;background:#fffef9;color:#142321;box-shadow:0 5px 20px #14232120;font:400 14px/1.5 system-ui,sans-serif;overflow-wrap:anywhere}
.demo-help-tooltip[hidden]{display:none!important}
.demo-help-description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Replace the older picker-only pseudo tooltips with the shared, unclipped help. */
[data-demo-help][data-help]::before,[data-demo-help][data-help]::after{display:none!important}
.demo-help-mode [data-demo-help]{cursor:help}
/* Keep replay content inside its card so mobile help uses the real viewport. */
[data-demo-portal] .portal-view.is-active{grid-template-columns:minmax(0,1fr)}
[data-demo-portal] .portal-card{min-width:0}
[data-demo-portal] .demo-blotter-wrap{max-width:100%;overflow-x:auto}
[data-demo-portal] .demo-marker-label{fill:#142321}
[data-static-trade-blotter]{grid-template-columns:minmax(0,1fr)}
[data-static-trade-blotter] .blotter-panel,[data-static-trade-blotter] .blotter-field{min-width:0}
[data-static-trade-blotter] .blotter-layout{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media(max-width:800px){
 [data-demo-portal].portal-shell{grid-template-columns:minmax(0,1fr)}
 [data-demo-portal] .portal-kpis,[data-demo-portal] .portal-usage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 [data-demo-portal] .portal-status-grid{grid-template-columns:minmax(0,1fr)}
 [data-static-trade-blotter] .blotter-layout{grid-template-columns:minmax(0,1fr)}
}