@charset "UTF-8";
@property --start {
  syntax: "<color>";
  initial-value: #f0f0f0;
  inherits: false;
}
@property --end {
  syntax: "<color>";
  initial-value: rgb(80.4176470588%, 80.4176470588%, 80.4176470588%);
  inherits: false;
}
@media (prefers-color-scheme: light) {
  :root {
    --body-bg-gradient:
    	radial-gradient(ellipse 80% 50% at 0% 0%, rgba(79, 70, 229, 0.4), transparent 70%),
    	radial-gradient(ellipse 70% 50% at 100% 100%, rgba(27.4509803922%, 89.8039215686%, 87.0980392157%, 0.28), transparent 65%),
    	radial-gradient(circle 35vw at 25% 55%, rgba(89.8039215686%, 72.5490196078%, 27.4509803922%, 0.15), transparent),
    	radial-gradient(circle 28vw at 82% 35%, rgba(41.3725490196%, 27.4509803922%, 89.8039215686%, 0.18), transparent),
    	radial-gradient(ellipse 55% 30% at 50% 5%, rgba(27.4509803922%, 49.9019607843%, 89.8039215686%, 0.14), transparent 55%),
    	linear-gradient(145deg, rgb(90.1176470588%, 90.1176470588%, 90.1176470588%) 0%, rgb(82.1176470588%, 82.1176470588%, 82.1176470588%) 100%);
    --color: #151515;
    --color-secondary: #334155;
    --color-disabled: #94a3b8;
    --shadow: 0 12px 40px rgba(21, 21, 21, 0.22);
    --shadow-btn: 0 2px 5px rgba(21, 21, 21, 0.12);
    --border: #cbd5e1;
    --border-hover: rgb(66.924916308%, 73.2855093257%, 80.9182209469%);
    --background: #f7f7f7;
    --background-secondary: #cbd5e1;
    --background-hover: #ffffff;
    --close-color: #444;
    --close-color-hover: #222;
    --close-color-active: #000;
    --close-background: rgba(102, 102, 102, 0.24);
    --close-background-hover: rgba(102, 102, 102, 0.4);
    --close-background-active: rgba(102, 102, 102, 0.6);
    --modal-border: rgb(37.1176470588%, 37.1176470588%, 37.1176470588%);
    --sheet-surface: #ffffff;
    --sheet-ink: #151515;
    --sheet-muted: #475569;
    --sheet-outline: rgba(21, 21, 21, 0.12);
    --sheet-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
    --sheet-danger: #b42318;
  }
  body::-webkit-scrollbar-track {
    background: #f0f0f0;
  }
  body::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border: 2px solid #f0f0f0;
  }
  * {
    scrollbar-color: #bbb #f0f0f0;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --body-bg-gradient:
    	radial-gradient(ellipse 90% 60% at 0% 0%, rgb(12.2745098039%, 11.9215686275%, 25.2156862745%), transparent 75%),
    	radial-gradient(ellipse 80% 60% at 100% 100%, rgb(11.5764705882%, 16.5647058824%, 23.5639215686%), transparent 70%),
    	radial-gradient(circle 45vw at 25% 55%, rgb(14.9725490196%, 13.937254902%, 18.6039215686%), transparent),
    	radial-gradient(circle 38vw at 82% 35%, rgb(12.6901960784%, 11.5764705882%, 23.7803921569%), transparent),
    	radial-gradient(ellipse 65% 40% at 50% 5%, rgb(11.5764705882%, 13.3725490196%, 23.7803921569%), transparent 60%),
    	#1e1e24;
    --color: #f0f0f0;
    --color-secondary: #94a3b8;
    --color-disabled: #6B5C47;
    --shadow: 0 12px 40px rgba(240, 240, 240, 0.22);
    --shadow-btn: 0 2px 5px rgba(240, 240, 240, 0.12);
    --border: #38332c;
    --border-hover: rgb(33.1607843137%, 30.2%, 26.0549019608%);
    --background: #212121;
    --background-secondary: #38332c;
    --background-hover: #000000;
    --background-disabled: #353535;
    --close-color: #BBB;
    --close-color-hover: #DDD;
    --close-color-active: #FFF;
    --close-background: rgba(153, 153, 153, 0.24);
    --close-background-hover: rgba(153, 153, 153, 0.4);
    --close-background-active: rgba(153, 153, 153, 0.6);
    --modal-border: rgb(30.2352941176%, 30.2352941176%, 30.2352941176%);
    --sheet-surface: #26262e;
    --sheet-ink: #f0f0f0;
    --sheet-muted: #a3aec0;
    --sheet-outline: rgba(240, 240, 240, 0.14);
    --sheet-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .40);
    --sheet-danger: #ff9a8f;
  }
  body::-webkit-scrollbar-track {
    background: #1e1e1e;
  }
  body::-webkit-scrollbar-thumb {
    background-color: #555;
    border: 2px solid #1e1e1e;
  }
  * {
    scrollbar-color: #555 #1e1e1e;
  }
}
body.light-mode {
  --body-bg-gradient:
  	radial-gradient(ellipse 80% 50% at 0% 0%, rgba(79, 70, 229, 0.4), transparent 70%),
  	radial-gradient(ellipse 70% 50% at 100% 100%, rgba(27.4509803922%, 89.8039215686%, 87.0980392157%, 0.28), transparent 65%),
  	radial-gradient(circle 35vw at 25% 55%, rgba(89.8039215686%, 72.5490196078%, 27.4509803922%, 0.15), transparent),
  	radial-gradient(circle 28vw at 82% 35%, rgba(41.3725490196%, 27.4509803922%, 89.8039215686%, 0.18), transparent),
  	radial-gradient(ellipse 55% 30% at 50% 5%, rgba(27.4509803922%, 49.9019607843%, 89.8039215686%, 0.14), transparent 55%),
  	linear-gradient(145deg, rgb(90.1176470588%, 90.1176470588%, 90.1176470588%) 0%, rgb(78.1176470588%, 78.1176470588%, 78.1176470588%) 100%);
  --color: #151515;
  --color-secondary: #334155;
  --color-disabled: #94a3b8;
  --shadow: 0 12px 40px rgba(21, 21, 21, 0.22);
  --shadow-btn: 0 2px 5px rgba(21, 21, 21, 0.12);
  --border: #cbd5e1;
  --border-hover: rgb(66.924916308%, 73.2855093257%, 80.9182209469%);
  --background: #f7f7f7;
  --background-secondary: #cbd5e1;
  --background-hover: #ffffff;
  --background-disabled: #f1f5f9;
  --close-color: #444;
  --close-color-hover: #222;
  --close-color-active: #000;
  --close-background: rgba(102, 102, 102, 0.24);
  --close-background-hover: rgba(102, 102, 102, 0.4);
  --close-background-active: rgba(102, 102, 102, 0.6);
  --modal-border: rgb(37.1176470588%, 37.1176470588%, 37.1176470588%);
  --sheet-surface: #ffffff;
  --sheet-ink: #151515;
  --sheet-muted: #475569;
  --sheet-outline: rgba(21, 21, 21, 0.12);
  --sheet-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
  --sheet-danger: #b42318;
}
body.light-mode body::-webkit-scrollbar-track {
  background: #f0f0f0;
}
body.light-mode body::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border: 2px solid #f0f0f0;
}
body.light-mode * {
  scrollbar-color: #bbb #f0f0f0;
}

body.dark-mode {
  --body-bg-gradient:
  	radial-gradient(ellipse 90% 60% at 0% 0%, rgb(12.2745098039%, 11.9215686275%, 25.2156862745%), transparent 75%),
  	radial-gradient(ellipse 80% 60% at 100% 100%, rgb(11.5764705882%, 16.5647058824%, 23.5639215686%), transparent 70%),
  	radial-gradient(circle 45vw at 25% 55%, rgb(14.9725490196%, 13.937254902%, 18.6039215686%), transparent),
  	radial-gradient(circle 38vw at 82% 35%, rgb(12.6901960784%, 11.5764705882%, 23.7803921569%), transparent),
  	radial-gradient(ellipse 65% 40% at 50% 5%, rgb(11.5764705882%, 13.3725490196%, 23.7803921569%), transparent 60%),
  	#1e1e24;
  --color: #f0f0f0;
  --color-secondary: #94a3b8;
  --color-disabled: #6B5C47;
  --shadow: 0 12px 40px rgba(240, 240, 240, 0.22);
  --shadow-btn: 0 2px 5px rgba(240, 240, 240, 0.12);
  --border: #38332c;
  --border-hover: rgb(33.1607843137%, 30.2%, 26.0549019608%);
  --background: #212121;
  --background-secondary: #38332c;
  --background-hover: #000000;
  --background-disabled: #353535;
  --close-color: #BBB;
  --close-color-hover: #DDD;
  --close-color-active: #FFF;
  --close-background: rgba(153, 153, 153, 0.24);
  --close-background-hover: rgba(153, 153, 153, 0.4);
  --close-background-active: rgba(153, 153, 153, 0.6);
  --modal-border: rgb(30.2352941176%, 30.2352941176%, 30.2352941176%);
  --sheet-surface: #26262e;
  --sheet-ink: #f0f0f0;
  --sheet-muted: #a3aec0;
  --sheet-outline: rgba(240, 240, 240, 0.14);
  --sheet-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .40);
  --sheet-danger: #ff9a8f;
}
body.dark-mode body::-webkit-scrollbar-track {
  background: #1e1e1e;
}
body.dark-mode body::-webkit-scrollbar-thumb {
  background-color: #555;
  border: 2px solid #1e1e1e;
}
body.dark-mode * {
  scrollbar-color: #555 #1e1e1e;
}

body {
  background: var(--body-bg-gradient);
  background-attachment: fixed;
  color: var(--color);
}

#BS__popup {
  margin: 0;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
#BS__popup.removing {
  pointer-events: none;
}

.BS-popup-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.BS-popup-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: rgba(21, 21, 21, 0.55);
  overflow-x: hidden;
  overflow-y: visible;
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__popup.removing .BS-popup-iframe {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

body.popup {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vh, 56px) clamp(16px, 4vw, 48px);
  background: transparent;
  overflow-x: hidden;
  overflow-y: auto;
}

#BS_popup_container {
  margin: 0;
  width: max-content;
  min-width: min(320px, 100%);
  max-width: min(94vw, 60rem);
  max-height: 92vh;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--body-bg-gradient);
  box-shadow: var(--shadow);
  cursor: default;
  animation: panel-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  border: 2px solid var(--modal-border);
}

body.popup.sidebar #BS_popup_container {
  border: 0px solid var(--modal-border);
  border-left: 2px solid var(--modal-border);
}

.close-modal-button {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  z-index: 10;
  border-radius: 50%;
  background: var(--close-background);
  color: var(--close-color);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.close-modal-button::before, .close-modal-button::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.close-modal-button::before {
  transform: rotate(45deg);
}
.close-modal-button::after {
  transform: rotate(-45deg);
}
.close-modal-button:hover {
  background: var(--close-background-hover);
  transform: rotate(90deg);
  color: var(--close-color-hover);
}
.close-modal-button:active {
  background: var(--close-background-active);
  transform: rotate(180deg);
  color: var(--close-color-active);
}

/* A frame that has opened a popup is no longer the layer this button would close,
   and the new layer's backdrop is only 55% opaque, so it showed through beside the
   new card as a second, unreachable close button. The child combinator is
   load-bearing: the OIDC popup's own card lives INSIDE #BS__popup and keeps its own. */
body:has(> #BS__popup) > #BS_popup_container > .close-modal-button {
  display: none;
}

#BS_popup_content {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline: clamp(16px, 4vw, 32px);
  /* Asymmetric on purpose. The block-start has to clear the close button: it
     sits at top:16px and is $close-size (40px) tall, so it occupies y 16-56px
     in the container — the old 48px was clearing it by nothing at all. The
     sidebar variant moves that button to the LEFT (see
     `body.sidebar .close-modal-button`), right over where the title starts, so
     the top can only come down a little. The block-end clears nothing and this
     box scrolls, so that is where the height is taken from. */
  padding-block: clamp(16px, 4vh, 40px) clamp(12px, 2.5vh, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* Children must never push the popup wider than the screen: let them shrink,
 * and let wide tables scroll internally rather than blow out the container. */
#BS_popup_content > * {
  max-width: 100%;
  min-width: 0;
}

body.popup [class^=table] {
  max-width: 100%;
}

#BS__popup:has(.oidc-login-container) .BS-popup-outer {
  position: fixed;
  inset: 0;
  margin: 0 !important;
  padding: 0;
  background: rgba(21, 21, 21, 0.55);
  cursor: pointer;
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__popup.removing:has(.oidc-login-container) .BS-popup-outer {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.oidc-login-container {
  width: min(420px, 90vw);
  cursor: default;
}

.oidc-login-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 420px;
  animation: loading-overlay-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.oidc-login-iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: none;
  border-radius: 0 0 12px 12px;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes panel-in {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
  }
  80% {
    transform: translateY(-4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes panel-out {
  to {
    opacity: 0;
    transform: translateY(28px) scale(0.92);
  }
}
@media (min-width: 992px) {
  body.popup {
    padding-inline: clamp(32px, 6vw, 96px);
  }
  #BS_popup_content {
    padding-inline: clamp(32px, 6vw, 64px);
  }
}
/* Mobile only: tighten the space around the popup and its content.
 * Desktop (base + the 992px rule above) keeps its original, roomier padding. */
@media (max-width: 48rem) {
  body.popup {
    padding: clamp(8px, 2.5vh, 18px) clamp(8px, 3vw, 14px);
  }
  #BS_popup_content {
    padding-inline: clamp(12px, 4vw, 18px);
    padding-block: clamp(14px, 3vh, 22px);
    gap: 0.9rem;
  }
}
@keyframes sidebar-in {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  80% {
    transform: translateX(-4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes sidebar-out {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(100%);
  }
}
body.sidebar {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body.sidebar #BS_popup_container {
  width: max-content;
  min-width: 320px;
  max-width: 95vw;
  height: 100%;
  max-height: none;
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15), -2px 0 8px rgba(0, 0, 0, 0.08);
  margin-right: -1px;
  animation: sidebar-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

body.sidebar.removing #BS_popup_container {
  animation: sidebar-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

body.sidebar .close-modal-button {
  left: 16px;
  right: auto;
}

@media (min-width: 992px) {
  body.sidebar {
    perspective: 1200px;
  }
  body.sidebar #BS_popup_container {
    transform-origin: right center;
  }
}
#BS__submenu {
  margin: 0;
  cursor: pointer;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 21, 21, 0.55);
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__submenu.removing {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}

#BS__submenu .submenu-content {
  cursor: default;
  position: relative;
  /* Its own surface and ink, never the page field or --color a project may repaint. */
  width: min(20rem, 100vw - 2rem);
  max-height: min(70vh, 40rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--sheet-surface);
  color: var(--sheet-ink);
  box-shadow: var(--sheet-shadow);
  border: 1px solid var(--sheet-outline);
  font: inherit;
  letter-spacing: normal;
  animation: panel-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__submenu.removing #BS__submenu .submenu-content {
  animation: panel-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Back (nested sheets only), title and close, in flow above the options. */
#BS__submenu .submenu-head {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
  min-height: 3rem;
  padding: 0.375rem 0.375rem 0.25rem 1.25rem;
}
#BS__submenu .submenu-head:has(.submenu-back) {
  padding-left: 0.375rem;
}

#BS__submenu .submenu-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--sheet-muted);
}

#BS__submenu .submenu-head > button,
#BS__modal .modal-content > .close-modal-or-submenu {
  all: unset;
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--sheet-muted);
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0.4, 0, 0.2, 1), color 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
#BS__submenu .submenu-head > button svg,
#BS__modal .modal-content > .close-modal-or-submenu svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}
#BS__submenu .submenu-head > button:hover,
#BS__modal .modal-content > .close-modal-or-submenu:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: var(--sheet-ink);
}
#BS__submenu .submenu-head > button:active,
#BS__modal .modal-content > .close-modal-or-submenu:active {
  background: color-mix(in srgb, currentColor 16%, transparent);
}
#BS__submenu .submenu-head > button:focus-visible,
#BS__modal .modal-content > .close-modal-or-submenu:focus-visible {
  outline: 2px solid var(--sheet-ink);
  outline-offset: -2px;
  box-shadow: none !important;
}

/* The close glyph: two bars drawn by the button itself. */
#BS__submenu .submenu-head > .close-modal-or-submenu::before, #BS__submenu .submenu-head > .close-modal-or-submenu::after,
#BS__modal .modal-content > .close-modal-or-submenu::before,
#BS__modal .modal-content > .close-modal-or-submenu::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
#BS__submenu .submenu-head > .close-modal-or-submenu::before,
#BS__modal .modal-content > .close-modal-or-submenu::before {
  transform: rotate(45deg);
}
#BS__submenu .submenu-head > .close-modal-or-submenu::after,
#BS__modal .modal-content > .close-modal-or-submenu::after {
  transform: rotate(-45deg);
}

#BS__submenu ul {
  list-style: none;
  margin: 0;
  padding: 0 0.5rem 0.5rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  overflow-y: auto;
  /* Never sideways. The panel's width is fixed so it stays predictable on a
   * phone, and `overflow-y: auto` alone would compute overflow-x to `auto`
   * too, so one long option (a row menu's "Email <address>") produced a
   * horizontal scrollbar across the whole list. */
  overflow-x: hidden;
  overscroll-behavior: contain;
}

#BS__submenu li {
  margin: 0;
  min-width: 0;
}

/* Text on a state layer: the forms button's height, fill and shadow are reset. */
#BS__submenu ul button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.625rem 0.75rem;
  border: 0;
  border-radius: 0.625rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  text-align: start;
  color: inherit;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
#BS__submenu ul button:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
#BS__submenu ul button:active {
  background: color-mix(in srgb, currentColor 14%, transparent);
  transform: none;
}
#BS__submenu ul button {
  /* Inset, so neither the list's clip nor the next option can hide it. */
}
#BS__submenu ul button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
  box-shadow: none !important;
}
#BS__submenu ul button.is-destructive {
  color: var(--md-error, var(--sheet-danger));
}

/* One line, ellipsised (an email address cannot wrap); the full text is on the title. */
#BS__submenu .submenu-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#BS__submenu .submenu-caret {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: -0.25rem;
  fill: currentColor;
  opacity: 0.6;
}

/* BS.sheet: a form in the submenu shell. Anchored and 48rem or wider, a popover under its opener with no scrim, so
 * the page behind it stays readable and usable (BS.sheet places it through --bs-sheet-*); otherwise the modal
 * bottom sheet. */
#BS__submenu .submenu-content.bs-sheet {
  width: min(23rem, 100vw - 2rem);
  max-height: min(85dvh, 44rem);
}

#BS__submenu .bs-sheet .submenu-title {
  color: var(--sheet-ink);
  font-weight: 700;
}

#BS__submenu .bs-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

#BS__submenu.is-popover {
  display: block;
  background: transparent;
  pointer-events: none;
  animation: none;
}

#BS__submenu.is-popover .submenu-content.bs-sheet {
  position: fixed;
  top: var(--bs-sheet-top, 4rem);
  right: var(--bs-sheet-right, 1rem);
  max-height: var(--bs-sheet-max-height, calc(100dvh - 6rem));
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 22px 60px rgba(0, 0, 0, 0.28);
  animation: sheet-pop-in 160ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__submenu.is-popover.removing .submenu-content.bs-sheet {
  animation: sheet-pop-out 120ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__submenu.is-sheet {
  align-items: flex-end;
}

#BS__submenu.is-sheet .submenu-content.bs-sheet {
  width: 100%;
  max-width: 32rem;
  max-height: 85dvh;
  border-radius: 1.125rem 1.125rem 0 0;
  border-bottom: 0;
  animation: sheet-up 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__submenu.is-sheet.removing .submenu-content.bs-sheet {
  animation: sheet-down 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__submenu .bs-sheet__grab {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 0.25rem;
  margin: 0.5rem auto 0;
  border-radius: 2px;
  background: var(--sheet-outline);
}

@keyframes sheet-pop-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sheet-pop-out {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
@keyframes sheet-down {
  to {
    transform: translateY(100%);
  }
}
#BS__modal {
  margin: 0;
  cursor: pointer;
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 21, 21, 0.55);
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__modal.removing {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}

#BS__modal .modal-content {
  cursor: default;
  position: relative;
  width: max-content;
  min-width: min(320px, 100%);
  max-width: min(94vw, 34rem);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
  /* The sheet's own surface and ink, as for the submenu: never the page field. */
  border-radius: 12px;
  background: var(--sheet-surface);
  color: var(--sheet-ink);
  box-shadow: var(--sheet-shadow);
  border: 1px solid var(--sheet-outline);
  padding: clamp(24px, 5vh, 48px) clamp(24px, 5vw, 56px);
  animation: panel-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__modal.removing #BS__modal .modal-content {
  animation: panel-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__modal .modal-content > .close-modal-or-submenu {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
}

/* The first line of text keeps clear of the close button. */
#BS__modal .close-modal-or-submenu + :is(.modal-header, .modal-dialog) {
  padding-inline: 2.5rem;
}

.modal-header {
  margin: 0;
  font-family: inherit;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
  text-align: center;
}

.modal-dialog {
  font-family: inherit;
  font-size: clamp(1rem, 2.3vw, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

.modal-options {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.modal-options li {
  margin: 0;
}

.modal-options button {
  padding: 0.75em 1.75em;
}
.modal-options button:not(.primary):not(.cta):not(.danger) {
  color: var(--sheet-ink);
}

@media (max-width: 480px) {
  #BS__modal .modal-content {
    width: 90vw;
  }
}
/* Mobile only: tighter padding for the confirm/areYouSure modal.
 * Placed after the base rule above so it actually wins (media queries
 * add no specificity — source order decides). Desktop is unchanged. */
@media (max-width: 48rem) {
  #BS__modal .modal-content {
    padding: clamp(16px, 3.5vh, 24px) clamp(14px, 4vw, 20px);
    gap: 0.9rem;
  }
}
/* Loading Overlay — shown during requests, sits behind toasts */
#jeql__loading_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 120ms delay: fast requests never flash the overlay */
  animation: loading-overlay-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}
#jeql__loading_overlay .jeql__spinner {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  /* Spring entrance: subtle scale-up with overshoot */
  animation: spinner-entrance 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms both;
  /* Faint track ring — always visible */
}
#jeql__loading_overlay .jeql__spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.07);
}
#jeql__loading_overlay .jeql__spinner {
  /* Spinning gradient arc — the comet tail */
}
#jeql__loading_overlay .jeql__spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, transparent 25%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.5) 88%, #fff 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: jeql-spin 0.9s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

@keyframes loading-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes spinner-entrance {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-90deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes jeql-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Toast Container Styles */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  z-index: 10000;
  pointer-events: none;
}

/* Individual Toast Styles */
.toast {
  position: relative;
  min-width: 300px;
  max-width: 400px;
  padding: 16px 16px 16px 20px;
  border-radius: 8px;
  background-color: #ffffff;
  color: #222;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: auto;
  /* Entrance animation */
  animation: toast-enter 0.3s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
  opacity: 0;
  transform: translateY(16px);
}

/* Toast types */
.toast-success {
  border-left: 4px solid #10b981;
  background-color: #dbffee;
}

.toast-error {
  border-left: 4px solid #ef4444;
  background-color: #ffdfdf;
}

.toast-info {
  border-left: 4px solid #3b82f6;
  background-color: #d5fff8;
}

.toast-warning {
  border-left: 4px solid #f59e0b;
  background-color: #fff4d0;
}

/* Exit animation */
.toast-exit {
  animation: toast-exit 0.3s forwards cubic-bezier(0.06, 0.71, 0.55, 1);
}

/* Toast loading bar */
.toast-loading-bar {
  position: absolute;
  margin: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  transition: width 5s linear;
}
.toast-loading-bar.decreasing {
  width: 0%;
}

.toast-success .toast-loading-bar {
  background: linear-gradient(to right, #059669, #10b981);
}

.toast-error .toast-loading-bar {
  background: linear-gradient(to right, #dc2626, #ef4444);
}

.toast-info .toast-loading-bar {
  background: linear-gradient(to right, #2563eb, #3b82f6);
}

.toast-warning .toast-loading-bar {
  background: linear-gradient(to right, #d97706, #f59e0b);
}

/* Toast message */
.toast-message {
  flex-grow: 1;
  font-size: 14px;
  font-weight: 500;
  margin-right: 16px;
}

/* Close button */
.toast-close-button {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  min-width: 0;
  padding-left: 0;
  border-radius: 50%;
  background: rgba(102, 102, 102, 0.4);
  color: #444;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(21, 21, 21, 0.12);
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast-close-button::before, .toast-close-button::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast-close-button::before {
  transform: rotate(45deg);
}
.toast-close-button::after {
  transform: rotate(-45deg);
}
.toast-close-button:hover {
  background: rgba(102, 102, 102, 0.6);
  transform: rotate(90deg);
  color: #222;
}
.toast-close-button:active {
  background: rgba(102, 102, 102, 0.8);
  transform: rotate(180deg);
  color: #000;
}

/* Animations */
@keyframes toast-enter {
  0% {
    transform: translateY(16px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes toast-exit {
  0% {
    transform: translateX(0);
    opacity: 1;
    max-height: 100px;
    margin-top: 8px;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
    max-height: 0;
    margin-top: 0;
  }
}
/* Utility classes */
.no-display {
  display: none;
}

/* Named for assistive tech, not drawn. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* PDF Renderer */
#BS__renderer {
  margin-top: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(21, 21, 21, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(8px);
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__renderer.removing {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__renderer .loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  padding: 2rem;
}
#BS__renderer .loader {
  position: relative;
  width: 120px;
  height: 120px;
}
#BS__renderer .loader-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: rgb(14.4735619366%, 10.7517888672%, 76.5031130936%);
  animation: spin 1.5s linear infinite;
}
#BS__renderer .loader-ring:nth-child(2) {
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  border-top-color: rgb(22.6391599294%, 18.6832078803%, 88.5716940805%);
  animation-duration: 1.75s;
  animation-direction: reverse;
}
#BS__renderer .loader-ring:nth-child(3) {
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  border-top-color: rgb(39.3216243844%, 36.218752904%, 91.0361490568%);
  animation-duration: 2s;
}
#BS__renderer .loader-pulse {
  position: absolute;
  width: 40%;
  height: 40%;
  top: 30%;
  left: 30%;
  background-color: rgb(56.0040888393%, 53.7542979277%, 93.5006040331%);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}
#BS__renderer .loader-text {
  margin-top: 2rem;
  text-align: center;
}
#BS__renderer .loader-text h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
#BS__renderer .loader-text p {
  opacity: 0.8;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
#BS__renderer .progress-bar {
  width: 100%;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 1rem;
}
#BS__renderer .progress {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgb(56.0040888393%, 53.7542979277%, 93.5006040331%), rgb(14.4735619366%, 10.7517888672%, 76.5031130936%));
  border-radius: 3px;
  animation: progress 6s ease-in-out infinite;
  margin: 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 0.9;
  }
}
@keyframes progress {
  0% {
    width: 0%;
  }
  50% {
    width: 70%;
  }
  75% {
    width: 85%;
  }
  90% {
    width: 90%;
  }
  100% {
    width: 95%;
  }
}
html {
  print-color-adjust: exact !important;
  -webkit-print-color-adjust: exact !important;
}

@property --start {
  syntax: "<color>";
  initial-value: #f0f0f0;
  inherits: false;
}
@property --end {
  syntax: "<color>";
  initial-value: rgb(80.4176470588%, 80.4176470588%, 80.4176470588%);
  inherits: false;
}
@media (prefers-color-scheme: light) {
  :root {
    --body-bg-gradient:
    	radial-gradient(ellipse 80% 50% at 0% 0%, rgba(79, 70, 229, 0.4), transparent 70%),
    	radial-gradient(ellipse 70% 50% at 100% 100%, rgba(27.4509803922%, 89.8039215686%, 87.0980392157%, 0.28), transparent 65%),
    	radial-gradient(circle 35vw at 25% 55%, rgba(89.8039215686%, 72.5490196078%, 27.4509803922%, 0.15), transparent),
    	radial-gradient(circle 28vw at 82% 35%, rgba(41.3725490196%, 27.4509803922%, 89.8039215686%, 0.18), transparent),
    	radial-gradient(ellipse 55% 30% at 50% 5%, rgba(27.4509803922%, 49.9019607843%, 89.8039215686%, 0.14), transparent 55%),
    	linear-gradient(145deg, rgb(90.1176470588%, 90.1176470588%, 90.1176470588%) 0%, rgb(82.1176470588%, 82.1176470588%, 82.1176470588%) 100%);
    --color: #151515;
    --color-secondary: #334155;
    --color-disabled: #94a3b8;
    --shadow: 0 12px 40px rgba(21, 21, 21, 0.22);
    --shadow-btn: 0 2px 5px rgba(21, 21, 21, 0.12);
    --border: #cbd5e1;
    --border-hover: rgb(66.924916308%, 73.2855093257%, 80.9182209469%);
    --background: #f7f7f7;
    --background-secondary: #cbd5e1;
    --background-hover: #ffffff;
    --close-color: #444;
    --close-color-hover: #222;
    --close-color-active: #000;
    --close-background: rgba(102, 102, 102, 0.24);
    --close-background-hover: rgba(102, 102, 102, 0.4);
    --close-background-active: rgba(102, 102, 102, 0.6);
    --modal-border: rgb(37.1176470588%, 37.1176470588%, 37.1176470588%);
    --sheet-surface: #ffffff;
    --sheet-ink: #151515;
    --sheet-muted: #475569;
    --sheet-outline: rgba(21, 21, 21, 0.12);
    --sheet-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
    --sheet-danger: #b42318;
  }
  body::-webkit-scrollbar-track {
    background: #f0f0f0;
  }
  body::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border: 2px solid #f0f0f0;
  }
  * {
    scrollbar-color: #bbb #f0f0f0;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --body-bg-gradient:
    	radial-gradient(ellipse 90% 60% at 0% 0%, rgb(12.2745098039%, 11.9215686275%, 25.2156862745%), transparent 75%),
    	radial-gradient(ellipse 80% 60% at 100% 100%, rgb(11.5764705882%, 16.5647058824%, 23.5639215686%), transparent 70%),
    	radial-gradient(circle 45vw at 25% 55%, rgb(14.9725490196%, 13.937254902%, 18.6039215686%), transparent),
    	radial-gradient(circle 38vw at 82% 35%, rgb(12.6901960784%, 11.5764705882%, 23.7803921569%), transparent),
    	radial-gradient(ellipse 65% 40% at 50% 5%, rgb(11.5764705882%, 13.3725490196%, 23.7803921569%), transparent 60%),
    	#1e1e24;
    --color: #f0f0f0;
    --color-secondary: #94a3b8;
    --color-disabled: #6B5C47;
    --shadow: 0 12px 40px rgba(240, 240, 240, 0.22);
    --shadow-btn: 0 2px 5px rgba(240, 240, 240, 0.12);
    --border: #38332c;
    --border-hover: rgb(33.1607843137%, 30.2%, 26.0549019608%);
    --background: #212121;
    --background-secondary: #38332c;
    --background-hover: #000000;
    --background-disabled: #353535;
    --close-color: #BBB;
    --close-color-hover: #DDD;
    --close-color-active: #FFF;
    --close-background: rgba(153, 153, 153, 0.24);
    --close-background-hover: rgba(153, 153, 153, 0.4);
    --close-background-active: rgba(153, 153, 153, 0.6);
    --modal-border: rgb(30.2352941176%, 30.2352941176%, 30.2352941176%);
    --sheet-surface: #26262e;
    --sheet-ink: #f0f0f0;
    --sheet-muted: #a3aec0;
    --sheet-outline: rgba(240, 240, 240, 0.14);
    --sheet-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .40);
    --sheet-danger: #ff9a8f;
  }
  body::-webkit-scrollbar-track {
    background: #1e1e1e;
  }
  body::-webkit-scrollbar-thumb {
    background-color: #555;
    border: 2px solid #1e1e1e;
  }
  * {
    scrollbar-color: #555 #1e1e1e;
  }
}
body.light-mode {
  --body-bg-gradient:
  	radial-gradient(ellipse 80% 50% at 0% 0%, rgba(79, 70, 229, 0.4), transparent 70%),
  	radial-gradient(ellipse 70% 50% at 100% 100%, rgba(27.4509803922%, 89.8039215686%, 87.0980392157%, 0.28), transparent 65%),
  	radial-gradient(circle 35vw at 25% 55%, rgba(89.8039215686%, 72.5490196078%, 27.4509803922%, 0.15), transparent),
  	radial-gradient(circle 28vw at 82% 35%, rgba(41.3725490196%, 27.4509803922%, 89.8039215686%, 0.18), transparent),
  	radial-gradient(ellipse 55% 30% at 50% 5%, rgba(27.4509803922%, 49.9019607843%, 89.8039215686%, 0.14), transparent 55%),
  	linear-gradient(145deg, rgb(90.1176470588%, 90.1176470588%, 90.1176470588%) 0%, rgb(78.1176470588%, 78.1176470588%, 78.1176470588%) 100%);
  --color: #151515;
  --color-secondary: #334155;
  --color-disabled: #94a3b8;
  --shadow: 0 12px 40px rgba(21, 21, 21, 0.22);
  --shadow-btn: 0 2px 5px rgba(21, 21, 21, 0.12);
  --border: #cbd5e1;
  --border-hover: rgb(66.924916308%, 73.2855093257%, 80.9182209469%);
  --background: #f7f7f7;
  --background-secondary: #cbd5e1;
  --background-hover: #ffffff;
  --background-disabled: #f1f5f9;
  --close-color: #444;
  --close-color-hover: #222;
  --close-color-active: #000;
  --close-background: rgba(102, 102, 102, 0.24);
  --close-background-hover: rgba(102, 102, 102, 0.4);
  --close-background-active: rgba(102, 102, 102, 0.6);
  --modal-border: rgb(37.1176470588%, 37.1176470588%, 37.1176470588%);
  --sheet-surface: #ffffff;
  --sheet-ink: #151515;
  --sheet-muted: #475569;
  --sheet-outline: rgba(21, 21, 21, 0.12);
  --sheet-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
  --sheet-danger: #b42318;
}
body.light-mode body::-webkit-scrollbar-track {
  background: #f0f0f0;
}
body.light-mode body::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border: 2px solid #f0f0f0;
}
body.light-mode * {
  scrollbar-color: #bbb #f0f0f0;
}

