/* ============ ribbon.css — ribbon, groups, buttons, gallery ============ */
#ribbon{
  background:var(--ribbon-bg);color:var(--ribbon-fg);border-bottom:1px solid #d9d9d9;
  flex:0 0 auto;position:relative;z-index:50;overflow:visible;
}
#ribbon.collapsed .ribbon-tab{display:none}
#ribbon.collapsed{border-bottom:none}
.ribbon-tab{display:flex;align-items:stretch;padding:2px 4px 4px;min-height:96px}
.rgroup{position:relative;padding:2px 6px 0;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.rgroup + .rgroup::before{
  content:"";position:absolute;left:0;top:10px;bottom:8px;width:1px;background:#e3e3e3;
}
.gname{
  font-size:10.5px;color:#666;text-align:center;padding:2px 0 1px;white-space:nowrap;
  user-select:none;flex:0 0 auto;
}
.gbody{display:flex;align-items:stretch;gap:2px;flex:1;min-height:58px}
.rcol{display:flex;flex-direction:column;justify-content:space-between;gap:2px}
.rcol-char{flex-direction:row;align-items:center;justify-content:flex-start;gap:2px;flex-wrap:wrap;max-width:120px}

.ribbon-btn{
  width:30px;height:27px;border-radius:3px;display:flex;align-items:center;justify-content:center;color:#3b3b3b;
  position:relative;flex:0 0 auto;
}
.ribbon-btn svg.ic{width:17px;height:17px}
.ribbon-btn:hover{background:var(--btn-hover)}
.ribbon-btn:active{background:var(--btn-active)}
.ribbon-btn.disabled{color:#b9b9b9;pointer-events:none}
.ribbon-btn.active{background:#d5e4f3;border:1px solid #bcd2ea;box-sizing:border-box}
.ribbon-btn.dd-btn::after{
  content:"";position:absolute;bottom:2px;right:2px;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3.5px solid currentColor;opacity:.8;
}
.bigbtn-wrap{position:relative;display:flex}
.bigbtn{
  display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 8px 3px;border-radius:3px;height:100%;
  min-height:58px;min-width:52px;color:#3b3b3b;position:relative;
}
.bigbtn svg.ic{width:23px;height:23px}
.bigbtn .big-label{font-size:11px}
.bigbtn .ic.caret{width:8px;height:8px;position:absolute;bottom:4px;right:3px;opacity:.8}
.bigbtn:hover{background:var(--btn-hover)}
.bigbtn:active{background:var(--btn-active)}
.bigbtn.disabled{color:#b9b9b9;pointer-events:none}
.bigbtn.disabled:hover{background:none}
.btn-dd-wrap{position:relative;display:flex}

/* combo boxes */
.combo{display:flex;align-items:stretch;margin-bottom:3px}
.combo-btn{
  border:1px solid var(--input-border);background:var(--input-bg);color:#262626;height:23px;
  display:flex;align-items:center;justify-content:center;border-radius:2px 0 0 2px;padding:0;
}
.combo-btn:hover{background:#f5f5f5}
.combo-main{min-width:96px;padding:0 8px;font-size:12px;overflow:hidden;border-right:none;justify-content:flex-start;border-radius:2px 0 0 2px}
.combo-main:hover{background:#f5f5f5}
.combo-arrow{width:17px;border-left:none;border-radius:0 2px 2px 0;color:#555}
.combo-arrow svg{width:8px;height:8px}
.combo-size .combo-main{min-width:52px}
#fontFamilyVal{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:88px}

/* steppers (Layout > Paragraph) */
.indent-steppers{display:flex;flex-direction:column;justify-content:space-between;gap:2px;padding:2px 0}
.stepper{
  display:flex;align-items:center;gap:3px;border:1px solid var(--input-border);border-radius:2px;background:var(--input-bg);
  height:24px;padding:0 3px;
}
.stepper-label{font-size:10.5px;color:#555;padding:0 4px;white-space:nowrap}
.stepper-val{font-size:11px;min-width:38px;text-align:center;color:#262626}
.stepper-btn{width:16px;height:16px;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#444}
.stepper-btn:hover{background:var(--btn-hover)}
.stepper-btn svg{width:9px;height:9px;fill:currentColor}

/* launcher */
.launcher{
  position:absolute;right:2px;bottom:2px;width:14px;height:14px;border-radius:2px;color:#666;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.launcher::before{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4.5px solid currentColor;margin-bottom:2px}
.launcher:hover{background:var(--btn-hover)}
.launcher:active{background:var(--btn-active)}

/* styles gallery */
.rgroup-styles{flex:1;min-width:0}
.rgroup-styles .gbody{display:flex;align-items:flex-end}
.styles-gallery{
  display:flex;gap:0;flex:1;min-width:0;overflow:hidden;position:relative;height:72px;
}
.style-card{
  width:82px;flex:0 0 auto;border:1px solid transparent;border-radius:3px;cursor:pointer;padding:5px 6px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#fff;
  overflow:hidden;position:relative;
}
.style-card .sc-name{font-size:9.5px;color:#666;margin-top:3px;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.style-card .sc-preview{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.style-card:hover{border-color:#c8c8c8;background:#f7f7f7}
.style-card.active{border:1px solid #2b579a;background:#eaf1fb}
.style-card .sc-caret{position:absolute;top:2px;right:2px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #777;opacity:0}
.style-card:hover .sc-caret{opacity:1}
.styles-more{width:24px;height:27px}
.styles-more::after{content:none}
.styles-more-wrap .menu{max-height:60vh}
.styles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;padding:4px}
.styles-grid .style-card{width:120px;height:52px;border:1px solid #e0e0e0}

/* ribbon display options menu */
.ribbon-display-btn svg{width:18px;height:18px;fill:currentColor}

/* responsive */
@media (max-width:1250px){
  .rgroup-styles .style-card{width:64px}
}
@media (max-width:1080px){
  .gname{font-size:9.5px}
  .combo-main{min-width:78px}
}