/* Common independent grid editor; the legacy constructor remains available to its callers. */
#w-rmb .grids-workspace{display:flex;flex:1 1 auto;min-height:0;min-width:0;height:100%;gap:8px}
#w-rmb .grids-canvas-area{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;min-height:0}
#w-rmb #rmbCv{display:block;touch-action:none;cursor:grab;width:100%;flex:1 1 auto;min-height:200px}
#gridsTools{flex-wrap:wrap;flex:0 0 auto;gap:4px}
#gridsTools input[type=number]{width:38px}
#gridsTools input[type=color]{width:28px;height:22px;padding:0}
#gridsRowsPane{flex:0 0 260px;min-width:150px;max-width:45%;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line);padding-left:6px;background:var(--bg)}
.grids-rows-head{display:flex;align-items:center;justify-content:space-between;color:var(--acc);font-weight:700;letter-spacing:.05em}
#gridsRowsPane .tools{display:flex;flex-wrap:wrap;gap:3px}
#gridsRowsList{overflow:auto;flex:1 1 auto;min-height:140px;max-height:75vh;font:13px/26px var(--ff,Consolas,monospace)}
#gridsRowsList .grids-row{display:grid;grid-template-columns:38px minmax(0,1fr);height:26px;align-items:center}
#gridsRowsList .grids-row.current{background:color-mix(in srgb,var(--acc) 22%,transparent)}
#gridsRowsList .grids-row>button{font:12px monospace;border:0;padding:0;background:none;color:var(--dim);height:26px}
#gridsRowsList input{width:100%;min-width:0;box-sizing:border-box;font:inherit;letter-spacing:1px;height:26px;border:0;background:transparent;color:var(--txt);padding:0 4px;border-radius:0}
#gridsRowsList input:focus{outline:1px solid var(--acc)}
#gridsRowsList .grids-row-editor{position:relative;min-width:0;height:100%;overflow:hidden}
#gridsRowsList .grids-row-ink{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;padding:0 4px;pointer-events:none;color:var(--txt);font:inherit;letter-spacing:1px;white-space:pre}
#gridsRowsList .grids-row-bits{display:block;flex:none;white-space:pre;transform-origin:left center}
#gridsRowsList .grids-bit-changed{color:var(--gold,#ffd166);text-decoration:underline;text-underline-offset:3px}
#gridsRowsList .grids-row-editor input{position:relative;color:transparent;caret-color:var(--txt);-webkit-text-fill-color:transparent;opacity:1}
#gridsRowsList .grids-row-editor:focus-within .grids-row-ink{visibility:hidden}
#gridsRowsList .grids-row-editor input:focus{color:var(--txt);-webkit-text-fill-color:var(--txt)}
#gridsRowsInfo{font:12px monospace;padding:5px;color:var(--dim)}
#gridsRowsLock.on{color:var(--gold)}
#w-rmb #gridsToolbar{order:-2}
@media(max-width:760px),(pointer:coarse) and (max-width:1100px){
 #w-rmb .grids-workspace{height:auto;flex-direction:column}
 #w-rmb .grids-canvas-area{flex:0 0 auto}
 #w-rmb #rmbCv{order:2;flex:0 0 auto!important;height:clamp(220px,48svh,520px)!important}
 #gridsRowsPane{flex:0 0 auto;max-width:100%;width:100%;box-sizing:border-box;border-left:0;border-top:1px solid var(--line);padding:6px 0}
 #gridsRowsList{height:220px;max-height:220px}
 #gridsRowsPane button{min-height:36px}
 #gridsRowsList .grids-row,#gridsRowsList .grids-row>button,#gridsRowsList input{height:36px;min-height:36px}

 #w-rmb #gridsTools button,#w-rmb #gridsTools label{min-height:44px!important}
}

body:not(.solo) #w-tri:not(:has(#triBind:not([hidden]))){display:none!important}

#w-rmb #rmbCv.rmb-editing{cursor:crosshair}

/* Compact grid toolbar; geometry is still produced by the shared lpTools/tzGeo. */
@media(min-width:761px) and (pointer:fine){
 #w-rmb .tools.lpw{gap:2px!important;row-gap:2px!important;margin-bottom:2px}
 #w-rmb .tools.lpw :is(button,select,label){height:20px!important;min-height:20px!important;font-size:11px!important;line-height:18px!important}
 #w-rmb .tools.lpw :is(button,select,label).tz.tz.tz{padding-left:calc(var(--t) + 1px)!important;padding-right:calc(var(--t) + 1px)!important}
 #w-rmb .tools.lpw input[type=color]{width:18px!important;height:16px!important;padding:0;flex-basis:18px!important}
 #w-rmb .tools.lpw input[type=number]{width:28px;height:18px;font-size:11px;padding:0 2px}
}

#rmbTextStats .rmb-count-letter{cursor:pointer;user-select:none}
#rmbTextStats .rmb-letter-picked{outline:2px solid #ffe066;outline-offset:-2px;background:color-mix(in srgb,var(--gold) 16%,var(--panel))}
#rmbTextStats:focus{outline:none}
#rmbTextStats .rmb-count-letter:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
#rmbTextStats .rmb-letter-actions{margin-top:3px}

/* Equal-width tool groups fill the grid panel; controls keep shared angular geometry. */
#gridsToolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%;min-width:0;flex:0 0 auto;margin-bottom:4px;container-type:inline-size}
#gridsToolbar .grids-toolgroup{min-width:0;padding:3px 6px 4px;border-top:1px solid var(--grid-group-color);border-bottom:1px solid var(--line);background:var(--panel);clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}
#gridsToolbar .grids-toolheading{text-align:center;color:var(--grid-group-color);font:700 11px/16px Consolas,monospace;letter-spacing:.07em;user-select:none}
#gridsToolbar .tools.lpw{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:center;justify-content:center;min-width:0;width:100%;margin:2px 0 0;--gon:var(--grid-group-color)}
@container (max-width:640px){#gridsToolbar .grids-toolgroup{grid-column:span 3}}
@media(max-width:760px),(pointer:coarse) and (max-width:1100px){
 #gridsToolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
 #gridsToolbar .grids-toolgroup{grid-column:auto}
 #gridsToolbar .grids-toolheading{font-size:12px;line-height:20px}
 #w-rmb:not(.rmb-settings-open) #gridsToolbar [data-grid-group]:not([data-grid-group=draw]):not([data-grid-group=edit]){display:none}
}
@media(max-width:480px){#gridsToolbar{grid-template-columns:minmax(0,1fr)}}