body.dark-mode {
  --body-bg-gradient:
  	radial-gradient(ellipse 90% 60% at 0% 0%, rgb(12.2745098039%, 11.9215686275%, 25.2156862745%), transparent 75%),
  	radial-gradient(ellipse 80% 60% at 100% 100%, rgb(11.5764705882%, 16.5647058824%, 23.5639215686%), transparent 70%),
  	radial-gradient(circle 45vw at 25% 55%, rgb(14.9725490196%, 13.937254902%, 18.6039215686%), transparent),
  	radial-gradient(circle 38vw at 82% 35%, rgb(12.6901960784%, 11.5764705882%, 23.7803921569%), transparent),
  	radial-gradient(ellipse 65% 40% at 50% 5%, rgb(11.5764705882%, 13.3725490196%, 23.7803921569%), transparent 60%),
  	#1e1e24;
  --color: #f0f0f0;
  --color-secondary: #94a3b8;
  --color-disabled: #6B5C47;
  --shadow: 0 12px 40px rgba(240, 240, 240, 0.22);
  --shadow-btn: 0 2px 5px rgba(240, 240, 240, 0.12);
  --border: #38332c;
  --border-hover: rgb(33.1607843137%, 30.2%, 26.0549019608%);
  --background: #212121;
  --background-secondary: #38332c;
  --background-hover: #000000;
  --background-disabled: #353535;
  --close-color: #BBB;
  --close-color-hover: #DDD;
  --close-color-active: #FFF;
  --close-background: rgba(153, 153, 153, 0.24);
  --close-background-hover: rgba(153, 153, 153, 0.4);
  --close-background-active: rgba(153, 153, 153, 0.6);
  --modal-border: rgb(30.2352941176%, 30.2352941176%, 30.2352941176%);
  --sheet-surface: #26262e;
  --sheet-ink: #f0f0f0;
  --sheet-muted: #a3aec0;
  --sheet-outline: rgba(240, 240, 240, 0.14);
  --sheet-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .40);
  --sheet-danger: #ff9a8f;
}
body.dark-mode body::-webkit-scrollbar-track {
  background: #1e1e1e;
}
body.dark-mode body::-webkit-scrollbar-thumb {
  background-color: #555;
  border: 2px solid #1e1e1e;
}
body.dark-mode * {
  scrollbar-color: #555 #1e1e1e;
}

body {
  background: var(--body-bg-gradient);
  background-attachment: fixed;
  color: var(--color);
}

#BS__popup {
  margin: 0;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
#BS__popup.removing {
  pointer-events: none;
}

.BS-popup-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.BS-popup-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: rgba(21, 21, 21, 0.55);
  overflow-x: hidden;
  overflow-y: visible;
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__popup.removing .BS-popup-iframe {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

body.popup {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vh, 56px) clamp(16px, 4vw, 48px);
  background: transparent;
  overflow-x: hidden;
  overflow-y: auto;
}

#BS_popup_container {
  margin: 0;
  width: max-content;
  min-width: min(320px, 100%);
  max-width: min(94vw, 60rem);
  max-height: 92vh;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--body-bg-gradient);
  box-shadow: var(--shadow);
  cursor: default;
  animation: panel-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  border: 2px solid var(--modal-border);
}

body.popup.sidebar #BS_popup_container {
  border: 0px solid var(--modal-border);
  border-left: 2px solid var(--modal-border);
}

.close-modal-button {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  z-index: 10;
  border-radius: 50%;
  background: var(--close-background);
  color: var(--close-color);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.close-modal-button::before, .close-modal-button::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.close-modal-button::before {
  transform: rotate(45deg);
}
.close-modal-button::after {
  transform: rotate(-45deg);
}
.close-modal-button:hover {
  background: var(--close-background-hover);
  transform: rotate(90deg);
  color: var(--close-color-hover);
}
.close-modal-button:active {
  background: var(--close-background-active);
  transform: rotate(180deg);
  color: var(--close-color-active);
}

/* A frame that has opened a popup is no longer the layer this button would close,
   and the new layer's backdrop is only 55% opaque, so it showed through beside the
   new card as a second, unreachable close button. The child combinator is
   load-bearing: the OIDC popup's own card lives INSIDE #BS__popup and keeps its own. */
body:has(> #BS__popup) > #BS_popup_container > .close-modal-button {
  display: none;
}

#BS_popup_content {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline: clamp(16px, 4vw, 32px);
  /* Asymmetric on purpose. The block-start has to clear the close button: it
     sits at top:16px and is $close-size (40px) tall, so it occupies y 16-56px
     in the container — the old 48px was clearing it by nothing at all. The
     sidebar variant moves that button to the LEFT (see
     `body.sidebar .close-modal-button`), right over where the title starts, so
     the top can only come down a little. The block-end clears nothing and this
     box scrolls, so that is where the height is taken from. */
  padding-block: clamp(16px, 4vh, 40px) clamp(12px, 2.5vh, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* Children must never push the popup wider than the screen: let them shrink,
 * and let wide tables scroll internally rather than blow out the container. */
#BS_popup_content > * {
  max-width: 100%;
  min-width: 0;
}

body.popup [class^=table] {
  max-width: 100%;
}

#BS__popup:has(.oidc-login-container) .BS-popup-outer {
  position: fixed;
  inset: 0;
  margin: 0 !important;
  padding: 0;
  background: rgba(21, 21, 21, 0.55);
  cursor: pointer;
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__popup.removing:has(.oidc-login-container) .BS-popup-outer {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.oidc-login-container {
  width: min(420px, 90vw);
  cursor: default;
}

.oidc-login-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 420px;
  animation: loading-overlay-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.oidc-login-iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: none;
  border-radius: 0 0 12px 12px;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes panel-in {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
  }
  80% {
    transform: translateY(-4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes panel-out {
  to {
    opacity: 0;
    transform: translateY(28px) scale(0.92);
  }
}
@media (min-width: 992px) {
  body.popup {
    padding-inline: clamp(32px, 6vw, 96px);
  }
  #BS_popup_content {
    padding-inline: clamp(32px, 6vw, 64px);
  }
}
/* Mobile only: tighten the space around the popup and its content.
 * Desktop (base + the 992px rule above) keeps its original, roomier padding. */
@media (max-width: 48rem) {
  body.popup {
    padding: clamp(8px, 2.5vh, 18px) clamp(8px, 3vw, 14px);
  }
  #BS_popup_content {
    padding-inline: clamp(12px, 4vw, 18px);
    padding-block: clamp(14px, 3vh, 22px);
    gap: 0.9rem;
  }
}
@keyframes sidebar-in {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  80% {
    transform: translateX(-4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes sidebar-out {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(100%);
  }
}
body.sidebar {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body.sidebar #BS_popup_container {
  width: max-content;
  min-width: 320px;
  max-width: 95vw;
  height: 100%;
  max-height: none;
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15), -2px 0 8px rgba(0, 0, 0, 0.08);
  margin-right: -1px;
  animation: sidebar-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

body.sidebar.removing #BS_popup_container {
  animation: sidebar-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

body.sidebar .close-modal-button {
  left: 16px;
  right: auto;
}

@media (min-width: 992px) {
  body.sidebar {
    perspective: 1200px;
  }
  body.sidebar #BS_popup_container {
    transform-origin: right center;
  }
}
#BS__submenu {
  margin: 0;
  cursor: pointer;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 21, 21, 0.55);
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__submenu.removing {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}

#BS__submenu .submenu-content {
  cursor: default;
  position: relative;
  /* Its own surface and ink, never the page field or --color a project may repaint. */
  width: min(20rem, 100vw - 2rem);
  max-height: min(70vh, 40rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--sheet-surface);
  color: var(--sheet-ink);
  box-shadow: var(--sheet-shadow);
  border: 1px solid var(--sheet-outline);
  font: inherit;
  letter-spacing: normal;
  animation: panel-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__submenu.removing #BS__submenu .submenu-content {
  animation: panel-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Back (nested sheets only), title and close, in flow above the options. */
#BS__submenu .submenu-head {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
  min-height: 3rem;
  padding: 0.375rem 0.375rem 0.25rem 1.25rem;
}
#BS__submenu .submenu-head:has(.submenu-back) {
  padding-left: 0.375rem;
}

#BS__submenu .submenu-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--sheet-muted);
}

#BS__submenu .submenu-head > button,
#BS__modal .modal-content > .close-modal-or-submenu {
  all: unset;
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--sheet-muted);
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0.4, 0, 0.2, 1), color 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
#BS__submenu .submenu-head > button svg,
#BS__modal .modal-content > .close-modal-or-submenu svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}
#BS__submenu .submenu-head > button:hover,
#BS__modal .modal-content > .close-modal-or-submenu:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: var(--sheet-ink);
}
#BS__submenu .submenu-head > button:active,
#BS__modal .modal-content > .close-modal-or-submenu:active {
  background: color-mix(in srgb, currentColor 16%, transparent);
}
#BS__submenu .submenu-head > button:focus-visible,
#BS__modal .modal-content > .close-modal-or-submenu:focus-visible {
  outline: 2px solid var(--sheet-ink);
  outline-offset: -2px;
  box-shadow: none !important;
}

/* The close glyph: two bars drawn by the button itself. */
#BS__submenu .submenu-head > .close-modal-or-submenu::before, #BS__submenu .submenu-head > .close-modal-or-submenu::after,
#BS__modal .modal-content > .close-modal-or-submenu::before,
#BS__modal .modal-content > .close-modal-or-submenu::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
#BS__submenu .submenu-head > .close-modal-or-submenu::before,
#BS__modal .modal-content > .close-modal-or-submenu::before {
  transform: rotate(45deg);
}
#BS__submenu .submenu-head > .close-modal-or-submenu::after,
#BS__modal .modal-content > .close-modal-or-submenu::after {
  transform: rotate(-45deg);
}

#BS__submenu ul {
  list-style: none;
  margin: 0;
  padding: 0 0.5rem 0.5rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  overflow-y: auto;
  /* Never sideways. The panel's width is fixed so it stays predictable on a
   * phone, and `overflow-y: auto` alone would compute overflow-x to `auto`
   * too, so one long option (a row menu's "Email <address>") produced a
   * horizontal scrollbar across the whole list. */
  overflow-x: hidden;
  overscroll-behavior: contain;
}

#BS__submenu li {
  margin: 0;
  min-width: 0;
}

/* Text on a state layer: the forms button's height, fill and shadow are reset. */
#BS__submenu ul button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.625rem 0.75rem;
  border: 0;
  border-radius: 0.625rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  text-align: start;
  color: inherit;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
#BS__submenu ul button:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
#BS__submenu ul button:active {
  background: color-mix(in srgb, currentColor 14%, transparent);
  transform: none;
}
#BS__submenu ul button {
  /* Inset, so neither the list's clip nor the next option can hide it. */
}
#BS__submenu ul button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
  box-shadow: none !important;
}
#BS__submenu ul button.is-destructive {
  color: var(--md-error, var(--sheet-danger));
}

/* One line, ellipsised (an email address cannot wrap); the full text is on the title. */
#BS__submenu .submenu-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#BS__submenu .submenu-caret {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: -0.25rem;
  fill: currentColor;
  opacity: 0.6;
}

/* BS.sheet: a form in the submenu shell. Anchored and 48rem or wider, a popover under its opener with no scrim, so
 * the page behind it stays readable and usable (BS.sheet places it through --bs-sheet-*); otherwise the modal
 * bottom sheet. */
#BS__submenu .submenu-content.bs-sheet {
  width: min(23rem, 100vw - 2rem);
  max-height: min(85dvh, 44rem);
}

#BS__submenu .bs-sheet .submenu-title {
  color: var(--sheet-ink);
  font-weight: 700;
}

#BS__submenu .bs-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

#BS__submenu.is-popover {
  display: block;
  background: transparent;
  pointer-events: none;
  animation: none;
}

#BS__submenu.is-popover .submenu-content.bs-sheet {
  position: fixed;
  top: var(--bs-sheet-top, 4rem);
  right: var(--bs-sheet-right, 1rem);
  max-height: var(--bs-sheet-max-height, calc(100dvh - 6rem));
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 22px 60px rgba(0, 0, 0, 0.28);
  animation: sheet-pop-in 160ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__submenu.is-popover.removing .submenu-content.bs-sheet {
  animation: sheet-pop-out 120ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__submenu.is-sheet {
  align-items: flex-end;
}

#BS__submenu.is-sheet .submenu-content.bs-sheet {
  width: 100%;
  max-width: 32rem;
  max-height: 85dvh;
  border-radius: 1.125rem 1.125rem 0 0;
  border-bottom: 0;
  animation: sheet-up 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__submenu.is-sheet.removing .submenu-content.bs-sheet {
  animation: sheet-down 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__submenu .bs-sheet__grab {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 0.25rem;
  margin: 0.5rem auto 0;
  border-radius: 2px;
  background: var(--sheet-outline);
}

@keyframes sheet-pop-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sheet-pop-out {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
@keyframes sheet-down {
  to {
    transform: translateY(100%);
  }
}
#BS__modal {
  margin: 0;
  cursor: pointer;
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 21, 21, 0.55);
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__modal.removing {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}

#BS__modal .modal-content {
  cursor: default;
  position: relative;
  width: max-content;
  min-width: min(320px, 100%);
  max-width: min(94vw, 34rem);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
  /* The sheet's own surface and ink, as for the submenu: never the page field. */
  border-radius: 12px;
  background: var(--sheet-surface);
  color: var(--sheet-ink);
  box-shadow: var(--sheet-shadow);
  border: 1px solid var(--sheet-outline);
  padding: clamp(24px, 5vh, 48px) clamp(24px, 5vw, 56px);
  animation: panel-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__modal.removing #BS__modal .modal-content {
  animation: panel-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

#BS__modal .modal-content > .close-modal-or-submenu {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
}

/* The first line of text keeps clear of the close button. */
#BS__modal .close-modal-or-submenu + :is(.modal-header, .modal-dialog) {
  padding-inline: 2.5rem;
}

.modal-header {
  margin: 0;
  font-family: inherit;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
  text-align: center;
}

.modal-dialog {
  font-family: inherit;
  font-size: clamp(1rem, 2.3vw, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

.modal-options {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.modal-options li {
  margin: 0;
}

.modal-options button {
  padding: 0.75em 1.75em;
}
.modal-options button:not(.primary):not(.cta):not(.danger) {
  color: var(--sheet-ink);
}

@media (max-width: 480px) {
  #BS__modal .modal-content {
    width: 90vw;
  }
}
/* Mobile only: tighter padding for the confirm/areYouSure modal.
 * Placed after the base rule above so it actually wins (media queries
 * add no specificity — source order decides). Desktop is unchanged. */
@media (max-width: 48rem) {
  #BS__modal .modal-content {
    padding: clamp(16px, 3.5vh, 24px) clamp(14px, 4vw, 20px);
    gap: 0.9rem;
  }
}
/* Loading Overlay — shown during requests, sits behind toasts */
#jeql__loading_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 120ms delay: fast requests never flash the overlay */
  animation: loading-overlay-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}
#jeql__loading_overlay .jeql__spinner {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  /* Spring entrance: subtle scale-up with overshoot */
  animation: spinner-entrance 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms both;
  /* Faint track ring — always visible */
}
#jeql__loading_overlay .jeql__spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.07);
}
#jeql__loading_overlay .jeql__spinner {
  /* Spinning gradient arc — the comet tail */
}
#jeql__loading_overlay .jeql__spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, transparent 25%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.5) 88%, #fff 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: jeql-spin 0.9s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

@keyframes loading-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes spinner-entrance {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-90deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes jeql-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Toast Container Styles */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  z-index: 10000;
  pointer-events: none;
}

/* Individual Toast Styles */
.toast {
  position: relative;
  min-width: 300px;
  max-width: 400px;
  padding: 16px 16px 16px 20px;
  border-radius: 8px;
  background-color: #ffffff;
  color: #222;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: auto;
  /* Entrance animation */
  animation: toast-enter 0.3s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
  opacity: 0;
  transform: translateY(16px);
}

/* Toast types */
.toast-success {
  border-left: 4px solid #10b981;
  background-color: #dbffee;
}

.toast-error {
  border-left: 4px solid #ef4444;
  background-color: #ffdfdf;
}

.toast-info {
  border-left: 4px solid #3b82f6;
  background-color: #d5fff8;
}

.toast-warning {
  border-left: 4px solid #f59e0b;
  background-color: #fff4d0;
}

/* Exit animation */
.toast-exit {
  animation: toast-exit 0.3s forwards cubic-bezier(0.06, 0.71, 0.55, 1);
}

/* Toast loading bar */
.toast-loading-bar {
  position: absolute;
  margin: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  transition: width 5s linear;
}
.toast-loading-bar.decreasing {
  width: 0%;
}

.toast-success .toast-loading-bar {
  background: linear-gradient(to right, #059669, #10b981);
}

.toast-error .toast-loading-bar {
  background: linear-gradient(to right, #dc2626, #ef4444);
}

.toast-info .toast-loading-bar {
  background: linear-gradient(to right, #2563eb, #3b82f6);
}

.toast-warning .toast-loading-bar {
  background: linear-gradient(to right, #d97706, #f59e0b);
}

/* Toast message */
.toast-message {
  flex-grow: 1;
  font-size: 14px;
  font-weight: 500;
  margin-right: 16px;
}

/* Close button */
.toast-close-button {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  min-width: 0;
  padding-left: 0;
  border-radius: 50%;
  background: rgba(102, 102, 102, 0.4);
  color: #444;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(21, 21, 21, 0.12);
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast-close-button::before, .toast-close-button::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast-close-button::before {
  transform: rotate(45deg);
}
.toast-close-button::after {
  transform: rotate(-45deg);
}
.toast-close-button:hover {
  background: rgba(102, 102, 102, 0.6);
  transform: rotate(90deg);
  color: #222;
}
.toast-close-button:active {
  background: rgba(102, 102, 102, 0.8);
  transform: rotate(180deg);
  color: #000;
}

/* Animations */
@keyframes toast-enter {
  0% {
    transform: translateY(16px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes toast-exit {
  0% {
    transform: translateX(0);
    opacity: 1;
    max-height: 100px;
    margin-top: 8px;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
    max-height: 0;
    margin-top: 0;
  }
}
/* Utility classes */
.no-display {
  display: none;
}

/* Named for assistive tech, not drawn. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* PDF Renderer */
#BS__renderer {
  margin-top: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(21, 21, 21, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(8px);
  animation: fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__renderer.removing {
  animation: fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#BS__renderer .loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  padding: 2rem;
}
#BS__renderer .loader {
  position: relative;
  width: 120px;
  height: 120px;
}
#BS__renderer .loader-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: rgb(14.4735619366%, 10.7517888672%, 76.5031130936%);
  animation: spin 1.5s linear infinite;
}
#BS__renderer .loader-ring:nth-child(2) {
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  border-top-color: rgb(22.6391599294%, 18.6832078803%, 88.5716940805%);
  animation-duration: 1.75s;
  animation-direction: reverse;
}
#BS__renderer .loader-ring:nth-child(3) {
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  border-top-color: rgb(39.3216243844%, 36.218752904%, 91.0361490568%);
  animation-duration: 2s;
}
#BS__renderer .loader-pulse {
  position: absolute;
  width: 40%;
  height: 40%;
  top: 30%;
  left: 30%;
  background-color: rgb(56.0040888393%, 53.7542979277%, 93.5006040331%);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}
#BS__renderer .loader-text {
  margin-top: 2rem;
  text-align: center;
}
#BS__renderer .loader-text h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
#BS__renderer .loader-text p {
  opacity: 0.8;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
#BS__renderer .progress-bar {
  width: 100%;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 1rem;
}
#BS__renderer .progress {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgb(56.0040888393%, 53.7542979277%, 93.5006040331%), rgb(14.4735619366%, 10.7517888672%, 76.5031130936%));
  border-radius: 3px;
  animation: progress 6s ease-in-out infinite;
  margin: 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 0.9;
  }
}
@keyframes progress {
  0% {
    width: 0%;
  }
  50% {
    width: 70%;
  }
  75% {
    width: 85%;
  }
  90% {
    width: 90%;
  }
  100% {
    width: 95%;
  }
}
html {
  print-color-adjust: exact !important;
  -webkit-print-color-adjust: exact !important;
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

label {
  color: var(--color);
}

button,
.btn,
input[type=button],
input[type=submit],
input[type=reset] {
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  height: 2.75rem;
  min-width: 6rem;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  color: var(--color);
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.18);
  box-shadow: var(--shadow-btn);
}
button:hover,
.btn:hover,
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover {
  background: rgba(79, 70, 229, 0.14);
  border-color: rgba(79, 70, 229, 0.28);
}
button:active,
.btn:active,
input[type=button]:active,
input[type=submit]:active,
input[type=reset]:active {
  background: rgba(79, 70, 229, 0.2);
  transform: scale(0.97);
  box-shadow: none;
}
button.primary, button.cta,
.btn.primary,
.btn.cta,
input[type=button].primary,
input[type=button].cta,
input[type=submit].primary,
input[type=submit].cta,
input[type=reset].primary,
input[type=reset].cta {
  color: #f0f0f0;
  --start: rgb(20.9709134839%, 16.9296533779%, 88.3252485828%);
  --end: rgb(5.5162159651%, 4.0977604312%, 29.1571415296%);
  background: linear-gradient(135deg, var(--start) 0%, var(--end) 100%);
  transition: --start 300ms cubic-bezier(0.4, 0, 0.2, 1), --end 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms, transform 300ms;
  box-shadow: var(--shadow-btn);
}
button.primary:hover, button.cta:hover,
.btn.primary:hover,
.btn.cta:hover,
input[type=button].primary:hover,
input[type=button].cta:hover,
input[type=submit].primary:hover,
input[type=submit].cta:hover,
input[type=reset].primary:hover,
input[type=reset].cta:hover {
  --start: rgb(27.6438992659%, 23.9438713874%, 89.3110305734%);
  --end: rgb(8.8337515101%, 6.5622154075%, 46.6926865533%);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);
}
button.primary:active, button.cta:active,
.btn.primary:active,
.btn.cta:active,
input[type=button].primary:active,
input[type=button].cta:active,
input[type=submit].primary:active,
input[type=submit].cta:active,
input[type=reset].primary:active,
input[type=reset].cta:active {
  --start: rgb(15.4688226001%, 11.4911253601%, 81.7637766007%);
  --end: rgb(14.1418083821%, 10.5053433696%, 74.7495585912%);
  transform: scale(0.97);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);
}
button.success,
.btn.success,
input[type=button].success,
input[type=submit].success,
input[type=reset].success {
  color: #f0f0f0;
  --start: rgb(5.3192859233%, 61.5042434884%, 42.8867427568%);
  --end: black;
  background: linear-gradient(135deg, var(--start) 0%, var(--end) 100%);
  transition: --start 300ms cubic-bezier(0.4, 0, 0.2, 1), --end 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms, transform 300ms;
  box-shadow: var(--shadow-btn);
}
button.success:hover,
.btn.success:hover,
input[type=button].success:hover,
input[type=submit].success:hover,
input[type=reset].success:hover {
  --start: rgb(5.9561018437%, 68.867427568%, 48.021071115%);
  --end: rgb(1.1799824407%, 13.643546971%, 9.5136084284%);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);
}
button.success:active,
.btn.success:active,
input[type=button].success:active,
input[type=submit].success:active,
input[type=reset].success:active {
  --start: rgb(4.3640620427%, 50.459467369%, 35.1852502195%);
  --end: rgb(3.7272461223%, 43.0962832894%, 30.0509218613%);
  transform: scale(0.97);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);
}
button.warning,
.btn.warning,
input[type=button].warning,
input[type=submit].warning,
input[type=reset].warning {
  color: #f0f0f0;
  --start: rgb(84.912150687%, 54.6360969585%, 3.4800061757%);
  --end: rgb(15.7467963563%, 10.1321599506%, 0.6453605064%);
  background: linear-gradient(135deg, var(--start) 0%, var(--end) 100%);
  transition: --start 300ms cubic-bezier(0.4, 0, 0.2, 1), --end 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms, transform 300ms;
  box-shadow: var(--shadow-btn);
}
button.warning:hover,
.btn.warning:hover,
input[type=button].warning:hover,
input[type=submit].warning:hover,
input[type=reset].warning:hover {
  --start: rgb(92.5971900571%, 59.5809788482%, 3.7949668056%);
  --end: rgb(34.9593947815%, 22.494364675%, 1.4327620812%);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);
}
button.warning:active,
.btn.warning:active,
input[type=button].warning:active,
input[type=submit].warning:active,
input[type=reset].warning:active {
  --start: rgb(73.3845916319%, 47.2187741238%, 3.0075652308%);
  --end: rgb(65.6995522618%, 42.2738922341%, 2.6926046009%);
  transform: scale(0.97);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);
}
button.danger, button.remove-row-button,
.btn.danger,
.btn.remove-row-button,
input[type=button].danger,
input[type=button].remove-row-button,
input[type=submit].danger,
input[type=submit].remove-row-button,
input[type=reset].danger,
input[type=reset].remove-row-button {
  color: #f0f0f0;
  --start: rgb(92.7796773882%, 15.6124794745%, 15.6124794745%);
  --end: rgb(33.5238095238%, 2.8683473389%, 2.8683473389%);
  background: linear-gradient(135deg, var(--start) 0%, var(--end) 100%);
  transition: --start 300ms cubic-bezier(0.4, 0, 0.2, 1), --end 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms, transform 300ms;
  box-shadow: var(--shadow-btn);
}
button.danger:hover, button.remove-row-button:hover,
.btn.danger:hover,
.btn.remove-row-button:hover,
input[type=button].danger:hover,
input[type=button].remove-row-button:hover,
input[type=submit].danger:hover,
input[type=submit].remove-row-button:hover,
input[type=reset].danger:hover,
input[type=reset].remove-row-button:hover {
  --start: rgb(93.4102192601%, 22.9819376026%, 22.9819376026%);
  --end: rgb(51.947454844%, 4.4447020187%, 4.4447020187%);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);
}
button.danger:active, button.remove-row-button:active,
.btn.danger:active,
.btn.remove-row-button:active,
input[type=button].danger:active,
input[type=button].remove-row-button:active,
input[type=submit].danger:active,
input[type=submit].remove-row-button:active,
input[type=reset].danger:active,
input[type=reset].remove-row-button:active {
  --start: rgb(88.7947454844%, 7.5974113783%, 7.5974113783%);
  --end: rgb(81.4252873563%, 6.9668695064%, 6.9668695064%);
  transform: scale(0.97);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.12);
}
button.small,
.btn.small,
input[type=button].small,
input[type=submit].small,
input[type=reset].small {
  height: 2.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}
button.large,
.btn.large,
input[type=button].large,
input[type=submit].large,
input[type=reset].large {
  height: 3.25rem;
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}
button.subtle,
.btn.subtle,
input[type=button].subtle,
input[type=submit].subtle,
input[type=reset].subtle {
  background: none;
  color: #334155;
  box-shadow: none;
}
button.subtle:hover,
.btn.subtle:hover,
input[type=button].subtle:hover,
input[type=submit].subtle:hover,
input[type=reset].subtle:hover {
  background-color: #f1f5f9;
}
button.subtle:active,
.btn.subtle:active,
input[type=button].subtle:active,
input[type=submit].subtle:active,
input[type=reset].subtle:active {
  background-color: #e2e8f0;
}
button:disabled,
.btn:disabled,
input[type=button]:disabled,
input[type=submit]:disabled,
input[type=reset]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
button .icon,
.btn .icon,
input[type=button] .icon,
input[type=submit] .icon,
input[type=reset] .icon {
  margin-right: 0.5rem;
  flex-shrink: 0;
}
button.icon-only,
.btn.icon-only,
input[type=button].icon-only,
input[type=submit].icon-only,
input[type=reset].icon-only {
  padding: 0.5rem;
  min-width: unset;
  width: 2.75rem;
}
button.icon-only .icon,
.btn.icon-only .icon,
input[type=button].icon-only .icon,
input[type=submit].icon-only .icon,
input[type=reset].icon-only .icon {
  margin-right: 0;
}

body:not(.popup) .viewport {
  max-width: 800px;
  margin: 0 auto;
  margin-top: 2em;
  margin-bottom: 2em;
  border-radius: 0.75rem;
  padding: 2rem;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color);
  margin-bottom: 1rem;
}

.page-subtitle {
  font-size: 1.125rem;
  color: var(--color-secondary);
  margin-bottom: 2rem;
}

.form-container {
  max-width: 640px;
  margin: 0 auto;
}

.form-section.margin {
  margin-bottom: 2rem;
}
.form-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
}
.form-section-description {
  font-size: 0.875rem;
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.form-group {
  margin-bottom: 1.25rem;
}
.form-group.inline {
  display: flex;
  align-items: flex-start;
}
.form-group.inline .form-label {
  flex: 0 0 30%;
  margin-bottom: 0;
  padding-top: 0.5rem;
}
.form-group.inline .form-input-wrapper {
  flex: 1;
}
.form-group.has-error .form-label {
  color: #ef4444;
}
.form-group.has-error .form-input {
  border-color: #ef4444;
  background-color: rgba(239, 68, 68, 0.02);
}
.form-group.has-error .form-error {
  display: block;
}

.form-row {
  display: flex;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.form-row .form-group {
  flex: 1;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.form-submit-area {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}
.form-submit-area.flex-end {
  justify-content: flex-end;
}
.form-submit-area.margin {
  margin-top: 2rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: color(--color);
}
.form-label.required::after {
  content: "*";
  color: #ef4444;
  margin-left: 0.25rem;
}

.form-label-hint {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-secondary);
  margin-top: 0.25rem;
}

.form-error {
  display: none;
  font-size: 0.75rem;
  color: #ef4444;
  margin-top: 0.25rem;
}
.form-error.filled {
  display: block;
}

.form-input-wrapper {
  position: relative;
}

.form-input,
input[type=text],
input[type=email],
input[type=password],
input[type=search],
input[type=url],
input[type=tel],
input[type=number],
input[type=date],
textarea {
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color);
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  transition: all 0.15s ease;
}
.form-input:hover,
input[type=text]:hover,
input[type=email]:hover,
input[type=password]:hover,
input[type=search]:hover,
input[type=url]:hover,
input[type=tel]:hover,
input[type=number]:hover,
input[type=date]:hover,
textarea:hover {
  border-color: var(--border-hover);
}
.form-input:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=url]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=date]:focus,
textarea:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
  outline: none;
}
.form-input::placeholder,
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=url]::placeholder,
input[type=tel]::placeholder,
input[type=number]::placeholder,
input[type=date]::placeholder,
textarea::placeholder {
  color: #94a3b8;
}
.form-input:disabled,
input[type=text]:disabled,
input[type=email]:disabled,
input[type=password]:disabled,
input[type=search]:disabled,
input[type=url]:disabled,
input[type=tel]:disabled,
input[type=number]:disabled,
input[type=date]:disabled,
textarea:disabled {
  background-color: var(--background-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}
.form-input.small,
input[type=text].small,
input[type=email].small,
input[type=password].small,
input[type=search].small,
input[type=url].small,
input[type=tel].small,
input[type=number].small,
input[type=date].small,
textarea.small {
  height: 2.25rem;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}
.form-input.large,
input[type=text].large,
input[type=email].large,
input[type=password].large,
input[type=search].large,
input[type=url].large,
input[type=tel].large,
input[type=number].large,
input[type=date].large,
textarea.large {
  height: 3.25rem;
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

.input-with-icon {
  position: relative;
}
.input-with-icon .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-secondary);
}
.input-with-icon .icon.icon-left {
  left: 0.75rem;
}
.input-with-icon .icon.icon-right {
  right: 0.75rem;
}
.input-with-icon .form-input.has-icon-left {
  padding-left: 2rem;
}
.input-with-icon .form-input.has-icon-right {
  padding-right: 2rem;
}

.input-with-lookup {
  display: flex;
  align-items: stretch;
  min-width: min(25em, 100%);
  max-width: 100%;
}
.input-with-lookup input {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
  padding: 1.5em 0.75rem 0.5rem 0.75rem;
  height: auto;
}
.input-with-lookup input::-webkit-calendar-picker-indicator {
  display: none;
}
.input-with-lookup .lookup-btn, .input-with-lookup .lookup-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  width: 2.5rem;
  height: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-left: none;
  background: var(--background);
  color: var(--color-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: none;
  font-size: 1rem;
  border-radius: 0;
}
.input-with-lookup .lookup-btn::before {
  content: "🔍";
}
.input-with-lookup .lookup-clear-btn {
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.875rem;
}
.input-with-lookup .lookup-clear-btn::before {
  content: "✕";
}
.input-with-lookup .lookup-btn:last-child {
  border-radius: 0 0.5rem 0.5rem 0;
}
.input-with-lookup:hover input {
  border-color: var(--border-hover);
}
.input-with-lookup:hover .lookup-btn {
  background: rgba(79, 70, 229, 0.08);
  color: #4f46e5;
  border-color: var(--border-hover);
}
.input-with-lookup:hover .lookup-clear-btn {
  border-color: var(--border-hover);
}
.input-with-lookup .lookup-clear-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

.form-select-wrapper {
  position: relative;
}
.form-select-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

select,
.form-select {
  appearance: none;
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: 0.5rem 0.75rem;
  padding-right: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color);
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  transition: all 0.15s ease;
  cursor: pointer;
}
select:hover,
.form-select:hover {
  border-color: var(--border-hover);
}
select:focus,
.form-select:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
  outline: none;
}
select:disabled,
.form-select:disabled {
  background-color: var(--background-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}
select.small,
.form-select.small {
  height: 2.25rem;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  padding-right: 1.5rem;
}
select.large,
.form-select.large {
  height: 3.25rem;
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
  padding-right: 2.5rem;
}
select option,
.form-select option {
  padding: 0.5rem;
}

.form-check {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}
.form-check:last-child {
  margin-bottom: 0;
}

.form-check-input {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  border: 1.5px solid var(--border);
  background-color: var(--background);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.form-check-input:hover {
  border-color: var(--border-hover);
}
.form-check-input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
  outline: none;
}
.form-check-input:checked {
  border-color: #4f46e5;
  background-color: #4f46e5;
}
.form-check-input:checked::after {
  opacity: 1;
}

.form-check-input[type=checkbox] {
  border-radius: 0.25rem;
}
.form-check-input[type=checkbox]::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0.3rem;
  height: 0.6rem;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.form-check-input[type=radio] {
  border-radius: 9999px;
}
.form-check-input[type=radio]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: white;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.form-check-label {
  font-size: 0.875rem;
  color: var(--color);
  cursor: pointer;
  user-select: none;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.radio-button-group .radio-button {
  display: inline-block;
  margin-bottom: 0.5rem;
}
.radio-button-group .radio-button input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.radio-button-group .radio-button input[type=radio]:checked + .radio-button-label {
  background-color: rgba(79, 70, 229, 0.08);
  border-color: #4f46e5;
  color: #4f46e5;
  font-weight: 500;
}
.radio-button-group .radio-button input[type=radio]:focus + .radio-button-label {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.radio-button-group .radio-button .radio-button-label {
  background-color: var(--background);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.25s ease;
}
.radio-button-group .radio-button .radio-button-label:hover {
  background-color: var(--background-hover);
}

.form-switch {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.form-switch .switch-input {
  appearance: none;
  position: relative;
  width: 3rem;
  height: 1.5rem;
  border-radius: 9999px;
  background-color: var(--background);
  margin-right: 0.75rem;
  transition: background-color 0.2s ease;
  cursor: pointer;
  flex-shrink: 0;
}
.form-switch .switch-input::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 9999px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}
.form-switch .switch-input:checked {
  background-color: #4f46e5;
}
.form-switch .switch-input:checked::after {
  transform: translateX(1.5rem);
}
.form-switch .switch-input:focus {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
  outline: none;
}
.form-switch .switch-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.form-switch .switch-label {
  font-size: 0.875rem;
  color: var(--color);
  cursor: pointer;
  user-select: none;
}

.form-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.375rem;
  background-color: #e2e8f0;
  border-radius: 9999px;
  outline: none;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: #4f46e5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.form-range::-webkit-slider-thumb:hover {
  background-color: rgb(22.6391599294%, 18.6832078803%, 88.5716940805%);
}
.form-range::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  border-radius: 50%;
  background-color: #4f46e5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.form-range::-moz-range-thumb:hover {
  background-color: rgb(22.6391599294%, 18.6832078803%, 88.5716940805%);
}
.form-range:focus {
  outline: none;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}
.form-range:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
}
.range-labels .range-label {
  font-size: 0.75rem;
  color: var(--color-secondary);
}

