/* Native additions use the same faces, surfaces, and hit areas as Bonk. */
#pretty_top_bar {
  display: flex;
  align-items: center;
  min-width: 0;
}
#pretty_top_identity {
  position: relative;
  display: flex;
  align-items: center;
  height: 35px;
  min-width: 138px;
  flex: 0 1 auto;
}
#pretty_top_identity > #pretty_top_small_preview {
  flex: 0 0 33px;
  margin-right: 0;
}
#pretty_top_identity > #pretty_top_name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#pretty_top_identity > #pretty_top_level,
#pretty_top_bar > #pretty_top_playercount {
  white-space: nowrap;
  flex-shrink: 0;
}
#pretty_top_identity.has-native-xp > #pretty_top_name,
#pretty_top_identity.has-native-xp > #pretty_top_level {
  align-self: flex-start;
  line-height: 21px;
}
#pretty_top_identity > #xpbarcontainer {
  position: absolute !important;
  inset: auto 10px 3px 48px !important;
  width: auto !important;
  height: 12px;
  margin: 0 !important;
  pointer-events: none;
}
#pretty_top_identity #xpbar {
  box-sizing: border-box;
  position: absolute !important;
  width: calc(100% - 54px) !important;
  height: 5px;
  inset: 4px auto auto 0 !important;
  margin: 0 !important;
  border: 1px solid #131c27;
  border-radius: 2px;
  background: #131c27;
}
#pretty_top_identity #xpbarfill {
  max-width: 100%;
}
#pretty_top_identity .xpbarsegment {
  width: 1px;
  background: #131c27;
}
#pretty_top_identity #xpbartext {
  position: absolute !important;
  inset: -5px auto auto calc(100% + 6px) !important;
  width: 50px;
  color: white;
  font:
    11px/12px futurept_medium,
    sans-serif;
  text-align: left;
  white-space: nowrap;
}
#pretty_top_workbench {
  margin-left: auto;
}
#pretty_top_bar > .pretty_top_button {
  box-sizing: border-box;
  position: relative;
  inset: auto;
  flex-shrink: 0;
}
#pretty_top_bar > .native-workbench-button {
  box-sizing: border-box;
  height: 34px;
  min-width: 86px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: white;
  font:
    16px/34px futurept_b1,
    sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
