/* Spirit-level language selector. Real text and controls over lightweight materials. */
@font-face { font-family: Manrope; src: url("assets/fonts/manrope-regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
.language-switch { position: relative; z-index: 30; overflow: visible; }
.language-switch *, .language-switch *::before, .language-switch *::after { box-sizing: border-box; }
.language-switch .language-level {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 232px;
  max-width: 100%;
  min-height: 56px;
  padding: 6px 12px;
  border: 1px solid #b8bcb9;
  border-radius: 9px;
  background: repeating-linear-gradient(0deg, #fff1 0 1px, #00000008 1px 2px), linear-gradient(#e1e3df, #939c9d 15%, #bec3c0 47%, #8c9698 83%, #d4d8d4);
  box-shadow: inset 0 1px #ffffffe0, inset 0 -2px #4e5659, 0 4px 8px #0006;
  color: #f6f5f1;
  font-family: inherit;
}
.language-level::before, .language-level::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 9px;
  border: 1px solid #963a10;
  background: linear-gradient(90deg, #a73d10, #f08b3e 42%, #c65b1e);
  box-shadow: inset 0 1px #ffc58c, inset 0 -2px #793211;
  pointer-events: none;
}
.language-level::before { left: -1px; border-radius: 9px 2px 2px 9px; }
.language-level::after { right: -1px; border-radius: 2px 9px 9px 2px; transform: scaleX(-1); }
.level-vial {
  position: relative;
  display: block;
  flex: 0 0 39px;
  height: 29px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid #404947;
  border-radius: 7px;
  background: linear-gradient(#393f3c, #111914 65%, #667064);
  box-shadow: 0 1px #eff1e7, inset 0 2px 3px #000b;
}
.level-liquid {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #687827, #c4dd48 25%, #c9e34e 72%, #5f741b);
  box-shadow: inset 0 2px 3px #242a09, inset 0 -2px 2px #e0ed7699;
}
.level-liquid::before {
  content: "";
  position: absolute;
  inset: 0 22%;
  border-inline: 1px solid #313a16;
  background: linear-gradient(#f5ffc7aa, transparent 37%);
}
.level-liquid::after {
  content: "";
  position: absolute;
  left: 31%;
  top: 1px;
  width: 38%;
  height: 6px;
  border: 1px solid #5c6b1a;
  border-top: 0;
  border-radius: 0 0 50% 50%;
  background: #f4ffd49c;
  box-shadow: 0 1px #efffb4;
}
.language-switch .language-trigger, .language-switch .language-level select {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  max-width: none;
  min-height: 44px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #252c2d;
  border-radius: 5px;
  background: linear-gradient(120deg, #202629, #14191c);
  box-shadow: inset 0 2px 4px #000a, 0 1px #f1f1dfb3;
  color: #f6f5f1;
  font: 400 12px/1.3 Manrope, Arial, sans-serif;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  touch-action: manipulation;
}
.language-switch .language-trigger:hover { color: #fff; background: linear-gradient(120deg, #2a3235, #1a2024); }
.language-trigger-label { min-width: 0; overflow-wrap: anywhere; }
.language-chevron { flex: 0 0 7px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.language-trigger[aria-expanded="true"] .language-chevron { transform: translateY(2px) rotate(225deg); }
.language-switch .language-trigger:focus-visible, .language-switch .language-level select:focus-visible { outline: 2px solid #ffb38d; outline-offset: 4px; }
.language-switch .language-menu {
  box-sizing: border-box;
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 31;
  width: max(100%, 232px);
  max-width: calc(100vw - 36px);
  max-height: min(440px, 65vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 5px;
  list-style: none;
  border: 1px solid #8b9698;
  border-radius: 7px;
  background: linear-gradient(100deg, #242b2e, #181e22);
  box-shadow: inset 0 1px #d0d5ce66, 0 10px 24px #0008;
  color: #f6f5f1;
  font: 400 13px/1.4 Manrope, Arial, sans-serif;
  scrollbar-color: #788183 #202629;
}
.language-menu[hidden], .language-level select[hidden] { display: none !important; }
.language-menu [role="option"] {
  box-sizing: border-box;
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.language-menu [role="option"] + [role="option"] { border-top-color: #ffffff12; }
.language-menu [aria-selected="true"] { background: #723817; box-shadow: inset 3px 0 #f29759; color: #fff7ed; }
.language-menu [role="option"]:focus { outline: none; border-color: #ffb38d; background: #343e42; color: #fff; }
.language-menu [role="option"]:hover { background: #343e42; }
/* Let the belt keep its readable width when the new tool shares a tablet header. */
@media(max-width:1000px) {
  .site-header .header-inner { flex-wrap: wrap; gap: 0; min-height: 0; padding-top: 20px; padding-bottom: 12px; }
  .site-header .tool-belt { order: 3; flex: 0 0 100%; width: 100%; max-width: 610px; margin: 12px auto 0; }
  .site-header .language-switch { margin-left: auto; }
}
@media(max-width:800px) {
  .language-switch .language-level { width: 210px; }
  .level-vial { flex-basis: 31px; }
}
@media(max-width:480px) {
  .language-switch .language-level { width: 190px; gap: 6px; min-height: 52px; padding: 4px 10px; }
  .level-vial { flex-basis: 27px; height: 26px; padding: 2px; }
  .language-switch .language-trigger, .language-switch .language-level select { min-height: 44px; padding: 7px; gap: 6px; font-size: 11px; }
  .language-level::before, .language-level::after { width: 7px; }
}
@media(max-width:380px) {
  .language-switch .language-level { width: 175px; gap: 5px; padding-inline: 9px; }
  .level-vial { flex-basis: 21px; }
  .language-switch .language-trigger, .language-switch .language-level select { padding-inline: 5px; }
}
@media(max-width:340px) { .site-header .language-switch { margin-top: 12px; } }
@media(forced-colors:active) {
  .language-switch .language-level, .language-switch .language-menu { border: 1px solid CanvasText; background: Canvas; }
  .language-switch .language-trigger { border: 1px solid ButtonText; color: ButtonText; }
  .language-menu [aria-selected="true"] { border-left: 3px solid Highlight; }
  .language-menu [role="option"]:focus { outline: 2px solid Highlight; }
}