.form-file {
  position: relative;
}
.form-file .file-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  z-index: -1;
}
.form-file .file-input:focus + .file-label {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.form-file .file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border: 2px dashed var(--border);
  border-radius: 0.5rem;
  cursor: pointer;
  background-color: var(--background);
  transition: all 0.25s ease;
}
.form-file .file-label:hover {
  border-color: var(--border-hover);
  background-color: var(--background-hover);
}
.form-file .file-label .file-icon {
  font-size: 2rem;
  color: #94a3b8;
  margin-bottom: 0.5rem;
}
.form-file .file-label .file-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color);
  margin-bottom: 0.25rem;
}
.form-file .file-label .file-hint {
  font-size: 0.75rem;
  color: var(--color-secondary);
}
.form-file .file-preview {
  display: none;
  margin-top: 0.75rem;
}
.form-file .file-preview.visible {
  display: block;
}
.form-file .file-preview .file-preview-item {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  background-color: #f8fafc;
  border-radius: 0.5rem;
}
.form-file .file-preview .file-preview-item .file-preview-icon {
  font-size: 1.25rem;
  color: #64748b;
  margin-right: 0.5rem;
}
.form-file .file-preview .file-preview-item .file-preview-name {
  font-size: 0.875rem;
  color: var(--color);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-file .file-preview .file-preview-item .file-preview-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-secondary);
  padding: 0.25rem;
}
.form-file .file-preview .file-preview-item .file-preview-remove:hover {
  color: #ef4444;
}

.form-feedback {
  display: flex;
  align-items: flex-start;
  padding: 0.75rem;
  margin: 1rem 0;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}
.form-feedback .feedback-icon {
  margin-right: 0.5rem;
  font-size: 1rem;
  flex-shrink: 0;
}
.form-feedback.feedback-success {
  background-color: rgba(16, 185, 129, 0.1);
  border-left: 4px solid #10b981;
}
.form-feedback.feedback-success .feedback-icon {
  color: #10b981;
}
.form-feedback.feedback-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-left: 4px solid #f59e0b;
}
.form-feedback.feedback-warning .feedback-icon {
  color: #f59e0b;
}
.form-feedback.feedback-error {
  background-color: rgba(239, 68, 68, 0.1);
  border-left: 4px solid #ef4444;
}
.form-feedback.feedback-error .feedback-icon {
  color: #ef4444;
}
.form-feedback.feedback-info {
  background-color: rgba(79, 70, 229, 0.1);
  border-left: 4px solid #4f46e5;
}
.form-feedback.feedback-info .feedback-icon {
  color: #4f46e5;
}

@media (max-width: 640px) {
  .form-group.inline {
    flex-direction: column;
  }
  .form-group.inline .form-label {
    flex: none;
    width: 100%;
    margin-bottom: 0.5rem;
    padding-top: 0;
  }
  .form-group.inline .form-input-wrapper {
    width: 100%;
  }
  .form-row {
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
  }
  .form-row .form-group {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .form-submit-area {
    flex-direction: column;
  }
  .form-submit-area button, .form-submit-area .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .form-submit-area button:last-child, .form-submit-area .btn:last-child {
    margin-bottom: 0;
  }
}
@keyframes form-shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-5px);
  }
  40%, 80% {
    transform: translateX(5px);
  }
}
@keyframes form-highlight {
  0% {
    background-color: rgba(79, 70, 229, 0.2);
  }
  100% {
    background-color: transparent;
  }
}
.input-error {
  animation: form-shake 0.4s ease-in-out;
}

.input-success {
  animation: form-highlight 1s ease-out;
}

:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .form-check-input:focus-visible, .switch-input:focus-visible, .file-label:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

/* Progress */
.form-progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  position: relative;
}

.form-progress::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #BBB;
  z-index: 1;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.progress-marker {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--background);
  border: 2px solid #BBB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.progress-text {
  font-size: 0.75rem;
  color: var(--color-secondary);
  transition: all 0.2s ease;
}

.progress-step.active .progress-marker {
  background-color: #4f46e5;
  border-color: #4f46e5;
  color: #ffffff;
}

.progress-step.active .progress-text {
  color: #4f46e5;
  font-weight: 500;
}

.progress-step.completed .progress-marker {
  background-color: #4f46e5;
  border-color: #4f46e5;
  color: #ffffff;
}

/* Floating label pattern: <label><span>Label</span><input></label>
   Also supports <div class="field"><span>Label</span>...</div> for lookup fields */
label:has(> span + input:not([type=checkbox])),
label:has(> span + select),
label:has(> span + .input-with-lookup),
.field:has(> span + .input-with-lookup) {
  display: block;
  position: relative;
  margin-bottom: 1rem;
}

label > span, .field > span {
  position: absolute;
  top: 0.5em;
  left: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-secondary);
  letter-spacing: 0.025em;
  pointer-events: none;
  z-index: 1;
}

/* A field's validation message. Both field shapes end in `margin-bottom: $space-4`,
   which put the whole gap ABOVE the message and none below it, so the message read
   as a caption for the NEXT field. Pull it up under the field it belongs to and let
   it pay that field's bottom margin instead. */
label + .field-error-msg,
.field + .field-error-msg {
  margin-top: -0.75rem; /* collapses with the field's $space-4 down to $space-1 */
  margin-bottom: 1rem;
}

/* Emptied, not removed, before every submit — an empty one must not hold space. */
label + .field-error-msg:empty,
.field + .field-error-msg:empty {
  display: none;
}

label > input:not([type=checkbox]), label > select {
  min-width: min(25em, 100%);
  max-width: 100%;
  text-align: left;
  padding: 1.5em 0.75rem 0.5rem 0.75rem;
  height: auto;
}

/* Inside tables: compact — no floating label */
td label > span {
  position: static;
  display: block;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}

td label > input:not([type=checkbox]) {
  padding-top: 0.5rem;
}

.form-buttons {
  padding-bottom: 2em;
}

a, *[data--baton-controller--onclick] {
  text-decoration: none;
  cursor: pointer;
  color: #4f46e5;
  font-weight: 600;
}

/* Buttons: keep their own text color, not brand-primary —
   but exclude semantic classes that use btn-gradient (light text on dark bg) */
button[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button),
input[type=button][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button),
input[type=submit][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button) {
  color: var(--color);
}

a:hover, *[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover {
  color: rgb(17.6344205929%, 13.4225443732%, 87.8323575876%);
}

button[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover,
input[type=button][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover,
input[type=submit][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover {
  color: var(--color);
}

/* Dark mode: lighten link/controller colors for readability */
@media (prefers-color-scheme: dark) {
  a, *[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button) {
    color: rgb(64.3453210668%, 62.5220704396%, 94.7328315212%);
  }
  a:hover, *[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover {
    color: rgb(77.6912926308%, 76.5505064585%, 96.7043955023%);
  }
  /* Non-gradient buttons & nav links: keep theme text color */
  button[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button),
  button[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover,
  input[type=button][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button),
  input[type=button][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover,
  input[type=submit][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button),
  input[type=submit][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover,
  nav a[data--baton-controller--onclick],
  nav a[data--baton-controller--onclick]:hover {
    color: var(--color);
  }
}
body.dark-mode a, body.dark-mode *[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button) {
  color: rgb(64.3453210668%, 62.5220704396%, 94.7328315212%);
}
body.dark-mode a:hover, body.dark-mode *[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover {
  color: rgb(77.6912926308%, 76.5505064585%, 96.7043955023%);
}
body.dark-mode button[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button),
body.dark-mode button[data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover,
body.dark-mode input[type=button][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button),
body.dark-mode input[type=button][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover,
body.dark-mode input[type=submit][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button),
body.dark-mode input[type=submit][data--baton-controller--onclick]:not(.primary, .cta, .success, .warning, .danger, .remove-row-button):hover,
body.dark-mode nav a[data--baton-controller--onclick],
body.dark-mode nav a[data--baton-controller--onclick]:hover {
  color: var(--color);
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: bold;
}

.bsm-fab,
.bsm-overlay {
  --bsm-ink: var(--md-on-surface, var(--text-strong, #1e2233));
  --bsm-muted: var(--md-on-surface-variant, var(--text-muted, #5a6178));
  --bsm-faint: color-mix(in srgb, var(--bsm-ink) 42%, transparent);
  --bsm-hairline: var(--hairline, var(--border, rgba(128, 128, 128, 0.22)));
  --bsm-surface: color-mix(in srgb, var(--bsm-ink) 5%, transparent);
  --bsm-surface-strong: color-mix(in srgb, var(--bsm-ink) 8%, transparent);
  --bsm-card: var(--md-surface-container-high, var(--surface-2, #282830));
  --bsm-panel-bg: var(--md-surface-container-low, var(--surface, #16161f));
  --bsm-brand: var(--md-primary, #4f46e5);
  --bsm-edge: color-mix(in srgb, var(--bsm-ink) 34%, transparent);
  --bsm-grid: color-mix(in srgb, var(--bsm-ink) 6%, transparent);
}

.bsm-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: fit-content;
  min-width: 0;
  height: auto;
  min-height: 2.5rem;
  margin: 0 auto 1.5rem;
  padding: 0 1rem 0 0.75rem;
  border-radius: 1.25rem;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  color: var(--bsm-muted);
  background: var(--bsm-panel-bg);
  border: 1px solid var(--bsm-hairline);
  box-shadow: none;
  transition: transform 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-fab svg {
  flex: 0 0 auto;
}
.bsm-fab:hover, .bsm-fab:focus-visible {
  color: var(--bsm-ink);
  border-color: var(--bsm-brand);
}
@media (min-width: 88rem) {
  .bsm-fab {
    position: fixed;
    left: max(1rem, env(safe-area-inset-left));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 900;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  .bsm-fab .bsm-fab__label {
    display: none;
  }
  .bsm-fab:hover, .bsm-fab:focus-visible {
    transform: translateY(-2px);
  }
}

.bsm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-overlay.open {
  opacity: 1;
}

.bsm-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(6px);
}

.bsm-panel {
  position: absolute;
  inset: 2.2vh 2.2vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--bsm-hairline);
  color: var(--bsm-ink);
  background: radial-gradient(1200px 700px at 22% -8%, color-mix(in srgb, var(--bsm-brand) 16%, transparent), transparent 60%), var(--bsm-panel-bg);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 24px 60px rgba(0, 0, 0, 0.12);
  transform: scale(0.96);
  transition: transform 300ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
.bsm-overlay.open .bsm-panel {
  transform: scale(1);
}

.bsm-phead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--bsm-hairline);
}

.bsm-ptitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
}
.bsm-ptitle strong {
  font-weight: 680;
}
.bsm-ptitle em {
  color: var(--bsm-muted);
  font-style: normal;
  font-weight: 450;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
}

.bsm-pdot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 9999px;
  background: conic-gradient(from 210deg, #f472b6, #38bdf8, #a78bfa, #34d399, #f472b6);
}

.bsm-pactions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bsm-views {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 0.5rem;
  background: var(--bsm-surface);
  border: 1px solid var(--bsm-hairline);
}
.bsm-views button {
  width: 2rem;
  height: 1.8rem;
  border: none;
  background: none;
  border-radius: 0.25rem;
  color: var(--bsm-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-views button:hover {
  color: var(--bsm-ink);
}
.bsm-views button.on {
  background: var(--bsm-brand);
  color: var(--md-on-primary, #fff);
}

.bsm-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--bsm-hairline);
  background: var(--bsm-surface);
  color: var(--bsm-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: color 100ms cubic-bezier(0.2, 0, 0, 1), border-color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-icon:hover {
  color: var(--bsm-ink);
  border-color: var(--bsm-brand);
}

.bsm-schemas {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 0.5rem;
  background: var(--bsm-surface);
  border: 1px solid var(--bsm-hairline);
}
.bsm-schemas:empty {
  display: none;
}
.bsm-schemas button {
  height: 1.8rem;
  padding: 0 0.7rem;
  border: none;
  background: none;
  border-radius: 0.25rem;
  color: var(--bsm-muted);
  cursor: pointer;
  font-size: 0.8rem;
  white-space: nowrap;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-schemas button:hover {
  color: var(--bsm-ink);
}
.bsm-schemas button.on {
  background: var(--bsm-brand);
  color: var(--md-on-primary, #fff);
}

.bsm-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.bsm-stage .bsm-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.bsm-stage.tree {
  overflow: auto;
}

.bsm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.5rem 1.25rem;
  border-top: 1px solid var(--bsm-hairline);
}

.bsm-lgi {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--bsm-muted);
}

.bsm-lgsw {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 3px;
  border: 1px dashed var(--bsm-faint);
}

.bsm-lgpk {
  color: var(--bsm-brand);
}

.bsm-dir {
  font-weight: 900;
}
.bsm-dir.up {
  color: #38bdf8;
}
.bsm-dir.down {
  color: #34d399;
}

.bsm-griddot {
  fill: var(--bsm-grid);
}

.bsm-bg {
  pointer-events: none;
}

.bsm-card {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
  animation: bsm-pop 500ms cubic-bezier(0.05, 0.7, 0.1, 1) backwards;
}
.bsm-card .bsm-body {
  fill: var(--bsm-card);
  stroke: var(--bsm-hairline);
  stroke-width: 1;
}
.bsm-card.product .bsm-body {
  stroke-dasharray: 5 4;
}
.bsm-card.current .bsm-body {
  stroke: var(--bsm-brand);
  stroke-width: 2;
}
.bsm-card.current .bsm-glow {
  opacity: 0.9 !important;
}
.bsm-card.focus .bsm-glow {
  opacity: 1;
}

.bsm-ctitle {
  font-weight: 640;
  font-size: 13px;
}

.bsm-cmeta {
  fill: #0b0c14;
  font-weight: 700;
  font-size: 9px;
  opacity: 0.7;
  letter-spacing: 0.4px;
}

.bsm-col {
  fill: var(--bsm-muted);
  font-size: 11px;
}
.bsm-col.pk {
  fill: var(--bsm-ink);
  font-weight: 600;
}

.bsm-colkey {
  fill: var(--bsm-brand);
  font-size: 9px;
}

.bsm-edge {
  fill: none;
  stroke-width: 1.4;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-edge.supp {
  stroke-dasharray: 3 5;
}

.bsm-svg.focusing .bsm-edge:not(.efocus) {
  opacity: 0.07;
}
.bsm-svg.focusing .bsm-card:not(.focus):not(.adj) {
  opacity: 0.16;
}
.bsm-svg.focusing .bsm-edge.efocus {
  stroke-width: 2.1;
  opacity: 1;
}

@keyframes bsm-pop {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.bsm-explorer {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bsm-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.12rem;
  width: 100%;
  max-width: 42rem;
  margin-bottom: 1rem;
}

.bsm-crumb {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--bsm-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0.2rem 0.45rem;
  border-radius: 0.5rem;
  transition: color 100ms cubic-bezier(0.2, 0, 0, 1), background 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-crumb:hover {
  color: var(--bsm-ink);
  background: var(--bsm-surface);
}
.bsm-crumb.cur {
  color: var(--bsm-ink);
  font-weight: 700;
}

.bsm-crumbsep {
  color: var(--bsm-faint);
}

.bsm-expbody {
  width: 100%;
  max-width: 42rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bsm-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bsm-sectit {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
  color: var(--bsm-faint);
  padding: 0 0.2rem;
}

.bsm-sectitle {
  font-weight: 700;
}

.bsm-n {
  margin-left: auto;
  opacity: 0.7;
}

.bsm-empty {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--bsm-faint);
  font-style: italic;
  padding: 0.15rem 0.6rem;
}

.bsm-neighbor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  cursor: pointer;
  background: var(--bsm-surface);
  border: 1px solid transparent;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), border-color 100ms cubic-bezier(0.2, 0, 0, 1), transform 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-neighbor:hover {
  background: var(--bsm-surface-strong);
  border-color: var(--bsm-hairline);
  transform: translateX(2px);
}
.bsm-neighbor:hover .bsm-browse {
  opacity: 1;
}

.bsm-edot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 3px;
  flex: 0 0 auto;
  box-shadow: 0 0 7px -1px currentColor;
}

.bsm-nlabel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}

.bsm-join {
  color: var(--bsm-ink);
  font-weight: 560;
}

.bsm-sep {
  color: var(--bsm-faint);
}

.bsm-target {
  color: var(--bsm-muted);
}

.bsm-pill {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border-radius: 0.25rem;
  border: 1px solid var(--bsm-hairline);
}
.bsm-pill.many {
  color: #fbbf24;
}
.bsm-pill.one {
  color: var(--bsm-muted);
}

.bsm-onward {
  flex: 0 0 auto;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--bsm-faint);
  min-width: 2.3rem;
  text-align: right;
}

.bsm-browse {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0.5rem;
  border: 1px solid var(--bsm-hairline);
  background: var(--bsm-panel-bg);
  color: var(--bsm-muted);
  cursor: pointer;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 100ms cubic-bezier(0.2, 0, 0, 1), color 100ms cubic-bezier(0.2, 0, 0, 1), background 100ms cubic-bezier(0.2, 0, 0, 1), border-color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-browse:hover {
  color: var(--md-on-primary, #fff);
  background: var(--bsm-brand);
  border-color: var(--bsm-brand);
}
.bsm-browse.hit {
  color: var(--md-on-primary, #fff);
  background: #34d399;
  border-color: #34d399;
}

.bsm-current {
  border: 1px solid var(--bsm-hairline);
  border-radius: 1rem;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent 64%), var(--bsm-card);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 16px 40px rgba(0, 0, 0, 0.1), inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
}

.bsm-chead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--bsm-hairline);
}

.bsm-cdot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 12px -1px var(--accent);
  flex: 0 0 auto;
}

.bsm-curtitle {
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 400;
  letter-spacing: 0;
  font-weight: 720;
}

.bsm-kind {
  text-transform: uppercase;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 800;
  padding: 0.12rem 0.4rem;
  border-radius: 0.25rem;
  color: var(--bsm-muted);
  background: var(--bsm-surface);
  border: 1px solid var(--bsm-hairline);
}

.bsm-cbrowse {
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--bsm-hairline));
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--bsm-ink);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.35rem 0.8rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), transform 100ms cubic-bezier(0.2, 0, 0, 1);
}
.bsm-cbrowse:hover {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  transform: translateY(-1px);
}

.bsm-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.75rem 1rem 1rem;
}

.bsm-ecol {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--bsm-muted);
  background: var(--bsm-surface);
  border: 1px solid var(--bsm-hairline);
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
}
.bsm-ecol.pk {
  color: var(--bsm-ink);
}
.bsm-ecol i {
  color: var(--bsm-brand);
  font-style: normal;
}

/* A table with a timeline (the timeline registry): the clock on its card, its from and to columns and the legend. */
.bsm-ctl {
  opacity: 0.85;
}

.bsm-ecol .bsm-tlc,
.bsm-tl .bsm-tlc,
.bsm-lgtl {
  color: var(--moment-accent, #6E4B2A);
  font-style: normal;
}

.bsm-tl {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  padding: 0.5rem 1rem 0;
  color: var(--bsm-muted);
}

/* Design tokens layered on top of BATON vars */
:root {
  color-scheme: light dark;
  --header-height: 44px;
  --icon-size: 40px;
  --nav-gap: 6px;
  --nav-pad-y: 6px;
  --nav-pad-x: 10px;
  --app-max-width: clamp(82rem, 90vw, 120rem);
  --header-max-width: clamp(86rem, 92vw, 120rem);
  --app-gutter: clamp(14px, 2.2vw, 22px);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 10px 30px rgba(0,0,0,0.08);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.08), 0 18px 60px rgba(0,0,0,0.12);
  --ring: 0 0 0 4px rgba(79,70,229,0.18);
  --text-strong: var(--md-on-surface, var(--color));
  --text-muted: var(--md-on-surface-variant, var(--color-secondary));
  --hairline: var(--md-outline-variant, var(--border));
  --hairline-hover: var(--md-outline, var(--border-hover));
  --action: var(--md-primary, #4f46e5);
  --block-gap: clamp(10px, 1.5vw, 14px);
}

@media (prefers-color-scheme: light) {
  :root {
    --surface: #ffffff;
    --surface-2: #f0f0f4;
  }
}
body.light-mode {
  --surface: #ffffff;
  --surface-2: #f0f0f4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1e1e24;
    --surface-2: #282830;
  }
}
body.dark-mode {
  --surface: #1e1e24;
  --surface-2: #282830;
}

/* The "moment" colour of the viewing-moment chrome (BatonMomentChrome): sepia, the colour of an old photograph,
   meaning "this data is from another moment" and nothing else. Deliberately neither --gl-warn's orange nor a
   brand gold. Text and boundary pairs are checked in ux/SPEC.md §12 (all text 4.5:1 or more, boundaries 3:1).
   The hatch is declared with each scheme, beside the accent it is drawn in, because a custom property resolves
   its var() where it is declared: a project that retunes the accent on one of these selectors retunes both. */
:root {
  --moment-accent: #6E4B2A;
  --moment-surface: #F1DDBF;
  --moment-ink: #33200D;
  --moment-fill: #5F3F22;
  --moment-fill-line: #5F3F22;
  --moment-on-fill: #FFF6EA;
  --moment-chip: #EFDCC2;
  --moment-chip-ink: #3F2812;
  --moment-later: #6E5238;
  --moment-hatch: repeating-linear-gradient(135deg, var(--moment-accent) 0 2px, transparent 2px 6px);
}

@media (prefers-color-scheme: light) {
  :root {
    --moment-accent: #6E4B2A;
    --moment-surface: #F1DDBF;
    --moment-ink: #33200D;
    --moment-fill: #5F3F22;
    --moment-fill-line: #5F3F22;
    --moment-on-fill: #FFF6EA;
    --moment-chip: #EFDCC2;
    --moment-chip-ink: #3F2812;
    --moment-later: #6E5238;
    --moment-hatch: repeating-linear-gradient(135deg, var(--moment-accent) 0 2px, transparent 2px 6px);
  }
}
body.light-mode {
  --moment-accent: #6E4B2A;
  --moment-surface: #F1DDBF;
  --moment-ink: #33200D;
  --moment-fill: #5F3F22;
  --moment-fill-line: #5F3F22;
  --moment-on-fill: #FFF6EA;
  --moment-chip: #EFDCC2;
  --moment-chip-ink: #3F2812;
  --moment-later: #6E5238;
  --moment-hatch: repeating-linear-gradient(135deg, var(--moment-accent) 0 2px, transparent 2px 6px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --moment-accent: #D6A878;
    --moment-surface: #34261A;
    --moment-ink: #F6E6D2;
    --moment-fill: #523720;
    --moment-fill-line: #D6A878;
    --moment-on-fill: #FCEBD5;
    --moment-chip: #46321F;
    --moment-chip-ink: #F8E3C6;
    --moment-later: #CDB293;
    --moment-hatch: repeating-linear-gradient(135deg, var(--moment-accent) 0 2px, transparent 2px 6px);
  }
}
body.dark-mode {
  --moment-accent: #D6A878;
  --moment-surface: #34261A;
  --moment-ink: #F6E6D2;
  --moment-fill: #523720;
  --moment-fill-line: #D6A878;
  --moment-on-fill: #FCEBD5;
  --moment-chip: #46321F;
  --moment-chip-ink: #F8E3C6;
  --moment-later: #CDB293;
  --moment-hatch: repeating-linear-gradient(135deg, var(--moment-accent) 0 2px, transparent 2px 6px);
}

@media (prefers-reduced-motion: reduce) {
  *:not(#BS_popup_container):not(.BS-popup-iframe),
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--md-primary, #4f46e5);
  color: var(--md-on-primary, #fff);
}

body {
  margin: 0;
  min-height: 100%;
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
}

/* Keep popup/sidebar layouts controlled by BATON core */
body:not(.popup):not(.sidebar) {
  display: block;
}

/* Typography */
h1, h2, h3, h4 {
  color: var(--md-on-surface, var(--text-strong));
}

h1 {
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 1rem 0;
}

h2 {
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 0.75rem 0;
}

h3 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 0.5rem 0;
}

h4 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 0.25rem 0;
}

/* Both are direct children of the `main > div` flex column, whose `gap` is the
 * single source of block spacing — a margin here is added to that gap rather
 * than merged with it, so these carry no BLOCK margin. The inline `auto` must
 * stay: a single class outranks the three-element `main > div > h1` rule that
 * centres them against the singleton card, so a bare `margin: 0` silently
 * shunts the page title to the left. */
.frame-title {
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 400;
  letter-spacing: 0;
  max-width: 36rem;
  text-align: center;
  margin: 0 auto;
}

/* The page title names the record the singleton card shows, so the singleton's
 * actions belong on its line. The empty first track balances the button in the
 * third, so the title stays optically centred whatever width the button takes. */
.frame-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  /* A page with no actions must not sit lower or higher than one with. */
  min-height: 2rem;
}
.frame-head > .frame-title {
  grid-column: 2;
}
.frame-head > .baton-tbl__menu-btn {
  grid-column: 3;
  justify-self: end;
  margin: 0;
}

.frame-description {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--md-on-surface-variant, var(--text-muted));
  max-width: 36rem;
  text-align: center;
  margin: 0 auto;
}

/* Heading above a rendered dataset — a label for the table or grid beneath it,
 * not a title in its own right. */
.dataset-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--md-on-surface-variant, var(--text-muted));
  margin: 0 0 0.5rem 0;
}

/* The line a dataset opens with: its heading on the left, its action button
 * right-aligned on the same line (the button itself carries `margin-left: auto`).
 * The button has exactly one home whatever the table beneath it looks like — it
 * used to move between the table head and a controls bar depending on whether
 * the table had a row-menu column, which read as arbitrary. */
.dataset-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* The line owns the spacing to the table now; the heading inside it carries
     none, or it would be added to this. */
  margin: 0 0 0.5rem 0;
  min-height: 2rem;
}
.dataset-head > .dataset-title {
  margin: 0;
}

p {
  /* $sp-2, not 0.65rem — the only spacing value in this file that was off the
     $sp-* scale. The same value still sits on ul/ol, .ul > ul / .ol > ol and
     pre further down; move those in this same commit. */
  margin: 0 0 0.5rem 0;
  color: var(--text-strong);
  /* A trailing paragraph must not stack its margin on top of the card's own
     padding — `section > div` already pays for that edge. */
}
p:last-child {
  margin-bottom: 0;
}

small, .muted {
  color: var(--text-muted);
}

/* Links */
a, *[data--baton-controller--onclick] {
  border-radius: 8px;
  outline: none;
  transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

a:focus-visible,
*[data--baton-controller--onclick]:focus-visible {
  box-shadow: var(--ring);
}

a:hover,
*[data--baton-controller--onclick]:hover {
  background-color: rgba(79, 70, 229, 0.08);
}

/* Layout containers (semantic element immediate child div) */
header > div,
nav > div,
main > div,
footer > div,
section > div,
article > div,
aside > div {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding-left: var(--app-gutter);
  padding-right: var(--app-gutter);
}

header > div,
nav > div {
  max-width: var(--header-max-width);
}

/* App header — frosted glass over mesh gradient */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(91.2941176471%, 88.862745098%, 95.0980392157%, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(82.9411764706%, 27.4509803922%, 89.8039215686%, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: background 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1), backdrop-filter 200ms cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  header {
    background: rgba(14.3294117647%, 10.9254901961%, 19.6549019608%, 0.8);
    border-bottom-color: rgba(82.9411764706%, 27.4509803922%, 89.8039215686%, 0.15);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.12);
  }
}
body.dark-mode header {
  background: rgba(14.3294117647%, 10.9254901961%, 19.6549019608%, 0.8);
  border-bottom-color: rgba(82.9411764706%, 27.4509803922%, 89.8039215686%, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.12);
}

header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: var(--header-height);
  padding: 0.25rem 1.5rem;
  max-width: var(--header-max-width);
  margin: 0 auto;
}

/* Nav */
nav > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

nav li {
  margin: 0;
}

nav a,
nav *[data--baton-controller--onclick] {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: transparent;
  color: var(--md-on-surface-variant, var(--text-strong));
  text-decoration: none;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), color 100ms cubic-bezier(0.2, 0, 0, 1);
  user-select: none;
}

nav a:hover,
nav *[data--baton-controller--onclick]:hover {
  background: color-mix(in srgb, var(--md-on-surface, var(--text-strong)), transparent 92%);
  color: var(--md-on-surface, var(--text-strong));
  text-decoration: none;
}

nav a:active,
nav *[data--baton-controller--onclick]:active {
  background: color-mix(in srgb, var(--md-on-surface, var(--text-strong)), transparent 88%);
}

/* Main content */
main {
  padding-top: clamp(12px, 1.8vw, 20px);
  padding-bottom: clamp(18px, 2.6vw, 32px);
}

main > div {
  max-width: var(--app-max-width);
  margin: 0 auto;
  /* Horizontal only. `main` above already pays the page's vertical padding; the
     four-sided shorthand that used to sit here charged it a second time, top
     and bottom, on every page of every frame type — and silently overrode the
     --app-gutter set on this same element by the layout-container rule, so
     main content sat 16px in while the header sat at the token's clamp. */
  padding: 0 var(--app-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
}

nav a,
nav *[data--baton-controller--onclick],
h1, h2, h3, h4 {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Friendly default "card" surfaces for sections/articles/asides */
section > div,
article > div,
aside > div {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  /* Vertical is the scarce axis, and --block-gap already separates one card
     from the next, so the block inset only has to hold content off the border;
     the inline inset is the card's visible gutter and stays generous. Keep the
     two-value shorthand — it is what suppresses the wider --app-gutter
     padding-left/right set on the layout-container rule above. */
  padding: clamp(8px, 1vw, 12px) clamp(12px, 1.6vw, 18px);
  margin-top: 10px;
}

/* Avoid double-spacing: the gap now handles separation */
main > div > section > div,
main > div > article > div,
main > div > aside > div {
  margin-top: 0;
}

/* Same reason, for the key-value card: as a direct flex child of `main > div`
 * its own bottom margin lands on top of the column gap rather than merging
 * with it. It keeps that margin anywhere else, because .grid cards stacked
 * inside a section have nothing but that margin between them. */
main > div > .grid {
  margin-bottom: 0;
}

section > div:first-child,
article > div:first-child,
aside > div:first-child {
  margin-top: 0;
}

/* Inside popups/sidebars: strip card surfaces to prevent double-boxing */
body.popup section > div,
body.popup article > div,
body.popup aside > div,
body.sidebar section > div,
body.sidebar article > div,
body.sidebar aside > div {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 0;
}

body.popup,
body.sidebar {
  background: transparent !important;
}

/* #BS_popup_content already pays the frame's padding inside a popup, so `main`
 * charges the page's bottom padding a second time. Only the bottom goes: the
 * top padding is the sole thing holding the first element clear of
 * .close-modal-button, which sits absolute at top:16px / 40px tall over the
 * card — and in a sidebar it moves to the left, right over the frame title. */
body.popup main,
body.sidebar main {
  padding-bottom: 0;
}

body.popup main > div,
body.sidebar main > div {
  max-width: none;
  padding: 0;
  margin: 0;
}

body.popup section > div,
body.sidebar section > div {
  margin-bottom: 0;
}

body.wide #BS_popup_container {
  width: min(90vw, 80rem);
  /* Override the default container cap so the wide variant stays wide. */
  max-width: min(94vw, 80rem);
}

#BS_popup_container {
  border-radius: 1.5rem;
  border: 1px solid var(--hairline);
  background: var(--md-surface-container-low, var(--surface));
  box-shadow: 0 8px 32px var(--md-shadow, rgba(0, 0, 0, 0.15)), 0 2px 8px var(--md-shadow, rgba(0, 0, 0, 0.15));
}

body.popup.sidebar #BS_popup_container {
  border: 1px solid var(--hairline);
  border-right: none;
}

body.sidebar #BS_popup_container {
  border-radius: 1.5rem 0 0 1.5rem;
  box-shadow: -8px 0 32px var(--md-shadow, rgba(0, 0, 0, 0.15)), -2px 0 8px var(--md-shadow, rgba(0, 0, 0, 0.15));
  margin-right: -1px;
}

#BS_popup_content > header > h1 {
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--md-on-surface, var(--text-strong));
  margin: 0;
}
#BS_popup_content > main {
  color: var(--md-on-surface, var(--text-strong));
}

/* The viewport class (used by BATON forms) gets a stronger shell */
body:not(.popup) .viewport {
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-2);
}

/* Footer */
footer {
  margin-top: 48px;
  border-top: 1px solid var(--hairline);
}

footer > div {
  padding-top: 28px;
  padding-bottom: 28px;
  color: var(--text-muted);
}

/* Lists (including wrapped <div class="ul"><ul>...) */
ul, ol {
  padding-left: 1.25rem;
  margin: 0 0 0.5rem 0;
}

li {
  margin: 0.15rem 0;
}

.ul > ul,
.ol > ol {
  margin: 0 0 0.5rem 0;
}

/* Media */
img, video, iframe {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* Code */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  background: rgba(0, 0, 0, 0.06);
  padding: 0.15em 0.35em;
  border-radius: 8px;
}

pre {
  margin: 0 0 0.5rem 0;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: rgba(0, 0, 0, 0.05);
  overflow: auto;
}

