/* Help panel and shell. Loaded after the editor stylesheet so these rules win. */

body.md-desk .skip-link {
  position: absolute;
  left: var(--s3);
  top: 0;
  z-index: 20;
  transform: translateY(-120%);
  padding: var(--s2) var(--s3);
  border: var(--rule);
  background: var(--field);
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

body.md-desk .skip-link:focus,
body.md-desk .skip-link:focus-visible {
  transform: none;
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

body.md-desk #work:focus { outline: none; }

body.md-desk #work:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

body.md-desk .ribbon-group-label {
  font-size: 11px;
}

body.md-desk .rbtn,
body.md-desk #root .menu-item,
body.md-desk .portal-menu .menu-item {
  min-height: 24px;
  box-sizing: border-box;
}

body.md-desk .rbtn:disabled,
body.md-desk #root .menu-item:disabled,
body.md-desk .portal-menu .menu-item:disabled {
  color: var(--ink3);
}

body.md-desk .docs ul,
body.md-desk .docs ol {
  display: block;
  margin: 0;
  padding-left: 1.25rem;
}

body.md-desk .docs ul {
  list-style: disc;
}

body.md-desk .docs ol {
  list-style: decimal;
}

body.md-desk .docs li + li {
  margin-top: 0.35rem;
}

body.md-desk > .strip {
  flex-shrink: 0;
}

body.md-desk .strip a:focus-visible,
body.md-desk .strip button:focus-visible {
  outline-offset: -2px;
}

body.md-desk .docs-head h2 {
  font-size: 15px;
}

body.md-desk .toast {
  background: #F7F8F5;
  color: #16233F;
  font-size: 14px;
  border: 1px solid #C9CFD6;
  box-shadow: none;
}

body.md-desk .toast.error,
body.md-desk .toast.success {
  background: #F7F8F5;
  color: #16233F;
}

body.md-desk .toast.error {
  border-left: 3px solid #C0341D;
}

body.md-desk .dialog-backdrop {
  background: rgba(22, 35, 63, 0.28);
}

body.md-desk .ribbon-tab,
body.md-desk .side-content,
body.md-desk .outline-item,
body.md-desk .find-row input[type="text"],
body.md-desk #root .menu-item,
body.md-desk .portal-menu .menu-item,
body.md-desk .dialog input[type="text"],
body.md-desk .dialog input[type="number"],
body.md-desk .dialog select,
body.md-desk #root .btn {
  font-size: 14px;
}

body.md-desk .side-tab,
body.md-desk .outline-level.lvl-4,
body.md-desk .outline-level.lvl-5,
body.md-desk .outline-level.lvl-6,
body.md-desk .status-bar,
body.md-desk .find-count,
body.md-desk .dialog label,
body.md-desk select.inline-select,
body.md-desk .file-menu-note {
  font-size: 11px;
}

body.md-desk .dialog h2 {
  font-size: 15px;
}

body.md-desk .side-content [style*="font-size:12px"],
body.md-desk .side-content [style*="font-size: 12px"],
body.md-desk .dialog [style*="font-size:12px"],
body.md-desk .dialog [style*="font-size: 12px"],
body.md-desk .grid-picker + div,
body.md-desk .rbtn [style*="font-size:12px"],
body.md-desk .rbtn [style*="font-size: 12px"] {
  font-size: 11px !important;
}

/* On a phone the side panel was a flex column and left the page about 110px wide. */
@media (max-width: 560px) {
  body.md-desk .md-stage {
    position: relative;
  }

  body.md-desk .docs {
    position: absolute;
    z-index: 5;
    inset: 0;
    width: auto;
    max-width: none;
    border-left: 0;
  }
}