#pretty_top_bar > #pretty_top_lobby {
  min-width: 58px;
}
#pretty_top_bar [hidden],
#workbench_help[hidden] {
  display: none !important;
}
#pretty_top_bar > .native-workbench-button:focus-visible {
  outline: 2px solid white;
  outline-offset: -3px;
}
#classic_mid {
  height: min(440px, calc(100% - 150px));
}
#classic_mid_help {
  padding: 0;
  border: 0;
  flex-shrink: 0;
  box-sizing: content-box;
}
#workbench_help {
  position: absolute;
  inset: 35px 0 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  color: #242424;
  background: #cfd8dc;
  font:
    18px/1.5 futurept_book,
    sans-serif;
  pointer-events: auto;
}
#workbench_help * {
  box-sizing: border-box;
}
.help-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 24px;
  color: white;
}
.help-topbar h1 {
  margin: 0;
  font:
    24px/1.4 futurept_b1,
    sans-serif;
}
#workbench_help button {
  border: 0;
  border-radius: 2px;
  padding: 7px 14px;
  color: white;
  font:
    17px/1.4 futurept_book_fixed,
    sans-serif;
  cursor: pointer;
}
#workbench_help a {
  color: #005f56;
  text-underline-offset: 3px;
}
#workbench_help :focus-visible {
  outline: 3px solid #006b61;
  outline-offset: 2px;
}
.help-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  flex: 1;
}
#workbench_help_topics {
  overflow: auto;
  padding: 18px 0;
  background: #bfcbd0;
  scrollbar-color: #795548 #bfcbd0;
}
#workbench_help_topics button {
  display: block;
  width: 100%;
  background: transparent;
  color: #242424;
  text-align: left;
  padding: 9px 24px;
  border-radius: 0;
}
#workbench_help_topics button:hover {
  background: #b1c0c6;
}
#workbench_help_topics button[aria-current="page"] {
  background: #795548;
  color: white;
}
#workbench_help_article {
  overflow: auto;
  padding: 28px max(28px, calc((100% - 76ch) / 2));
  scrollbar-color: #795548 #cfd8dc;
}
#workbench_help_article > * {
  max-width: 74ch;
  margin-left: auto;
  margin-right: auto;
}
#workbench_help_article h2 {
  margin-top: 0;
  margin-bottom: 14px;
  font:
    30px/1.2 futurept_b1,
    sans-serif;
}
#workbench_help_article h3 {
  margin-top: 30px;
  margin-bottom: 8px;
  font:
    23px/1.3 futurept_b1,
    sans-serif;
}
#workbench_help_article p {
  margin-top: 0;
  margin-bottom: 16px;
}
#workbench_help_article ul,
#workbench_help_article ol {
  padding-left: 24px;
}
#workbench_help_article li {
  margin-bottom: 7px;
}
#workbench_help_article pre {
  padding: 16px;
  background: #e8ecee;
  overflow: auto;
  font:
    14px/1.6 ui-monospace,
    monospace;
  tab-size: 2;
}
#workbench_help_article code {
  font:
    0.85em/1.5 ui-monospace,
    monospace;
  overflow-wrap: anywhere;
}
#workbench_help_article pre code {
  font: inherit;
  white-space: pre;
}
#workbench_help_article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}
#workbench_help_article th,
#workbench_help_article td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #a8b6bd;
}
#workbench_help_article th {
  font-family: futurept_b1, sans-serif;
}
.help-table-scroll {
  overflow-x: auto;
}
.help-example-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 1000px) {
  #pretty_top_playercount {
    display: none !important;
  }
  #pretty_top_identity > #pretty_top_level {
    padding-left: 8px;
    padding-right: 8px;
  }
  #pretty_top_bar > .pretty_top_button:not(.native-workbench-button) {
    width: 44px;
  }
}
@media (max-width: 700px) {
  #pretty_top_bar {
    flex-wrap: wrap;
    height: 70px;
  }
  #pretty_top_bar > #pretty_top_identity {
    flex: 1;
    max-width: calc(100% - 174px);
  }
  #pretty_top_identity > #pretty_top_name {
    padding-left: 7px;
    padding-right: 8px;
  }
  #pretty_top_identity > #pretty_top_level {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 13px;
  }
  #pretty_top_bar > .native-workbench-button {
    font-size: 14px;
    min-width: 80px;
    padding: 0 9px;
  }
  #pretty_top_bar > .pretty_top_button:not(.native-workbench-button) {
    flex: 1 0 20%;
    height: 34px;
  }
  #pretty_top_bar > #pretty_top_lobby {
    order: 3;
    flex: 0 0 58px;
  }
  #pretty_top_bar:has(#pretty_top_lobby:not([hidden]))
    > .pretty_top_button:not(.native-workbench-button) {
    flex-basis: calc((100% - 58px) / 5);
  }
  #pretty_top_bar > #pretty_top_lobby ~ .pretty_top_button {
    order: 3;
  }
  #workbench_help {
    inset: 70px 0 0;
  }
  .help-topbar {
    padding: 9px 14px;
  }
  .help-layout {
    display: flex;
    flex-direction: column;
  }
  #workbench_help_topics {
    display: flex;
    flex-shrink: 0;
    overflow-x: auto;
    padding: 0;
  }
  #workbench_help_topics button {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 14px;
    font-size: 16px;
  }
  #workbench_help_article {
    padding: 22px 18px;
    font-size: 17px;
  }
  #workbench_help_article h2 {
    font-size: 26px;
  }
  #workbench_help_article pre {
    padding: 12px;
    font-size: 13px;
  }
}