/* Subtle upgrades to interactive controls (without fighting BATON forms) */
button, .btn, input[type=button], input[type=submit], input[type=reset] {
  box-shadow: var(--shadow-btn);
}

button:focus-visible,
.btn:focus-visible,
input[type=button]:focus-visible,
input[type=submit]:focus-visible,
input[type=reset]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: var(--ring) !important;
}

.table td > div {
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Centre page headings to align with the centred singleton card */
main > div > h1,
main > div > .page-title {
  text-align: center;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

main > div > h1 + p,
main > div > h1 + .subtitle,
main > div > .page-title + p,
main > div > .page-title + .page-subtitle {
  text-align: center;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* Key-value "grid" / singleton detail card */
.grid {
  display: grid;
  grid-template-columns: auto 1fr;
  max-width: 36rem;
  margin: 0 auto 1rem auto;
  background: var(--md-surface-container-lowest, var(--surface));
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  overflow: hidden;
}

.grid > span {
  /* Row rhythm tracks the table form (.grid th/td) — one component, one height */
  padding: 0.25rem 0.75rem;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--md-on-surface, var(--text-strong));
}

.grid > span:nth-last-child(-n+2) {
  border-bottom: none;
}

.grid > span.caption {
  /* The card-collapse rule (.caption { display: none }) must not hide grid keys */
  /* Flex rather than block: the key stretches to the row height, so with the
     tighter padding its text would otherwise ride high against a taller value.
     Only the key gets flex — a value span may hold several block children
     that must keep stacking. */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  letter-spacing: 0.01em;
  font-style: normal;
  color: var(--md-on-surface-variant, var(--text-muted));
  white-space: nowrap;
  text-align: right;
  background: var(--md-surface-container, var(--surface-2));
}

.grid > table {
  grid-column: 1/-1;
}

.grid table {
  width: 100%;
  border-collapse: collapse;
}

.grid tr {
  border-bottom: 1px solid var(--hairline);
  transition: background 50ms cubic-bezier(0.2, 0, 0, 1);
}

.grid tr:last-child {
  border-bottom: none;
}

.grid tr:hover {
  background: color-mix(in srgb, var(--md-primary, var(--action)), transparent 94%);
}

.grid tr:first-child th {
  border-radius: 0.75rem 0 0 0;
}

.grid tr:last-child th {
  border-radius: 0 0 0 0.75rem;
}

/* The key/value card is metadata *about* the record, not the record itself, so
   it runs a denser rhythm than the data tables beneath it. $sp-1 against the
   1.25rem line box gives a 29px row (28px cell + the 1px `.grid tr` hairline),
   still clear of the WCAG 2.2 AA 24px minimum for the rows projects wire up as
   clickable. Change .grid td below in the same commit — the taller of the two
   cells sets the row height, so half the edit reclaims nothing. */
.grid th {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  letter-spacing: 0.01em;
  font-style: normal;
  color: var(--md-on-surface-variant, var(--text-muted));
  padding: 0.25rem 0.75rem;
  text-align: right;
  /* The key reads against the first line of a value that wraps. */
  vertical-align: baseline;
  white-space: nowrap;
  width: 1%;
  background: var(--md-surface-container, var(--surface-2));
}

.grid td {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0.25rem 0.75rem;
  vertical-align: baseline;
  color: var(--md-on-surface, var(--text-strong));
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* A grid value that carries an action is a button naming the value, not a blue
 * row. Sized to the grid's own row rhythm so it never stretches the row. */
.grid td button.grid-action {
  min-width: 0;
  max-width: 100%;
  height: auto;
  padding: 0.125rem 0.625rem;
  margin: -0.125rem 0;
  white-space: normal;
  text-align: left;
  overflow-wrap: anywhere;
}

.grid tr[data--baton-controller--onclick] {
  cursor: pointer;
}

.grid tr[data--baton-controller--onclick] td {
  color: var(--md-primary, var(--action));
}

.grid tr[data--baton-controller--onclick] th {
  color: var(--md-primary, var(--action));
}

/* On a phone a key takes the card caption's column and wraps in it, so a read page has one label layout. */
@media (max-width: 40rem) {
  .grid {
    grid-template-columns: clamp(5rem, 30vw, 9rem) minmax(0, 1fr);
  }
  .grid th,
  .grid > span.caption {
    width: clamp(5rem, 30vw, 9rem);
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: start;
    justify-content: flex-start;
  }
}
/* ── Records: a related 1:1 record's block, and the record card of a read frame whose table sits in a
 * declared hierarchy (supertypes above it, subtypes below it; FIESTA `within`/`when`/`source`).
 * Tokens follow the glossary's pattern: derived from the page's own ink, surface and action colours,
 * flipped by the OS scheme and by BATON's explicit theme classes. A project hooks in through --rc-link
 * only, the ink of a link to another record; --rc-focus follows it. */
main {
  --rc-ink: var(--md-on-surface, var(--text-strong));
  --rc-muted: var(--md-on-surface-variant, var(--text-muted));
  --rc-line: var(--hairline);
  --rc-surface: var(--md-surface-container-lowest, var(--surface));
  --rc-brand: var(--action);
  --rc-link: var(--rc-brand-ink);
  --rc-focus: var(--rc-link);
  --rc-jump-offset: 5rem;
  --rc-brand-ink: color-mix(in srgb, var(--rc-brand) 82%, var(--rc-ink));
  --rc-head-bg: color-mix(in srgb, var(--rc-brand) 4%, var(--rc-surface));
  --rc-current-bg: color-mix(in srgb, var(--rc-brand) 11%, var(--rc-surface));
  --rc-foot-bg: color-mix(in srgb, var(--rc-ink) 3%, var(--rc-surface));
  --rc-warn: #9a4a06;
}

@media (prefers-color-scheme: dark) {
  main {
    --rc-brand-ink: color-mix(in srgb, var(--rc-brand) 42%, var(--rc-ink));
    --rc-head-bg: color-mix(in srgb, var(--rc-brand-ink) 9%, var(--rc-surface));
    --rc-current-bg: color-mix(in srgb, var(--rc-brand-ink) 20%, var(--rc-surface));
    --rc-foot-bg: color-mix(in srgb, var(--rc-ink) 4%, var(--rc-surface));
    --rc-warn: #fb923c;
  }
}
body.dark-mode main {
  --rc-brand-ink: color-mix(in srgb, var(--rc-brand) 42%, var(--rc-ink));
  --rc-head-bg: color-mix(in srgb, var(--rc-brand-ink) 9%, var(--rc-surface));
  --rc-current-bg: color-mix(in srgb, var(--rc-brand-ink) 20%, var(--rc-surface));
  --rc-foot-bg: color-mix(in srgb, var(--rc-ink) 4%, var(--rc-surface));
  --rc-warn: #fb923c;
}

body.light-mode main {
  --rc-brand-ink: color-mix(in srgb, var(--rc-brand) 82%, var(--rc-ink));
  --rc-head-bg: color-mix(in srgb, var(--rc-brand) 4%, var(--rc-surface));
  --rc-current-bg: color-mix(in srgb, var(--rc-brand) 11%, var(--rc-surface));
  --rc-foot-bg: color-mix(in srgb, var(--rc-ink) 3%, var(--rc-surface));
  --rc-warn: #9a4a06;
}

/* A related 1:1 record: its heading line carries "Open", a real link to the record's own page, before
 * the record's own actions. Its ink is pinned at #BS_main (the glossary's precedent), so neither
 * BATON's dark link colour nor a project's global link rule repaints it by accident. */
.dataset-head > .record-open {
  margin-left: auto;
}

.dataset-head > .record-open + .baton-tbl__menu-btn {
  margin-left: 0;
}

#BS_main .dataset-head a.record-open {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.625rem 0 0.8125rem;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--rc-link) 64%, transparent);
  box-shadow: none;
  color: var(--rc-link);
  font-size: 0.8125rem;
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
#BS_main .dataset-head a.record-open:hover {
  background: color-mix(in srgb, var(--rc-link) 10%, transparent);
  border-color: var(--rc-link);
  color: var(--rc-link);
}
#BS_main .dataset-head a.record-open:focus-visible {
  outline: 2px solid var(--rc-focus);
  outline-offset: 2px;
  box-shadow: none;
}
#BS_main .dataset-head a.record-open svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

/* A record with no column of its own to show is its one heading line. */
.record-block--link .dataset-head {
  margin-bottom: 0;
}

.record-block .dataset-head + .grid {
  margin-bottom: 0;
}

/* The record card of a hierarchy read frame: one .grid holding the kind path, one row group per level
 * that has fields, and the contents index. One fixed width, so moving between the pages of one record's
 * levels never makes the card, or the path in it, jump. Every selector is new or scoped by a new class:
 * the .grid rules above stay as they are. */
.grid.grid--sections {
  width: 100%;
  max-width: 38rem;
}

.grid--sections > .record-kinds-bar {
  grid-column: 1/-1;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--rc-line);
}

/* Its own flex item, so a path that wraps on a phone continues under the first chip, not the label. */
.record-kinds__label {
  flex: 0 0 auto;
  margin: 0.375rem 0 0 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rc-muted);
}

.record-kinds {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.25rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.record-kinds__item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  margin: 0;
}

/* The step from a level to its subtype; the subtypes of one level share one step and wrap together. */
.record-kinds__item.is-child::before {
  content: "›"/"";
  margin: 0 0.125rem 0 0.0625rem;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--rc-muted);
}

.record-kinds__item.has-siblings {
  flex: 1 1 auto;
}

.record-kinds__siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.record-kind {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 1.75rem;
  max-width: 100%;
  padding: 0 0.6875rem 0 0.5625rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.record-kind__dot {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.record-kind__go {
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: -0.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The level this page is: never a control, never gold. */
.record-kinds span.record-kind[aria-current] {
  background: var(--rc-current-bg);
  color: var(--rc-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc-brand-ink) 22%, transparent);
}
.record-kinds span.record-kind[aria-current] .record-kind__dot {
  background: var(--rc-brand-ink);
  border-color: var(--rc-brand-ink);
}

/* A level whose block names no page to open. */
.record-kinds span.record-kind:not([aria-current], .record-kind--missing) {
  color: var(--rc-ink);
  box-shadow: inset 0 0 0 1px var(--rc-line);
}

/* Another level of the same record: a real link to its page (a plain click runs the generated open,
 * a modified or middle click opens a tab). Pinned at #BS_main like the glossary's controls. */
#BS_main .record-kinds a.record-kind {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--rc-link) 64%, transparent);
  box-shadow: none;
  color: var(--rc-link);
  text-decoration: none;
  cursor: pointer;
}
#BS_main .record-kinds a.record-kind:hover {
  background: color-mix(in srgb, var(--rc-link) 10%, transparent);
  border-color: var(--rc-link);
  color: var(--rc-link);
}
#BS_main .record-kinds a.record-kind:focus-visible {
  outline: 2px solid var(--rc-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* The classifier names a level whose record does not exist. Information, not a control. */
.record-kinds span.record-kind--missing {
  border: 1px dashed var(--rc-warn);
  background: color-mix(in srgb, var(--rc-warn) 8%, transparent);
  color: var(--rc-warn);
}
.record-kinds span.record-kind--missing > svg {
  flex: 0 0 auto;
  width: 0.9375rem;
  height: 0.9375rem;
  fill: currentColor;
}

/* One row group per level: the .grid rows as they are, under a head row naming the level. */
.grid.grid--sections tr > th {
  border-radius: 0;
}

.grid.grid--sections tbody.grid-section + tbody.grid-section {
  border-top: 1px solid var(--rc-line);
}

.grid.grid--sections tr.grid-section-head,
.grid.grid--sections tr.grid-section-head:hover {
  background: none;
}

.grid.grid--sections .grid-section-head > th {
  width: auto;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  text-align: start;
  white-space: normal;
  background: var(--rc-head-bg);
  color: var(--rc-brand-ink);
  font-weight: 700;
}

.grid-section-head__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
}

.grid-section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.grid-section-title .record-kind__dot {
  width: 0.4375rem;
  height: 0.4375rem;
}

.grid-section.is-current .grid-section-title .record-kind__dot {
  background: currentColor;
}

/* A level's own actions: a quiet tonal icon button, not the page's gradient call to action. */
.grid.grid--sections .grid-section-head__inner > .baton-tbl__menu-btn {
  width: 2rem;
  height: 2rem;
  margin-left: auto;
  background: color-mix(in srgb, var(--rc-brand-ink) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--rc-brand-ink) 26%, transparent);
  box-shadow: none;
  color: var(--rc-brand-ink);
}
.grid.grid--sections .grid-section-head__inner > .baton-tbl__menu-btn:hover {
  background: color-mix(in srgb, var(--rc-brand-ink) 19%, transparent);
  color: var(--rc-brand-ink);
}
.grid.grid--sections .grid-section-head__inner > .baton-tbl__menu-btn:focus-visible {
  outline: 2px solid var(--rc-focus);
  outline-offset: 2px;
}

/* "On this page": the card's foot. Owners in one column, their entries beside them. */
.grid--sections > .record-contents {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.375rem 0.75rem;
  padding: 0.625rem 0.75rem 0.75rem;
  border-top: 1px solid var(--rc-line);
  background: var(--rc-foot-bg);
}

.record-contents__title {
  grid-column: 1/-1;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rc-muted);
}

/* Each group keeps its own box (a labelled group for screen readers); subgrid lines up the owners. */
.record-contents__group {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  gap: inherit;
}

/* The owner reads as the index's key column (sentence case, muted), never as one more section head. */
.record-contents__owner {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 1.75rem;
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--rc-muted);
}
.record-contents__owner .record-kind__dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-color: var(--rc-brand-ink);
}
.record-contents__owner.is-current .record-kind__dot {
  background: var(--rc-brand-ink);
}

.record-contents__entries {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.record-contents__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style-type: "​";
}
.record-contents__list > li {
  margin: 0;
}

/* The lists of a level that are empty, on one muted line: they exist, and there is nothing in them.
 * The list keeps beside its label and wraps within itself; a middot trails each entry but the last,
 * so a wrapped line never starts with one. */
.record-contents__empty {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  min-width: 0;
}
.record-contents__empty > .record-contents__list {
  flex: 1 1 0;
  column-gap: 0.375rem;
  row-gap: 0;
}
.record-contents__empty .record-contents__list > li:not(:last-child)::after {
  content: "·"/"";
  margin-left: 0.375rem;
  color: var(--rc-muted);
}

.record-contents__empty-label {
  flex: 0 0 auto;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  color: var(--rc-muted);
}

#BS_main .record-contents button.record-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  height: auto;
  min-height: 1.75rem;
  margin: 0;
  padding: 0 0.3125rem 0 0.5625rem;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid var(--rc-line);
  box-shadow: none;
  color: var(--rc-ink);
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.2;
  font-weight: 500;
  text-align: start;
  white-space: normal;
  cursor: pointer;
}
#BS_main .record-contents button.record-jump:hover {
  background: color-mix(in srgb, var(--rc-ink) 6%, transparent);
  border-color: color-mix(in srgb, var(--rc-ink) 30%, transparent);
  color: var(--rc-ink);
  /* The hover wash lightens the pill in dark mode: its muted count would drop below 4.5:1. */
}
#BS_main .record-contents button.record-jump:hover .record-jump__n {
  color: var(--rc-ink);
}
#BS_main .record-contents button.record-jump:focus-visible {
  outline: 2px solid var(--rc-focus);
  outline-offset: 2px;
}

#BS_main .record-contents button.record-jump--record {
  padding-right: 0.6875rem;
}

#BS_main .record-contents button.record-jump--empty {
  padding: 0 0.125rem;
  border: 0;
  border-radius: 0.25rem;
  color: var(--rc-muted);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--rc-muted) 45%, transparent);
  text-underline-offset: 0.2em;
}
#BS_main .record-contents button.record-jump--empty:hover, #BS_main .record-contents button.record-jump--empty:focus-visible {
  background: transparent;
  color: var(--rc-ink);
  text-decoration-color: currentColor;
}

.record-jump__n {
  display: inline-block;
  min-width: 1.375rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--rc-ink) 8%, transparent);
  color: var(--rc-muted);
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* A jump lands the heading below the sticky header, and a keyboard jump shows where it landed. */
h2.dataset-title[id],
h3.dataset-title[id] {
  scroll-margin-top: var(--rc-jump-offset);
}
h2.dataset-title[id]:focus-visible,
h3.dataset-title[id]:focus-visible {
  outline: 2px solid var(--rc-focus);
  outline-offset: 0.25rem;
  border-radius: 0.25rem;
}

/* Where a level's lists and related records start: a pill with its own surface, so it reads on any
 * page background, and a hairline to the edge. */
.level-group-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0.5rem 0 -0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.level-group-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rc-line);
  opacity: 0.75;
}
.level-group-title.is-current .record-kind__dot {
  background: currentColor;
}

.level-group-title__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.375rem 0.8125rem 0.375rem 0.6875rem;
  border: 1px solid var(--rc-line);
  border-radius: 9999px;
  background: var(--rc-surface);
  box-shadow: var(--shadow-1);
  color: var(--rc-brand-ink);
}

@media (max-width: 40rem) {
  .grid--sections > .record-contents {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .record-contents__entries {
    margin-bottom: 0.25rem;
  }
}
@media (forced-colors: active) {
  #BS_main .dataset-head a.record-open,
  #BS_main .record-kinds a.record-kind {
    border: 1px solid CanvasText;
    color: LinkText;
  }
  .record-kinds span.record-kind,
  .level-group-title__pill {
    border: 1px solid CanvasText;
  }
  #BS_main .record-contents button.record-jump {
    border: 1px solid CanvasText;
    color: ButtonText;
  }
  #BS_main .record-contents button.record-jump--empty {
    border: 0;
  }
  .grid.grid--sections .grid-section-head > th {
    border-bottom: 1px solid CanvasText;
  }
  .record-kind__dot {
    forced-color-adjust: none;
    border-color: CanvasText;
  }
  .record-kinds span.record-kind[aria-current] .record-kind__dot,
  .grid-section.is-current .grid-section-title .record-kind__dot,
  .record-contents__owner.is-current .record-kind__dot,
  .level-group-title.is-current .record-kind__dot {
    background: CanvasText;
  }
}
/* Standard data tables (wrapper: <div class="table"><table>...) */
[class^=table] {
  background: var(--md-surface-container, var(--surface-2));
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  overflow: auto;
  /* Cap so one long table can't swallow the page — but a nested scroller is a
     poor place for rows to sit: the page scrollbar doesn't reach them, and the
     reader must run the table to its end before the page moves on. 70vh still
     stops a table dominating the flow, with fewer rows hidden behind it. */
  max-height: 70vh;
}

[class^=table] table {
  width: 100%;
  border-collapse: collapse;
}

[class^=table] thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

[class^=table] thead tr:first-child th:first-child {
  border-radius: 0.75rem 0 0 0;
}

[class^=table] thead tr:first-child th:last-child {
  border-radius: 0 0.75rem 0 0;
}

[class^=table] th {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  letter-spacing: 0.01em;
  font-style: normal;
  color: var(--md-on-surface-variant, var(--text-muted));
  padding: 0.5rem 0.75rem;
  text-align: left;
  /* A wrapped label sits on the data edge, not floating above a short one. */
  vertical-align: bottom;
  /* Just past the zebra's 4%; the hairline is a shadow because a sticky cell's border stays behind. */
  background: color-mix(in srgb, var(--md-on-surface, var(--text-strong)) 7%, var(--md-surface-container-lowest, var(--surface)));
  box-shadow: inset 0 -1px 0 var(--hairline);
}

/* The tbody itself stays transparent — rows carry their own surface. A solid
 * tbody just peeked through between the cards on mobile in the panel colour. */
[class^=table] tbody tr {
  background: var(--md-surface-container-lowest, var(--surface));
  transition: background 50ms cubic-bezier(0.2, 0, 0, 1);
  border-bottom: 1px solid var(--hairline);
}

/* Zebra: mix a touch of on-surface into alternate rows. color-mix keeps the
 * contrast relative, so rows read apart from the section panel and from each
 * other in light and dark mode alike, with or without M3 tokens defined. */
[class^=table] tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--md-on-surface, var(--text-strong)) 4%, var(--md-surface-container-lowest, var(--surface)));
}

[class^=table] tbody tr:last-child {
  border-bottom: none;
}

[class^=table] tbody tr:hover {
  background: color-mix(in srgb, var(--md-primary, var(--action)), transparent 94%);
}

[class^=table] tbody tr[style*="cursor: pointer"],
[class^=table] tbody tr.clickable {
  cursor: pointer;
}

[class^=table] td {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0.5rem 0.75rem;
  color: var(--md-on-surface, var(--text-strong));
  /* Digits line up down a column; text is unaffected. */
  font-variant-numeric: tabular-nums;
}

html[data-keyboard-nav] [class^=table] tbody tr[tabindex]:focus-visible {
  outline: 2px solid var(--primary, #6750a4);
  outline-offset: -2px;
}

[class^=table] tbody tr[tabindex]:focus:not(:focus-visible),
html:not([data-keyboard-nav]) [class^=table] tbody tr[tabindex]:focus {
  outline: none;
  box-shadow: none;
}

/* ── Row menu icon button ── */
.rowMenu {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  border-radius: 50%;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1);
  color: var(--md-on-surface-variant, var(--text-muted));
  fill: currentColor;
}
.rowMenu:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.rowMenu:active {
  background: color-mix(in srgb, currentColor 18%, transparent);
}
.rowMenu:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}
.rowMenu.rowMenu--danger {
  color: var(--md-error, var(--sheet-danger));
}
.rowMenu {
  /* Shown on a card only; in the table the tooltip carries it. */
}
.rowMenu .rowMenu__label {
  display: none;
}

/* Element-qualified to outrank `[class^="table"] th` (0,1,1). */
th.rowMenuHeadCell {
  width: 2.5rem;
  /* No block padding, and inline padding matching td.rowMenuCell, so the head
     never widens the column past 2.5rem. */
  padding: 0 0.25rem;
  text-align: center;
}

/* Row‑menu cell: the whole cell is the click target.
 * Element-qualified so this padding actually beats `[class^="table"] td` — the
 * bare class is the weaker selector and lost, which let the button inside set
 * the row height instead of the text. */
