/* View and Mailings ribbon organization, verified against Publisher help on
   26 October 2026. Shared command sizes follow the existing Home ribbon. */
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group {
  min-width: 0 !important;
  width: max-content !important;
  flex: 0 0 auto;
}
body #mainRibbon.publisher-text-ribbon .publisher-ribbon-content {
  display: flex;
  align-items: flex-start;
  height: 72px;
  min-height: 72px;
  gap: 4px;
}
body #mainRibbon.publisher-text-ribbon .publisher-ribbon-row { display: flex; align-items: flex-start; gap: 4px; }
body #mainRibbon.publisher-text-ribbon .publisher-ribbon-column { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-large,
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-small,
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-check,
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-navigation {
  box-sizing: border-box;
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center;
  border: 1px solid transparent !important;
  color: var(--home-ui-text, #111) !important;
  background: transparent !important;
  font-family: "Segoe UI", Tahoma, sans-serif !important;
  font-size: var(--ribbon-text-size, 14px) !important;
  box-shadow: none;
}
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-large {
  flex-direction: column !important;
  justify-content: center !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  padding: 3px 4px !important;
  gap: 3px !important;
}
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-large > .toolbar-icon {
  width: var(--ribbon-large-icon-size, 28px) !important;
  height: var(--ribbon-large-icon-size, 28px) !important;
  min-width: var(--ribbon-large-icon-size, 28px) !important;
  max-width: var(--ribbon-large-icon-size, 28px) !important;
  min-height: var(--ribbon-large-icon-size, 28px) !important;
  max-height: var(--ribbon-large-icon-size, 28px) !important;
  flex: 0 0 var(--ribbon-large-icon-size, 28px) !important;
  color: inherit !important;
}
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-large > span {
  display: block !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 17px !important;
  max-width: 100%;
}
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-small,
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-check {
  flex-direction: row !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  gap: 5px !important;
  padding: 2px 4px !important;
}
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-small > span,
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-check > span {
  white-space: nowrap !important;
  text-align: left !important;
  line-height: 18px !important;
}
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-check > svg { display: none !important; }
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-check::before {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  border: 1px solid #757575;
  border-radius: 1px;
  background: var(--home-ribbon-bg, #fff);
  color: var(--home-ui-text, #111);
  font: 700 12px/11px "Segoe UI", sans-serif;
  text-align: center;
}
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-check[aria-checked="true"]::before,
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-check[aria-pressed="true"]::before { content: "✓"; }
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group button:not(:disabled):hover,
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group button[aria-expanded="true"] {
  background: var(--home-hover, #e5f1fb) !important;
  border-color: var(--home-rule, #bccbd8) !important;
}
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group button:focus-visible { outline: 2px solid #2d85d1; outline-offset: -2px; }
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group button.active-format,
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group button.is-active,
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-large[aria-pressed="true"],
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-large[aria-checked="true"] {
  background: #d9eaff !important;
  border-color: #7aa7d7 !important;
}
body[data-ui-theme="dark"] #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group button.active-format,
body[data-ui-theme="dark"] #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group button.is-active,
body[data-ui-theme="dark"] #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-large[aria-pressed="true"],
body[data-ui-theme="dark"] #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-large[aria-checked="true"] {
  background: #262626 !important;
  border-color: #8f8f8f !important;
}
body[data-ui-theme="dark"] #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group button:not(:disabled):hover,
body[data-ui-theme="dark"] #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group button[aria-expanded="true"] { background:#414141 !important; }
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group [data-publisher-ribbon-menu] > span::after { content: " ▾"; font-size: 10px; }
body #mainRibbon.publisher-text-ribbon .publisher-ribbon-zoom-field { display:flex; align-items:center; align-self:flex-start; gap:3px; padding-top:4px; }
body #mainRibbon.publisher-text-ribbon #viewZoomPercent { width:56px !important; min-width:56px !important; max-width:56px !important; height:24px !important; min-height:24px !important; }
body #mainRibbon.publisher-text-ribbon .publisher-recipient-navigation { display:flex; align-items:center; gap:2px; padding-top:7px; }
body #mainRibbon.publisher-text-ribbon .ribbon-group.publisher-ribbon-group .publisher-command-navigation {
  width:28px !important; min-width:28px !important; max-width:28px !important;
  height:27px !important; min-height:27px !important; max-height:27px !important;
  padding:3px !important; justify-content:center !important;
}
body #mainRibbon.publisher-text-ribbon .publisher-command-navigation > span { position:absolute !important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap !important; }
body #mainRibbon.publisher-text-ribbon .publisher-recipient-status { display:block; max-width:180px; min-width:118px; padding:6px 3px; font-size:var(--ribbon-text-size,14px); text-align:center; white-space:nowrap; }

/* The actual controls are moved into this body-mounted popup while open, so
   keyboard events, account gating and original listeners remain unchanged. */
.publisher-ribbon-popup[hidden] { display:none !important; }
.publisher-ribbon-popup {
  position:fixed; z-index:14000; box-sizing:border-box; min-width:230px;
  max-width:calc(100vw - 16px); max-height:calc(100vh - 16px); overflow:auto;
  padding:3px; border:1px solid #aaa; background:#fafafa; color:#171717;
  box-shadow:2px 3px 7px #0004; font:13px "Segoe UI",Tahoma,sans-serif;
}
.publisher-ribbon-popup .publisher-command-menu {
  box-sizing:border-box; display:flex; flex-direction:row; align-items:center; gap:8px;
  width:100%; min-height:28px; margin:0; padding:4px 7px; border:1px solid transparent;
  border-radius:0; background:transparent; color:inherit; font:inherit; text-align:left;
}
.publisher-ribbon-popup .publisher-command-menu .toolbar-icon { flex:0 0 18px; width:18px; height:18px; color:inherit; }
.publisher-ribbon-popup .publisher-command-menu > span { white-space:nowrap; }
.publisher-ribbon-popup button:not(:disabled):hover,.publisher-ribbon-popup button:not(:disabled):focus-visible { background:#cce8ff; border-color:#8db5d4; outline:none; }
.publisher-ribbon-popup button:disabled { color:#999; opacity:1; }
.publisher-ribbon-popup hr { margin:3px 3px 3px 30px; border:0; border-top:1px solid #d0d0d0; }
body[data-ui-theme="dark"] .publisher-ribbon-popup { background:#292929; color:#fff; border-color:#595959; }
body[data-ui-theme="dark"] .publisher-ribbon-popup button:not(:disabled):hover,body[data-ui-theme="dark"] .publisher-ribbon-popup button:not(:disabled):focus-visible { background:#454545; border-color:#777; }
body[data-ui-theme="dark"] .publisher-ribbon-popup hr { border-color:#555; }

@media screen {
  body.publisher-hide-page-navigation .editor-body > .sidebar { display:none !important; }
  body.publisher-hide-scratch-area #pageStage { padding:28px 40px !important; }
  body.publisher-hide-scratch-area .page-surface { overflow:hidden !important; }
  body.publisher-show-boundaries #pageStage .text-box,
  body.publisher-show-boundaries #pageStage .linked-text-box { outline:1px dotted #909090; outline-offset:-1px; }
}
@media print { .publisher-ribbon-popup { display:none !important; } }