/* Menu controls are 10% lower: 44px * .9 = 39.6px; long labels may grow. */
.ui-order-host{display:flex;flex-wrap:wrap;align-items:center;gap:4px!important;min-width:0;max-width:100%;margin:4px 0 8px!important;padding:0 0 4px!important}
.ui-order-host>button{flex:0 1 auto;min-width:44px;min-height:39.6px;max-width:100%;padding:4.5px 8px!important;font-size:13px;line-height:1.2;white-space:normal;overflow-wrap:anywhere;margin:0!important}
.ui-order-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px;min-width:0;max-width:100%;font-size:.8rem;margin:0 0 0 auto;order:2147483647;flex:0 0 44px}
.ui-order-bar>.ui-order-toggle{display:grid;place-items:center;width:44px;min-width:44px;min-height:39.6px;padding:7px;margin:0;background:transparent;color:var(--text);border-color:transparent}
.ui-order-toggle:hover{background:var(--soft);border-color:var(--accent)}.ui-order-toggle svg{width:22px;height:22px;fill:currentColor}
.ui-order-bar.is-editing{flex:1 0 100%;justify-content:flex-start}.ui-order-tiles{margin:0 0 4px auto}
.ui-order-panel{display:flex;flex-wrap:wrap;align-items:end;gap:4px;min-width:0;max-width:100%;width:100%}.ui-order-panel[hidden],.ui-order-bar[hidden]{display:none}.ui-order-panel label{min-width:0;flex:1 1 150px}.ui-order-panel select{width:100%;max-width:100%}.ui-order-panel small{flex-basis:100%}.ui-order-bar [role=status]{overflow-wrap:anywhere}
.ui-order-editing>button{cursor:grab;outline:1px dashed var(--accent,#55ccd1)}.ui-order-editing>button:active{cursor:grabbing}
@media(max-width:640px){.ui-order-host>button{font-size:12px;padding:5px 7px!important}.ui-order-host{gap:3px!important}}
@media print{.ui-order-bar{display:none!important}}

/* Follow the real header height, including wrapped selectors and live messages. */
#tabs{position:sticky;top:var(--portal-header-height,0px);z-index:19;background:var(--bg);max-height:max(40px,calc(100dvh - var(--portal-header-height,0px) - 12px));overflow:auto;scrollbar-width:thin}
html{scroll-padding-top:calc(var(--portal-header-height,0px) + var(--portal-menu-height,0px) + 8px)}
@media print{#tabs{position:static;max-height:none;overflow:visible}}

.ui-order-editing>button{touch-action:none}.ui-order-dragging{opacity:.55}.ui-order-target{outline:3px solid var(--accent,#55ccd1)!important}