td.rowMenuCell {
  width: 2.5rem;
  text-align: center;
  padding: 0 0.25rem;
  cursor: pointer;
  position: sticky;
  right: 0;
  background: inherit;
  /* Keeps its row's shape and tone against the generic controller rounding and hover wash. */
  border-radius: 0;
}
td.rowMenuCell:empty {
  cursor: default;
}
td.rowMenuCell[data--baton-controller--onclick]:hover {
  background: inherit;
}
td.rowMenuCell:hover .rowMenu {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
td.rowMenuCell:active .rowMenu {
  background: color-mix(in srgb, currentColor 18%, transparent);
}

/* Empty table row */
/* Empty table row. A generated detail page carries one dataset per child table
   whether or not the record has any, so this row is structural chrome — the
   least informative row on the page should not also be the tallest. $sp-3 still
   stands clear of a data row, so it reads as an empty state, not a blank record. */
.empty-row td {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  text-align: center;
  padding: 0.75rem 1rem;
  color: var(--md-on-surface-variant, var(--text-muted));
}

/* "Show all" row: muted ink, since a brand ink has no dark-mode variant that stays AA. */
.table-show-all {
  cursor: pointer;
}
.table-show-all td {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  text-align: center;
  padding: 0.25rem 0.5rem;
  font-style: normal;
  color: var(--md-on-surface-variant, var(--text-muted));
  background: color-mix(in srgb, var(--md-on-surface, var(--text-strong)) 4%, transparent);
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1), color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.table-show-all:hover td {
  color: var(--md-on-surface, var(--text-strong));
  background: color-mix(in srgb, var(--md-on-surface, var(--text-strong)) 9%, transparent);
}

/* Row count in dataset headings. It follows the plural and a colon
 * ("Registratiesystemen: 12"), so the gap belongs on its leading edge. */
.row-count {
  opacity: 0.5;
  font-weight: 400;
  margin-left: 0.25em;
}

/* ── Local search + pagination wrapper for default table renderers ──
 * Scoped to .baton-tbl so grids ([class*="grid"]) are never affected.
 * Uses existing M3 / legacy CSS variables so light/dark themes follow. */
.baton-tbl {
  /* Search chrome tokens: brand ink mixed toward the text so it holds AA in both schemes. */
  --baton-tbl-ink: var(--md-on-surface, var(--text-strong));
  --baton-tbl-muted: var(--md-on-surface-variant, var(--text-muted));
  --baton-tbl-field: var(--md-surface-container-lowest, var(--surface, #fff));
  --baton-tbl-brand: color-mix(in srgb, var(--action) 82%, var(--baton-tbl-ink));
  --baton-tbl-mark: #ffe16b;
  --baton-tbl-mark-ink: #1f1a00;
  display: flex;
  flex-direction: column;
  /* The controls sit right above the table they act on — they read as one
     component, so the gap is a hairline's worth of separation, not a break. */
  gap: 0.25rem;
}

@media (prefers-color-scheme: dark) {
  .baton-tbl {
    --baton-tbl-brand: color-mix(in srgb, var(--action) 42%, var(--baton-tbl-ink));
    --baton-tbl-mark: #d9a800;
    --baton-tbl-mark-ink: #1a1400;
  }
}
body.dark-mode .baton-tbl {
  --baton-tbl-brand: color-mix(in srgb, var(--action) 42%, var(--baton-tbl-ink));
  --baton-tbl-mark: #d9a800;
  --baton-tbl-mark-ink: #1a1400;
}

body.light-mode .baton-tbl {
  --baton-tbl-brand: color-mix(in srgb, var(--action) 82%, var(--baton-tbl-ink));
  --baton-tbl-mark: #ffe16b;
  --baton-tbl-mark-ink: #1f1a00;
}

.baton-tbl__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  /* The pager lines up with the live bar under stacked clauses. */
  align-items: flex-end;
  /* Block padding only doubled up: every child carries its own, and
     .baton-tbl's own gap already holds the bar off the table. */
  padding: 0 0.25rem;
}

/* The search: locked clauses above the live bar. */
.baton-tbl__query {
  flex: 1 1 12rem;
  min-width: 8rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.baton-tbl__bar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

/* Locked clauses: bars that open for editing, each with an x; the gutter shows a search glyph, then EN/AND. */
.baton-tbl__clauses {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.baton-tbl__clauses[hidden] {
  display: none;
}

.baton-tbl__clause {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.baton-tbl__gutter {
  flex: 0 0 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 700;
  color: var(--baton-tbl-muted);
}
.baton-tbl__gutter svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.baton-tbl__query:not([data-baton-tbl-clauses]) > .baton-tbl__bar > .baton-tbl__gutter {
  display: none;
}

/* The clause's text and its field carry the left inset, so the whole bar up to the x opens the clause. */
.baton-tbl__clause-bar {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 2rem;
  padding: 0 0.125rem 0 0;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--baton-tbl-brand) 35%, var(--hairline));
  background: color-mix(in srgb, var(--baton-tbl-brand) 8%, var(--baton-tbl-field));
  color: var(--baton-tbl-ink);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}

/* A clause's text is the button that opens it; block, not flex, so a long clause still ends in an ellipsis. */
.baton-tbl button.baton-tbl__clause-text {
  all: unset;
  box-sizing: border-box;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  display: block;
  padding: 0 0.25rem 0 0.75rem;
  border-radius: calc(0.75rem - 1px) 0 0 calc(0.75rem - 1px);
  line-height: calc(2rem - 2px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}

.baton-tbl button.baton-tbl__clause-text:hover {
  background: color-mix(in srgb, var(--baton-tbl-brand) 10%, transparent);
}

/* Inset, like the sheet's controls, and without the controls' ring, which would spill square over the bar's border. */
.baton-tbl button.baton-tbl__clause-text:focus-visible {
  outline: 2px solid var(--baton-tbl-brand);
  outline-offset: -2px;
  box-shadow: none !important;
}

/* An open clause: its field takes the text's place and the bar reads as the live bar does, focus ring included. */
.baton-tbl input.baton-tbl__clause-input {
  all: unset;
  box-sizing: border-box;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  padding: 0 0.25rem 0 0.75rem;
  color: var(--baton-tbl-ink);
  cursor: text;
}

/* The field's ring is drawn by its bar, rounded and around the x too. */
.baton-tbl input.baton-tbl__clause-input:focus-visible {
  box-shadow: none !important;
}

.baton-tbl button.baton-tbl__clause-text[hidden],
.baton-tbl input.baton-tbl__clause-input[hidden] {
  display: none;
}

/* How an open clause reads ("kolom Schema"), inside its bar: a status line shown only while it is open would move the
   rows as it closes. One line, so the bar keeps its height. */
.baton-tbl__clause-reading {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--baton-tbl-muted);
}
.baton-tbl__clause-reading[hidden] {
  display: none;
}

/* The open bar reads as one field: a press on it off the field and its x stays in the field (_batonTblEdit). */
.baton-tbl__clause[data-baton-tbl-editing] > .baton-tbl__clause-bar {
  border-color: var(--hairline);
  background: var(--baton-tbl-field);
  cursor: text;
}

.baton-tbl__clause[data-baton-tbl-editing] > .baton-tbl__clause-bar:focus-within {
  outline: 2px solid var(--md-primary, var(--primary, #6750a4));
  outline-offset: -1px;
  box-shadow: var(--ring);
}

/* The place a clause that a press dropped holds until the pointer moves on (_batonTblHold): its bar's height, unseen. */
.baton-tbl__clause-held {
  visibility: hidden;
}

/* (0,2,1), (0,3,1) on hover: above the link colours projects paint on controller elements. */
.baton-tbl button.baton-tbl__clause-x {
  all: unset;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 1.75rem clears the WCAG 2.2 AA 24px target. */
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  cursor: pointer;
  color: var(--baton-tbl-muted);
  background: transparent;
}
.baton-tbl button.baton-tbl__clause-x svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.baton-tbl button.baton-tbl__clause-x:hover {
  color: var(--baton-tbl-ink);
  background: color-mix(in srgb, var(--baton-tbl-ink) 10%, transparent);
}

.baton-tbl button.baton-tbl__and-btn {
  all: unset;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--hairline);
  background: var(--baton-tbl-field);
  color: var(--baton-tbl-brand);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 100ms cubic-bezier(0.2, 0, 0, 1);
}

.baton-tbl button.baton-tbl__and-btn:hover {
  color: var(--baton-tbl-brand);
  background: color-mix(in srgb, var(--baton-tbl-brand) 12%, var(--baton-tbl-field));
}

/* Idle: muted ink that still holds AA, not a fade that would not. */
.baton-tbl input.baton-tbl__search:placeholder-shown + button.baton-tbl__and-btn {
  color: var(--baton-tbl-muted);
}

.baton-tbl button.baton-tbl__clause-x:focus-visible,
.baton-tbl button.baton-tbl__and-btn:focus-visible {
  outline: 2px solid var(--baton-tbl-brand);
  outline-offset: 1px;
}

/* Announcements for screen readers only (a clause locked, edited, removed or taken back). */
.baton-tbl__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Element-qualified: the forms stylesheet's `input[type=search]` is (0,1,1) and
 * outranks a bare class, so every sizing declaration below was dead. */
input.baton-tbl__search {
  flex: 1 1 auto;
  min-width: 0;
  /* A toolbar filter, not a form field: without this it inherits the forms
     stylesheet's 2.75rem control height and towers over the table it filters.
     2rem matches the action button and the heading line beside it, and still
     clears the WCAG 2.2 AA 24px target. */
  height: 2rem;
  padding: 0 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--hairline);
  background: var(--md-surface-container-lowest, var(--surface, #fff));
  color: var(--md-on-surface, var(--text-strong));
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}
input.baton-tbl__search::placeholder {
  color: var(--md-on-surface-variant, var(--text-muted));
  opacity: 0.8;
}
input.baton-tbl__search {
  /* Chromium keeps the hidden clear button's width while the bar is empty; give it to the hint. */
}
input.baton-tbl__search:placeholder-shown::-webkit-search-cancel-button {
  display: none;
}
input.baton-tbl__search:focus {
  outline: 2px solid var(--md-primary, var(--primary, #6750a4));
  outline-offset: -1px;
}

/* How the bar was read, on a line of its own; sr-only (script-set) while there is nothing to show. */
.baton-tbl__status {
  flex: 1 0 100%;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.025rem;
  color: var(--baton-tbl-muted);
}

/* Element-qualified past the card layout's td rules, which would spread message and button apart. */
tr.baton-tbl__no-match > td {
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  color: var(--baton-tbl-muted);
}

/* A text button at (0,2,1)/(0,3,1), above the link colours projects paint on controller elements. */
.baton-tbl button.baton-tbl__clear,
.baton-tbl button.baton-tbl__clear:hover {
  all: unset;
  box-sizing: border-box;
  margin-inline-start: 0.5rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  color: var(--baton-tbl-brand);
  background: transparent;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.baton-tbl button.baton-tbl__clear:focus-visible {
  outline: 2px solid var(--baton-tbl-brand);
  outline-offset: 1px;
}

/* Table action button — right-aligned on the dataset's heading line (.dataset-head
 * is the flex row; `margin-left: auto` is what pushes it over).
 * Icon-only (the action name lives on title/aria-label). Inherits the
 * brand-tinted tonal button from the forms stylesheet; the single-action "+"
 * variant adds `.cta` for the gradient CTA look. */
.baton-tbl__menu-btn {
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: auto;
  /* A round icon button, not a control: drop the 6rem min-width and the 2.75rem
   * control height from the forms button base, and size to the heading line it
   * sits on rather than towering over it. */
  min-width: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 9999px;
}
.baton-tbl__menu-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
  flex: 0 0 auto;
}

/* The pager is one unit: page-size select + prev + status + next on a single
 * line. It never wraps internally — on mobile the whole thing drops to its own
 * line (see the media query below). */
.baton-tbl__pager {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.25rem;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--md-on-surface-variant, var(--text-muted));
}

/* Plain <select> sized for our pager. The form stylesheet has a
 * `label:has(> span + select)` floating-label rule that would otherwise
 * force the select to 25em + huge padding — we intentionally render the
 * select as a sibling of a <span>, not wrapped in a <label>, to avoid it. */
/* Element-qualified for the same reason as the search input: the forms
 * stylesheet sizes a bare `select` at the 2.75rem control height, which
 * outranks a class and was setting the whole controls bar's height. */
select.baton-tbl__page-size-select {
  min-width: 0;
  width: auto;
  height: 2rem;
  padding: 0 0.5rem;
  margin: 0;
  border-radius: 0.75rem;
  border: 1px solid var(--hairline);
  background: var(--md-surface-container-lowest, var(--surface, #fff));
  color: var(--md-on-surface, var(--text-strong));
  flex-shrink: 0;
}

.baton-tbl__pager-btn {
  all: unset;
  cursor: pointer;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--md-on-surface, var(--text-strong));
  transition: background 50ms cubic-bezier(0.2, 0, 0, 1);
}
.baton-tbl__pager-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--md-primary, var(--action, #6750a4)), transparent 88%);
}
.baton-tbl__pager-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.baton-tbl__pager-status {
  min-width: 2.25rem;
  text-align: center;
}

/* Narrow viewports: search (from a zero basis) and pager share a line while the pager compacts. */
@media (max-width: 40rem) {
  .baton-tbl__controls {
    gap: 0.25rem 0.5rem;
  }
  .baton-tbl__query {
    flex: 1 1 0;
    min-width: 0;
  }
  /* Tighter insets keep the column: text hint whole at 360px in English too; clause text stays aligned. */
  input.baton-tbl__search {
    padding: 0 0.5rem;
  }
  .baton-tbl button.baton-tbl__clause-text,
  .baton-tbl input.baton-tbl__clause-input {
    padding-left: 0.5rem;
  }
  /* With clauses locked every bar is full width; the status and the pager share the line below. */
  .baton-tbl__controls:has(> .baton-tbl__query[data-baton-tbl-clauses]) > .baton-tbl__query {
    flex-basis: 100%;
  }
  .baton-tbl__controls:has(> .baton-tbl__query[data-baton-tbl-clauses]) > .baton-tbl__status {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    align-self: center;
  }
  .baton-tbl__controls:has(> .baton-tbl__query[data-baton-tbl-clauses]) > .baton-tbl__pager {
    order: 2;
    margin-left: auto;
  }
  .baton-tbl__gutter {
    flex-basis: 1.75rem;
  }
  .baton-tbl button.baton-tbl__and-btn {
    padding: 0 0.5rem;
  }
  /* Nothing to lock yet: the button gives its room to the placeholder's column: text hint. */
  .baton-tbl input.baton-tbl__search:placeholder-shown + button.baton-tbl__and-btn {
    display: none;
  }
  .baton-tbl__pager {
    gap: 0;
  }
  .baton-tbl__pager-status {
    min-width: 1.5rem;
  }
  .baton-tbl__pager-btn {
    width: 1.5rem;
    height: 1.5rem;
  }
}
/* Match highlight: ink pinned with the fill (light 13.5:1, dark 8.4:1). */
.baton-tbl__hl {
  background: var(--baton-tbl-mark);
  color: var(--baton-tbl-mark-ink);
  border-radius: 2px;
  padding: 0 1px;
}

@media (forced-colors: active) {
  .baton-tbl__hl {
    forced-color-adjust: none;
    background: Mark;
    color: MarkText;
  }
}
/* Row hidden by search / pagination filter */
.baton-tbl-hidden {
  display: none !important;
}

/* Sortable column headers */
/* Element-qualified so the `padding: 0` actually beats `[class^="table"] th`,
 * which is (0,1,1) and would otherwise win — leaving the cell's padding and
 * the button's to stack, and the heading out of line with its column. */
th.baton-tbl__th {
  cursor: pointer;
  user-select: none;
  /* No padding of its own: the button fills the cell, so the whole cell is the
     click target rather than just the words inside it. */
  padding: 0;
}
th.baton-tbl__th > div {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
th.baton-tbl__th:hover {
  background: color-mix(in srgb, currentColor 6%, transparent);
}

/* A long label keeps a floor width, so a column squeezed to its longest word wraps it to two lines, not five. */
th.baton-tbl__th--long {
  min-width: 10rem;
}

th.baton-tbl__th--longer {
  min-width: 12rem;
}

/* The sort control. `all: unset` first, because the forms stylesheet gives every
   button a tonal fill, a centred inline-flex box and a control height — none of
   which belong on a column heading. Inherits the th's type and colour. */
.baton-tbl__sort {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.baton-tbl__sort:focus-visible {
  outline: 2px solid var(--md-primary, var(--primary, #6750a4));
  outline-offset: -2px;
}

/* Sort direction indicator — a small caret that appears only when the column
   is the active sort key. */
.baton-tbl__sort-ind {
  display: inline-block;
  width: 0;
  height: 0;
  opacity: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  transition: opacity 0.1s ease-in-out;
}

.baton-tbl__th--asc .baton-tbl__sort-ind {
  opacity: 0.7;
  border-bottom: 5px solid currentColor;
}

.baton-tbl__th--desc .baton-tbl__sort-ind {
  opacity: 0.7;
  border-top: 5px solid currentColor;
}

/* Faint hint on hover for an as-yet-unsorted column */
.baton-tbl__th:hover .baton-tbl__sort-ind {
  opacity: 0.3;
  border-bottom: 5px solid currentColor;
}

.baton-tbl__th--desc:hover .baton-tbl__sort-ind {
  border-bottom: 0;
  border-top: 5px solid currentColor;
  opacity: 0.7;
}

/* A column a `column: text` search is reading: a brand dot after its heading. */
th.baton-tbl__th--filtered .baton-tbl__sort::after {
  content: "";
  flex: 0 0 auto;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--baton-tbl-brand);
}

/* Caption for card collapse */
.caption {
  display: none;
}

/* Card collapse logic (kept, but generated neatly) */
@media (max-width: 12rem) {
  .table-12rem {
    /* No boxed surface behind the cards, and no scroller: it only served the hidden sticky head. */
    background: transparent;
    border: none;
    max-height: none;
    overflow: visible;
  }
  .table-12rem table, .table-12rem thead, .table-12rem tbody, .table-12rem tr, .table-12rem td {
    display: block;
  }
  .table-12rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-12rem thead {
    display: none;
  }
  .table-12rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-12rem tbody tr, .table-12rem tbody tr:nth-child(even) {
    position: relative;
    border: 1px solid var(--hairline);
    margin-bottom: 0.75rem;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-12rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-12rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-12rem {
    /* One field per line: the label in a fixed column, the value left-aligned after it. */
  }
  .table-12rem td {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem 1rem;
    text-align: start;
  }
  .table-12rem td > div {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-12rem td:last-child {
    border-bottom: none;
  }
  .table-12rem .caption {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    letter-spacing: 0.01em;
    font-style: normal;
    color: var(--md-on-surface-variant, var(--text-muted));
    display: block;
    /* A viewport share, so the narrowed first line starts its value at the same x. */
    flex: 0 0 clamp(5rem, 30vw, 9rem);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-12rem {
    /* An empty table's row and the "More…" row are one centred line. */
  }
  .table-12rem tr.empty-row td,
  .table-12rem tr.table-show-all td {
    display: block;
    text-align: center;
  }
  .table-12rem {
    /* The actions sit in the card's top-right corner rather than on a line of their own. */
  }
  .table-12rem td.rowMenuCell {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    padding: 0.25rem;
    border: 0;
    background: none;
    /* The card already shows the row's hover tone; a second layer here drew a square patch. */
  }
  .table-12rem td.rowMenuCell[data--baton-controller--onclick]:hover {
    background: none;
  }
  .table-12rem td.rowMenuCell:empty {
    display: none;
  }
  .table-12rem .rowMenu {
    width: 2.25rem;
    height: 2.25rem;
  }
  .table-12rem tbody tr:has(> td.rowMenuCell > .rowMenu) {
    min-height: 2.75rem;
  }
  .table-12rem tbody tr:has(> td.rowMenuCell > .rowMenu) > td:first-child {
    padding-right: 3.25rem;
  }
  .table-12rem tbody tr:has(> td.rowMenuCell) > td:nth-last-child(2) {
    border-bottom: none;
  }
  .table-12rem {
    /* A lone action is a named pill on the first line, whose label then sits over its value. */
  }
  .table-12rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .table-12rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td {
    grid-column: 1/-1;
  }
  .table-12rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) {
    grid-row: 1;
    grid-column: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    padding-right: 0.5rem;
  }
  .table-12rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > .caption,
  .table-12rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > div {
    flex: none;
  }
  .table-12rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td.rowMenuCell {
    position: static;
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: center;
    max-width: 9.5rem;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .table-12rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:nth-last-child(2) + td.rowMenuCell {
    border-bottom: none;
  }
  .table-12rem .rowMenu--single {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 2.25rem;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    border-radius: 1.125rem;
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
  .table-12rem .rowMenu--single svg {
    flex: 0 0 auto;
  }
  .table-12rem .rowMenu--single .rowMenu__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    text-align: start;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 18rem) {
  .table-18rem {
    /* No boxed surface behind the cards, and no scroller: it only served the hidden sticky head. */
    background: transparent;
    border: none;
    max-height: none;
    overflow: visible;
  }
  .table-18rem table, .table-18rem thead, .table-18rem tbody, .table-18rem tr, .table-18rem td {
    display: block;
  }
  .table-18rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-18rem thead {
    display: none;
  }
  .table-18rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-18rem tbody tr, .table-18rem tbody tr:nth-child(even) {
    position: relative;
    border: 1px solid var(--hairline);
    margin-bottom: 0.75rem;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-18rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-18rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-18rem {
    /* One field per line: the label in a fixed column, the value left-aligned after it. */
  }
  .table-18rem td {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem 1rem;
    text-align: start;
  }
  .table-18rem td > div {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-18rem td:last-child {
    border-bottom: none;
  }
  .table-18rem .caption {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    letter-spacing: 0.01em;
    font-style: normal;
    color: var(--md-on-surface-variant, var(--text-muted));
    display: block;
    /* A viewport share, so the narrowed first line starts its value at the same x. */
    flex: 0 0 clamp(5rem, 30vw, 9rem);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-18rem {
    /* An empty table's row and the "More…" row are one centred line. */
  }
  .table-18rem tr.empty-row td,
  .table-18rem tr.table-show-all td {
    display: block;
    text-align: center;
  }
  .table-18rem {
    /* The actions sit in the card's top-right corner rather than on a line of their own. */
  }
  .table-18rem td.rowMenuCell {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    padding: 0.25rem;
    border: 0;
    background: none;
    /* The card already shows the row's hover tone; a second layer here drew a square patch. */
  }
  .table-18rem td.rowMenuCell[data--baton-controller--onclick]:hover {
    background: none;
  }
  .table-18rem td.rowMenuCell:empty {
    display: none;
  }
  .table-18rem .rowMenu {
    width: 2.25rem;
    height: 2.25rem;
  }
  .table-18rem tbody tr:has(> td.rowMenuCell > .rowMenu) {
    min-height: 2.75rem;
  }
  .table-18rem tbody tr:has(> td.rowMenuCell > .rowMenu) > td:first-child {
    padding-right: 3.25rem;
  }
  .table-18rem tbody tr:has(> td.rowMenuCell) > td:nth-last-child(2) {
    border-bottom: none;
  }
  .table-18rem {
    /* A lone action is a named pill on the first line, whose label then sits over its value. */
  }
  .table-18rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .table-18rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td {
    grid-column: 1/-1;
  }
  .table-18rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) {
    grid-row: 1;
    grid-column: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    padding-right: 0.5rem;
  }
  .table-18rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > .caption,
  .table-18rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > div {
    flex: none;
  }
  .table-18rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td.rowMenuCell {
    position: static;
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: center;
    max-width: 9.5rem;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .table-18rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:nth-last-child(2) + td.rowMenuCell {
    border-bottom: none;
  }
  .table-18rem .rowMenu--single {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 2.25rem;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    border-radius: 1.125rem;
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
  .table-18rem .rowMenu--single svg {
    flex: 0 0 auto;
  }
  .table-18rem .rowMenu--single .rowMenu__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    text-align: start;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 24rem) {
  .table-24rem {
    /* No boxed surface behind the cards, and no scroller: it only served the hidden sticky head. */
    background: transparent;
    border: none;
    max-height: none;
    overflow: visible;
  }
  .table-24rem table, .table-24rem thead, .table-24rem tbody, .table-24rem tr, .table-24rem td {
    display: block;
  }
  .table-24rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-24rem thead {
    display: none;
  }
  .table-24rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-24rem tbody tr, .table-24rem tbody tr:nth-child(even) {
    position: relative;
    border: 1px solid var(--hairline);
    margin-bottom: 0.75rem;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-24rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-24rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-24rem {
    /* One field per line: the label in a fixed column, the value left-aligned after it. */
  }
  .table-24rem td {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem 1rem;
    text-align: start;
  }
  .table-24rem td > div {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-24rem td:last-child {
    border-bottom: none;
  }
  .table-24rem .caption {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    letter-spacing: 0.01em;
    font-style: normal;
    color: var(--md-on-surface-variant, var(--text-muted));
    display: block;
    /* A viewport share, so the narrowed first line starts its value at the same x. */
    flex: 0 0 clamp(5rem, 30vw, 9rem);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-24rem {
    /* An empty table's row and the "More…" row are one centred line. */
  }
  .table-24rem tr.empty-row td,
  .table-24rem tr.table-show-all td {
    display: block;
    text-align: center;
  }
  .table-24rem {
    /* The actions sit in the card's top-right corner rather than on a line of their own. */
  }
  .table-24rem td.rowMenuCell {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    padding: 0.25rem;
    border: 0;
    background: none;
    /* The card already shows the row's hover tone; a second layer here drew a square patch. */
  }
  .table-24rem td.rowMenuCell[data--baton-controller--onclick]:hover {
    background: none;
  }
  .table-24rem td.rowMenuCell:empty {
    display: none;
  }
  .table-24rem .rowMenu {
    width: 2.25rem;
    height: 2.25rem;
  }
  .table-24rem tbody tr:has(> td.rowMenuCell > .rowMenu) {
    min-height: 2.75rem;
  }
  .table-24rem tbody tr:has(> td.rowMenuCell > .rowMenu) > td:first-child {
    padding-right: 3.25rem;
  }
  .table-24rem tbody tr:has(> td.rowMenuCell) > td:nth-last-child(2) {
    border-bottom: none;
  }
  .table-24rem {
    /* A lone action is a named pill on the first line, whose label then sits over its value. */
  }
  .table-24rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .table-24rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td {
    grid-column: 1/-1;
  }
  .table-24rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) {
    grid-row: 1;
    grid-column: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    padding-right: 0.5rem;
  }
  .table-24rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > .caption,
  .table-24rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > div {
    flex: none;
  }
  .table-24rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td.rowMenuCell {
    position: static;
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: center;
    max-width: 9.5rem;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .table-24rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:nth-last-child(2) + td.rowMenuCell {
    border-bottom: none;
  }
  .table-24rem .rowMenu--single {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 2.25rem;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    border-radius: 1.125rem;
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
  .table-24rem .rowMenu--single svg {
    flex: 0 0 auto;
  }
  .table-24rem .rowMenu--single .rowMenu__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    text-align: start;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 40rem) {
  .table {
    /* No boxed surface behind the cards, and no scroller: it only served the hidden sticky head. */
    background: transparent;
    border: none;
    max-height: none;
    overflow: visible;
  }
  .table table, .table thead, .table tbody, .table tr, .table td {
    display: block;
  }
  .table {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table thead {
    display: none;
  }
  .table {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table tbody tr, .table tbody tr:nth-child(even) {
    position: relative;
    border: 1px solid var(--hairline);
    margin-bottom: 0.75rem;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table {
    /* One field per line: the label in a fixed column, the value left-aligned after it. */
  }
  .table td {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem 1rem;
    text-align: start;
  }
  .table td > div {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table td:last-child {
    border-bottom: none;
  }
  .table .caption {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    letter-spacing: 0.01em;
    font-style: normal;
    color: var(--md-on-surface-variant, var(--text-muted));
    display: block;
    /* A viewport share, so the narrowed first line starts its value at the same x. */
    flex: 0 0 clamp(5rem, 30vw, 9rem);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table {
    /* An empty table's row and the "More…" row are one centred line. */
  }
  .table tr.empty-row td,
  .table tr.table-show-all td {
    display: block;
    text-align: center;
  }
  .table {
    /* The actions sit in the card's top-right corner rather than on a line of their own. */
  }
  .table td.rowMenuCell {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    padding: 0.25rem;
    border: 0;
    background: none;
    /* The card already shows the row's hover tone; a second layer here drew a square patch. */
  }
  .table td.rowMenuCell[data--baton-controller--onclick]:hover {
    background: none;
  }
  .table td.rowMenuCell:empty {
    display: none;
  }
  .table .rowMenu {
    width: 2.25rem;
    height: 2.25rem;
  }
  .table tbody tr:has(> td.rowMenuCell > .rowMenu) {
    min-height: 2.75rem;
  }
  .table tbody tr:has(> td.rowMenuCell > .rowMenu) > td:first-child {
    padding-right: 3.25rem;
  }
  .table tbody tr:has(> td.rowMenuCell) > td:nth-last-child(2) {
    border-bottom: none;
  }
  .table {
    /* A lone action is a named pill on the first line, whose label then sits over its value. */
  }
  .table tbody tr:has(> td.rowMenuCell > .rowMenu--single) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .table tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td {
    grid-column: 1/-1;
  }
  .table tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) {
    grid-row: 1;
    grid-column: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    padding-right: 0.5rem;
  }
  .table tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > .caption,
  .table tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > div {
    flex: none;
  }
  .table tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td.rowMenuCell {
    position: static;
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: center;
    max-width: 9.5rem;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .table tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:nth-last-child(2) + td.rowMenuCell {
    border-bottom: none;
  }
  .table .rowMenu--single {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 2.25rem;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    border-radius: 1.125rem;
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
  .table .rowMenu--single svg {
    flex: 0 0 auto;
  }
  .table .rowMenu--single .rowMenu__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    text-align: start;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 30rem) {
  .table-30rem {
    /* No boxed surface behind the cards, and no scroller: it only served the hidden sticky head. */
    background: transparent;
    border: none;
    max-height: none;
    overflow: visible;
  }
  .table-30rem table, .table-30rem thead, .table-30rem tbody, .table-30rem tr, .table-30rem td {
    display: block;
  }
  .table-30rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-30rem thead {
    display: none;
  }
  .table-30rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-30rem tbody tr, .table-30rem tbody tr:nth-child(even) {
    position: relative;
    border: 1px solid var(--hairline);
    margin-bottom: 0.75rem;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-30rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-30rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-30rem {
    /* One field per line: the label in a fixed column, the value left-aligned after it. */
  }
  .table-30rem td {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem 1rem;
    text-align: start;
  }
  .table-30rem td > div {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-30rem td:last-child {
    border-bottom: none;
  }
  .table-30rem .caption {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    letter-spacing: 0.01em;
    font-style: normal;
    color: var(--md-on-surface-variant, var(--text-muted));
    display: block;
    /* A viewport share, so the narrowed first line starts its value at the same x. */
    flex: 0 0 clamp(5rem, 30vw, 9rem);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-30rem {
    /* An empty table's row and the "More…" row are one centred line. */
  }
  .table-30rem tr.empty-row td,
  .table-30rem tr.table-show-all td {
    display: block;
    text-align: center;
  }
  .table-30rem {
    /* The actions sit in the card's top-right corner rather than on a line of their own. */
  }
  .table-30rem td.rowMenuCell {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    padding: 0.25rem;
    border: 0;
    background: none;
    /* The card already shows the row's hover tone; a second layer here drew a square patch. */
  }
  .table-30rem td.rowMenuCell[data--baton-controller--onclick]:hover {
    background: none;
  }
  .table-30rem td.rowMenuCell:empty {
    display: none;
  }
  .table-30rem .rowMenu {
    width: 2.25rem;
    height: 2.25rem;
  }
  .table-30rem tbody tr:has(> td.rowMenuCell > .rowMenu) {
    min-height: 2.75rem;
  }
  .table-30rem tbody tr:has(> td.rowMenuCell > .rowMenu) > td:first-child {
    padding-right: 3.25rem;
  }
  .table-30rem tbody tr:has(> td.rowMenuCell) > td:nth-last-child(2) {
    border-bottom: none;
  }
  .table-30rem {
    /* A lone action is a named pill on the first line, whose label then sits over its value. */
  }
  .table-30rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .table-30rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td {
    grid-column: 1/-1;
  }
  .table-30rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) {
    grid-row: 1;
    grid-column: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    padding-right: 0.5rem;
  }
  .table-30rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > .caption,
  .table-30rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > div {
    flex: none;
  }
  .table-30rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td.rowMenuCell {
    position: static;
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: center;
    max-width: 9.5rem;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .table-30rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:nth-last-child(2) + td.rowMenuCell {
    border-bottom: none;
  }
  .table-30rem .rowMenu--single {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 2.25rem;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    border-radius: 1.125rem;
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
  .table-30rem .rowMenu--single svg {
    flex: 0 0 auto;
  }
  .table-30rem .rowMenu--single .rowMenu__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    text-align: start;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 36rem) {
  .table-36rem {
    /* No boxed surface behind the cards, and no scroller: it only served the hidden sticky head. */
    background: transparent;
    border: none;
    max-height: none;
    overflow: visible;
  }
  .table-36rem table, .table-36rem thead, .table-36rem tbody, .table-36rem tr, .table-36rem td {
    display: block;
  }
  .table-36rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-36rem thead {
    display: none;
  }
  .table-36rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-36rem tbody tr, .table-36rem tbody tr:nth-child(even) {
    position: relative;
    border: 1px solid var(--hairline);
    margin-bottom: 0.75rem;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-36rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-36rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-36rem {
    /* One field per line: the label in a fixed column, the value left-aligned after it. */
  }
  .table-36rem td {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem 1rem;
    text-align: start;
  }
  .table-36rem td > div {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-36rem td:last-child {
    border-bottom: none;
  }
  .table-36rem .caption {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    letter-spacing: 0.01em;
    font-style: normal;
    color: var(--md-on-surface-variant, var(--text-muted));
    display: block;
    /* A viewport share, so the narrowed first line starts its value at the same x. */
    flex: 0 0 clamp(5rem, 30vw, 9rem);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-36rem {
    /* An empty table's row and the "More…" row are one centred line. */
  }
  .table-36rem tr.empty-row td,
  .table-36rem tr.table-show-all td {
    display: block;
    text-align: center;
  }
  .table-36rem {
    /* The actions sit in the card's top-right corner rather than on a line of their own. */
  }
  .table-36rem td.rowMenuCell {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    padding: 0.25rem;
    border: 0;
    background: none;
    /* The card already shows the row's hover tone; a second layer here drew a square patch. */
  }
  .table-36rem td.rowMenuCell[data--baton-controller--onclick]:hover {
    background: none;
  }
  .table-36rem td.rowMenuCell:empty {
    display: none;
  }
  .table-36rem .rowMenu {
    width: 2.25rem;
    height: 2.25rem;
  }
  .table-36rem tbody tr:has(> td.rowMenuCell > .rowMenu) {
    min-height: 2.75rem;
  }
  .table-36rem tbody tr:has(> td.rowMenuCell > .rowMenu) > td:first-child {
    padding-right: 3.25rem;
  }
  .table-36rem tbody tr:has(> td.rowMenuCell) > td:nth-last-child(2) {
    border-bottom: none;
  }
  .table-36rem {
    /* A lone action is a named pill on the first line, whose label then sits over its value. */
  }
  .table-36rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .table-36rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td {
    grid-column: 1/-1;
  }
  .table-36rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) {
    grid-row: 1;
    grid-column: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    padding-right: 0.5rem;
  }
  .table-36rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > .caption,
  .table-36rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > div {
    flex: none;
  }
  .table-36rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td.rowMenuCell {
    position: static;
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: center;
    max-width: 9.5rem;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .table-36rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:nth-last-child(2) + td.rowMenuCell {
    border-bottom: none;
  }
  .table-36rem .rowMenu--single {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 2.25rem;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    border-radius: 1.125rem;
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
  .table-36rem .rowMenu--single svg {
    flex: 0 0 auto;
  }
  .table-36rem .rowMenu--single .rowMenu__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    text-align: start;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 42rem) {
  .table-42rem {
    /* No boxed surface behind the cards, and no scroller: it only served the hidden sticky head. */
    background: transparent;
    border: none;
    max-height: none;
    overflow: visible;
  }
  .table-42rem table, .table-42rem thead, .table-42rem tbody, .table-42rem tr, .table-42rem td {
    display: block;
  }
  .table-42rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-42rem thead {
    display: none;
  }
  .table-42rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-42rem tbody tr, .table-42rem tbody tr:nth-child(even) {
    position: relative;
    border: 1px solid var(--hairline);
    margin-bottom: 0.75rem;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-42rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-42rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-42rem {
    /* One field per line: the label in a fixed column, the value left-aligned after it. */
  }
  .table-42rem td {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem 1rem;
    text-align: start;
  }
  .table-42rem td > div {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-42rem td:last-child {
    border-bottom: none;
  }
  .table-42rem .caption {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    letter-spacing: 0.01em;
    font-style: normal;
    color: var(--md-on-surface-variant, var(--text-muted));
    display: block;
    /* A viewport share, so the narrowed first line starts its value at the same x. */
    flex: 0 0 clamp(5rem, 30vw, 9rem);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-42rem {
    /* An empty table's row and the "More…" row are one centred line. */
  }
  .table-42rem tr.empty-row td,
  .table-42rem tr.table-show-all td {
    display: block;
    text-align: center;
  }
  .table-42rem {
    /* The actions sit in the card's top-right corner rather than on a line of their own. */
  }
  .table-42rem td.rowMenuCell {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    padding: 0.25rem;
    border: 0;
    background: none;
    /* The card already shows the row's hover tone; a second layer here drew a square patch. */
  }
  .table-42rem td.rowMenuCell[data--baton-controller--onclick]:hover {
    background: none;
  }
  .table-42rem td.rowMenuCell:empty {
    display: none;
  }
  .table-42rem .rowMenu {
    width: 2.25rem;
    height: 2.25rem;
  }
  .table-42rem tbody tr:has(> td.rowMenuCell > .rowMenu) {
    min-height: 2.75rem;
  }
  .table-42rem tbody tr:has(> td.rowMenuCell > .rowMenu) > td:first-child {
    padding-right: 3.25rem;
  }
  .table-42rem tbody tr:has(> td.rowMenuCell) > td:nth-last-child(2) {
    border-bottom: none;
  }
  .table-42rem {
    /* A lone action is a named pill on the first line, whose label then sits over its value. */
  }
  .table-42rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .table-42rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td {
    grid-column: 1/-1;
  }
  .table-42rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) {
    grid-row: 1;
    grid-column: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    padding-right: 0.5rem;
  }
  .table-42rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > .caption,
  .table-42rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > div {
    flex: none;
  }
  .table-42rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td.rowMenuCell {
    position: static;
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: center;
    max-width: 9.5rem;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .table-42rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:nth-last-child(2) + td.rowMenuCell {
    border-bottom: none;
  }
  .table-42rem .rowMenu--single {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 2.25rem;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    border-radius: 1.125rem;
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
  .table-42rem .rowMenu--single svg {
    flex: 0 0 auto;
  }
  .table-42rem .rowMenu--single .rowMenu__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    text-align: start;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 48rem) {
  .table-48rem {
    /* No boxed surface behind the cards, and no scroller: it only served the hidden sticky head. */
    background: transparent;
    border: none;
    max-height: none;
    overflow: visible;
  }
  .table-48rem table, .table-48rem thead, .table-48rem tbody, .table-48rem tr, .table-48rem td {
    display: block;
  }
  .table-48rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-48rem thead {
    display: none;
  }
  .table-48rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-48rem tbody tr, .table-48rem tbody tr:nth-child(even) {
    position: relative;
    border: 1px solid var(--hairline);
    margin-bottom: 0.75rem;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-48rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-48rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-48rem {
    /* One field per line: the label in a fixed column, the value left-aligned after it. */
  }
  .table-48rem td {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem 1rem;
    text-align: start;
  }
  .table-48rem td > div {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-48rem td:last-child {
    border-bottom: none;
  }
  .table-48rem .caption {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    letter-spacing: 0.01em;
    font-style: normal;
    color: var(--md-on-surface-variant, var(--text-muted));
    display: block;
    /* A viewport share, so the narrowed first line starts its value at the same x. */
    flex: 0 0 clamp(5rem, 30vw, 9rem);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-48rem {
    /* An empty table's row and the "More…" row are one centred line. */
  }
  .table-48rem tr.empty-row td,
  .table-48rem tr.table-show-all td {
    display: block;
    text-align: center;
  }
  .table-48rem {
    /* The actions sit in the card's top-right corner rather than on a line of their own. */
  }
  .table-48rem td.rowMenuCell {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    padding: 0.25rem;
    border: 0;
    background: none;
    /* The card already shows the row's hover tone; a second layer here drew a square patch. */
  }
  .table-48rem td.rowMenuCell[data--baton-controller--onclick]:hover {
    background: none;
  }
  .table-48rem td.rowMenuCell:empty {
    display: none;
  }
  .table-48rem .rowMenu {
    width: 2.25rem;
    height: 2.25rem;
  }
  .table-48rem tbody tr:has(> td.rowMenuCell > .rowMenu) {
    min-height: 2.75rem;
  }
  .table-48rem tbody tr:has(> td.rowMenuCell > .rowMenu) > td:first-child {
    padding-right: 3.25rem;
  }
  .table-48rem tbody tr:has(> td.rowMenuCell) > td:nth-last-child(2) {
    border-bottom: none;
  }
  .table-48rem {
    /* A lone action is a named pill on the first line, whose label then sits over its value. */
  }
  .table-48rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .table-48rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td {
    grid-column: 1/-1;
  }
  .table-48rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) {
    grid-row: 1;
    grid-column: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    padding-right: 0.5rem;
  }
  .table-48rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > .caption,
  .table-48rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > div {
    flex: none;
  }
  .table-48rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td.rowMenuCell {
    position: static;
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: center;
    max-width: 9.5rem;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .table-48rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:nth-last-child(2) + td.rowMenuCell {
    border-bottom: none;
  }
  .table-48rem .rowMenu--single {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 2.25rem;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    border-radius: 1.125rem;
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
  .table-48rem .rowMenu--single svg {
    flex: 0 0 auto;
  }
  .table-48rem .rowMenu--single .rowMenu__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    text-align: start;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 54rem) {
  .table-54rem {
    /* No boxed surface behind the cards, and no scroller: it only served the hidden sticky head. */
    background: transparent;
    border: none;
    max-height: none;
    overflow: visible;
  }
  .table-54rem table, .table-54rem thead, .table-54rem tbody, .table-54rem tr, .table-54rem td {
    display: block;
  }
  .table-54rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-54rem thead {
    display: none;
  }
  .table-54rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-54rem tbody tr, .table-54rem tbody tr:nth-child(even) {
    position: relative;
    border: 1px solid var(--hairline);
    margin-bottom: 0.75rem;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-54rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-54rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-54rem {
    /* One field per line: the label in a fixed column, the value left-aligned after it. */
  }
  .table-54rem td {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem 1rem;
    text-align: start;
  }
  .table-54rem td > div {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-54rem td:last-child {
    border-bottom: none;
  }
  .table-54rem .caption {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    letter-spacing: 0.01em;
    font-style: normal;
    color: var(--md-on-surface-variant, var(--text-muted));
    display: block;
    /* A viewport share, so the narrowed first line starts its value at the same x. */
    flex: 0 0 clamp(5rem, 30vw, 9rem);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-54rem {
    /* An empty table's row and the "More…" row are one centred line. */
  }
  .table-54rem tr.empty-row td,
  .table-54rem tr.table-show-all td {
    display: block;
    text-align: center;
  }
  .table-54rem {
    /* The actions sit in the card's top-right corner rather than on a line of their own. */
  }
  .table-54rem td.rowMenuCell {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    padding: 0.25rem;
    border: 0;
    background: none;
    /* The card already shows the row's hover tone; a second layer here drew a square patch. */
  }
  .table-54rem td.rowMenuCell[data--baton-controller--onclick]:hover {
    background: none;
  }
  .table-54rem td.rowMenuCell:empty {
    display: none;
  }
  .table-54rem .rowMenu {
    width: 2.25rem;
    height: 2.25rem;
  }
  .table-54rem tbody tr:has(> td.rowMenuCell > .rowMenu) {
    min-height: 2.75rem;
  }
  .table-54rem tbody tr:has(> td.rowMenuCell > .rowMenu) > td:first-child {
    padding-right: 3.25rem;
  }
  .table-54rem tbody tr:has(> td.rowMenuCell) > td:nth-last-child(2) {
    border-bottom: none;
  }
  .table-54rem {
    /* A lone action is a named pill on the first line, whose label then sits over its value. */
  }
  .table-54rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .table-54rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td {
    grid-column: 1/-1;
  }
  .table-54rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) {
    grid-row: 1;
    grid-column: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    padding-right: 0.5rem;
  }
  .table-54rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > .caption,
  .table-54rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > div {
    flex: none;
  }
  .table-54rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td.rowMenuCell {
    position: static;
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: center;
    max-width: 9.5rem;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .table-54rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:nth-last-child(2) + td.rowMenuCell {
    border-bottom: none;
  }
  .table-54rem .rowMenu--single {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 2.25rem;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    border-radius: 1.125rem;
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
  .table-54rem .rowMenu--single svg {
    flex: 0 0 auto;
  }
  .table-54rem .rowMenu--single .rowMenu__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    text-align: start;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 60rem) {
  .table-60rem {
    /* No boxed surface behind the cards, and no scroller: it only served the hidden sticky head. */
    background: transparent;
    border: none;
    max-height: none;
    overflow: visible;
  }
  .table-60rem table, .table-60rem thead, .table-60rem tbody, .table-60rem tr, .table-60rem td {
    display: block;
  }
  .table-60rem {
    /* The column labels move into each card (.caption) and the action button is
     * up on the heading line, so nothing in the head is left to show. */
  }
  .table-60rem thead {
    display: none;
  }
  .table-60rem {
    /* Each card takes the container surface (the desktop header tone), which
     * stands well off the panel in both themes; the gap, hairline and radius
     * make the row boundaries unambiguous. The even-row selector also
     * flattens the desktop zebra in card mode. */
  }
  .table-60rem tbody tr, .table-60rem tbody tr:nth-child(even) {
    position: relative;
    border: 1px solid var(--hairline);
    margin-bottom: 0.75rem;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--md-surface-container, var(--surface-2));
  }
  .table-60rem {
    /* The desktop `tr:last-child { border-bottom: none }` rule would leave
     * the final card visually open — every card keeps its full border. */
  }
  .table-60rem tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
  }
  .table-60rem {
    /* One field per line: the label in a fixed column, the value left-aligned after it. */
  }
  .table-60rem td {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem 1rem;
    text-align: start;
  }
  .table-60rem td > div {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-60rem td:last-child {
    border-bottom: none;
  }
  .table-60rem .caption {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    letter-spacing: 0.01em;
    font-style: normal;
    color: var(--md-on-surface-variant, var(--text-muted));
    display: block;
    /* A viewport share, so the narrowed first line starts its value at the same x. */
    flex: 0 0 clamp(5rem, 30vw, 9rem);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .table-60rem {
    /* An empty table's row and the "More…" row are one centred line. */
  }
  .table-60rem tr.empty-row td,
  .table-60rem tr.table-show-all td {
    display: block;
    text-align: center;
  }
  .table-60rem {
    /* The actions sit in the card's top-right corner rather than on a line of their own. */
  }
  .table-60rem td.rowMenuCell {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    padding: 0.25rem;
    border: 0;
    background: none;
    /* The card already shows the row's hover tone; a second layer here drew a square patch. */
  }
  .table-60rem td.rowMenuCell[data--baton-controller--onclick]:hover {
    background: none;
  }
  .table-60rem td.rowMenuCell:empty {
    display: none;
  }
  .table-60rem .rowMenu {
    width: 2.25rem;
    height: 2.25rem;
  }
  .table-60rem tbody tr:has(> td.rowMenuCell > .rowMenu) {
    min-height: 2.75rem;
  }
  .table-60rem tbody tr:has(> td.rowMenuCell > .rowMenu) > td:first-child {
    padding-right: 3.25rem;
  }
  .table-60rem tbody tr:has(> td.rowMenuCell) > td:nth-last-child(2) {
    border-bottom: none;
  }
  .table-60rem {
    /* A lone action is a named pill on the first line, whose label then sits over its value. */
  }
  .table-60rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .table-60rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td {
    grid-column: 1/-1;
  }
  .table-60rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) {
    grid-row: 1;
    grid-column: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    padding-right: 0.5rem;
  }
  .table-60rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > .caption,
  .table-60rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:not(.rowMenuCell) > div {
    flex: none;
  }
  .table-60rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td.rowMenuCell {
    position: static;
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: center;
    max-width: 9.5rem;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .table-60rem tbody tr:has(> td.rowMenuCell > .rowMenu--single) > td:first-child:nth-last-child(2) + td.rowMenuCell {
    border-bottom: none;
  }
  .table-60rem .rowMenu--single {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 2.25rem;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    border-radius: 1.125rem;
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
  .table-60rem .rowMenu--single svg {
    flex: 0 0 auto;
  }
  .table-60rem .rowMenu--single .rowMenu__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    text-align: start;
    overflow-wrap: anywhere;
  }
}
/* Small utilities */
hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 12px 0;
}

.no-display {
  display: none;
}

/* Header layout: left (hamburger + logo), center (nav), right (actions) */
header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--header-height);
}

header > div > .header-left,
header > div > .header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

header > div > nav {
  flex: 1 1 auto;
  min-width: 0;
}

/* Brand / logo */
header .brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--background);
  overflow: hidden;
  flex: 0 0 auto;
  user-select: none;
}

header .brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback: letter inside a fancy circle */
header .brand--fallback {
  border-radius: 9999px;
  /* Light-mode "depth" */
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 60%), linear-gradient(135deg, rgba(245, 246, 255, 0.98), rgba(226, 232, 255, 0.98));
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

header .brand__initial {
  display: inline-block;
  font-weight: 800;
  font-size: calc(var(--icon-size) * 0.5);
  line-height: 1;
  /* Light-mode text */
  color: rgba(17, 24, 39, 0.92);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Dark mode via OS preference */
@media (prefers-color-scheme: dark) {
  header .brand--fallback {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%), linear-gradient(135deg, rgba(31, 41, 55, 0.95), rgba(17, 24, 39, 0.95));
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  }
  header .brand__initial {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  }
}
/* Dark mode via explicit class */
body.dark-mode header .brand--fallback {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%), linear-gradient(135deg, rgba(31, 41, 55, 0.95), rgba(17, 24, 39, 0.95));
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

body.dark-mode header .brand__initial {
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* Actions */
.icon-only {
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

/* The glossary button (AutoFrame.renderGlossaryButton): a labelled pill that is always there when the
   model has a glossary. Explicit colours at (1,1,1), so no project link colour or forced-dark hover
   repaints it, and a project's own rule of the same weight, later in the cascade, can resize it.
   Sizes live here and in the narrow rule only. */
#BS_header :is(a, button).bs-glossary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
  min-width: 0;
  height: var(--icon-size);
  margin: 0;
  padding: 0 1rem 0 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 72%, transparent);
  color: var(--color);
  box-shadow: none;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease;
}
#BS_header :is(a, button).bs-glossary:hover {
  background: var(--background-hover);
  border-color: var(--border-hover, var(--border));
  color: var(--color);
}
#BS_header :is(a, button).bs-glossary[aria-current] {
  background: var(--background-hover);
  border-color: color-mix(in srgb, var(--action) 50%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--action) 30%, transparent);
}
#BS_header :is(a, button).bs-glossary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--action) 60%, var(--color));
  outline-offset: 2px;
}
#BS_header :is(a, button).bs-glossary:active {
  transform: none;
}

#BS_header .bs-glossary__i {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-color-scheme: dark) {
  :where(body:not(.light-mode)) #BS_header :is(a, button).bs-glossary {
    background: color-mix(in srgb, var(--color) 6%, transparent);
    color: var(--color);
  }
  :where(body:not(.light-mode)) #BS_header :is(a, button).bs-glossary:hover {
    background: color-mix(in srgb, var(--color) 12%, transparent);
  }
  :where(body:not(.light-mode)) #BS_header :is(a, button).bs-glossary[aria-current] {
    background: color-mix(in srgb, var(--color) 14%, transparent);
    border-color: color-mix(in srgb, var(--color) 40%, transparent);
    box-shadow: none;
  }
}
body.dark-mode #BS_header :is(a, button).bs-glossary {
  background: color-mix(in srgb, var(--color) 6%, transparent);
  color: var(--color);
}
body.dark-mode #BS_header :is(a, button).bs-glossary:hover {
  background: color-mix(in srgb, var(--color) 12%, transparent);
}
body.dark-mode #BS_header :is(a, button).bs-glossary[aria-current] {
  background: color-mix(in srgb, var(--color) 14%, transparent);
  border-color: color-mix(in srgb, var(--color) 40%, transparent);
  box-shadow: none;
}

@media (max-width: 64rem) {
  #BS_header :is(a, button).bs-glossary {
    width: var(--icon-size);
    padding: 0;
    border-radius: 12px;
  }
  #BS_header .bs-glossary__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (forced-colors: active) {
  #BS_header :is(a, button).bs-glossary[aria-current] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}
@keyframes bs-moment-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes bs-moment-band-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes bs-moment-attention {
  0%, 100% {
    box-shadow: none;
  }
  35% {
    box-shadow: inset 0 0 0 3px var(--moment-accent);
  }
}
/* The pill: first in the header's right group, the glossary pill's shape with a two-line label and value.
   Filled sepia while the tab is at another moment; its words and icon change too, never the colour alone. */
#BS_header button.bs-moment {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: auto;
  min-width: 0;
  height: var(--icon-size);
  margin: 0;
  padding: 0 0.7rem 0 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 72%, transparent);
  color: var(--color);
  box-shadow: none;
  font-family: inherit;
  font-weight: 600;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
#BS_header button.bs-moment:hover {
  background: var(--background-hover);
  border-color: var(--border-hover, var(--border));
  color: var(--color);
}
#BS_header button.bs-moment[aria-expanded=true] {
  border-color: var(--action);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 38%, transparent);
}
#BS_header button.bs-moment:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--action) 60%, var(--color));
  outline-offset: 2px;
}
#BS_header button.bs-moment:active {
  transform: none;
}
#BS_header button.bs-moment.is-past, #BS_header button.bs-moment.is-past:hover {
  background: var(--moment-fill);
  border-color: var(--moment-fill-line);
  color: var(--moment-on-fill);
  box-shadow: 0 2px 8px rgba(60, 35, 10, 0.25);
}
#BS_header button.bs-moment.is-past:hover {
  background: color-mix(in srgb, var(--moment-fill) 88%, var(--moment-on-fill));
}
#BS_header button.bs-moment.is-past[aria-expanded=true] {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--moment-accent) 45%, transparent);
}

#BS_header .bs-moment__icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
}

#BS_header .bs-moment__i {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#BS_header .bs-moment__spin {
  position: absolute;
  inset: -0.2rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  opacity: 0.8;
  animation: bs-moment-spin 1s linear infinite;
}

#BS_header .bs-moment__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: 1.05;
}

#BS_header .bs-moment__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

#BS_header .bs-moment__value {
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

#BS_header .bs-moment__row {
  font-size: 0.78125rem;
  font-weight: 650;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

#BS_header .bs-moment__narrow {
  display: none;
}

#BS_header .bs-moment__caret {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  margin-left: -0.125rem;
  opacity: 0.65;
}

/* The band: the header's second row while another moment is set or the page is pinned. It spans the header's
   padding box, and its surface and rules run to both edges of the screen through border-image outset, which is
   ink overflow: no horizontal scrolling. --moment-band-bleed is the header div's inline padding. */
#BS_header > div:has(> .bs-moment-band) {
  flex-wrap: wrap;
  row-gap: 0;
}

/* The nav keeps its place on the first row. Wrapping would otherwise measure it at its full width and, when that
   does not fit beside the logo and the right-hand group, give it a row of its own (and the right-hand group another);
   with no basis it shrinks and wraps its own entries, exactly as it does without the band. */
#BS_header > div:has(> .bs-moment-band) > nav {
  flex-basis: 0;
}

#BS_header .bs-moment-band {
  --moment-band-bleed: 1.5rem;
  position: relative;
  flex: 1 0 100%;
  min-width: 0;
  margin: 0.25rem calc(-1 * var(--moment-band-bleed)) calc(-1 * 0.25rem);
  padding: 0.5rem var(--moment-band-bleed) 0.5rem calc(var(--moment-band-bleed) + 0.375rem);
  color: var(--moment-ink);
  border-image: linear-gradient(to bottom, var(--moment-accent) 0 2px, var(--moment-surface) 2px calc(100% - 2px), var(--moment-accent) calc(100% - 2px)) fill 0/0/0 100vmax;
  white-space: normal;
  animation: bs-moment-band-in 200ms cubic-bezier(0.05, 0.7, 0.1, 1) both;
}
#BS_header .bs-moment-band::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 6px;
  background: var(--moment-hatch);
}
#BS_header .bs-moment-band.is-attention {
  animation: bs-moment-attention 1.2s cubic-bezier(0.2, 0, 0, 1) 1;
}

/* Neutral: the moment is set but this page shows none of it (no timeline, whole history, or loading from the
   current state). The hatch and a sepia leading edge keep the setting visible; nothing is painted "past". */
#BS_header .bs-moment-band:not(.is-past) {
  color: var(--text-strong);
  border-image: linear-gradient(to bottom, var(--hairline) 0 1px, var(--surface) 1px calc(100% - 1px), var(--hairline) calc(100% - 1px)) fill 0/0/0 100vmax;
}
#BS_header .bs-moment-band:not(.is-past)::before {
  width: 7px;
  box-shadow: inset -4px 0 0 var(--moment-accent);
}

#BS_header .bs-moment-band__row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 2.5rem;
}

#BS_header .bs-moment-band__i {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--moment-accent);
}

#BS_header .bs-moment-band__text {
  flex: 1 1 auto;
  min-width: 0;
}
#BS_header .bs-moment-band__text p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#BS_header .bs-moment-band__lead {
  font-weight: 700;
}

#BS_header p.bs-moment-band__source {
  margin-top: 0.125rem;
  font-size: 0.78125rem;
}

#BS_header .bs-moment-band__source a,
#BS_header button.bs-moment-band__anchor {
  all: unset;
  color: var(--moment-accent);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
#BS_header .bs-moment-band__source a:hover,
#BS_header button.bs-moment-band__anchor:hover {
  background: none;
  text-decoration-thickness: 2px;
}
#BS_header .bs-moment-band__source a:focus-visible,
#BS_header button.bs-moment-band__anchor:focus-visible {
  outline: 2px solid var(--moment-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

#BS_header .bs-moment-spin {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.5rem;
  vertical-align: -0.125rem;
  border-radius: 50%;
  border: 2px solid var(--moment-accent);
  border-right-color: transparent;
  animation: bs-moment-spin 1s linear infinite;
}

#BS_header .bs-moment-band__short,
#BS_header .bs-moment-band__phone,
#BS_header .bs-moment-band__phone2 {
  display: none;
}

#BS_header .bs-moment-band__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Ghost buttons in the band's ink; "Terug naar actueel" keeps the project's filled .cta, only its shape is set. */
#BS_header :is(a, button).bs-moment-band__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: auto;
  min-width: 0;
  height: 2.5rem;
  margin: 0;
  padding: 0 0.875rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.84375rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
#BS_header :is(a, button).bs-moment-band__btn:not(.cta) {
  border: 1px solid var(--moment-accent);
  background: transparent;
  color: var(--moment-ink);
  box-shadow: none;
}
#BS_header :is(a, button).bs-moment-band__btn:not(.cta):hover {
  background: color-mix(in srgb, var(--moment-accent) 12%, transparent);
}
#BS_header :is(a, button).bs-moment-band__btn:focus-visible {
  outline: 2px solid var(--moment-accent);
  outline-offset: 2px;
}
#BS_header :is(a, button).bs-moment-band__btn:active {
  transform: none;
}

#BS_header .bs-moment-band:not(.is-past) :is(a, button).bs-moment-band__btn:not(.cta) {
  border-color: var(--border);
  color: var(--text-strong);
}
#BS_header .bs-moment-band:not(.is-past) :is(a, button).bs-moment-band__btn:not(.cta):hover {
  background: var(--background-hover);
}

#BS_header .bs-moment-band__bi {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* First time the band appears (per browser): what looking back means, dismissed with "Begrepen". */
#BS_header .bs-moment-band__explain {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed color-mix(in srgb, var(--moment-accent) 55%, transparent);
}
#BS_header .bs-moment-band__explain p {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
}

#BS_header .bs-moment-band__ei {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--moment-accent);
}

#BS_header :is(a, button).bs-moment-band__btn.is-ok {
  flex: none;
}

/* 48-64rem: the sentence on its own row, the actions right-aligned under it. */
@media (max-width: 64rem) {
  #BS_header button.bs-moment {
    padding-left: 0.85rem;
  }
  #BS_header button.bs-moment:not(.is-busy) .bs-moment__icon {
    display: none;
  }
  #BS_header .bs-moment-band__row {
    flex-wrap: wrap;
    row-gap: 0.375rem;
  }
  #BS_header .bs-moment-band__text {
    flex-basis: calc(100% - 2.25rem);
  }
  #BS_header .bs-moment-band__actions {
    margin-left: auto;
  }
}
/* 30-48rem (the hamburger): the short sentence; "Vergelijk met actueel" moves into the picker's footer. */
@media (max-width: 48rem) {
  #BS_header button.bs-moment.is-split .bs-moment__rows {
    display: none;
  }
  #BS_header button.bs-moment.is-split .bs-moment__narrow {
    display: flex;
  }
  #BS_header .bs-moment-band__sentence,
  #BS_header p.bs-moment-band__source,
  #BS_header .bs-moment-band__btn.is-compare {
    display: none;
  }
  #BS_header p.bs-moment-band__short {
    display: block;
    font-weight: 650;
  }
}
/* Phones: one block. Line 1 opens the picker, line 2 names the mode; "Terug naar actueel" beside them. */
@media (max-width: 30rem) {
  #BS_header button.bs-moment {
    gap: 0.3rem;
    padding: 0 0.625rem;
  }
  #BS_header .bs-moment__label {
    letter-spacing: 0.06em;
  }
  #BS_header .bs-moment__value {
    font-size: 0.8125rem;
  }
  #BS_header button.bs-moment.is-past .bs-moment__caret {
    display: none;
  }
  /* The text keeps at least 7.5rem beside the actions; with less room (larger text, two buttons) the actions go
     under it, right-aligned, and wrap their buttons and labels, so no word breaks and nothing leaves the screen. */
  #BS_header .bs-moment-band__row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  #BS_header .bs-moment-band__i,
  #BS_header p.bs-moment-band__short,
  #BS_header .bs-moment-band__btn.is-other {
    display: none;
  }
  #BS_header .bs-moment-band__text {
    flex: 1 1 7.5rem;
  }
  #BS_header button.bs-moment-band__phone {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
  }
  #BS_header button.bs-moment-band__phone:focus-visible {
    outline: 2px solid var(--moment-accent);
    outline-offset: 2px;
    border-radius: 4px;
  }
  #BS_header .bs-moment-band__pi {
    flex: none;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--moment-accent);
  }
  #BS_header .bs-moment-band__pc {
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
  }
  #BS_header p.bs-moment-band__phone2 {
    display: block;
    margin-top: 0.0625rem;
    font-size: 0.75rem;
    opacity: 0.9;
  }
  #BS_header .bs-moment-band__actions {
    flex-shrink: 1;
  }
  #BS_header .bs-moment-band__explain {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  #BS_header .bs-moment-band__explain p {
    flex-basis: calc(100% - 1.75rem);
  }
  #BS_header :is(a, button).bs-moment-band__btn {
    height: auto;
    min-height: 2.75rem;
    max-width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    white-space: normal;
    text-align: center;
  }
}
@media (max-width: 24rem) {
  #BS_header :is(a, button).bs-moment-band__btn.is-back {
    max-width: 8.5rem;
  }
}
/* 320px: the pill is its icon alone (sepia when past); its accessible name keeps every word, the band the date. */
@media (max-width: 20rem) {
  #BS_header button.bs-moment {
    justify-content: center;
    width: var(--icon-size);
    padding: 0;
    border-radius: 12px;
  }
  #BS_header button.bs-moment:not(.is-busy) .bs-moment__icon {
    display: inline-grid;
  }
  #BS_header button.bs-moment :is(.bs-moment__text, .bs-moment__caret) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #BS_header .bs-moment-band.is-attention {
    animation: none;
    outline: 2px solid var(--moment-accent);
    outline-offset: -2px;
  }
}
/* The picker, in a BS.sheet (#BS__submenu): radios Actueel / Op datum, the forgiving date field with its echo,
   the primary action that says what it will do, then the one-click lists and the footer. */
.bs-moment-picker {
  color: var(--sheet-ink);
  font-size: 0.875rem;
  line-height: 1.4;
}
.bs-moment-picker .bs-moment-picker__form {
  padding: 0 1.125rem 0.875rem;
}
.bs-moment-picker .bs-moment-picker__intro {
  margin: 0 0 0.625rem;
  color: var(--sheet-muted);
  font-size: 0.8125rem;
}
.bs-moment-picker fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.bs-moment-picker .bs-moment-picker__tl {
  margin-bottom: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--sheet-outline);
  border-radius: 0.75rem;
}
.bs-moment-picker .bs-moment-picker__axis {
  float: left;
  width: 100%;
  margin: 0 0 0.25rem;
  padding: 0;
  font-size: 0.84375rem;
}
.bs-moment-picker .bs-moment-picker__axis b {
  display: block;
}
.bs-moment-picker .bs-moment-picker__axis span {
  color: var(--sheet-muted);
  font-size: 0.78125rem;
}
.bs-moment-picker .bs-moment-picker__axis + * {
  clear: both;
}
.bs-moment-picker .bs-moment-picker__opts {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
}
.bs-moment-picker .bs-moment-picker__radio {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.4375rem 0;
  color: inherit;
  cursor: pointer;
  /* Not the forms' floating-label field (label > span / label > input). */
}
.bs-moment-picker .bs-moment-picker__radio input {
  flex: none;
  width: 1.125rem;
  min-width: 0;
  max-width: none;
  height: 1.125rem;
  margin: 0.0625rem 0 0;
  padding: 0;
  accent-color: var(--action);
}
.bs-moment-picker .bs-moment-picker__radio span {
  position: static;
  min-width: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  pointer-events: auto;
}
.bs-moment-picker .bs-moment-picker__radio b {
  font-weight: 650;
}
.bs-moment-picker .bs-moment-picker__field {
  position: relative;
  display: flex;
  gap: 0.5rem;
  margin: 0.125rem 0 0 1.75rem;
}
.bs-moment-picker input.bs-moment-picker__date,
.bs-moment-picker input.bs-moment-picker__time {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 0.625rem;
  border: 1px solid var(--sheet-outline);
  background: var(--sheet-surface);
  color: var(--sheet-ink);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.bs-moment-picker input.bs-moment-picker__date:focus,
.bs-moment-picker input.bs-moment-picker__time:focus {
  border-color: var(--action);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 22%, transparent);
}
.bs-moment-picker input.bs-moment-picker__date[aria-invalid=true],
.bs-moment-picker input.bs-moment-picker__time[aria-invalid=true] {
  border-color: var(--md-error, var(--sheet-danger));
}
.bs-moment-picker input.bs-moment-picker__date::placeholder,
.bs-moment-picker input.bs-moment-picker__time::placeholder {
  color: var(--sheet-muted);
  opacity: 0.8;
}
.bs-moment-picker input.bs-moment-picker__time {
  flex: 0 0 5.25rem;
}
.bs-moment-picker button.bs-moment-picker__cal {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  min-width: 0;
  height: 2.5rem;
  padding: 0;
  border-radius: 0.625rem;
  border: 1px solid var(--sheet-outline);
  background: transparent;
  color: var(--sheet-ink);
  box-shadow: none;
}
.bs-moment-picker button.bs-moment-picker__cal:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.bs-moment-picker .bs-moment-picker__ci,
.bs-moment-picker .bs-moment-picker__ri,
.bs-moment-picker .bs-moment-picker__li {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bs-moment-picker .bs-moment-picker__ri {
  color: var(--sheet-muted);
}
.bs-moment-picker input.bs-moment-picker__native {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.bs-moment-picker .bs-moment-picker__echo,
.bs-moment-picker .bs-moment-picker__hint,
.bs-moment-picker .bs-moment-picker__err {
  margin: 0.25rem 0 0 1.75rem;
}
.bs-moment-picker {
  /* The echo and the error are live regions: empty, they take no room but stay rendered (a region that is not
     rendered when its words arrive is not announced). */
}
.bs-moment-picker .bs-moment-picker__echo {
  font-size: 0.84375rem;
  font-weight: 600;
}
.bs-moment-picker .bs-moment-picker__echo:empty {
  margin: 0;
}
.bs-moment-picker .bs-moment-picker__info {
  display: block;
  color: var(--sheet-muted);
  font-weight: 500;
}
.bs-moment-picker .bs-moment-picker__hint {
  color: var(--sheet-muted);
  font-size: 0.78125rem;
}
.bs-moment-picker .bs-moment-picker__err {
  color: var(--md-error, var(--sheet-danger));
  font-size: 0.8125rem;
  font-weight: 600;
}
.bs-moment-picker .bs-moment-picker__err:empty {
  margin: 0;
}
.bs-moment-picker .bs-moment-picker__tl :is(.bs-moment-picker__field, .bs-moment-picker__echo, .bs-moment-picker__hint, .bs-moment-picker__err) {
  margin-left: 0;
}
.bs-moment-picker .bs-moment-picker__fixed {
  margin: 0.5rem 0 0;
  color: var(--sheet-muted);
  font-size: 0.8125rem;
}
.bs-moment-picker button.bs-moment-picker__apply {
  width: 100%;
  min-width: 0;
  height: 2.625rem;
  margin-top: 0.875rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: normal;
}
.bs-moment-picker button.bs-moment-picker__apply[aria-disabled=true] {
  opacity: 0.55;
  cursor: not-allowed;
}
.bs-moment-picker .bs-moment-picker__seg {
  display: flex;
  margin: 0 0 0.75rem;
  padding: 3px;
  border: 1px solid var(--sheet-outline);
  border-radius: 999px;
}
.bs-moment-picker .bs-moment-picker__seg button {
  flex: 1 1 0;
  min-width: 0;
  height: 2rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sheet-muted);
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: 600;
}
.bs-moment-picker .bs-moment-picker__seg button[aria-checked=true] {
  background: var(--action);
  color: var(--md-on-primary, #fff);
}
.bs-moment-picker .bs-moment-picker__sec {
  padding: 0.5rem;
  border-top: 1px solid var(--sheet-outline);
}
.bs-moment-picker .bs-moment-picker__h {
  margin: 0.375rem 0.625rem 0.25rem;
  color: var(--sheet-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bs-moment-picker button.bs-moment-picker__row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.625rem;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 2.5rem;
  margin: 0;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  color: var(--sheet-ink);
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: start;
  white-space: normal;
}
.bs-moment-picker button.bs-moment-picker__row:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.bs-moment-picker button.bs-moment-picker__row:active {
  transform: none;
}
.bs-moment-picker button.bs-moment-picker__row[aria-disabled=true] {
  opacity: 0.5;
  cursor: not-allowed;
}
.bs-moment-picker button.bs-moment-picker__row small {
  display: block;
  color: var(--sheet-muted);
  font-size: 0.75rem;
  font-weight: 450;
}
.bs-moment-picker .bs-moment-picker__grow {
  flex: 1 1 auto;
  min-width: 0;
}
.bs-moment-picker .bs-moment-picker__d {
  font-weight: 650;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bs-moment-picker .bs-moment-picker__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  padding: 0.5rem 0.75rem 0.625rem 0.625rem;
  border-top: 1px solid var(--sheet-outline);
  color: var(--sheet-muted);
  font-size: 0.78125rem;
}
.bs-moment-picker :is(button, a).bs-moment-picker__copy,
.bs-moment-picker a.bs-moment-picker__compare {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: auto;
  min-width: 0;
  height: 2.25rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  /* The sheet's own ink, underlined as a link: --action has no dark-mode value (and a project may make it
     illegible on a dark sheet), so it is not a text colour here. */
  color: var(--sheet-ink);
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: 650;
  text-decoration: none;
}
.bs-moment-picker :is(button, a).bs-moment-picker__copy span,
.bs-moment-picker a.bs-moment-picker__compare span {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bs-moment-picker :is(button, a).bs-moment-picker__copy:hover,
.bs-moment-picker a.bs-moment-picker__compare:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.bs-moment-picker :is(button, a).bs-moment-picker__copy[hidden],
.bs-moment-picker a.bs-moment-picker__compare[hidden] {
  display: none;
}
.bs-moment-picker a.bs-moment-picker__compare {
  display: none;
}
.bs-moment-picker .bs-moment-picker__esc {
  margin-left: auto;
}

#BS__submenu.is-sheet .bs-moment-picker__esc {
  display: none;
}

@media (max-width: 48rem) {
  .bs-moment-picker a.bs-moment-picker__compare {
    display: inline-flex;
  }
}
/* Block chips, the version bar, the "Alleen lezen" toggletip of timelined tables, notices, the popup strip, the
   "later beëindigd" hint and the card's top edge: the rest of the moment chrome renders these. */
.bs-moment-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  min-height: 1.625rem;
  padding: 0 0.625rem 0 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78125rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.bs-moment-chip svg {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.bs-moment-chip.is-past {
  border-color: var(--moment-accent);
  background: var(--moment-chip);
  color: var(--moment-chip-ink);
}
.bs-moment-chip.is-current::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
}

button.bs-moment-chip,
button.bs-readonly {
  width: auto;
  min-width: 0;
  margin: 0;
  box-shadow: none;
  font-family: inherit;
  cursor: pointer;
}
button.bs-moment-chip:active,
button.bs-readonly:active {
  transform: none;
}

button.bs-moment-chip {
  height: auto;
  min-height: 2.25rem;
}

button.bs-readonly {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding: 0 0.75rem 0 0.625rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}
button.bs-readonly svg {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
button.bs-readonly[aria-expanded=true] {
  border-color: var(--action);
  color: var(--text-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 25%, transparent);
}

.bs-moment-tip {
  position: absolute;
  top: calc(100% + 0.625rem);
  right: 0;
  z-index: 8;
  width: min(18.75rem, 100vw - 2rem);
  padding: 0.75rem 0.875rem;
  border-radius: 0.875rem;
  border: 1px solid var(--sheet-outline);
  background: var(--sheet-surface);
  color: var(--sheet-ink);
  box-shadow: var(--sheet-shadow);
  font-size: 0.84375rem;
  text-align: start;
  white-space: normal;
}
.bs-moment-tip p {
  margin: 0 0 0.625rem;
}
.bs-moment-tip p:last-child {
  margin-bottom: 0;
}

.bs-version {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.625rem 0.5rem 0.875rem;
  border: 1px solid var(--moment-accent);
  border-radius: 0.875rem;
  background: var(--surface);
  color: var(--text-strong);
  font-size: 0.875rem;
}
.bs-version > svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--moment-accent);
}
.bs-version .bs-version__text {
  flex: 1 1 18rem;
  min-width: 0;
}
.bs-version button {
  width: auto;
  min-width: 0;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-strong);
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 40rem) {
  .bs-version .bs-version__text {
    flex-basis: 100%;
  }
  .bs-version button {
    flex: 1 1 0;
    white-space: normal;
  }
}
.bs-moment-later {
  display: block;
  margin-top: 0.0625rem;
  color: var(--moment-later);
  font-size: 0.75rem;
  font-style: italic;
}

.bs-moment-note > div {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.bs-moment-note.is-past > div {
  box-shadow: inset 4px 0 0 var(--moment-accent), var(--shadow-1);
}

.bs-moment-strip {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--text-strong);
  font-size: 0.8125rem;
}
.bs-moment-strip.is-past {
  border-color: var(--moment-accent);
  background: var(--moment-surface);
  color: var(--moment-ink);
}

.has-moment-edge > div {
  box-shadow: inset 0 3px 0 var(--moment-accent), var(--shadow-1);
}

/* Records and blocks: the chip inside a dataset heading and on the record line, the version bar, timeline cells,
   the "Alleen lezen" toggletip of a timelined table, the notices and the popup strip. */
.bs-moment-tipwrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  vertical-align: middle;
}

.bs-moment-tip {
  transform: translateX(var(--bs-tip-shift, 0px));
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.45;
}
.bs-moment-tip[hidden] {
  display: none;
}
.bs-moment-tip button.bs-moment-tip__btn {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  height: 2.25rem;
  margin: 0.5rem 0 0;
  padding: 0 0.875rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-strong);
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: 600;
}

.dataset-title > .bs-moment-chip,
.dataset-title > .bs-moment-tipwrap {
  margin-left: 0.5rem;
}

.dataset-title .bs-moment-tip,
.bs-moment-record .bs-moment-tip {
  left: 0;
  right: auto;
}

.bs-moment-chip .bs-moment-chip__i {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.bs-moment-chip.is-timeline {
  color: var(--text-muted);
}
.bs-moment-chip.is-busy {
  background-image: linear-gradient(90deg, transparent 0, color-mix(in srgb, currentColor 14%, transparent) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: bs-moment-shimmer 1.4s linear infinite;
}

@keyframes bs-moment-shimmer {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}
/* A block without a timeline while another moment is set (SPEC-AMENDMENTS A5): a mark the size of an icon in the
   heading, in the heading's own ink, whose words "Actueel · geen tijdlijn" open over the heading's line on hover and
   while its heading or the heading's line holds keyboard focus. Over it, not in it: opened in the line they could wrap
   the heading and take the mark from under a still pointer, closing and reopening it without end. The words never take
   a pointer and BatonMomentChrome keeps them off the line's controls, so a press always reaches the control it is on;
   Esc puts them away. The words stay in the text (clipped, not hidden), so screen readers read them. */
.bs-moment-chip.is-mini {
  position: relative;
  justify-content: center;
  gap: 0;
  width: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border-color: color-mix(in srgb, currentColor 40%, transparent);
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
  cursor: default;
}
.bs-moment-chip.is-mini .bs-moment-chip__text {
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  height: 1.25rem;
  max-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0 solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-strong);
  box-shadow: var(--shadow-1);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--bs-mini-shift, 0px), var(--bs-mini-drop, 0px));
  transition: opacity 120ms ease;
}
.bs-moment-chip.is-mini .bs-moment-chip__text::before {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
}

.bs-moment-chip.is-mini:not(.is-dismissed):hover .bs-moment-chip__text,
.bs-moment-chip.is-mini.is-held:not(.is-dismissed) .bs-moment-chip__text,
.bs-moment-chip.is-mini.is-measured .bs-moment-chip__text,
:is(h1, h2, h3, h4, h5, h6):focus-visible .bs-moment-chip.is-mini:not(.is-dismissed) .bs-moment-chip__text {
  max-width: 16rem;
  padding: 0 0.625rem 0 0.34375rem;
  border-width: 1px;
  opacity: 1;
}

/* Its own rule: a browser without :has() drops only this one. */
:is(.dataset-head, .frame-head):has(:focus-visible) .bs-moment-chip.is-mini:not(.is-dismissed) .bs-moment-chip__text {
  max-width: 16rem;
  padding: 0 0.625rem 0 0.34375rem;
  border-width: 1px;
  opacity: 1;
}

.frame-title > .bs-moment-chip.is-mini {
  margin-left: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .bs-moment-chip.is-mini .bs-moment-chip__text {
    transition: none;
  }
}
@media print {
  .bs-moment-chip.is-mini {
    width: auto;
    gap: 0.3125rem;
    padding: 0 0.625rem 0 0.5rem;
  }
  .bs-moment-chip.is-mini .bs-moment-chip__text {
    position: static;
    max-width: none;
    padding: 0;
    border-width: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .bs-moment-chip.is-mini .bs-moment-chip__text::before {
    content: none;
  }
}
.bs-readonly-wrap > .baton-tbl__menu-btn {
  margin-left: 0;
}

.dataset-head > .bs-readonly-wrap {
  margin-left: auto;
}

.dataset-head > .record-open + .bs-readonly-wrap {
  margin-left: 0;
}

.frame-head > .bs-readonly-wrap {
  grid-column: 3;
  justify-self: end;
}

button.bs-readonly .bs-readonly__i {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The page's own record: its chip under the frame title and description, and its version bar above the card. */
.bs-moment-record {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem;
  margin: 0 auto;
}

.bs-moment-record.is-past ~ .grid {
  box-shadow: inset 0 3px 0 var(--moment-accent);
}

.bs-version {
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
}
.bs-version .bs-version__i {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--moment-accent);
}
.bs-version .bs-version__text {
  margin: 0;
  color: inherit;
}
.bs-version button.bs-version__step:hover {
  border-color: var(--moment-accent);
}
.bs-version {
  /* One step sits on the text's line; two share the next line, the earlier one left, the later one right. */
}
.bs-version .bs-version__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}
.bs-version .bs-version__steps.is-both {
  flex: 1 1 100%;
  justify-content: space-between;
  margin-left: 1.875rem;
}
.bs-version {
  /* The sepia rule means "another moment": a record at Actueel has a neutral bar. */
}
.bs-version:not(.is-past) {
  border-color: var(--hairline);
}
.bs-version:not(.is-past) .bs-version__i {
  color: var(--text-muted);
}

@media (max-width: 40rem) {
  .bs-version .bs-version__text {
    flex: 1 1 12rem;
  }
  .bs-version .bs-version__steps {
    flex: 1 1 100%;
    margin-left: 0;
  }
}
body:not(.popup):not(.sidebar) section:has(> div > .dataset-head .bs-moment-chip.is-past) > div {
  box-shadow: inset 0 3px 0 var(--moment-accent), var(--shadow-1);
}

/* An up-to value: the end of time and a value not yet known at the moment both read "—". */
.bs-moment-open,
.bs-moment-cell {
  cursor: help;
}

/* Notices in place of a record or a form: neutral card, sepia edge when it is about another moment. */
.bs-moment-note .bs-moment-note__i {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 0.125rem;
  color: var(--text-muted);
}
.bs-moment-note.is-past .bs-moment-note__i {
  color: var(--moment-accent);
}
.bs-moment-note .bs-moment-note__body {
  flex: 1 1 auto;
  min-width: 0;
}
.bs-moment-note .bs-moment-note__title {
  margin: 0 0 0.25rem;
  font: inherit;
  font-weight: 650;
  letter-spacing: inherit;
  color: var(--text-strong);
}
.bs-moment-note .bs-moment-note__text {
  margin: 0 0 0.25rem;
  color: var(--text-muted);
}
.bs-moment-note .bs-moment-note__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.625rem 0 0;
}
.bs-moment-note {
  /* Ghost buttons; "Terug naar actueel" and "Peildatum kiezen" keep the project's filled .cta, only their shape is set. */
}
.bs-moment-note .bs-moment-note__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: auto;
  min-width: 0;
  height: 2.5rem;
  margin: 0;
  padding: 0 1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.bs-moment-note .bs-moment-note__btn:not(.cta) {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-strong);
  box-shadow: none;
}
.bs-moment-note .bs-moment-note__bi {
  flex: none;
  width: 0.9375rem;
  height: 0.9375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A table of a timelined table with no rows (or none matching its search) at another moment: the sentence in the
   empty row, and "Terug naar actueel" as a text button like the search's "Zoekopdracht wissen" (same specificity). */
.bs-moment-empty button.bs-moment-empty__btn,
.bs-moment-empty button.bs-moment-empty__btn:hover {
  all: unset;
  box-sizing: border-box;
  margin-inline-start: 0.5rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  color: var(--baton-tbl-brand, var(--text-strong));
  background: transparent;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.bs-moment-empty button.bs-moment-empty__btn:focus-visible {
  outline: 2px solid var(--baton-tbl-brand, var(--text-strong));
  outline-offset: 1px;
}

.bs-moment-strip .bs-moment-strip__i {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--moment-accent);
}
.bs-moment-strip:not(.is-past) .bs-moment-strip__i {
  color: var(--text-muted);
}
.bs-moment-strip .bs-moment-strip__text {
  flex: 1 1 12rem;
  min-width: 0;
}
.bs-moment-strip button.bs-moment-strip__btn {
  width: auto;
  min-width: 0;
  height: 2.25rem;
  margin: 0;
  padding: 0 0.75rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: 600;
}

@media (max-width: 30rem) {
  .bs-moment-note .bs-moment-note__btn,
  .bs-moment-strip button.bs-moment-strip__btn {
    min-height: 2.75rem;
    white-space: normal;
  }
}
/* The moment on paper: print hides the header, so this line at the top of main carries it. */
.bs-moment-print {
  display: none;
}

@media print {
  .bs-moment-print {
    display: block !important;
    margin: 0 0 0.75rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid #000;
    color: #000 !important;
    font-size: 0.8125rem;
    font-weight: 600;
  }
}
@media (forced-colors: active) {
  #BS_header .bs-moment-band,
  #BS_header .bs-moment-band:not(.is-past) {
    border-image: none;
    border-block: 2px solid CanvasText;
  }
  #BS_header .bs-moment-band::before,
  #BS_header .bs-moment-band:not(.is-past)::before {
    width: 6px;
    background: none;
    box-shadow: none;
    border-left: 6px double CanvasText;
  }
  #BS_header button.bs-moment.is-past,
  #BS_header button.bs-moment.is-past:hover {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    border-color: HighlightText;
  }
  .bs-moment-chip,
  .bs-version,
  .bs-moment-strip {
    border: 1px solid CanvasText;
  }
  button.bs-readonly,
  .bs-moment-tip,
  .bs-moment-note > div {
    border: 1px solid CanvasText;
  }
  .bs-moment-record.is-past ~ .grid,
  body:not(.popup):not(.sidebar) section:has(> div > .dataset-head .bs-moment-chip.is-past) > div {
    border-top: 3px solid CanvasText;
  }
}
/* Nav must never wrap: it scrolls horizontally instead */
nav > div {
  display: block;
  min-width: 0;
}

nav .ul {
  min-width: 0;
}

nav .ul > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  flex-wrap: wrap;
  white-space: normal;
  overflow-x: visible;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

nav .ul > ul::-webkit-scrollbar {
  display: none;
}

nav li {
  flex: 0 0 auto;
  margin: 0;
}

nav a {
  display: inline-flex;
  align-items: center;
  padding: var(--nav-pad-y) var(--nav-pad-x);
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--color);
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

nav a:hover {
  background: var(--background-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

nav a[aria-current=page] {
  background: var(--background-hover);
  border-color: var(--border-hover);
  transform: none;
}

/* The caret belongs to its label: half the pill's gap, not a gap and a margin. */
nav a.nav-group {
  gap: 0.25rem;
}

nav a.nav-group .nav-caret {
  font-size: 0.75em;
  opacity: 0.7;
}

/* The current page (plain text, no <a>) takes the link pills' type and padding, in full ink. */
nav li:not(:has(a)) {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  font-weight: 600;
  color: var(--md-on-surface, var(--text-strong));
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}

/* Hamburger button (animated -> X when aria-expanded="true") */
button.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--color);
  position: relative;
}

button.nav-toggle > span,
button.nav-toggle > span::before,
button.nav-toggle > span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, opacity 180ms ease;
}

button.nav-toggle > span::before {
  transform: translate(-50%, calc(-50% - 6px));
}

button.nav-toggle > span::after {
  transform: translate(-50%, calc(-50% + 6px));
}

/* Only the middle bar goes: opacity would also hide the two bars that turn into the X. */
button.nav-toggle[aria-expanded=true] > span {
  background: transparent;
}

button.nav-toggle[aria-expanded=true] > span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

button.nav-toggle[aria-expanded=true] > span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.center {
  text-align: center;
}

/* Mobile: show hamburger, hide inline nav (you can override with html.nav-open if desired) */
@media (max-width: 48rem) {
  header > div > nav {
    display: none;
  }
  button.nav-toggle {
    display: inline-flex;
  }
}
@media (min-width: 48.001rem) {
  button.nav-toggle {
    display: none;
  }
}
header > div > .header-right {
  white-space: nowrap;
}

/* Animations & utilities */
@keyframes content-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in {
  animation: content-fade-in 300ms cubic-bezier(0.05, 0.7, 0.1, 1) both;
}

@keyframes pulse-soft {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.pulse {
  animation: pulse-soft 2s cubic-bezier(0.2, 0, 0, 1) infinite;
}

.lift {
  transition: transform 150ms cubic-bezier(0.05, 0.7, 0.1, 1), box-shadow 150ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
.lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Print */
@page {
  size: auto;
  margin: 0;
}
@media print {
  header, nav {
    display: none !important;
  }
  .no-print {
    display: none !important;
  }
  body {
    background: white !important;
    color: #000 !important;
  }
  main {
    padding: 0 !important;
  }
  section {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  [class^=table] {
    max-height: none !important;
    overflow: visible !important;
    border: 1px solid #ccc;
  }
  [class^=table] thead th {
    background: #f0f0f0 !important;
  }
  [class^=table] tbody tr:hover {
    background: none !important;
  }
}
.cards-2 > div,
.cards-3 > div {
  display: grid;
  gap: 1rem;
  align-items: start;
}

.cards-2 > div {
  grid-template-columns: repeat(2, 1fr);
}

.cards-3 > div {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 48rem) {
  .cards-3 > div {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 32rem) {
  .cards-2 > div, .cards-3 > div {
    grid-template-columns: 1fr;
  }
}
.glow article > div {
  padding: 1rem;
  height: 100%;
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  background: var(--md-surface-container, var(--surface));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.glow article > div:hover {
  border-color: color-mix(in srgb, var(--accent, #4f46e5) 55%, var(--hairline));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 16px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px color-mix(in srgb, var(--accent, #4f46e5) 30%, transparent);
  transform: translateY(-2px);
}

.glass article > div {
  padding: 1rem;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--hairline) 80%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--md-surface-container-high, var(--surface-2, #282830)) 70%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
}

.case-study > div {
  padding: 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  background: var(--md-surface-container-low, var(--surface));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
}

.field-error,
input.field-error,
select.field-error,
textarea.field-error {
  border-color: var(--md-error, #dc2626) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-error, #dc2626) 22%, transparent);
}

.field-error-msg {
  color: var(--md-error, #dc2626);
  font-size: 0.8125rem;
  margin-top: 0.25rem;
}

.shake {
  animation: bsm-shake 320ms ease;
}

@keyframes bsm-shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-4px);
  }
  40%, 80% {
    transform: translateX(4px);
  }
}
.gl {
  --gl-ink: var(--md-on-surface, var(--text-strong, #1c1c22));
  --gl-muted: var(--md-on-surface-variant, var(--text-muted, #5e6172));
  --gl-faint: color-mix(in srgb, var(--gl-ink) 40%, transparent);
  --gl-line: var(--hairline, rgba(128, 128, 128, 0.22));
  --gl-surface: var(--surface, #ffffff);
  --gl-raised: color-mix(in srgb, var(--gl-ink) 3.5%, var(--gl-surface));
  --gl-sunken: color-mix(in srgb, var(--gl-ink) 6%, var(--gl-surface));
  --gl-brand: var(--action, #4f46e5);
  --gl-brand-ink: color-mix(in srgb, var(--gl-brand) 82%, var(--gl-ink));
  --gl-brand-soft: color-mix(in srgb, var(--gl-brand) 11%, transparent);
  --gl-focus: var(--gl-brand-ink);
  --gl-edge: color-mix(in srgb, var(--gl-ink) 45%, transparent);
  --gl-edge-strong: color-mix(in srgb, var(--gl-brand-ink) 80%, transparent);
  --gl-warn: #b45309;
  --gl-warn-soft: color-mix(in srgb, var(--gl-warn) 12%, transparent);
  --gl-warn-ink: #92400e;
  --gl-primary: var(--gl-brand);
  --gl-on-primary: #fff;
  --gl-tonal: var(--gl-sunken);
  --gl-tonal-hover: color-mix(in srgb, var(--gl-ink) 10%, var(--gl-surface));
  --gl-tint-ink: var(--gl-brand-ink);
  --gl-danger: #b3261e;
  --gl-danger-soft: color-mix(in srgb, var(--gl-danger) 10%, transparent);
  --gl-sheet-bg: var(--md-surface-container-low, var(--surface, #fff));
  --gl-c0: #8b909b;
  --gl-c1: #2a78d6;
  --gl-c2: #eb6834;
  --gl-c3: #1baf7a;
  --gl-c4: #eda100;
  --gl-c5: #e87ba4;
  --gl-c6: #008300;
  --gl-c7: #4a3aa7;
  --gl-c8: #e34948;
  --gl-c9: #6e7fd6;
  --gl-sticky: var(--gl-sticky-top, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--block-gap, 0.875rem);
  color: var(--gl-ink);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
}
.gl p, .gl h1, .gl h2, .gl h3, .gl dl, .gl dd, .gl figure, .gl ul {
  margin: 0;
}
.gl ul {
  padding: 0;
  list-style: none;
}
.gl a, .gl [data--baton-controller--onclick] {
  font-weight: inherit;
}
.gl button {
  min-width: 0;
  height: auto;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
}
.gl mark {
  background: color-mix(in srgb, var(--gl-brand) 18%, transparent);
  color: inherit;
  padding: 0;
  border-radius: 0.15em;
  box-shadow: 0 0 0 0.1em color-mix(in srgb, var(--gl-brand) 18%, transparent);
}
.gl code {
  font: 500 0.8em/1 ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  background: none;
  padding: 0;
  border: 0;
}
.gl abbr {
  text-decoration: none;
}
.gl [hidden] {
  display: none !important;
}
.gl :focus-visible {
  outline: 2px solid var(--gl-focus);
  outline-offset: 2px;
  border-radius: 0.4rem;
}

@media (prefers-color-scheme: dark) {
  .gl {
    --gl-brand-ink: color-mix(in srgb, var(--gl-brand) 42%, var(--gl-ink));
    --gl-brand-soft: color-mix(in srgb, var(--gl-brand-ink) 18%, transparent);
    --gl-edge-strong: color-mix(in srgb, var(--gl-brand-ink) 90%, transparent);
    --gl-warn: #fb923c;
    --gl-warn-ink: #fdba74;
    --gl-primary: var(--gl-brand-ink);
    --gl-on-primary: var(--gl-surface);
    --gl-tonal: color-mix(in srgb, var(--gl-ink) 9%, var(--gl-surface));
    --gl-tonal-hover: color-mix(in srgb, var(--gl-ink) 15%, var(--gl-surface));
    --gl-tint-ink: color-mix(in srgb, var(--gl-brand-ink) 45%, var(--gl-ink));
    --gl-danger: #f2b8b5;
    --gl-raised: color-mix(in srgb, var(--gl-ink) 5%, var(--gl-surface));
    --gl-sunken: color-mix(in srgb, #000 22%, var(--gl-surface));
    --gl-c0: #737985;
    --gl-c1: #3987e5;
    --gl-c2: #d95926;
    --gl-c3: #199e70;
    --gl-c4: #c98500;
    --gl-c5: #d55181;
    --gl-c6: #008300;
    --gl-c7: #9085e9;
    --gl-c8: #e66767;
    --gl-c9: #7584dc;
  }
}
body.dark-mode .gl {
  --gl-brand-ink: color-mix(in srgb, var(--gl-brand) 42%, var(--gl-ink));
  --gl-brand-soft: color-mix(in srgb, var(--gl-brand-ink) 18%, transparent);
  --gl-edge-strong: color-mix(in srgb, var(--gl-brand-ink) 90%, transparent);
  --gl-warn: #fb923c;
  --gl-warn-ink: #fdba74;
  --gl-primary: var(--gl-brand-ink);
  --gl-on-primary: var(--gl-surface);
  --gl-tonal: color-mix(in srgb, var(--gl-ink) 9%, var(--gl-surface));
  --gl-tonal-hover: color-mix(in srgb, var(--gl-ink) 15%, var(--gl-surface));
  --gl-tint-ink: color-mix(in srgb, var(--gl-brand-ink) 45%, var(--gl-ink));
  --gl-danger: #f2b8b5;
  --gl-raised: color-mix(in srgb, var(--gl-ink) 5%, var(--gl-surface));
  --gl-sunken: color-mix(in srgb, #000 22%, var(--gl-surface));
  --gl-c0: #737985;
  --gl-c1: #3987e5;
  --gl-c2: #d95926;
  --gl-c3: #199e70;
  --gl-c4: #c98500;
  --gl-c5: #d55181;
  --gl-c6: #008300;
  --gl-c7: #9085e9;
  --gl-c8: #e66767;
  --gl-c9: #7584dc;
}

body.light-mode .gl {
  --gl-brand-ink: color-mix(in srgb, var(--gl-brand) 82%, var(--gl-ink));
  --gl-brand-soft: color-mix(in srgb, var(--gl-brand) 11%, transparent);
  --gl-edge-strong: color-mix(in srgb, var(--gl-brand-ink) 80%, transparent);
  --gl-warn: #b45309;
  --gl-warn-ink: #92400e;
  --gl-primary: var(--gl-brand);
  --gl-on-primary: #fff;
  --gl-tonal: var(--gl-sunken);
  --gl-tonal-hover: color-mix(in srgb, var(--gl-ink) 10%, var(--gl-surface));
  --gl-tint-ink: var(--gl-brand-ink);
  --gl-danger: #b3261e;
  --gl-raised: color-mix(in srgb, var(--gl-ink) 3.5%, var(--gl-surface));
  --gl-sunken: color-mix(in srgb, var(--gl-ink) 6%, var(--gl-surface));
  --gl-c0: #8b909b;
  --gl-c1: #2a78d6;
  --gl-c2: #eb6834;
  --gl-c3: #1baf7a;
  --gl-c4: #eda100;
  --gl-c5: #e87ba4;
  --gl-c6: #008300;
  --gl-c7: #4a3aa7;
  --gl-c8: #e34948;
  --gl-c9: #6e7fd6;
}

.gl .gl-slot-0 {
  --gl-c: var(--gl-c0);
}

.gl .gl-slot-1 {
  --gl-c: var(--gl-c1);
}

.gl .gl-slot-2 {
  --gl-c: var(--gl-c2);
}

.gl .gl-slot-3 {
  --gl-c: var(--gl-c3);
}

.gl .gl-slot-4 {
  --gl-c: var(--gl-c4);
}

.gl .gl-slot-5 {
  --gl-c: var(--gl-c5);
}

.gl .gl-slot-6 {
  --gl-c: var(--gl-c6);
}

.gl .gl-slot-7 {
  --gl-c: var(--gl-c7);
}

.gl .gl-slot-8 {
  --gl-c: var(--gl-c8);
}

.gl .gl-slot-9 {
  --gl-c: var(--gl-c9);
}

.gl .gl-slot-b {
  --gl-c: var(--gl-brand-ink);
}

.gl .gl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gl .gl-i {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gl .gl-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--gl-c, var(--gl-c0));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gl-c, var(--gl-c0)) 55%, var(--gl-ink));
  flex: 0 0 auto;
}

.gl .gl-slot-0 .gl-dot, .gl .gl-dot.gl-slot-0 {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--gl-c0);
}

.gl .gl-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid var(--gl-line);
  --gl-bg: var(--gl-surface);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.gl .gl-button:hover {
  --gl-bg: var(--gl-raised);
  border-color: var(--hairline-hover, var(--gl-line));
}

.gl .gl-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.5rem 1.05rem;
  border: 0;
  border-radius: 9999px;
  --gl-bg: var(--gl-tonal);
  --gl-fg: var(--gl-ink);
  background-color: var(--gl-bg);
  color: var(--gl-fg);
  font-size: 0.9375rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), box-shadow 150ms cubic-bezier(0.2, 0, 0, 1), transform 150ms cubic-bezier(0.2, 0, 0, 1);
}
.gl .gl-pill .gl-i {
  font-size: 1.05rem;
}
.gl .gl-pill:hover {
  --gl-bg: var(--gl-tonal-hover);
}
.gl .gl-pill:active {
  transform: scale(0.98);
}
.gl .gl-pill:disabled, .gl .gl-pill[aria-disabled=true] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}
.gl .gl-pill kbd {
  margin-left: 0.15rem;
  padding: 0.05rem 0.35rem;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--gl-ink) 7%, transparent);
  font: 600 0.72rem/1.4 ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  color: var(--gl-muted);
}

.gl .gl-pill--primary {
  --gl-bg: var(--gl-primary);
  --gl-fg: var(--gl-on-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 2px 8px -2px color-mix(in srgb, var(--gl-primary) 45%, transparent);
}
.gl .gl-pill--primary:hover {
  --gl-bg: color-mix(in srgb, var(--gl-primary) 86%, var(--gl-ink));
}

.gl .gl-pill--quiet {
  min-height: 2rem;
  padding: 0.3rem 0.75rem;
  --gl-bg: transparent;
  --gl-fg: var(--gl-brand-ink);
  font-size: 0.875rem;
}
.gl .gl-pill--quiet:hover {
  --gl-bg: var(--gl-brand-soft);
}
.gl .gl-pill--quiet[aria-pressed=true] {
  --gl-bg: var(--gl-primary);
  --gl-fg: var(--gl-on-primary);
}

.gl .gl-pill--icon {
  width: 2.5rem;
  padding: 0;
}

.gl .gl-pill--tint {
  --gl-bg: var(--gl-brand-soft);
  --gl-fg: var(--gl-tint-ink);
}
.gl .gl-pill--tint:hover {
  --gl-bg: color-mix(in srgb, var(--gl-brand-ink) 16%, transparent);
}

.gl .gl-chip__n {
  font-variant-numeric: tabular-nums;
  color: var(--gl-muted);
  font-weight: 500;
}

.gl .gl-hero > div {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem 2.5rem;
  padding: clamp(1.5rem, 3.2vw, 2.75rem) clamp(1.25rem, 3.4vw, 3rem);
  border-radius: 1.5rem;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--gl-brand) 13%, transparent), transparent 60%), radial-gradient(80% 120% at 0% 100%, color-mix(in srgb, var(--gl-c3) 7%, transparent), transparent 55%), var(--gl-surface);
}

.gl .gl-hero__lead {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 42rem;
  min-width: 0;
}

.gl .gl-hero__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.gl .gl-hero__head > .gl-new {
  display: none;
  flex: none;
  margin-top: 0.35rem;
}

.gl .gl-hero__title {
  font-size: clamp(2.25rem, 5.2vw, 3.75rem);
  line-height: 1.02;
  font-weight: 750;
  letter-spacing: -0.035em;
  color: var(--gl-ink);
}

.gl .gl-hero__lede {
  color: var(--gl-muted);
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  line-height: 1.5;
}

.gl .gl-hubs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.gl .gl-hubs .gl-chip {
  --gl-bg: color-mix(in srgb, var(--gl-surface) 70%, transparent);
}

.gl .gl-hubs__label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  color: var(--gl-muted);
  font-weight: 600;
  margin-right: 0.25rem;
}

.gl .gl-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(5.5rem, auto);
}
.gl .gl-stats > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.2rem;
  padding: 0 1.25rem;
  border-left: 1px solid var(--gl-line);
}
.gl .gl-stats > div:first-child {
  border-left: 0;
  padding-left: 0;
}
.gl .gl-stats dt {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  color: var(--gl-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
.gl .gl-stats dd {
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.gl .gl-stats .gl-stat__of {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gl-muted);
  letter-spacing: 0;
}

.gl .gl-sheet {
  overflow: clip;
  background: var(--gl-surface);
  border: 1px solid var(--gl-line);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-1);
  padding: 0 clamp(1rem, 2.6vw, 2rem) clamp(1rem, 2.6vw, 2rem);
}

.gl .gl-toolbar {
  position: sticky;
  top: var(--gl-sticky);
  z-index: 5;
  margin: 0 calc(-1 * clamp(1rem, 2.6vw, 2rem));
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2.6vw, 2rem) 0.75rem;
  min-height: 4.5rem;
  background: var(--gl-surface);
  box-shadow: 0 1px 0 var(--gl-line), 0 12px 20px -18px rgba(0, 0, 0, 0.35);
}

.gl .gl-toolbar__row {
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
}

.gl .gl-toolbar__row > .gl-new {
  flex: none;
}

.gl .gl-search {
  position: relative;
  flex: 1 1 18rem;
  display: flex;
  align-items: center;
  max-width: 36rem;
}
.gl .gl-search > .gl-i {
  position: absolute;
  left: 1rem;
  font-size: 1.1rem;
  color: var(--gl-muted);
  pointer-events: none;
}

.gl input.gl-search__input {
  width: 100%;
  height: 2.75rem;
  margin: 0;
  padding: 0 2.75rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: var(--gl-sunken);
  color: var(--gl-ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
  box-shadow: none;
  transition: background 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.gl input.gl-search__input::placeholder {
  color: var(--gl-muted);
  opacity: 1;
}
.gl input.gl-search__input:focus {
  outline: none;
  background: var(--gl-surface);
  border-color: color-mix(in srgb, var(--gl-focus) 60%, transparent);
}
.gl input.gl-search__input:focus-visible {
  outline: 2px solid var(--gl-focus);
  outline-offset: 2px;
  border-color: var(--gl-focus);
}
.gl input.gl-search__input::-webkit-search-cancel-button {
  cursor: pointer;
}

.gl .gl-search__key {
  position: absolute;
  right: 0.85rem;
  min-width: 1.4rem;
  padding: 0.05rem 0.35rem;
  border-radius: 0.35rem;
  border: 1px solid var(--gl-line);
  color: var(--gl-muted);
  font: 600 0.75rem/1.2 ui-monospace, Consolas, monospace;
  text-align: center;
  pointer-events: none;
}

.gl .gl-search:focus-within .gl-search__key {
  opacity: 0;
}

.gl .gl-count {
  color: var(--gl-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gl .gl-active {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.3rem 0.2rem 0.75rem;
  border-radius: 9999px;
  background: var(--gl-brand-soft);
  color: var(--gl-brand-ink);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 600;
}
.gl .gl-active button {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  --gl-fg: var(--gl-brand-ink);
}
.gl .gl-active button:hover {
  --gl-bg: color-mix(in srgb, var(--gl-brand-ink) 14%, transparent);
}

.gl[data-gl-facet="!"] .gl-active {
  background: var(--gl-warn-soft);
  color: var(--gl-warn);
}
.gl[data-gl-facet="!"] .gl-active button {
  --gl-fg: var(--gl-warn);
}

.gl .gl-seg {
  margin-left: auto;
  display: inline-flex;
  padding: 0.2rem;
  border-radius: 9999px;
  background: var(--gl-sunken);
}
.gl .gl-seg button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  border: 0;
  border-radius: 9999px;
  --gl-fg: var(--gl-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1), box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);
}
.gl .gl-seg button:hover {
  --gl-fg: var(--gl-ink);
}
.gl .gl-seg button[aria-pressed=true] {
  --gl-bg: var(--gl-surface);
  --gl-fg: var(--gl-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.gl .gl-facets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.9rem 0 1rem;
  border-bottom: 1px solid var(--gl-line);
}

.gl .gl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  min-width: 0;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--gl-line);
  --gl-bg: var(--gl-surface);
  background-color: var(--gl-bg);
  color: var(--gl-fg, var(--gl-ink));
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1), opacity 150ms cubic-bezier(0.2, 0, 0, 1);
}
.gl .gl-chip:hover {
  --gl-bg: var(--gl-raised);
}
.gl .gl-chip[aria-pressed=true] {
  --gl-bg: var(--gl-brand-soft);
  --gl-fg: var(--gl-brand-ink);
  border-color: color-mix(in srgb, var(--gl-brand-ink) 45%, transparent);
}
.gl .gl-chip[aria-pressed=true] .gl-chip__n {
  color: inherit;
}
.gl .gl-chip.is-zero {
  opacity: 0.45;
}
.gl .gl-chip .gl-i {
  font-size: 0.95rem;
}

.gl .gl-hubs .gl-chip, .gl .gl-alone .gl-chip, .gl .gl-facets .gl-chip {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
}

.gl .gl-chip--warn {
  --gl-fg: var(--gl-warn);
}
.gl .gl-chip--warn[aria-pressed=true] {
  --gl-bg: var(--gl-warn-soft);
  --gl-fg: var(--gl-warn);
  border-color: color-mix(in srgb, var(--gl-warn) 45%, transparent);
}

.gl[data-gl-view=list] .gl-pane--map,
.gl[data-gl-view=map] .gl-pane--list {
  display: none;
}

.gl .gl-pane--list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 clamp(0.5rem, 1.5vw, 1.25rem);
}

.gl .gl-groups {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.gl .gl-az {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: calc(var(--gl-sticky) + 5.5rem);
  align-self: start;
  display: flex;
  flex-direction: column;
  margin-top: 1.25rem;
  padding: 0.35rem 0.2rem;
  border-radius: 9999px;
  background: var(--gl-raised);
  border: 1px solid var(--gl-line);
}

.gl .gl-az__l {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 700;
  color: color-mix(in srgb, var(--gl-ink) 30%, transparent);
}

.gl a.gl-az__l {
  --gl-fg: var(--gl-brand-ink);
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.gl a.gl-az__l:hover {
  --gl-bg: var(--gl-brand-soft);
}
.gl a.gl-az__l.is-empty {
  --gl-fg: color-mix(in srgb, var(--gl-ink) 30%, transparent);
  pointer-events: none;
}

.gl .gl-group {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: 0.5rem 1rem;
  padding: 1.25rem 0 0.25rem;
  scroll-margin-top: calc(var(--gl-sticky) + 5rem);
}
.gl .gl-group + .gl-group {
  border-top: 1px solid var(--gl-line);
  margin-top: 1.25rem;
}
.gl .gl-group:focus:not(:focus-visible) {
  outline: none;
}

.gl .gl-group__letter {
  position: sticky;
  top: calc(var(--gl-sticky) + 5.25rem);
  align-self: start;
  font-size: 2.25rem;
  line-height: 1;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--gl-brand-ink);
}

.gl .gl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 0.75rem;
}

.gl .gl-card {
  display: flex;
  position: relative;
}

.gl .gl-card__a {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 9.5rem;
  padding: 1rem 1.1rem 0.85rem;
  border-radius: 1.1rem;
  border: 1px solid var(--gl-line);
  --gl-bg: var(--gl-raised);
  transition: transform 200ms cubic-bezier(0.05, 0.7, 0.1, 1), box-shadow 200ms cubic-bezier(0.2, 0, 0, 1), background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.gl .gl-card__a:hover {
  --gl-bg: var(--gl-surface);
  border-color: color-mix(in srgb, var(--gl-brand-ink) 35%, var(--gl-line));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 28px -8px rgba(0, 0, 0, 0.16);
  transform: translateY(-2px);
}
.gl .gl-card__a:hover .gl-card__term {
  color: var(--gl-brand-ink);
}

.gl .gl-card__menu {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  --gl-fg: var(--gl-muted);
  opacity: 0;
  transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
}
.gl .gl-card__menu:hover {
  --gl-bg: var(--gl-sunken);
  --gl-fg: var(--gl-ink);
}

.gl .gl-card:hover .gl-card__menu, .gl .gl-card:focus-within .gl-card__menu {
  opacity: 1;
}

.gl .gl-card__term {
  padding-right: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
  transition: color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.gl .gl-card__text {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--gl-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
}

.gl .gl-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.35rem;
  min-height: 1.25rem;
}

.gl .gl-card__dots {
  display: inline-flex;
  gap: 0.35rem;
}

.gl .gl-card__stats {
  display: inline-flex;
  gap: 0.75rem;
  color: var(--gl-muted);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-variant-numeric: tabular-nums;
}
.gl .gl-card__stats > span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.gl .gl-card__stats .gl-i {
  font-size: 0.9rem;
}

.gl .gl-card__warn {
  color: var(--gl-warn);
}

@keyframes gl-return {
  0% {
    box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent;
  }
  20% {
    box-shadow: 0 0 0 3px var(--gl-brand-ink), 0 0 0 10px var(--gl-brand-soft);
  }
  100% {
    box-shadow: 0 0 0 2px var(--gl-brand-ink), 0 0 0 6px var(--gl-brand-soft);
  }
}
.gl .gl-card.is-return > .gl-card__a {
  --gl-bg: var(--gl-surface);
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--gl-brand-ink), 0 0 0 6px var(--gl-brand-soft);
  animation: gl-return 900ms cubic-bezier(0.05, 0.7, 0.1, 1) both;
}
.gl .gl-card.is-return > .gl-card__a .gl-card__term {
  color: var(--gl-brand-ink);
}

.gl .gl-card__note {
  position: absolute;
  top: -0.7rem;
  left: 0.9rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem 0.15rem 0.45rem;
  border-radius: 9999px;
  background: var(--gl-brand-ink);
  color: var(--gl-surface);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  pointer-events: none;
}
.gl .gl-card__note .gl-i {
  font-size: 0.8rem;
  stroke-width: 2.4;
}

.gl .gl-note--return {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0.6rem 0 0;
  color: var(--gl-muted);
  font-size: 0.875rem;
}
.gl .gl-note--return > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.gl .gl-note--return .gl-i {
  font-size: 1rem;
  color: var(--gl-brand-ink);
}
.gl .gl-note--return b {
  color: var(--gl-ink);
  font-weight: 650;
}

.gl .gl-term {
  color: var(--gl-ink);
  font-weight: 600;
  text-decoration: none;
}

.gl .gl-card .gl-term {
  color: inherit;
}

.gl--entry .gl-term--broken, .gl--entry .gl-term--warn, .gl--editor .gl-term--broken, .gl .gl-ref.gl-ref--warn,
.gl--index[data-gl-facet="!"] .gl-card .gl-term--broken, .gl--index[data-gl-facet="!"] .gl-card .gl-term--warn {
  text-decoration: underline dotted 2px var(--gl-warn);
  text-underline-offset: 0.22em;
  cursor: help;
}

.gl[data-gl-searching] .gl-groups {
  display: flex;
  flex-direction: column;
}

.gl[data-gl-searching] [data-gl-rank="0"] {
  order: -4;
}

.gl[data-gl-searching] [data-gl-rank="1"] {
  order: -3;
}

.gl[data-gl-searching] [data-gl-rank="2"] {
  order: -2;
}

.gl[data-gl-searching] [data-gl-rank="3"] {
  order: -1;
}

.gl[data-gl-searching] .gl-todo {
  order: -10;
}

.gl .gl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 3rem 1rem 1.5rem;
  color: var(--gl-muted);
  text-align: center;
}

.gl .gl-empty__title {
  color: var(--gl-ink);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 650;
}

.gl .gl-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.gl[data-gl-none] .gl-pane--list {
  display: none;
}

.gl .gl-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-top: 1.25rem;
  padding: 0.85rem 0.85rem 0.85rem 1.1rem;
  border-radius: 1.1rem;
  border: 1.5px dashed color-mix(in srgb, var(--gl-brand-ink) 45%, transparent);
  background: var(--gl-brand-soft);
  color: var(--gl-ink);
}
.gl .gl-offer > p {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}
.gl .gl-offer > p > .gl-i {
  flex: none;
  margin-top: 0.2rem;
  color: var(--gl-brand-ink);
}

.gl[data-gl-searching] .gl-offer {
  order: -20;
}

.gl .gl-first {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 30rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) 1rem;
  text-align: center;
}

.gl .gl-first__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.1rem;
  background: var(--gl-brand-soft);
  color: var(--gl-brand-ink);
}
.gl .gl-first__icon .gl-i {
  font-size: 1.6rem;
}

.gl .gl-first__title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.gl .gl-first__text {
  color: var(--gl-muted);
  font-size: 1rem;
  line-height: 1.55;
}

.gl .gl-first .gl-pill {
  margin-top: 0.35rem;
}

.gl .gl-first__tip {
  margin-top: 0.5rem;
  color: var(--gl-muted);
  font-size: 0.8125rem;
}
.gl .gl-first__tip code {
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  background: var(--gl-sunken);
  color: var(--gl-ink);
}

@media (hover: none) and (pointer: coarse) {
  .gl .gl-first__tip {
    display: none;
  }
}
.gl--index:not([data-gl-facet="!"]) .gl-todo {
  display: none;
}

.gl .gl-todo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 1.25rem;
  background: var(--gl-warn-soft);
  border: 1px solid color-mix(in srgb, var(--gl-warn) 25%, transparent);
}

.gl .gl-todo__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--gl-ink);
}
.gl .gl-todo__title .gl-i {
  color: var(--gl-warn);
  font-size: 1.2rem;
}

.gl .gl-todo__lede {
  color: var(--gl-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}

.gl .gl-todo__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 0.6rem;
}

.gl .gl-todo__item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.9rem;
  background: var(--gl-surface);
  border: 1px solid var(--gl-line);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}
.gl .gl-todo__item code {
  padding: 0.15rem 0.4rem;
  border-radius: 0.35rem;
  background: var(--gl-sunken);
  overflow-wrap: anywhere;
}

.gl .gl-todo__what {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

.gl .gl-todo__where {
  color: var(--gl-muted);
}

.gl .gl-todo__fix {
  color: var(--gl-ink);
}

.gl .gl-todo__owner {
  font-weight: 600;
  text-decoration: underline 1px color-mix(in srgb, currentColor 30%, transparent);
  text-underline-offset: 0.2em;
}

.gl .gl-todo__act {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.gl .gl-todo__act .gl-pill {
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.875rem;
}

.gl .gl-map {
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gl .gl-map__canvas {
  overflow-x: auto;
  padding: clamp(0.75rem, 1.6vw, 1.5rem);
  border-radius: 1.1rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--gl-ink) 9%, transparent) 1px, transparent 1.3px) 0 0/22px 22px, var(--gl-raised);
  border: 1px solid var(--gl-line);
}

.gl .gl-graph {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  font-family: inherit;
  overflow: visible;
}

.gl .gl-edge {
  stroke: var(--gl-edge);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), stroke 200ms cubic-bezier(0.2, 0, 0, 1);
}

.gl .gl-edge--strong {
  stroke: var(--gl-edge-strong);
  stroke-width: 1.6;
  stroke-dasharray: none;
}

.gl .gl-node {
  cursor: pointer;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
}
.gl .gl-node circle {
  fill: var(--gl-c, var(--gl-c0));
  stroke: color-mix(in srgb, var(--gl-c, var(--gl-c0)) 55%, var(--gl-ink));
  stroke-width: 1.25;
}
.gl .gl-node text {
  fill: var(--gl-ink);
  font-size: 12px;
  font-weight: 550;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--gl-raised);
  stroke-width: 6px;
  stroke-linejoin: round;
}
.gl .gl-node:hover text, .gl .gl-node:focus-visible text {
  fill: var(--gl-brand-ink);
}
.gl .gl-node.gl-node--hub text {
  font-size: 14px;
  font-weight: 700;
}
.gl .gl-node.gl-slot-0 circle {
  fill: var(--gl-raised);
  stroke: var(--gl-c0);
  stroke-width: 1.75;
}
.gl .gl-node[data-gl-warn] circle {
  stroke: var(--gl-warn);
  stroke-width: 2.5;
}

.gl .gl-graph.is-focus .gl-node:not(.is-lit) {
  opacity: 0.16;
}
.gl .gl-graph.is-focus .gl-edge:not(.is-lit) {
  opacity: 0.08;
}
.gl .gl-graph.is-focus .gl-edge.is-lit {
  stroke: var(--gl-brand-ink);
  stroke-width: 2;
  opacity: 1;
}
.gl .gl-graph.is-focus .gl-node.is-lit text {
  font-weight: 700;
}

.gl .gl-graph .is-dim {
  opacity: 0.1;
}

.gl .gl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  color: var(--gl-muted);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 500;
}
.gl .gl-legend > span, .gl .gl-legend > li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.gl .gl-key {
  display: inline-block;
  width: 1.4rem;
  height: 0;
  border-top: 1.5px dashed var(--gl-edge);
}
.gl .gl-key.gl-key--strong {
  border-top: 2px solid var(--gl-edge-strong);
}
.gl .gl-key.gl-key--out, .gl .gl-key.gl-key--in {
  position: relative;
}
.gl .gl-key.gl-key--out::after, .gl .gl-key.gl-key--in::before {
  content: "";
  position: absolute;
  top: -4.5px;
  border: 4px solid transparent;
}
.gl .gl-key.gl-key--out::after {
  right: -2px;
  border-left: 6px solid var(--gl-edge);
  border-right: 0;
}
.gl .gl-key.gl-key--in::before {
  left: -2px;
  border-right: 6px solid var(--gl-edge);
  border-left: 0;
}

.gl .gl-key-size {
  display: inline-block;
  width: 1rem;
  height: 0.7rem;
  background: radial-gradient(circle at 25% 60%, var(--gl-c0) 0 0.14rem, transparent 0.15rem), radial-gradient(circle at 70% 50%, var(--gl-c0) 0 0.3rem, transparent 0.31rem);
}

.gl .gl-key-warn {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--gl-warn);
}

.gl .gl-alone {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 0.5rem;
}
.gl .gl-alone h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gl-muted);
}
.gl .gl-alone ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.gl .gl-alone .is-dim {
  opacity: 0.3;
}

.gl .gl-chip--term {
  --gl-fg: var(--gl-ink);
}

.gl .gl-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 1fr);
  gap: var(--block-gap, 0.875rem);
  align-items: stretch;
}
.gl .gl-entry > article > div, .gl .gl-entry > aside > div {
  height: 100%;
}

.gl .gl-entry--solo {
  grid-template-columns: minmax(0, 1fr);
}

.gl .gl-entry__main > div {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.5rem, 3.4vw, 3rem);
  border-radius: 1.5rem;
  background: radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--gl-brand) 9%, transparent), transparent 55%), var(--gl-surface);
}

.gl .gl-entry__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  min-height: 2.5rem;
  margin-bottom: -0.25rem;
}

.gl a.gl-back {
  min-width: 0;
  max-width: 100%;
  padding-left: 0.7rem;
}
.gl a.gl-back .gl-i {
  font-size: 1.1rem;
  transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);
}
.gl a.gl-back:hover .gl-i {
  transform: translateX(-2px);
}

.gl .gl-back__q {
  min-width: 0;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gl-muted);
  font-weight: 500;
}
.gl .gl-back__q::before {
  content: "·";
  margin: 0 0.45rem 0 0.05rem;
  color: var(--gl-faint);
}

.gl .gl-entry__acts {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.gl .gl-entry__term--missing {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1;
}

.gl .gl-near {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.gl--entry .gl-near {
  justify-content: flex-start;
}

.gl .gl-near__label {
  color: var(--gl-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  margin-right: 0.15rem;
}

.gl .gl-domains {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.gl .gl-domain {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.65rem 0.2rem 0.55rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--gl-c, var(--gl-c0)) 10%, var(--gl-surface));
  border: 1px solid color-mix(in srgb, var(--gl-c, var(--gl-c0)) 30%, transparent);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  color: var(--gl-ink);
}

.gl .gl-domain--use {
  background: transparent;
  border-color: var(--gl-line);
  color: var(--gl-muted);
  font-weight: 500;
  padding-left: 0.65rem;
}

.gl .gl-domains__also {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  color: var(--gl-muted);
  margin: 0 0.15rem 0 0.35rem;
}

.gl .gl-entry__term {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1;
  font-weight: 750;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
  margin-top: 0.25rem;
}

.gl .gl-entry__aka {
  margin-top: -0.35rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gl-muted);
  letter-spacing: 0.04em;
}
.gl .gl-entry__aka abbr {
  font-weight: 700;
  color: var(--gl-ink);
}

.gl .gl-entry__text {
  max-width: 36em;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.6;
  letter-spacing: -0.012em;
  color: color-mix(in srgb, var(--gl-ink) 88%, var(--gl-muted));
  text-wrap: pretty;
}

.gl .gl-entry__alone {
  color: var(--gl-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}

.gl .gl-ref {
  position: relative;
  font-weight: 600;
  text-decoration: underline 1.5px color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.gl .gl-ref:hover, .gl .gl-ref:focus-visible {
  text-decoration-color: currentColor;
}

.gl .gl-peek {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.65rem);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: max-content;
  max-width: min(22rem, 80vw);
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  background: var(--gl-surface);
  border: 1px solid var(--gl-line);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 18px 48px -12px rgba(0, 0, 0, 0.28);
  color: var(--gl-ink);
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.05, 0.7, 0.1, 1), visibility 0s linear 200ms;
}
.gl .gl-peek::before {
  content: "";
  position: absolute;
  left: calc(50% - 0.4rem);
  top: -0.45rem;
  width: 0.8rem;
  height: 0.8rem;
  background: var(--gl-surface);
  border-left: 1px solid var(--gl-line);
  border-top: 1px solid var(--gl-line);
  transform: rotate(45deg);
}
.gl .gl-peek::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.8rem;
}

.gl .gl-peek__term {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gl-ink);
}

.gl .gl-peek__text {
  color: var(--gl-muted);
}

.gl .gl-ref:hover .gl-peek,
.gl .gl-ref:focus-visible .gl-peek {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 120ms, 120ms, 0s;
}

.gl .gl-ref.is-peek-off .gl-peek {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.gl .gl-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gl-line);
}
.gl .gl-facts > div {
  display: contents;
}
.gl .gl-facts dt {
  color: var(--gl-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
}
.gl .gl-facts dd {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}

.gl .gl-fact-action {
  padding: 0;
  border: 0;
  --gl-fg: var(--gl-brand-ink);
  font-weight: 600;
  text-decoration: underline 1px color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.2em;
}

.gl .gl-issue {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  max-width: 100%;
  padding: 0.3rem 0.35rem 0.3rem 0.8rem;
  border-radius: 1.25rem;
  background: var(--gl-warn-soft);
  color: var(--gl-warn-ink);
  font-size: 0.875rem;
  line-height: 1.35;
  font-weight: 600;
}
.gl .gl-issue > .gl-i {
  font-size: 1rem;
  color: var(--gl-warn);
}
.gl .gl-issue .gl-textlink {
  color: inherit;
  text-decoration: underline 1px;
  text-underline-offset: 0.2em;
}

.gl .gl-issue__act {
  min-height: 1.9rem;
  padding: 0.2rem 0.8rem;
  --gl-bg: var(--gl-surface);
  --gl-fg: var(--gl-warn-ink);
  font-size: 0.875rem;
  font-weight: 650;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gl-warn) 30%, transparent);
}
.gl .gl-issue__act:hover {
  --gl-bg: color-mix(in srgb, var(--gl-warn) 8%, var(--gl-surface));
}

.gl .gl-issue__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: -0.35rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.9rem;
  background: var(--gl-warn-soft);
  color: var(--gl-ink);
  font-size: 0.875rem;
  line-height: 1.45;
}
.gl .gl-issue__list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.gl .gl-issue__list span {
  color: var(--gl-warn-ink);
}
.gl .gl-issue__list code {
  overflow-wrap: anywhere;
}

.gl .gl-entry__side > div {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 1.5rem;
}

.gl .gl-hood {
  display: block;
  width: 100%;
  max-width: 32.5rem;
  height: auto;
  margin-inline: auto;
  font-family: inherit;
  overflow: visible;
}

.gl .gl-hood__chords line {
  stroke: var(--gl-edge);
  stroke-width: 1;
  opacity: 0.55;
}

.gl .gl-hood__e {
  stroke: var(--gl-edge);
  stroke-width: 1.25;
  stroke-dasharray: 4 4;
  transition: stroke 150ms cubic-bezier(0.2, 0, 0, 1);
}
.gl .gl-hood__e.gl-hood__e--strong {
  stroke: var(--gl-edge-strong);
  stroke-width: 1.75;
  stroke-dasharray: none;
}

.gl .gl-hood marker path {
  fill: var(--gl-edge);
}

.gl .gl-hood__hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.gl .gl-hood__n {
  cursor: pointer;
  transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
}
.gl .gl-hood__n circle:not(.gl-hood__hit) {
  fill: var(--gl-c, var(--gl-c0));
  stroke: color-mix(in srgb, var(--gl-c, var(--gl-c0)) 55%, var(--gl-ink));
  stroke-width: 1.25;
}
.gl .gl-hood__n.gl-slot-0 circle:not(.gl-hood__hit) {
  fill: var(--gl-surface);
  stroke: var(--gl-c0);
  stroke-width: 1.75;
}
.gl .gl-hood__n text {
  fill: var(--gl-ink);
  font-size: 12.5px;
  font-weight: 550;
  paint-order: stroke;
  stroke: var(--gl-surface);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.gl .gl-hood__n:hover text, .gl .gl-hood__n:focus-visible text {
  fill: var(--gl-brand-ink);
}
.gl .gl-hood__n:hover .gl-hood__e, .gl .gl-hood__n:focus-visible .gl-hood__e {
  stroke: var(--gl-brand-ink);
}

.gl .gl-hood:has(.gl-hood__n:hover) .gl-hood__n:not(:hover) {
  opacity: 0.35;
}

.gl .gl-hood__me circle {
  fill: var(--gl-c, var(--gl-c0));
  stroke: var(--gl-surface);
  stroke-width: 4;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gl-c, var(--gl-c0)) 55%, transparent));
}
.gl .gl-hood__me.gl-slot-0 circle {
  fill: var(--gl-surface);
  stroke: var(--gl-c0);
  stroke-width: 3;
}
.gl .gl-hood__me text {
  fill: var(--gl-ink);
  font-size: 14px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--gl-surface);
  stroke-width: 7px;
  stroke-linejoin: round;
}

.gl .gl-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: var(--block-gap, 0.875rem);
  align-items: stretch;
}
.gl .gl-panels > section > div {
  height: 100%;
}

.gl .gl-panel > div {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 1.5rem;
}

.gl .gl-panel__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
}
.gl .gl-panel__head .gl-panel__title {
  flex: 1 1 auto;
  min-width: 0;
}

.gl .gl-panel__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--gl-ink);
}
.gl .gl-panel__title > .gl-i {
  font-size: 1.15rem;
  color: var(--gl-brand-ink);
}
.gl .gl-panel__title .gl-chip__n {
  display: inline-block;
  vertical-align: 0.1em;
  margin-left: 0.3rem;
  white-space: nowrap;
  min-width: 1.6rem;
  padding: 0.05rem 0.5rem;
  border-radius: 9999px;
  background: var(--gl-sunken);
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
}

.gl .gl-panel__empty {
  color: var(--gl-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}

.gl .gl-panel.is-editing > div {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gl-brand-ink) 40%, transparent);
}

.gl .gl-panel:not(.is-editing) [data-gl-edit-only] {
  display: none;
}

.gl .gl-panel__edit {
  flex: none;
}
.gl .gl-panel__edit > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.gl .gl-panel.is-editing .gl-panel__edit-off, .gl .gl-panel:not(.is-editing) .gl-panel__edit-on {
  display: none;
}

.gl .gl-panel.is-editing .gl-panel__edit {
  --gl-bg: var(--gl-primary);
  --gl-fg: var(--gl-on-primary);
}
.gl .gl-panel.is-editing .gl-panel__edit:hover {
  --gl-bg: color-mix(in srgb, var(--gl-primary) 86%, var(--gl-ink));
}

.gl .gl-panel__error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gl-warn-ink);
  font-size: 0.875rem;
  font-weight: 600;
}
.gl .gl-panel__error .gl-i {
  color: var(--gl-warn);
}

.gl .gl-minis > li {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.gl .gl-minis > li > .gl-mini {
  flex: 1 1 auto;
  min-width: 0;
}

.gl .gl-remove {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.5rem 0.1rem -0.5rem 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  --gl-bg: transparent;
  --gl-fg: var(--gl-muted);
}
.gl .gl-remove > span {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--gl-line);
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);
}
.gl .gl-remove .gl-i {
  font-size: 0.85rem;
  stroke-width: 2.2;
}
.gl .gl-remove:hover, .gl .gl-remove:focus-visible {
  --gl-fg: var(--gl-danger);
}
.gl .gl-remove:hover > span, .gl .gl-remove:focus-visible > span {
  background: var(--gl-danger-soft);
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.gl .gl-chip-edit {
  display: inline-flex;
  align-items: center;
}

.gl .gl-chip-edit .gl-remove {
  width: 2.25rem;
  height: 2.25rem;
  margin: -0.3rem -0.2rem -0.3rem -0.25rem;
}
.gl .gl-chip-edit .gl-remove > span {
  width: 1.4rem;
  height: 1.4rem;
}

.gl .gl-panel .gl-add {
  align-self: flex-start;
}

.gl .gl-combo {
  position: relative;
}

.gl .gl-combo > .gl-i {
  position: absolute;
  left: 0.95rem;
  top: 0.9rem;
  font-size: 1rem;
  color: var(--gl-muted);
  pointer-events: none;
}

.gl input.gl-combo__input {
  width: 100%;
  height: 2.75rem;
  margin: 0;
  padding: 0 1rem 0 2.6rem;
  border-radius: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--gl-brand-ink) 55%, transparent);
  background: var(--gl-surface);
  color: var(--gl-ink);
  font: inherit;
  font-size: 1rem;
  outline: none;
}
.gl input.gl-combo__input::placeholder {
  color: var(--gl-muted);
  opacity: 1;
}
.gl input.gl-combo__input:focus {
  box-shadow: 0 0 0 4px var(--gl-brand-soft);
}

.gl .gl-minis, .gl .gl-quotes {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 -0.6rem;
}

.gl .gl-mini, .gl .gl-quote {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem;
  border-radius: 0.8rem;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.gl .gl-mini:hover, .gl .gl-quote:hover {
  --gl-bg: var(--gl-raised);
}
.gl .gl-mini:hover .gl-mini__term, .gl .gl-mini:hover .gl-quote__term, .gl .gl-quote:hover .gl-mini__term, .gl .gl-quote:hover .gl-quote__term {
  color: var(--gl-brand-ink);
}

.gl .gl-mini__term, .gl .gl-quote__term {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 650;
}

.gl .gl-quote__tag {
  padding: 0 0.45rem;
  border-radius: 9999px;
  background: var(--gl-sunken);
  color: var(--gl-muted);
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
}

.gl .gl-mini__text, .gl .gl-quote__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--gl-muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}

.gl .gl-quote__text mark {
  color: var(--gl-ink);
  font-weight: 600;
}

.gl .gl-model {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gl .gl-model__row {
  display: flex;
  flex-direction: column;
  border-radius: 0.9rem;
  border: 1px solid var(--gl-line);
  background: var(--gl-raised);
  overflow: hidden;
}

.gl .gl-model__row--implied {
  background: transparent;
  border-style: dashed;
}

.gl .gl-model__head {
  display: flex;
  align-items: center;
  min-width: 0;
}

.gl .gl-model__head > .gl-model__table {
  flex: 1 1 auto;
  min-width: 0;
}

.gl .gl-panel.is-editing .gl-model__head {
  padding-right: 0.25rem;
}

.gl .gl-model__table {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
}
.gl .gl-model__table > .gl-i {
  font-size: 1.05rem;
  color: var(--gl-brand-ink);
}
.gl .gl-model__table {
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.gl a.gl-model__table:hover {
  --gl-bg: color-mix(in srgb, var(--gl-brand-ink) 6%, transparent);
}

.gl .gl-model__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gl .gl-model__name code {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gl-muted);
  margin-top: 0.15rem;
}

.gl .gl-model__schema, .gl .gl-model__stale {
  padding: 0.1rem 0.55rem;
  border-radius: 9999px;
  background: var(--gl-sunken);
  color: var(--gl-muted);
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 600;
  white-space: nowrap;
}

.gl .gl-model__stale {
  background: var(--gl-warn-soft);
  color: var(--gl-warn);
}

.gl .gl-model__columns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.75rem 0.7rem 2.4rem;
}

.gl .gl-model__via {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  color: var(--gl-muted);
  margin-right: 0.15rem;
}

.gl .gl-chip--column {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  font-weight: 550;
}

.gl .gl-chip--stale {
  --gl-fg: var(--gl-warn);
  border-style: dashed;
  border-color: color-mix(in srgb, var(--gl-warn) 45%, transparent);
}

.gl .gl-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--block-gap, 0.875rem);
}

.gl .gl-pager__link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-radius: 1.25rem;
  --gl-bg: var(--gl-surface);
  border: 1px solid var(--gl-line);
  box-shadow: var(--shadow-1);
  transition: transform 200ms cubic-bezier(0.05, 0.7, 0.1, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.gl .gl-pager__link > span {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  font-weight: 650;
}
.gl .gl-pager__link small {
  color: var(--gl-muted);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.gl .gl-pager__link > .gl-i {
  font-size: 1.1rem;
  color: var(--gl-muted);
}
.gl .gl-pager__link:hover {
  border-color: color-mix(in srgb, var(--gl-brand-ink) 40%, var(--gl-line));
}
.gl .gl-pager__link:hover > .gl-i {
  color: var(--gl-brand-ink);
}

.gl .gl-pager__link--next {
  grid-column: 2;
  justify-content: flex-end;
  text-align: right;
}

.gl .gl-note {
  color: var(--gl-muted);
  padding: 1rem 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}

.gl.gl--editor {
  width: 44rem;
  max-width: 100%;
  flex: 1 0 auto;
  gap: 1.1rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.gl.gl--edge {
  width: 32rem;
  max-width: 100%;
  gap: 1.1rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.gl.gl--edge .gl-editor__term {
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
}

.gl .gl-editor__head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-right: 3rem;
}

.gl .gl-editor__kicker {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gl-muted);
}

.gl .gl-editor__term {
  font-size: clamp(1.75rem, 4.4vw, 2.4rem);
  line-height: 1.08;
  font-weight: 750;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.gl .gl-editor__more {
  display: flex;
  flex-direction: column;
}

.gl .gl-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gl .gl-field--term {
  margin-top: 0.6rem;
}

.gl .gl-field__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
}

.gl .gl-field__label {
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--gl-ink);
}

.gl .gl-field__tools {
  margin-left: auto;
  display: flex;
  gap: 0.25rem;
}

.gl .gl-field__tools .gl-pill {
  min-height: 2.25rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.875rem;
}

.gl .gl-field__tools .gl-pill--icon {
  width: 2.25rem;
  padding: 0;
}

.gl .gl-field__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--gl-muted);
}
.gl .gl-field__note .gl-i {
  flex: none;
  margin-top: 0.15rem;
}
.gl .gl-field__note:empty {
  display: none;
}

.gl .gl-field__note--warn {
  color: var(--gl-warn-ink);
  font-weight: 600;
}
.gl .gl-field__note--warn .gl-i {
  color: var(--gl-warn);
}

.gl .gl-field__note--good {
  color: var(--gl-ink);
}
.gl .gl-field__note--good .gl-i {
  color: var(--gl-c3);
}

.gl input.gl-field__input {
  width: 100%;
  height: 3.25rem;
  margin: 0;
  padding: 0 1rem;
  border-radius: 0.95rem;
  border: 1px solid var(--gl-line);
  background: var(--gl-surface);
  color: var(--gl-ink);
  font: inherit;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.gl input.gl-field__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--gl-brand-ink) 60%, transparent);
  box-shadow: 0 0 0 4px var(--gl-brand-soft);
}
.gl input.gl-field__input[aria-invalid=true] {
  border-color: color-mix(in srgb, var(--gl-warn) 70%, transparent);
  box-shadow: 0 0 0 4px var(--gl-warn-soft);
}

.gl .gl-editor__box {
  position: relative;
  display: flex;
  flex-direction: column;
}

.gl textarea.gl-editor__text {
  display: block;
  width: 100%;
  height: auto;
  min-height: 8.5rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  border: 1px solid var(--gl-line);
  background: var(--gl-surface);
  color: var(--gl-ink);
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.6;
  resize: vertical;
  field-sizing: content;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.gl textarea.gl-editor__text::placeholder {
  color: var(--gl-muted);
  opacity: 1;
}
.gl textarea.gl-editor__text:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--gl-brand-ink) 60%, transparent);
  box-shadow: 0 0 0 4px var(--gl-brand-soft);
}

.gl .gl-options {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  max-height: 18rem;
  overflow: auto;
  margin: 0.45rem 0 0;
  padding: 0.35rem;
  border-radius: 1rem;
  background: var(--gl-surface);
  border: 1px solid var(--gl-line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 28px -12px rgba(0, 0, 0, 0.25);
  list-style: none;
}
.gl .gl-options > ul {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.gl .gl-editor__box > .gl-options {
  max-height: none;
}

.gl .gl-option {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.7rem;
  cursor: pointer;
}
.gl .gl-option:hover {
  background: var(--gl-raised);
}
.gl .gl-option[aria-selected=true] {
  background: var(--gl-brand-soft);
}
.gl .gl-option[aria-selected=true] .gl-option__text, .gl .gl-option[aria-selected=true] .gl-option__tag {
  color: color-mix(in srgb, var(--gl-muted) 55%, var(--gl-ink));
}

.gl .gl-option__term {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-weight: 650;
  font-size: 0.9375rem;
  color: var(--gl-ink);
}
.gl .gl-option__term b {
  font-weight: 800;
  color: var(--gl-brand-ink);
}
.gl .gl-option__term .gl-i {
  font-size: 0.95rem;
  color: var(--gl-brand-ink);
}

.gl .gl-option__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gl .gl-option__tag {
  flex: none;
  margin-left: auto;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gl-muted);
}

.gl .gl-option__text {
  padding-left: 1rem;
  color: var(--gl-muted);
  font-size: 0.8125rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gl .gl-option--new .gl-option__term {
  color: var(--gl-brand-ink);
}

.gl .gl-options__hint {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: 0.2rem;
  padding: 0.5rem 0.7rem 0.3rem;
  border-top: 1px solid var(--gl-line);
  color: var(--gl-muted);
  font-size: 0.75rem;
}
.gl .gl-options__hint code {
  padding: 0.1rem 0.3rem;
  border-radius: 0.3rem;
  background: var(--gl-sunken);
  color: var(--gl-ink);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.gl .gl-help {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  background: var(--gl-raised);
  font-size: 0.875rem;
  color: var(--gl-muted);
}
.gl .gl-help code {
  font-size: 0.8125rem;
  color: var(--gl-ink);
}
.gl .gl-help i {
  font-style: normal;
  color: var(--gl-ink);
  font-weight: 600;
}
.gl .gl-help .gl-help__tip {
  padding-top: 0.35rem;
  border-top: 1px solid var(--gl-line);
}
.gl .gl-help dt.gl-help__tip {
  color: var(--gl-brand-ink);
}

.gl .gl-problems {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.gl .gl-problems:empty {
  display: none;
}

.gl .gl-problem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.3rem 0.65rem;
  padding: 0.5rem 0.5rem 0.5rem 0.8rem;
  border-radius: 0.9rem;
  background: var(--gl-warn-soft);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--gl-ink);
}
.gl .gl-problem > .gl-i {
  font-size: 1rem;
  color: var(--gl-warn);
}
.gl .gl-problem code {
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  background: color-mix(in srgb, var(--gl-surface) 70%, transparent);
  overflow-wrap: anywhere;
}
.gl .gl-problem .gl-pill {
  min-height: 2rem;
  padding: 0.25rem 0.8rem;
  font-size: 0.8125rem;
  --gl-bg: var(--gl-surface);
  --gl-fg: var(--gl-warn-ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gl-warn) 30%, transparent);
}
.gl .gl-problem.is-current {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gl-warn) 55%, transparent);
}

.gl .gl-problem__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.gl .gl-problem__why {
  color: var(--gl-warn-ink);
  font-weight: 600;
}

.gl .gl-problems__note {
  color: var(--gl-muted);
  font-size: 0.8125rem;
}

.gl .gl-preview {
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1.1rem 1rem;
  border-radius: 1rem;
  background: var(--gl-raised);
  border: 1px solid var(--gl-line);
}
.gl .gl-preview > div {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.gl .gl-preview__label {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gl-muted);
}

.gl .gl-preview__text {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--gl-ink) 88%, var(--gl-muted));
  overflow-wrap: anywhere;
}

.gl .gl-preview__text .gl-ref {
  cursor: default;
}

.gl .gl-preview__empty {
  color: var(--gl-muted);
  font-style: normal;
}

.gl .gl-editor__foot {
  position: sticky;
  bottom: calc(-1 * clamp(12px, 2.5vh, 24px));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: auto calc(-1 * clamp(16px, 4vw, 32px)) calc(-1 * clamp(12px, 2.5vh, 24px));
  padding: 0.85rem clamp(16px, 4vw, 32px) clamp(12px, 2.5vh, 20px);
  border-top: 1px solid var(--gl-line);
  background: var(--gl-sheet-bg);
}

.gl .gl-editor__status {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  color: var(--gl-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}
.gl .gl-editor__status .gl-i {
  color: var(--gl-warn);
}

@media (max-width: 40rem), (hover: none) and (pointer: coarse) {
  .gl .gl-options__keys, .gl .gl-field__tools kbd {
    display: none;
  }
}
body.popup .gl .gl-hero > div, body.popup .gl .gl-entry__main > div, body.popup .gl .gl-sheet, body.sidebar .gl .gl-hero > div, body.sidebar .gl .gl-entry__main > div, body.sidebar .gl .gl-sheet {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  padding-inline: 0;
}

@media (max-width: 64rem) {
  .gl .gl-entry {
    grid-template-columns: minmax(0, 1fr);
  }
  .gl .gl-hero > div {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .gl .gl-stats {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 1rem 0;
  }
  .gl .gl-stats > div {
    border-left: 0;
    padding: 0 1rem 0 0;
  }
}
@media (max-width: 48rem) {
  .gl .gl-pane--list {
    display: block;
  }
  .gl .gl-graph {
    max-width: none;
  }
  .gl .gl-map__canvas {
    mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
  }
  .gl .gl-az {
    position: static;
    flex-direction: row;
    margin: 1rem 0 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .gl .gl-az::-webkit-scrollbar {
    display: none;
  }
  .gl .gl-az__l {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.8rem;
  }
}
@media (max-width: 40rem) {
  body.popup:has(.gl--editor) {
    padding: 0.5rem;
  }
  body.popup:has(.gl--editor) #BS_popup_container {
    width: 100%;
    height: calc(100dvh - 1rem);
    max-height: none;
  }
  body.popup:has(.gl--editor) #BS_main, body.popup:has(.gl--editor) #BS_main > div {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .gl .gl-field--grow {
    flex: 1 1 auto;
  }
  .gl .gl-field--grow > .gl-editor__box {
    flex: 1 1 auto;
  }
  .gl .gl-field--grow textarea.gl-editor__text {
    flex: 1 1 auto;
    resize: none;
  }
  .gl .gl-field__tools .gl-pill span, .gl .gl-field__tools kbd {
    display: none;
  }
  .gl .gl-field__tools .gl-pill {
    width: 2.25rem;
    padding: 0;
  }
  .gl .gl-problem {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .gl .gl-problem .gl-pill {
    grid-column: 2;
    justify-self: start;
  }
  .gl .gl-editor__status {
    display: none;
  }
  .gl .gl-editor__foot .gl-pill {
    flex: 1 1 0;
  }
  .gl .gl-back__q {
    display: none;
  }
  .gl .gl-toolbar__row > .gl-new {
    display: none;
  }
  .gl .gl-hero__head > .gl-new {
    display: inline-flex;
  }
  .gl .gl-card__note {
    left: 0.7rem;
  }
  .gl .gl-group {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 1.1rem;
  }
  .gl .gl-group__letter {
    position: static;
    font-size: 1.75rem;
  }
  .gl .gl-hubs {
    display: none;
  }
  .gl .gl-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
  }
  .gl .gl-stats > div {
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0;
    border: 0;
  }
  .gl .gl-stats dd {
    font-size: 1.25rem;
  }
  .gl .gl-stats dt {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.875rem;
    font-weight: 500;
  }
  .gl .gl-toolbar__row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .gl .gl-search {
    flex: 1 1 calc(100% - 7.5rem);
    min-width: 0;
  }
  .gl .gl-count, .gl .gl-seg button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .gl .gl-active {
    order: 3;
    padding-left: 0.6rem;
    max-width: 100%;
  }
  .gl .gl-active > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .gl .gl-seg button {
    padding: 0.5rem 0.7rem;
  }
  .gl .gl-search__key {
    display: none;
  }
  .gl .gl-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .gl .gl-card__a {
    min-height: 0;
  }
  .gl .gl-card__menu {
    opacity: 1;
  }
  .gl .gl-pager {
    grid-template-columns: minmax(0, 1fr);
  }
  .gl .gl-pager__link--next {
    grid-column: 1;
  }
  .gl .gl-peek {
    display: none;
  }
  .gl .gl-model__name code {
    display: none;
  }
  .gl .gl-hood__n text {
    font-size: 17px;
  }
  .gl .gl-hood__me text {
    font-size: 19px;
  }
}
@media (max-height: 30rem) {
  .gl .gl-toolbar, .gl .gl-az, .gl .gl-group__letter {
    position: static;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gl .gl-card__a:hover {
    transform: none;
  }
  .gl .gl-card.is-return > .gl-card__a {
    animation: none;
  }
  .gl a.gl-back:hover .gl-i {
    transform: none;
  }
  .gl .gl-pill:active {
    transform: none;
  }
}
@media (forced-colors: active) {
  .gl [aria-pressed=true], .gl .gl-panel.is-editing .gl-panel__edit {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    border: 1px solid Highlight;
  }
  .gl .gl-card.is-return > .gl-card__a {
    outline: 2px solid Highlight;
  }
  .gl .gl-panel.is-editing > div {
    outline: 2px solid Highlight;
  }
  .gl .gl-dot {
    forced-color-adjust: none;
  }
  .gl span.gl-az__l, .gl a.gl-az__l.is-empty {
    color: GrayText;
  }
}
#BS_main .gl :is(a, button, [data--baton-controller--onclick]):not(.gl-textlink), #BS_main .gl :is(a, button, [data--baton-controller--onclick]):not(.gl-textlink):hover {
  color: var(--gl-fg, var(--gl-ink));
  background-color: var(--gl-bg, transparent);
}

:where(.gl-term) {
  font-weight: 600;
  text-decoration: underline 1px color-mix(in srgb, currentColor 25%, transparent);
  text-underline-offset: 0.2em;
}

.passed {
  color: #16a34a;
}

.error {
  color: #dc2626;
}

.deeperror {
  color: #991b1b;
  font-weight: 600;
}

.warning {
  color: #d97706;
}

.divider {
  height: 1px;
  background: var(--md-outline-variant, #cbd5e1);
  margin: 1rem 0;
}

header .brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  height: auto;
  border: none;
  background: none;
  border-radius: 0;
  overflow: visible;
  cursor: pointer;
}
header .brand h2 {
  margin: 0;
  white-space: nowrap;
}