/* ==========================================================================
   Datenkatalog BBL – main stylesheet
   Hand-written components following the Oblique naming convention
   (.ob-<component>-<part>, modifiers as .is-* / .ob-<component>--<variant>).
   Palette and reusable widget tokens come from tokens.css.
   Compact layout dimensions follow mockup option 1b.
   ========================================================================== */

/* ---- Fonts (self-hosted Noto Sans, variable weight, SIL OFL 1.1) -------- */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/noto-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/noto-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Noto Sans Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/noto-sans-mono.woff2") format("woff2");
}

/* ---- Reset & base -------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
/* Set directly on every element: inheritance stops at the UA wrapper inside <details>. */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ob-color-bg);
  color: var(--ob-color-text);
  font-family: var(--ob-font-family-body);
  font-size: var(--ob-font-size-md);
  line-height: var(--ob-line-height-body);
  letter-spacing: var(--ob-letter-spacing-wide);
}
a { color: var(--ob-color-link); }
a:hover, a:focus { color: var(--ob-color-link-hover); }
a:active { color: var(--ob-color-link-active); }
.ob-chapter a:visited, .ob-popover a:visited { color: var(--ob-color-link-visited); } /* prose links only; navigation links stay unvisited */
button { font-family: inherit; letter-spacing: inherit; }
input, select, textarea { font: inherit; letter-spacing: inherit; }
input::placeholder { color: var(--ob-color-placeholder); opacity: 1; }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--ob-font-weight-bold); }
h1 { font-size: var(--ob-font-size-2xl); line-height: var(--ob-line-height-xl); letter-spacing: var(--ob-letter-spacing-narrow); }
h2 { font-size: var(--ob-font-size-xl); line-height: var(--ob-line-height-lg); letter-spacing: var(--ob-letter-spacing-narrow); }
h3, h4 { font-size: var(--ob-font-size-lg); line-height: var(--ob-line-height-md); letter-spacing: var(--ob-letter-spacing-normal); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
code { font-family: var(--ob-font-family-code); letter-spacing: 0; }
.ob-mark { padding: 0; background: var(--ob-color-warning-bg); color: inherit; } /* Oblique <mark>: warning-light */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

.ob-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
.ob-skip-link {
  position: absolute; left: var(--ob-space-default); top: -100px;
  padding: var(--ob-space-sm) var(--ob-space-default);
  background: var(--ob-color-bg); color: var(--ob-color-text);
  z-index: var(--ob-z-overlay); border-radius: var(--ob-radius-sm);
}
.ob-skip-link:focus { top: var(--ob-space-sm); box-shadow: var(--ob-focus-ring); }

/* ---- Icons (SVG masks, colour via currentColor) ------------------------- */
.ob-icon {
  display: inline-block; width: var(--ob-icon-size-md); height: var(--ob-icon-size-md); flex: none;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  vertical-align: -0.125em;
}
.ob-icon--xs { width: var(--ob-icon-size-xs); height: var(--ob-icon-size-xs); }
.ob-icon--sm { width: var(--ob-icon-size-sm); height: var(--ob-icon-size-sm); }
.ob-icon--lg { width: var(--ob-icon-size-lg); height: var(--ob-icon-size-lg); }
.ob-icon--xl { width: var(--ob-icon-size-xl); height: var(--ob-icon-size-xl); }
.ob-icon--2xl { width: var(--ob-icon-size-2xl); height: var(--ob-icon-size-2xl); }
.ob-icon--3xl { width: var(--ob-icon-size-3xl); height: var(--ob-icon-size-3xl); }

/* ---- Oblique header with the federal logo lockup ------------------------ */
.ob-header { background: var(--ob-color-bg); position: sticky; top: 0; z-index: var(--ob-z-layout); border-bottom: var(--ob-border-width-xs) solid var(--ob-color-border); }
.prototype-banner { display: flex; align-items: center; justify-content: center; padding: var(--ob-space-sm) var(--ob-space-default); background: var(--ob-color-prototype-banner); color: var(--ob-color-text-inverse); font-size: var(--ob-font-size-sm); line-height: var(--ob-line-height-md); text-align: center; }
.prototype-banner strong { text-transform: uppercase; letter-spacing: var(--ob-letter-spacing-wider); margin-right: var(--ob-space-xs); }
@media (max-width: 767px) {
  .prototype-banner { padding: var(--ob-space-xs) var(--ob-space-md); font-size: var(--ob-font-size-xs); line-height: var(--ob-line-height-xs); }
}
.ob-header-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--ob-space-lg); height: calc(var(--ob-header-identity-height) - var(--ob-border-width-xs)); max-width: var(--ob-content-max-width); margin: 0 auto; padding: 0 var(--ob-space-xl) 0 var(--ob-space-default); }
.ob-logo { display: flex; align-items: center; gap: var(--ob-logo-gap); justify-self: start; min-width: 0; color: var(--ob-color-text); text-decoration: none; } /* the home link ends with the lockup, not the grid column */
.ob-logo:hover, .ob-logo:focus { color: var(--ob-color-text); }
.ob-logo-icon { align-self: center; color: var(--ob-color-text-secondary); }
.ob-logo-title-container { display: flex; flex-direction: column; min-width: 0; }
.ob-logo-acronym, .ob-logo-title, .ob-logo-subtitle { font-size: var(--ob-logo-title-font-size); line-height: var(--ob-logo-title-line-height); }
.ob-logo-acronym, .ob-logo-title { font-weight: var(--ob-font-weight-bold); }
.ob-logo-title { display: none; }
.ob-header-tools { display: flex; flex: none; align-items: center; gap: var(--ob-space-xs); margin-left: auto; padding-left: var(--ob-space-default); }
.ob-avatar { width: var(--ob-avatar-size); height: var(--ob-avatar-size); margin-left: var(--ob-space-sm); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ob-color-avatar-bg); color: var(--ob-color-text-inverse); font-size: var(--ob-font-size-xs); font-weight: var(--ob-font-weight-semibold); }
.ob-header-search { position: relative; }
#header-search-field { position: absolute; right: 0; top: calc(-1 * var(--ob-border-width-xs)); width: min(var(--ob-header-search-width), calc(100vw - var(--ob-space-xl))); padding-right: calc(var(--ob-control-height) + var(--ob-space-xs)); background: var(--ob-color-bg); }
.ob-header-search > button { position: relative; z-index: 1; }
.ob-header-search .ob-toolbar { margin: 0; padding: 0; border: 0; display: block; }
.ob-header-search .ob-search { min-width: 0; }
.ob-header-search .ob-search-input { height: var(--ob-control-height); padding-left: var(--ob-control-height); padding-right: var(--ob-control-height); }
.ob-header-search .ob-search-icon { left: var(--ob-space-sm); }
.ob-header-search .ob-search-clear { width: var(--ob-control-height-sm); height: var(--ob-control-height); }
.ob-header-search .ob-suggest { min-width: 100%; }
.ob-navigation-toggle.ob-button { display: none; }
@media (max-width: 960px) {
  .ob-header-bar { column-gap: 0; }
}

/* Logo-only breakpoints from designsystem/app/tailwind.config.js. The app shell keeps its own breakpoints. */
@media (min-width: 480px) {
  .ob-logo-acronym { display: none; }
  .ob-logo-title { display: block; }
  .ob-logo-title-container { margin-top: calc(-1 * var(--ob-logo-title-trim)); }
}
@media (min-width: 768px) {
  .ob-logo { align-items: flex-start; }
  .ob-logo-title, .ob-logo-subtitle { white-space: nowrap; }
}

/* Popover (help & contact) */
.ob-popover-host { position: relative; }
.ob-popover {
  position: absolute; top: calc(100% + var(--ob-space-md)); right: 0;
  width: var(--ob-popover-width); max-width: calc(100vw - var(--ob-space-xl));
  background: var(--ob-color-bg); display: flex; flex-direction: column;
  max-height: calc(100dvh - var(--ob-header-identity-height) - var(--ob-header-notice-height) - var(--ob-space-xl));
  z-index: var(--ob-z-widget); filter: var(--ob-shadow-popover);
  font-size: var(--ob-font-size-md); font-weight: var(--ob-font-weight-regular); text-align: left;
}
.ob-popover-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--ob-space-default) var(--ob-space-default) var(--ob-space-sm); }
.ob-popover-arrow {
  position: absolute; top: 0; right: var(--ob-space-md); width: var(--ob-space-default); height: var(--ob-space-default);
  border: var(--ob-space-sm) solid var(--ob-color-bg); border-color: var(--ob-color-bg) var(--ob-color-bg) transparent transparent;
  transform: translateY(-50%) rotate(-45deg);
}
.ob-popover p { margin: 0 0 var(--ob-space-default); }
.ob-popover-section + .ob-popover-section { margin-top: var(--ob-space-xl); }
.ob-popover-section h4 { padding-bottom: var(--ob-space-sm); }
.ob-popover-section .ob-popover-lead { margin-bottom: var(--ob-space-sm); }
.ob-popover-list { list-style: none; }
.ob-popover-list--contact { display: flex; flex-direction: column; gap: var(--ob-space-default); margin-bottom: var(--ob-space-sm); }
.ob-popover-link {
  display: inline-flex; align-items: center; gap: var(--ob-space-xs); width: 100%; padding: var(--ob-space-sm) var(--ob-space-default);
  border-bottom: var(--ob-border-width-xs) solid var(--ob-color-border); border-left: var(--ob-border-width-md) solid transparent;
  color: var(--ob-color-text); text-decoration: none; cursor: pointer;
}
.ob-popover-link:hover, .ob-popover-link:focus-visible { background: var(--ob-color-surface); border-left-color: var(--ob-color-accent); color: var(--ob-color-text); }
.ob-inline-link { display: inline; } /* the icon flows with the text; its non-breaking space keeps it on the last line of a wrapped link */

/* Main navigation */
.ob-navigation-bar { border-top: var(--ob-border-width-xs) solid var(--ob-color-border); }
.ob-main-nav { display: flex; height: var(--ob-touch-target); max-width: var(--ob-content-max-width); margin: 0 auto; padding: 0 var(--ob-space-default); }

.ob-main-nav-item {
  display: inline-flex; align-items: center; padding: var(--ob-space-md) var(--ob-space-default);
  border: 0; border-bottom: var(--ob-border-width-md) solid transparent; background: var(--ob-color-bg);
  font-size: var(--ob-font-size-md); line-height: var(--ob-line-height-body); letter-spacing: var(--ob-letter-spacing-wider);
  color: var(--ob-color-text); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.ob-main-nav-item:hover { background: var(--ob-color-surface); border-bottom-color: var(--ob-color-accent); color: var(--ob-color-text); }
.ob-main-nav-item:active { background: var(--ob-color-surface-hover); }
.ob-main-nav-item[aria-current="page"] { border-bottom-color: var(--ob-color-accent); }

/* ---- Main content -------------------------------------------------------- */
.ob-main { flex: 1 0 auto; display: flex; width: 100%; max-width: var(--ob-content-max-width); margin: 0 auto; padding: 0; background: var(--ob-color-bg); }

/* Breadcrumb */
.ob-breadcrumb { margin-bottom: var(--ob-space-default); min-height: var(--ob-line-height-md); }
.ob-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; font-size: var(--ob-font-size-sm); line-height: var(--ob-line-height-md); letter-spacing: var(--ob-letter-spacing-wide); }
.ob-breadcrumb li { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.ob-breadcrumb a {
  display: inline-block; max-width: var(--ob-breadcrumb-item-max-width); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none; cursor: pointer;
}
.ob-breadcrumb a:hover { text-decoration: underline; }
.ob-breadcrumb .ob-icon { margin: 0 var(--ob-space-xs); color: var(--ob-color-text-tertiary); }
.ob-breadcrumb [aria-current="page"] {
  display: inline-block; max-width: var(--ob-breadcrumb-current-max-width); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ob-color-text);
}

/* ---- Toolbar (search, group, actions, view toggle) ---------------------- */
.ob-toolbar {
  display: flex; align-items: center; gap: var(--ob-space-sm); flex-wrap: wrap;
  padding-bottom: var(--ob-space-md); margin-bottom: var(--ob-space-lg);
  border-bottom: var(--ob-border-width-xs) solid var(--ob-color-border);
}
.ob-toolbar-spacer { flex: 1; }

.ob-search { position: relative; flex: 0 1 var(--ob-search-max-width); min-width: var(--ob-search-min-width); }
.ob-search-control { position: relative; min-width: 0; }
.ob-search-icon { position: absolute; left: calc((var(--ob-touch-target) - var(--ob-icon-size-lg)) / 2); top: 50%; transform: translateY(-50%); color: var(--ob-color-text); pointer-events: none; }
.ob-search-input {
  width: 100%; height: var(--ob-control-height-lg); padding: 0 var(--ob-touch-target);
  -webkit-appearance: none; appearance: none;
}
.ob-search-input, .ob-search-input::placeholder { text-overflow: ellipsis; } /* an overlong translated placeholder ends with an ellipsis, not a cut glyph */
.ob-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ob-search-input:focus-visible { box-shadow: var(--ob-focus-ring); }
.ob-search-clear {
  position: absolute; right: var(--ob-space-xs); top: 50%; transform: translateY(-50%);
}

/* Suggestions listbox */
.ob-suggest {
  position: absolute; top: calc(100% + var(--ob-space-xs)); left: 0; right: 0;
  background: var(--ob-color-bg); border: var(--ob-border-width-xs) solid var(--ob-color-border);
  box-shadow: var(--ob-shadow-menu); z-index: var(--ob-z-widget);
  max-height: max(0px, min(var(--ob-suggest-max-height), calc(var(--ob-suggest-available-height, 100dvh) - var(--ob-space-sm))));
  overflow-y: auto; overscroll-behavior: contain; padding: var(--ob-space-xs) 0;
}
.ob-suggest-group-title {
  display: flex; align-items: center; gap: var(--ob-space-sm); padding: var(--ob-space-sm) var(--ob-space-default) var(--ob-space-xs);
  font-size: var(--ob-font-size-xs); font-weight: var(--ob-font-weight-medium); letter-spacing: var(--ob-letter-spacing-caps);
  text-transform: uppercase; color: var(--ob-color-text-tertiary);
}
.ob-suggest-option {
  display: flex; align-items: center;
  padding: var(--ob-space-sm) var(--ob-space-default); border-left: var(--ob-border-width-md) solid transparent; background: var(--ob-color-bg); cursor: pointer;
}
.ob-suggest-option > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-suggest-example { flex-direction: column; align-items: flex-start; gap: var(--ob-space-2xs); }
.ob-suggest-example > span:first-child { white-space: normal; overflow-wrap: anywhere; }
.ob-suggest-meta { font-size: var(--ob-font-size-xs); line-height: var(--ob-line-height-xs); color: var(--ob-color-text-secondary); }
.ob-suggest-option:hover, .ob-suggest-option[aria-selected="true"] { background: var(--ob-color-surface); border-left-color: var(--ob-color-accent); }
.ob-suggest-all {
  display: flex; align-items: center; gap: var(--ob-space-sm); margin-top: var(--ob-space-xs);
  padding: var(--ob-space-md) var(--ob-space-default); border-top: var(--ob-border-width-xs) solid var(--ob-color-border);
  border-left: var(--ob-border-width-md) solid transparent; color: var(--ob-color-link); text-decoration: underline; cursor: pointer;
}
.ob-suggest-all:hover, .ob-suggest-all[aria-selected="true"] { background: var(--ob-color-surface); border-left-color: var(--ob-color-accent); }

/* Home search: same combobox, with a visible submit action and room for discovery. */
/* Share the page gutter; the hero needs only the standard gap to the summary tiles. */
.ob-page-search { position: relative; z-index: 1; }
.ob-home-search { margin-bottom: var(--ob-space-lg); }
.ob-home-search h1 { margin: 0 0 var(--ob-space-sm); }
.ob-home-search > p { margin: 0 0 var(--ob-space-default); }
.ob-hero-search-form { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--ob-space-md); max-width: var(--ob-hero-search-max-width); scroll-margin-top: calc(var(--ob-header-height) + var(--ob-space-default)); }
.ob-hero-search-form .ob-search { position: static; min-width: 0; }
.ob-hero-search-form .ob-search-input { height: var(--ob-hero-control-height); font-size: var(--ob-font-size-input); }
.ob-hero-search-form .ob-search-clear { width: var(--ob-touch-target); height: var(--ob-touch-target); right: var(--ob-space-2xs); }
.ob-hero-search-submit { height: var(--ob-hero-control-height); padding-inline: var(--ob-space-lg); font-size: var(--ob-font-size-input); }
.ob-hero-search-form .ob-suggest { --ob-suggest-max-height: var(--ob-hero-suggest-max-height); }
.ob-hero-search-form .ob-suggest-option, .ob-hero-search-form .ob-suggest-all { min-height: var(--ob-touch-target); }
.ob-search-options { max-width: var(--ob-hero-search-max-width); margin-top: var(--ob-space-sm); }
.ob-search-scope { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--ob-space-sm); color: var(--ob-color-text-secondary); }
.ob-search-scope [aria-expanded="true"] .ob-icon { transform: rotate(180deg); }
.ob-search-options-panel { margin-top: var(--ob-space-sm); }
.ob-search-option-group { min-width: 0; padding: 0; margin: 0; border: 0; }
.ob-search-option-group + .ob-search-option-group { margin-top: var(--ob-space-lg); }
.ob-search-option-group > legend { padding: 0; margin-bottom: var(--ob-space-sm); font-weight: var(--ob-font-weight-semibold); }
.ob-search-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ob-space-lg); }
.ob-search-options-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ob-space-sm) var(--ob-space-lg); margin-top: var(--ob-space-md); }
.ob-search-results-options { margin-bottom: var(--ob-space-lg); }
.ob-search-answer { margin-bottom: var(--ob-space-lg); overflow-wrap: anywhere; }
.ob-search-answer-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-space-sm); margin-bottom: var(--ob-space-sm); }
.ob-search-answer .ob-search-answer-head h2 { margin-bottom: 0; }
.ob-search-answer-note, .ob-search-answer-type { color: var(--ob-color-text-secondary); font-size: var(--ob-font-size-sm); line-height: var(--ob-line-height-sm); }
/* The panel keeps the table width; its prose keeps the reading measure. */
.ob-search-answer-note, .ob-search-answer-excerpt, .ob-search-answer-sources { max-width: var(--ob-prose-max-width); }
.ob-search-answer-excerpt { margin-block: var(--ob-space-default); line-height: var(--ob-line-height-lg); }
.ob-search-answer-sources { padding-left: var(--ob-space-lg); margin-block: var(--ob-space-sm); }
.ob-search-answer-sources li { padding-block: var(--ob-space-xs); }
.ob-search-answer-type { margin-inline: var(--ob-space-sm); }
@container workspace (width < 600px) {
  .ob-hero-search-form { grid-template-columns: minmax(0, 1fr); gap: var(--ob-space-sm); }
  .ob-search-choice-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Dropdown menus */
.ob-menu-host { position: relative; }
.ob-menu {
  position: absolute; top: calc(100% + var(--ob-menu-offset)); right: 0; min-width: var(--ob-menu-min-width);
  background: var(--ob-color-bg); border: var(--ob-border-width-xs) solid var(--ob-color-border);
  box-shadow: var(--ob-shadow-menu); z-index: var(--ob-z-widget); padding: var(--ob-space-xs) 0;
}
.ob-menu--wide { min-width: var(--ob-menu-min-width-wide); }
.ob-menu--narrow { min-width: var(--ob-menu-min-width-narrow); }
.ob-menu--select { position: fixed; inset: auto; margin: 0; min-width: 0; width: max-content; max-width: calc(100vw - var(--ob-space-default)); overflow: auto; overscroll-behavior: contain; }
.ob-menu--select .ob-menu-item { overflow-wrap: anywhere; }
.ob-menu-note { margin: var(--ob-space-xs) 0 0; padding: var(--ob-space-sm) var(--ob-space-default) var(--ob-space-xs); border-top: var(--ob-border-width-xs) solid var(--ob-color-border); color: var(--ob-color-text-secondary); font-size: var(--ob-font-size-sm); line-height: var(--ob-line-height-sm); }
.ob-menu-item {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--ob-space-md);
  padding: var(--ob-space-sm) var(--ob-space-default); border: 0; border-left: var(--ob-border-width-md) solid transparent;
  background: var(--ob-color-bg); text-align: left; font-size: var(--ob-font-size-md); line-height: var(--ob-line-height-md); letter-spacing: var(--ob-letter-spacing-wider);
  color: var(--ob-color-text); cursor: pointer;
}
.ob-menu-item:hover:not(:disabled) { background: var(--ob-color-surface); border-left-color: var(--ob-color-accent); }
.ob-menu-item:active:not(:disabled) { background: var(--ob-color-surface-hover); }
.ob-menu-item.is-active { background: var(--ob-color-surface); border-left-color: var(--ob-color-accent); }
.ob-menu-item:disabled { color: var(--ob-color-text-disabled); cursor: default; }

/* ---- Sidebar and normal document flow ----------------------------------- */
.ob-workspace { display: grid; grid-template-columns: var(--ob-sidebar-width) minmax(0, 1fr); width: 100%; }
.ob-workspace.is-collapsed { grid-template-columns: var(--ob-sidebar-rail-width) minmax(0, 1fr); }
.ob-sidebar-slot { position: relative; grid-column: 1; grid-row: 1; min-width: 0; border-right: var(--ob-border-width-xs) solid var(--ob-color-border); contain: inline-size; }
.ob-sidebar-resizer { position: absolute; top: 0; bottom: 0; right: calc(var(--ob-sidebar-resize-hit-width) / -2); width: var(--ob-sidebar-resize-hit-width); z-index: var(--ob-z-controls); cursor: col-resize; touch-action: none; outline: none; }
/* The center line is the focus indicator. A ring around the wider hit area
   adds two extra lines when the browser marks the first pointer focus visible. */
.ob-sidebar-resizer:focus-visible { box-shadow: none; }
/* Sticky within the full-height divider, so long pages keep the grip in view.
   Its background masks the center line between the two short grip strokes. */
.ob-sidebar-resizer::before {
  content: ''; display: block; position: sticky; z-index: 1;
  top: calc((100dvh + var(--ob-header-height) - var(--ob-sidebar-resize-grip-height)) / 2);
  width: var(--ob-sidebar-resize-grip-width); height: var(--ob-sidebar-resize-grip-height); margin-inline: auto;
  border-inline: var(--ob-border-width-xs) solid var(--ob-color-graphic); background: var(--ob-color-bg);
}
.ob-sidebar-resizer:hover::before, .ob-sidebar-resizer:focus-visible::before, .ob-sidebar-resizing .ob-sidebar-resizer::before { border-color: var(--ob-color-border-input); }
.ob-sidebar-resizer::after { content: ''; position: absolute; inset: 0; width: var(--ob-border-width-sm); margin: 0 auto; background: transparent; }
.ob-sidebar-resizer:hover::after { background: var(--ob-color-border-strong); }
.ob-sidebar-resizer:focus-visible::after, .ob-sidebar-resizing .ob-sidebar-resizer::after { background: var(--ob-color-border-input); }
@media (forced-colors: active) {
  .ob-sidebar-resizer::before { border-color: ButtonText; background: Canvas; forced-color-adjust: none; }
  .ob-sidebar-resizer:hover::before, .ob-sidebar-resizer:focus-visible::before, .ob-sidebar-resizing .ob-sidebar-resizer::before { border-color: Highlight; }
  .ob-sidebar-resizer:hover::after, .ob-sidebar-resizer:focus-visible::after, .ob-sidebar-resizing .ob-sidebar-resizer::after { background: Highlight; forced-color-adjust: none; }
}
.ob-sidebar-resizing, .ob-sidebar-resizing * { cursor: col-resize !important; user-select: none !important; }
/* The panel also clears the footer band, so the last screen of a long page does not push it under the header. */
.ob-tree-panel { position: sticky; top: var(--ob-header-height); z-index: var(--ob-z-controls); width: 100%; max-height: calc(100dvh - var(--ob-header-height) - var(--ob-footer-height)); background: var(--ob-color-bg); padding-top: var(--ob-space-xs); display: flex; flex-direction: column; }
.ob-drawer-body { display: contents; } /* desktop: nav, heading and tree stay direct flex children; the drawer turns it into its scroll region */
.ob-sidebar-heading { display: flex; flex: none; height: var(--ob-sidebar-heading-height); align-items: center; justify-content: space-between; gap: var(--ob-space-sm); padding: 0 var(--ob-space-xs) 0 var(--ob-space-default); }
.ob-sidebar-heading h2 { min-width: 0; margin: 0; font-size: var(--ob-font-size-xs); line-height: var(--ob-line-height-xs); letter-spacing: var(--ob-letter-spacing-caps); text-transform: uppercase; color: var(--ob-color-text-tertiary); font-weight: var(--ob-font-weight-semibold); }
.ob-sidebar-tree { overflow-y: auto; min-height: 0; overscroll-behavior: auto; padding-bottom: var(--ob-space-md); }
.ob-tree { list-style: none; }
.ob-tree-row { display: grid; grid-template-columns: var(--ob-tree-toggle-width) minmax(0, 1fr); align-items: stretch; padding-left: calc((var(--level, 1) - 1) * var(--ob-tree-indent) + var(--ob-tree-padding-inline) - var(--ob-border-width-md)); border-left: var(--ob-border-width-md) solid transparent; }
.ob-tree-row.is-ancestor { background: var(--ob-color-ancestor); font-weight: var(--ob-font-weight-semibold); }
.ob-tree-row.is-active { background: var(--ob-color-surface); border-left-color: var(--ob-color-accent); font-weight: var(--ob-font-weight-bold); }
.ob-tree-row:hover { background: var(--ob-color-surface); }
.ob-tree-row--chapter { grid-template-columns: minmax(0, 1fr); padding-left: calc(var(--ob-tree-padding-inline) - var(--ob-border-width-md) + var(--ob-tree-toggle-width)); }
.ob-tree-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--ob-tree-toggle-width); min-height: var(--ob-control-height); padding: 0; border: 0; color: var(--ob-color-text-tertiary); background: transparent; cursor: pointer; }
.ob-tree-toggle .ob-icon { width: var(--ob-icon-size-xs); height: var(--ob-icon-size-xs); }
.ob-tree-toggle:hover { background: var(--ob-color-surface-hover); }
.ob-tree-spacer { width: var(--ob-tree-toggle-width); }
.ob-tree-link { display: flex; align-items: center; gap: var(--ob-space-sm); min-height: var(--ob-control-height); min-width: 0; padding: var(--ob-space-xs) var(--ob-space-md) var(--ob-space-xs) 0; border: 0; background: transparent; color: var(--ob-color-text); text-decoration: none; text-align: left; font: inherit; line-height: var(--ob-line-height-md); cursor: pointer; }
.ob-tree-link:hover, .ob-tree-link:focus { color: var(--ob-color-text); }
button.ob-tree-link { width: 100%; }
.ob-tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-tree-count { font-size: var(--ob-font-size-xs); font-weight: var(--ob-font-weight-regular); color: var(--ob-color-text-tertiary); }
.ob-tree-divider { border-top: var(--ob-border-width-xs) solid var(--ob-color-border); margin: var(--ob-space-xs) var(--ob-space-md) var(--ob-space-xs) var(--ob-space-default); }
.ob-icon-rail { display: none; }
.ob-tree-panel.is-collapsed > .ob-drawer-body > .ob-sidebar-heading { padding: 0; justify-content: center; }
.ob-tree-panel.is-collapsed > .ob-drawer-body > .ob-sidebar-heading h2, .ob-tree-panel.is-collapsed > .ob-drawer-body > .ob-sidebar-tree { display: none; }
.ob-tree-panel.is-collapsed .ob-icon-rail { display: flex; flex-direction: column; }
.ob-rail-item { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--ob-touch-target); padding: 0; border: 0; border-left: var(--ob-border-width-md) solid transparent; background: transparent; color: var(--ob-color-text-secondary); cursor: pointer; }
.ob-rail-item:hover, .ob-rail-item.is-active, .ob-rail-item[aria-expanded=true] { background: var(--ob-color-surface); color: var(--ob-color-text); }
.ob-rail-item.is-active { border-left-color: var(--ob-color-accent); }
.ob-rail-item:focus-visible { box-shadow: var(--ob-focus-ring-inset); }
.ob-sidebar-flyout { position: absolute; top: var(--ob-sidebar-heading-height); left: 100%; width: var(--ob-sidebar-flyout-width); max-height: calc(100dvh - var(--ob-header-height) - var(--ob-sidebar-heading-height) - var(--ob-footer-height)); overflow: auto; z-index: var(--ob-z-controls); border: var(--ob-border-width-xs) solid var(--ob-color-border); background: var(--ob-color-bg); box-shadow: var(--ob-shadow-lg); }
.ob-content { grid-column: 2; grid-row: 1; min-width: 0; padding: var(--ob-space-sm) var(--ob-content-padding-x) var(--ob-space-3xl); container: workspace / inline-size; } /* the page end reserves the floating back-to-top footprint above the footer */
.ob-workspace.ob-workspace--standalone { display: block; }
.ob-workspace--standalone .ob-content { width: 100%; max-width: calc(var(--ob-api-max-width) + 2 * var(--ob-content-padding-x)); margin: 0 auto; }
.ob-sidebar-slot--global { display: none; }
.ob-content h2 { margin-bottom: var(--ob-space-sm); }
.ob-section + .ob-section { margin-top: var(--ob-space-lg); }
.ob-drawer-header, .ob-drawer-nav, .ob-drawer-tools, .ob-drawer-backdrop { display: none; }

/* ---- Tables -------------------------------------------------------------- */
.ob-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.ob-table { width: 100%; border-collapse: collapse; font-size: var(--ob-font-size-md); line-height: var(--ob-line-height-md); letter-spacing: var(--ob-letter-spacing-table); }
.ob-table--fields { table-layout: fixed; }
.ob-table--fields td { overflow-wrap: anywhere; }
.ob-table th, .ob-table td { padding: var(--ob-table-row-padding) var(--ob-space-md); height: var(--ob-table-row-min-height); text-align: left; vertical-align: top; }
/* Sortable headers hand their padding to the button, which fills the cell's declared height: the whole cell is the target and every header row measures the same. */
.ob-table th:has(> .ob-table-sort) { padding: 0; }
.ob-table thead tr { background: var(--ob-color-surface); border-bottom: var(--ob-border-width-xs) solid var(--ob-color-border-strong); }
.ob-table th { font-size: var(--ob-font-size-xs); line-height: var(--ob-line-height-tight); font-weight: var(--ob-font-weight-semibold); letter-spacing: var(--ob-letter-spacing-table); white-space: nowrap; }
/* Short metadata columns keep their intrinsic width; prose takes the remaining space. */
.ob-table th.ob-col-compact { width: 1%; }
.ob-table .ob-cell-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.ob-cell-numeric .ob-cell-value { white-space: nowrap; }
.ob-table-sort {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--ob-space-xs); width: 100%; height: 100%;
  padding: var(--ob-table-row-padding) var(--ob-space-md); border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; text-transform: inherit; cursor: pointer;
}
.ob-table-sort-label { min-width: max-content; flex-shrink: 0; white-space: nowrap; hyphens: none; }
.ob-cell-numeric .ob-table-sort { flex-direction: row-reverse; text-align: right; }
.ob-table-sort-icon { color: var(--ob-color-text-tertiary); opacity: 0; transition: opacity var(--ob-duration-micro) var(--ob-easing-standard), transform var(--ob-duration-micro) var(--ob-easing-standard); }
.ob-table-sort:hover .ob-table-sort-label { text-decoration: underline; text-underline-offset: 0.18em; }
.ob-table-sort:hover .ob-table-sort-icon, .ob-table-sort:focus-visible .ob-table-sort-icon { opacity: 1; transform: rotate(180deg); }
.ob-table th[aria-sort="ascending"] .ob-table-sort-icon { opacity: 1; transform: rotate(180deg); }
.ob-table th[aria-sort="descending"] .ob-table-sort-icon { opacity: 1; transform: none; }
.ob-table tbody tr { border-bottom: var(--ob-border-width-xs) solid var(--ob-color-border); }
.ob-table tbody tr:nth-child(even) { background: var(--ob-color-bg); }
.ob-table tbody tr:hover { background: var(--ob-color-surface-hover); }
.ob-table tbody tr.is-clickable { cursor: pointer; }
.ob-table a { cursor: pointer; }
.ob-table .ob-table-entity-link { color: inherit; text-decoration: none; }
.ob-table .ob-table-entity-link:hover, .ob-table .ob-table-entity-link:focus { color: inherit; text-decoration: none; }
.ob-table .ob-cell-muted { color: var(--ob-color-text-secondary); }
.ob-table .ob-cell-nowrap { white-space: nowrap; }
.ob-table .ob-cell-strong { color: var(--ob-color-text); }
.ob-cell-value { display: block; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.ob-table-region { min-width: 0; }
/* A container narrower than the table's minimum scrolls it sideways instead of compressing its columns:
   edge shadows show the hidden side(s), the hint names the gesture until the table was scrolled, and the
   scroller is a focusable region (app.js) so keyboard users can scroll it too. */
.ob-table-scroll { position: relative; }
.ob-table-scroll::before, .ob-table-scroll::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; width: var(--ob-table-scroll-shadow-width); pointer-events: none; opacity: 0; transition: opacity var(--ob-duration-micro) var(--ob-easing-standard); }
.ob-table-scroll::before { left: 0; background: linear-gradient(to right, var(--ob-color-scroll-shadow), transparent); }
.ob-table-scroll::after { right: 0; background: linear-gradient(to left, var(--ob-color-scroll-shadow), transparent); }
.ob-table-scroll.has-more-start::before, .ob-table-scroll.has-more-end::after { opacity: 1; }
.ob-table-wrap:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--ob-focus-width) var(--ob-color-focus); }
.ob-table-scroll-hint { display: flex; align-items: center; gap: var(--ob-space-xs); margin: 0 0 var(--ob-space-sm); color: var(--ob-color-text-secondary); font-size: var(--ob-font-size-sm); line-height: var(--ob-line-height-sm); }
.ob-table-scroll-hint .ob-icon { color: var(--ob-color-text-tertiary); }
.ob-search-sort .ob-select { flex: 1 1 auto; min-width: 0; }

/* Pager */
.ob-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-space-md); margin-top: var(--ob-space-default); color: var(--ob-color-text-secondary); font-size: var(--ob-font-size-sm); line-height: var(--ob-line-height-sm); }
.ob-pager-current {
  display: inline-flex; align-items: center; justify-content: center; width: var(--ob-control-height); height: var(--ob-control-height);
  border: var(--ob-border-width-xs) solid var(--ob-color-text); border-radius: var(--ob-radius-sm); color: var(--ob-color-text); font-size: var(--ob-font-size-md);
}
.ob-pager .ob-button--pager:first-of-type { margin-left: var(--ob-space-sm); }
.ob-page-size { display: flex; align-items: center; gap: var(--ob-space-sm); }
.ob-pager--no-range .ob-page-size { margin-left: auto; }
.ob-pager-range { margin-left: auto; font-size: var(--ob-font-size-sm); line-height: var(--ob-line-height-sm); }
.ob-pager--top { margin: 0 0 var(--ob-space-md); }
.ob-pager--top .ob-pager-range { margin-right: auto; margin-left: 0; }

/* ---- Filled KPI cards and collection tiles (F2) -------------------------- */
.ob-kpi-grid, .ob-home-sections { max-width: var(--ob-home-max-width); }
.ob-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ob-space-default); margin-bottom: var(--ob-space-lg); }
.ob-kpi { gap: var(--ob-space-sm); padding: var(--ob-space-md) var(--ob-space-default); }
.ob-kpi-head { display: flex; align-items: center; gap: var(--ob-space-sm); }
.ob-kpi-head .ob-icon { width: var(--ob-icon-size-md); height: var(--ob-icon-size-md); }
.ob-kpi-head h3 { min-width: 0; font-size: var(--ob-font-size-md); line-height: var(--ob-line-height-md); font-weight: var(--ob-font-weight-semibold); overflow-wrap: anywhere; }
.ob-kpi-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ob-space-xs); margin-top: auto; font-size: var(--ob-font-size-xs); line-height: var(--ob-line-height-xl); color: var(--ob-color-text-tertiary); }
.ob-kpi-count strong { font-size: var(--ob-font-size-2xl); line-height: var(--ob-line-height-xl); color: var(--ob-color-text); }
.ob-kpi:hover .ob-kpi-count, .ob-kpi:focus-visible .ob-kpi-count { color: var(--ob-color-text-secondary); }
.ob-home-sections { display: grid; gap: var(--ob-space-lg); }
.ob-home-sections > .ob-section { min-width: 0; margin: 0; }
.ob-groups { display: flex; flex-direction: column; gap: var(--ob-space-lg); }
.ob-group { width: 100%; max-width: 100%; min-width: 0; }
.ob-group-body { background: var(--ob-color-bg); }
.ob-group-header { display: flex; align-items: center; gap: var(--ob-space-sm); width: 100%; min-height: var(--ob-control-height); padding: var(--ob-space-xs); border: 0; background: var(--ob-color-bg); color: var(--ob-color-text); cursor: pointer; text-align: left; font-size: var(--ob-font-size-md); line-height: var(--ob-line-height-md); }
.ob-group-header:hover { background: var(--ob-color-surface); }
.ob-group-title { font-weight: var(--ob-font-weight-semibold); }
.ob-group-header .ob-icon, .ob-group-count { color: var(--ob-color-text-tertiary); font-size: var(--ob-font-size-xs); }
/* Every group has the same available width; auto-fill keeps short rows on that shared grid. */
.ob-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--ob-tile-min-width), 100%), 1fr)); gap: var(--ob-tile-gap); }
.ob-tile { gap: var(--ob-space-sm); min-height: var(--ob-tile-min-height); padding: var(--ob-space-md) var(--ob-space-default); }
.ob-tile-heading { display: flex; flex-direction: column; gap: var(--ob-space-xs); }
.ob-tile.is-compact { min-height: 0; }
.ob-tile-name { color: inherit; text-decoration: none; font-weight: var(--ob-font-weight-semibold); font-size: var(--ob-font-size-body-lg); line-height: var(--ob-line-height-md); }
.ob-tile-name:hover { text-decoration: underline; }
.ob-tile-facts { display: grid; gap: var(--ob-space-sm); margin: 0; font-size: var(--ob-font-size-sm); line-height: var(--ob-line-height-sm); }
.ob-tile-facts > div { display: grid; grid-template-columns: minmax(0, var(--ob-card-label-width)) minmax(0, 1fr); gap: var(--ob-space-sm); overflow-wrap: anywhere; }
.ob-tile-facts dt { color: var(--ob-color-text-secondary); }
.ob-tile-facts dd { margin: 0; }
.ob-cell-summary > .ob-cell-value { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--ob-table-summary-lines); overflow: hidden; }
.ob-field-links { overflow-wrap: anywhere; }
.ob-field-required { color: var(--ob-color-text-secondary); font-size: var(--ob-font-size-xs); line-height: var(--ob-line-height-xs); }
.ob-tile-footer { font-size: var(--ob-font-size-xs); line-height: var(--ob-line-height-xs); color: var(--ob-color-text-tertiary); }
.ob-tile-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--ob-card-summary-lines); overflow: hidden; text-wrap: pretty; font-size: var(--ob-font-size-md); line-height: var(--ob-line-height-md); color: var(--ob-color-text-secondary); }
.ob-tile-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ob-space-sm); margin-top: auto; padding-top: var(--ob-space-xs); }
/* The action pair stays one group; the negative block margin keeps the h1 line box
   as the row height, so the title baseline does not move with 44px touch controls. */
.ob-page-actions { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: var(--ob-space-sm); margin-block: calc((var(--ob-line-height-xl) - var(--ob-control-height)) / 2); }

/* ---- Compact profiles --------------------------------------------------- */
.ob-view-header { padding-bottom: var(--ob-space-md); }
.ob-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ob-space-default); min-width: 0; }
.ob-title-row h1 { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; hyphens: auto; }

.ob-prose { max-width: var(--ob-prose-max-width); text-wrap: pretty; }
.ob-view-description, .ob-detail-description, .ob-chapter { font-size: var(--ob-font-size-body-lg); line-height: var(--ob-line-height-lg); }
.ob-view-description, .ob-detail-description { margin-top: var(--ob-space-sm); color: var(--ob-color-text-secondary); }
.ob-detail-description { white-space: pre-line; }
.ob-actions-menu { flex: none; }
.ob-collection-controls, .ob-detail-controls { display: flex; align-items: flex-end; gap: var(--ob-space-default); margin-bottom: var(--ob-space-lg); border-bottom: var(--ob-border-width-xs) solid var(--ob-color-border); }
.ob-tabs-frame { position: relative; min-width: 0; overflow: hidden; }
.ob-collection-tabs-frame, .ob-detail-tabs-frame { flex: 1; margin-bottom: calc(-1 * var(--ob-border-width-xs)); }
.ob-tabs { display: flex; overflow-x: auto; overflow-y: hidden; scroll-padding-inline: var(--ob-space-lg); scrollbar-width: none; } /* a focused tab scrolls clear of the end fade */
.ob-tabs::-webkit-scrollbar { display: none; }
.ob-tab { display: inline-flex; align-items: center; justify-content: center; gap: var(--ob-space-sm); min-height: var(--ob-tab-min-height); padding: var(--ob-space-sm) var(--ob-space-md); border: 0; border-bottom: var(--ob-border-width-sm) solid transparent; background: transparent; color: var(--ob-color-text); font-size: var(--ob-font-size-md); line-height: var(--ob-line-height-md); letter-spacing: var(--ob-letter-spacing-wide); cursor: pointer; white-space: nowrap; }
.ob-tab:hover { background: var(--ob-color-surface); }
.ob-tab[aria-selected=true] { border-bottom-color: var(--ob-color-accent); }
.ob-local-actions { display: flex; align-items: center; gap: var(--ob-space-sm); flex: none; margin-bottom: var(--ob-space-xs); }
.ob-local-menus { display: flex; align-items: center; gap: var(--ob-space-sm); flex: none; } /* the view and grouping menus wrap as one pair */
.ob-collection-search { position: relative; width: var(--ob-collection-search-width); min-width: 0; }
.ob-collection-status { margin: 0 0 var(--ob-space-md); font-size: var(--ob-font-size-sm); line-height: var(--ob-line-height-sm); color: var(--ob-color-text-secondary); }
@container workspace (max-width: 880px) {
  .ob-collection-controls, .ob-detail-controls { flex-wrap: wrap; gap: var(--ob-space-sm); }
  .ob-collection-tabs-frame, .ob-detail-tabs-frame { flex-basis: 100%; }
  .ob-local-actions { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
  .ob-collection-search { flex: 1 1 var(--ob-collection-search-width); max-width: 100%; }
  .ob-local-menus { margin-left: auto; }
  /* When actions wrap, the divider belongs to the tab row alone. */
  :is(.ob-collection-controls, .ob-detail-controls):has(.ob-local-actions) { border-bottom: 0; }
  :is(.ob-collection-controls, .ob-detail-controls):has(.ob-local-actions) .ob-tabs-frame { margin-bottom: 0; border-bottom: var(--ob-border-width-xs) solid var(--ob-color-border); }
  :is(.ob-collection-controls, .ob-detail-controls):has(.ob-local-actions) .ob-tabs { margin-bottom: calc(-1 * var(--ob-border-width-xs)); }
  /* Preserve the single-row action inset (4 px margin + 1 px divider).
     The wrapper-to-content gap remains 24 px; visible actions stay 29 px above it. */
  .ob-local-actions { margin-bottom: calc(var(--ob-space-xs) + var(--ob-border-width-xs)); }
}
/* Narrow columns give the search its own row; the menus then share the next row with equal widths. */
@container workspace (max-width: 680px) {
  .ob-collection-controls .ob-local-menus { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; margin-left: 0; }
  .ob-collection-controls .ob-local-menus > * { flex: 1 1 0; min-width: max-content; } /* equal halves; a menu that no longer fits beside the other takes its own row */
  .ob-collection-controls .ob-local-menus .ob-button { width: 100%; }
}
@container workspace (width >= 600px) and (width <= 880px) {
  .ob-detail-controls .ob-local-actions { justify-content: flex-end; }
  .ob-detail-controls .ob-collection-search { flex: 0 1 var(--ob-collection-search-width); }
}
/* Phone columns: detail actions wrap to full rows when the pair no longer fits. */
@container workspace (width < 600px) {
  .ob-detail-controls .ob-local-menus { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; margin-left: 0; }
  .ob-detail-controls .ob-local-menus > * { flex: 1 1 0; min-width: max-content; }
  .ob-detail-controls .ob-local-menus .ob-button { width: 100%; }
  .ob-search-sort { flex-wrap: wrap; flex-basis: 100%; margin-left: 0; }
  .ob-search-sort .ob-select { flex-basis: 100%; }
}
@media (any-pointer: coarse), (max-width: 960px) {
  .ob-collection-search .ob-search-clear { width: var(--ob-touch-target); height: var(--ob-touch-target); right: 0; }
}
.ob-detail-sections { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "responsibility" "facts"; gap: var(--ob-space-xl); }
.ob-detail-sections > *, .ob-detail-facts > section { min-width: 0; }
.ob-detail-section-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-space-sm); width: 100%; min-height: var(--ob-touch-target); padding: var(--ob-space-xs) var(--ob-space-md) var(--ob-space-xs) 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ob-detail-section-toggle:hover { background: var(--ob-color-surface); }
.ob-detail-section-toggle > .ob-icon { flex-shrink: 0; }
.ob-detail-section-toggle[aria-expanded="true"] > .ob-icon { transform: rotate(180deg); }
.ob-system-facts { margin-top: var(--ob-space-xl); min-width: 0; }
.ob-access-options { margin-top: var(--ob-space-xl); min-width: 0; }
.ob-access-options > h2 { margin-bottom: var(--ob-space-default); }
.ob-access-options-list { border-top: var(--ob-border-width-xs) solid var(--ob-color-border); }
.ob-access-option { border-bottom: var(--ob-border-width-xs) solid var(--ob-color-border); }
.ob-access-option h3 { margin: 0; }
.ob-access-option .ob-detail-section-toggle { padding: var(--ob-space-md); }
.ob-access-option-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ob-access-option-format { max-width: 40%; font-size: var(--ob-font-size-sm); font-weight: var(--ob-font-weight-regular); color: var(--ob-color-text-secondary); overflow-wrap: anywhere; }
.ob-access-option .ob-facts { margin: 0 var(--ob-space-md) var(--ob-space-lg); }
.ob-access-option dd { white-space: pre-line; overflow-wrap: anywhere; }
@container workspace (width < 600px) {
  .ob-access-option .ob-facts { grid-template-columns: minmax(0, 1fr); }
  .ob-access-option .ob-facts dt { min-height: 0; padding-bottom: 0; border-bottom: 0; }
  .ob-access-option .ob-facts dd { padding-top: var(--ob-space-xs); }
}
.ob-detail-facts { grid-area: facts; display: grid; gap: inherit; align-content: start; }
.ob-responsibility { grid-area: responsibility; }
.ob-facts { display: grid; grid-template-columns: var(--ob-facts-label-width) minmax(0, 1fr); gap: 0; margin: 0; font-size: var(--ob-font-size-md); line-height: var(--ob-line-height-md); }
.ob-facts dt, .ob-facts dd { margin: 0; padding: var(--ob-facts-row-padding) 0; min-height: var(--ob-facts-row-min-height); border-bottom: var(--ob-border-width-xs) solid var(--ob-color-border); hyphens: auto; }
.ob-facts dt { padding-right: var(--ob-space-md); color: var(--ob-color-text-secondary); overflow-wrap: break-word; } /* labels break at words or hyphenation points */
.ob-facts dd { overflow-wrap: anywhere; } /* identifiers and URLs may break anywhere */
.ob-facts dd .ob-icon { width: var(--ob-icon-size-xs); height: var(--ob-icon-size-xs); }
.ob-fact-links { display: grid; gap: var(--ob-space-sm); margin: 0; padding: 0; list-style: none; }
.ob-fact-links > li { min-width: 0; }
.ob-comment { white-space: pre-line; }

.ob-context-note { max-width: var(--ob-prose-max-width); margin-bottom: var(--ob-space-default); padding: var(--ob-space-sm) var(--ob-space-md); background: var(--ob-color-surface); color: var(--ob-color-text-secondary); font-size: var(--ob-font-size-sm); line-height: var(--ob-line-height-sm); }
/* A panel is a keyboard stop only when it has no focusable content (ui.tabPanel); its ring stays inside the column and clear of the sticky header. */
[role="tabpanel"] { scroll-margin-top: calc(var(--ob-header-height) + var(--ob-space-default)); }
[role="tabpanel"]:focus-visible { box-shadow: var(--ob-focus-ring-inset); }
.ob-detail-rows { scroll-margin-top: calc(var(--ob-header-height) + var(--ob-space-default)); }
/* Sticky column headers need an unclipped ancestor; a table that scrolls sideways gives them up for the scroller. */
.ob-detail-rows .ob-table-region:not(.is-scrollable) .ob-table-wrap { overflow: visible; }
.ob-detail-rows th { position: sticky; top: var(--ob-header-height); z-index: 1; background: var(--ob-color-surface); box-shadow: 0 var(--ob-border-width-xs) var(--ob-color-border-strong); }
.ob-detail-rows .ob-table-region.is-scrollable th { position: static; }
.ob-detail-rows td { overflow-wrap: anywhere; }

/* Relationships default to the diagram; the table is also used for print. */
.ob-relations-list { display: block; }
.ob-relations-diagram { display: none; }
.ob-relations-view.is-diagram .ob-relations-list { display: none; }
.ob-relations-view.is-diagram .ob-relations-diagram { display: block; }

/* ---- Search results -------------------------------------------------------- */
#search-results-panel { max-width: var(--ob-home-max-width); } /* answer, controls and result table share the home table width */
.ob-search-result-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-space-md) var(--ob-space-lg); margin-bottom: var(--ob-space-md); }
.ob-search-result-controls .ob-pager-range { margin: 0; }
.ob-search-sort { display: flex; align-items: center; gap: var(--ob-space-sm); margin-left: auto; }

/* ---- Manual --------------------------------------------------------------- */
.ob-manual-content { min-width: 0; max-width: var(--ob-manual-max-width); }
.ob-manual-chapters { display: flex; flex-direction: column; gap: var(--ob-space-lg); margin-top: var(--ob-space-md); }
/* Bound the chapter itself so text, tables and media share one reading width. */
.ob-chapter { display: flex; flex-direction: column; gap: var(--ob-space-default); min-width: 0; max-width: var(--ob-manual-prose-max-width); scroll-margin-top: calc(var(--ob-header-height) + var(--ob-space-default)); overflow-wrap: anywhere; hyphens: auto; }
.ob-chapter h2 { margin-bottom: 0; }
/* The last chapter fills the viewport below the header offset, so its heading can reach the shared scroll position. */
.ob-chapter:last-child { min-height: calc(100dvh - var(--ob-header-height) - var(--ob-space-default) - var(--ob-space-3xl) - var(--ob-footer-height)); }

.ob-chapter h3 { margin-bottom: var(--ob-space-xs); }
.ob-chapter p { text-wrap: pretty; }
.ob-chapter a { overflow-wrap: anywhere; }
.ob-chapter p + p, .ob-chapter p + ul, .ob-chapter p + ol, .ob-chapter p + .ob-table-wrap { margin-top: var(--ob-space-sm); }
.ob-manual-video { width: 100%; margin: 0; }
.ob-video-player { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--ob-color-footer-bg); }
.ob-manual-video figcaption { margin-top: var(--ob-space-sm); color: var(--ob-color-text-secondary); font-size: var(--ob-font-size-sm); line-height: var(--ob-line-height-sm); }
.ob-list { padding-left: var(--ob-space-lg); display: flex; flex-direction: column; gap: var(--ob-space-xs); }
.ob-list--loose { gap: var(--ob-space-sm); }
.ob-chapter .ob-table-wrap { margin-top: var(--ob-space-md); }

/* ---- API page --------------------------------------------------------------- */
.ob-api { max-width: var(--ob-api-max-width); }
.ob-swagger { min-width: 0; }
.ob-swagger > .ob-loading { min-height: 50dvh; }
.ob-swagger .swagger-ui { color: var(--ob-color-text); font-family: var(--ob-font-family-body); }
.ob-swagger .swagger-ui .wrapper { max-width: none; padding: 0; }
.ob-swagger .swagger-ui .info { margin: 0 0 var(--ob-space-xl); }
.ob-swagger .swagger-ui .info .base-url { display: none; }
.ob-swagger .swagger-ui .info .title,
.ob-swagger .swagger-ui .info p,
.ob-swagger .swagger-ui .info li,
.ob-swagger .swagger-ui .info table,
.ob-swagger .swagger-ui .opblock-tag,
.ob-swagger .swagger-ui .opblock .opblock-summary-description,
.ob-swagger .swagger-ui .parameter__name,
.ob-swagger .swagger-ui .response-col_status,
.ob-swagger .swagger-ui .response-col_description,
.ob-swagger .swagger-ui .model-title,
.ob-swagger .swagger-ui .model { font-family: var(--ob-font-family-body); color: var(--ob-color-text); }
/* Vendor typography follows the app's two families: body text for labels, headings, tabs, buttons and schema titles; code only for paths, types, constraints and examples. */
.ob-swagger .swagger-ui :is(h4, h5, p, li, th, td, label, button, input, select, textarea, .btn, .opblock-summary-method, .tablinks, .json-schema-2020-12__title, .json-schema-2020-12-expand-deep-button, .response-control-media-type__title, .response-control-media-type__accept-message) { font-family: var(--ob-font-family-body); }
.ob-swagger .swagger-ui :is(.opblock-summary-path, .parameter__type, .parameter__in, .json-schema-2020-12__attribute, .json-schema-2020-12__constraint, code, pre, pre.microlight) { font-family: var(--ob-font-family-code); }
.ob-swagger .swagger-ui .opblock .opblock-section-header h4 { font-family: var(--ob-font-family-body); } /* Parameters/Responses headings carry the vendor's most specific family */
/* The version badges wrap together as a pair beside the title and use the .ob-chip metrics. */
.ob-swagger .swagger-ui .info .title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-space-sm); font-size: var(--ob-font-size-2xl); line-height: var(--ob-line-height-xl); }
.ob-swagger .swagger-ui .info .title > span { display: flex; flex-wrap: wrap; gap: var(--ob-space-sm); }
.ob-swagger .swagger-ui .info .title small { position: static; margin: 0; padding: var(--ob-chip-padding-block) var(--ob-space-sm); border-radius: var(--ob-radius-pill); font-size: var(--ob-font-size-xs); font-weight: var(--ob-font-weight-medium); line-height: var(--ob-line-height-xs); letter-spacing: var(--ob-letter-spacing-wide); white-space: nowrap; }
.ob-swagger .swagger-ui .info .title small pre { font: inherit; white-space: nowrap; }
/* Reading measure of the API and operation descriptions (the wrappers' paragraphs share the 14px ch unit); tables and operation rows keep the full width. */
.ob-swagger .swagger-ui :is(.info .description, .opblock-description-wrapper p, .opblock-external-docs-wrapper p) { max-width: var(--ob-prose-max-width); margin-inline: 0; } /* the vendor's auto margins would centre the capped paragraph */
.ob-swagger .swagger-ui .scheme-container { margin: 0 0 var(--ob-space-xl); padding: var(--ob-space-default); border: var(--ob-border-width-xs) solid var(--ob-color-border); background: var(--ob-color-surface); box-shadow: none; }
.ob-swagger .swagger-ui .opblock-tag { padding: var(--ob-space-md) 0; border-bottom-color: var(--ob-color-border-strong); font-size: var(--ob-font-size-xl); }
.ob-swagger .swagger-ui .opblock { border-radius: 0; box-shadow: none; }
.ob-swagger .swagger-ui .opblock .opblock-summary { min-height: var(--ob-touch-target); }
.ob-swagger .swagger-ui .opblock .opblock-summary-path { min-width: 0; max-width: none; overflow-wrap: anywhere; }
.ob-swagger .swagger-ui .opblock-description-wrapper,
.ob-swagger .swagger-ui .opblock-external-docs-wrapper,
.ob-swagger .swagger-ui .opblock-title_normal { padding: var(--ob-space-default); }
.ob-swagger .swagger-ui select { max-width: 100%; }
.ob-swagger .swagger-ui .btn { border-radius: var(--ob-radius-sm); box-shadow: none; }
/* Filter, server select, Authorize and the icon controls follow the shared 32/44px control height and 1px control border. */
.ob-swagger .swagger-ui :is(.operation-filter-input, .servers select, .btn.authorize) { height: var(--ob-control-height); min-height: var(--ob-control-height); padding-block: 0; border-width: var(--ob-border-width-xs); box-shadow: none; }
.ob-swagger .swagger-ui .btn.authorize { align-items: center; }
.ob-swagger .swagger-ui .btn.authorize span { padding-block: 0; }
.ob-swagger .swagger-ui :is(.expand-operation, .authorization__btn, .opblock-control-arrow) { min-width: var(--ob-control-height); min-height: var(--ob-control-height); }
.ob-swagger .swagger-ui .models { border-radius: 0; border-color: var(--ob-color-border-strong); }
/* Scope vendor palette corrections to the API. Keep the pinned vendor files intact. */
.ob-swagger .swagger-ui .info .title small { background: var(--ob-color-neutral); }
.ob-swagger .swagger-ui .info .title small.version-stamp { background: var(--ob-color-success); }
.ob-swagger .swagger-ui .info a { color: var(--ob-color-link); }
.ob-swagger .swagger-ui .info a:visited { color: var(--ob-color-link-visited); }
.ob-swagger .swagger-ui .info a:hover { color: var(--ob-color-link-hover); }
.ob-swagger .swagger-ui .btn.authorize { color: var(--ob-color-success); border-color: var(--ob-color-success); }
.ob-swagger .swagger-ui .btn.authorize svg { fill: currentColor; }
.ob-swagger .swagger-ui :is(input[type=text], input[type=password], input[type=search], textarea, select):not(:disabled) { border-color: var(--ob-color-border-input); }
.ob-swagger .swagger-ui .authorization__btn svg { fill: var(--ob-color-text-tertiary); opacity: 1; }
.ob-swagger .swagger-ui .opblock.opblock-get .opblock-summary-method { background: var(--ob-color-link); color: var(--ob-color-text-inverse); }
.ob-swagger .swagger-ui .opblock:is(.opblock-post, .opblock-patch) .opblock-summary-method { background: var(--ob-color-success); color: var(--ob-color-text-inverse); }
.ob-swagger .swagger-ui .opblock.opblock-delete .opblock-summary-method { background: var(--ob-color-error); color: var(--ob-color-text-inverse); }
.ob-swagger .swagger-ui .parameter__in { color: var(--ob-color-text-tertiary); }
.ob-swagger .swagger-ui .parameter__name.required span,
.ob-swagger .swagger-ui .parameter__name.required::after,
.ob-swagger .swagger-ui .json-schema-2020-12-property--required > .json-schema-2020-12:first-of-type > .json-schema-2020-12-head .json-schema-2020-12__title::after { color: var(--ob-color-error); }
.ob-swagger .swagger-ui .json-schema-2020-12-expand-deep-button { color: var(--ob-color-text-secondary); }
.ob-swagger .swagger-ui .json-schema-2020-12__constraint--string { background-color: var(--ob-color-warning); }
/* Supporting labels stay at the 12px minimum. */
.ob-swagger .swagger-ui .parameter__name.required::after,
.ob-swagger .swagger-ui :is(.response-control-media-type__title, .response-control-media-type__accept-message, .response-control-examples__title) { font-size: var(--ob-font-size-xs); line-height: var(--ob-line-height-xs); }
/* Long schema identifiers wrap inside the Schemas list; the chevron stays beside the wrapped title. */
.ob-swagger .swagger-ui .json-schema-2020-12__title { min-width: 0; overflow-wrap: anywhere; }
.ob-swagger .swagger-ui :is(.json-schema-2020-12-accordion__children, .json-schema-2020-12-head) { min-width: 0; max-width: 100%; }
.ob-swagger .swagger-ui .json-schema-2020-12-accordion { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; text-align: start; }
.ob-swagger .swagger-ui .json-schema-2020-12-accordion__icon { flex: none; }
/* The highlighter supplies an inline background; retain its syntax colors. */
.ob-swagger .swagger-ui .highlight-code > .microlight { background: var(--ob-color-code-bg) !important; }
.ob-swagger .swagger-ui :focus-visible { outline: var(--ob-focus-width) solid var(--ob-color-focus); outline-offset: var(--ob-border-width-sm); }
/* The vendor draws its own outline after a pointer click; the app shows a ring only for keyboard focus. */
.ob-swagger .swagger-ui :is(.opblock-summary-control, .models-control, .model-box-control):focus:not(:focus-visible) { outline: none; }
/* Keep inherently tabular API content inside its own scroll area. */
.ob-swagger .swagger-ui .table-container, .ob-swagger .swagger-ui .responses-inner { overflow-x: auto; overscroll-behavior-x: contain; }
.ob-swagger .swagger-ui :is(.table-container, .responses-inner) > table { min-width: var(--ob-api-table-min-width); }
.ob-swagger .swagger-ui .dialog-ux { top: var(--ob-visual-viewport-top); bottom: auto; height: var(--ob-visual-viewport-height); }
.ob-swagger .swagger-ui .dialog-ux .modal-ux {
  min-width: 0; width: calc(100% - var(--ob-space-xl));
  max-height: calc(var(--ob-visual-viewport-height) - var(--ob-space-xl)); overflow-y: auto; overscroll-behavior: contain;
}
.ob-swagger .swagger-ui .dialog-ux .modal-ux-content { max-height: none; overflow: visible; padding: var(--ob-space-default); }
.ob-swagger .swagger-ui .dialog-ux .modal-ux-header h3 { min-width: 0; overflow-wrap: anywhere; }
.ob-swagger .swagger-ui .auth-container input { min-width: 0; max-width: 100%; }

/* ---- Footer at the end of the document ---------------------------------- */
.ob-footer { position: relative; color: var(--ob-color-text-inverse); background: var(--ob-color-footer-bg); font-size: var(--ob-font-size-xs); line-height: var(--ob-line-height-md); }
.ob-footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 var(--ob-space-lg); max-width: var(--ob-content-max-width); margin: 0 auto; padding: var(--ob-space-xs) var(--ob-space-xl) var(--ob-space-xs) var(--ob-space-default); }
.ob-footer-links { display: flex; flex-wrap: wrap; gap: var(--ob-space-sm) var(--ob-space-lg); list-style: none; }
.ob-footer a { display: inline-flex; align-items: center; min-height: var(--ob-line-height-md); color: var(--ob-color-text-inverse); text-decoration: none; }
.ob-footer a:hover { text-decoration: underline; }
.ob-footer-end { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0 var(--ob-space-lg); min-width: 0; margin-left: auto; }
.ob-footer-source { flex: none; }
.ob-footer-meta { color: var(--ob-color-border-strong); }

/* ---- Back to top ------------------------------------------------------------ */
/* Both fixed widgets sit 24px inside the workspace edge at every width and rest on the footer band at the page end. */
.ob-back-to-top, .ob-toast-region { position: fixed; right: max(var(--ob-space-lg), calc((100% - var(--ob-content-max-width)) / 2 + var(--ob-space-lg))); bottom: var(--ob-footer-height); }
.ob-back-to-top {
  z-index: var(--ob-z-widget);
  height: var(--ob-touch-target); padding: 0 var(--ob-space-default); background: var(--ob-color-bg); box-shadow: var(--ob-shadow-default);
}
.ob-back-to-top .ob-icon-arrow_right { transform: rotate(-90deg); }
.ob-back-to-top:focus-visible { box-shadow: var(--ob-focus-ring), var(--ob-shadow-default); }
.ob-back-to-top:not([hidden]) + .ob-toast-region {
  bottom: calc(var(--ob-footer-height) + var(--ob-touch-target) + var(--ob-space-sm));
}

/* ---- Toast (status messages) ------------------------------------------------ */
.ob-toast-region { display: flex; flex-direction: column; gap: var(--ob-space-sm); z-index: var(--ob-z-toast); max-width: min(var(--ob-toast-max-width), calc(100vw - 2 * var(--ob-space-lg))); }
.ob-alert {
  display: flex; align-items: flex-start; gap: var(--ob-space-md); padding: var(--ob-space-md) var(--ob-space-default);
  border-left: var(--ob-border-width-lg) solid var(--ob-color-info); background: var(--ob-color-info-bg); color: var(--ob-color-text);
  box-shadow: var(--ob-shadow-default); font-size: var(--ob-font-size-md); letter-spacing: var(--ob-letter-spacing-wider);
}
.ob-alert--success { border-left-color: var(--ob-color-success); background: var(--ob-color-success-bg); }
.ob-alert--warning { border-left-color: var(--ob-color-warning); background: var(--ob-color-warning-bg); }
.ob-alert-close {
  margin: calc(-1 * var(--ob-space-xs)) calc(-1 * var(--ob-space-sm)) calc(-1 * var(--ob-space-xs)) auto;
}
.ob-alert-close:hover:not(:disabled) { background: var(--ob-color-bg); color: var(--ob-color-text); }

/* ---- Responsive workspace: width follows content, targets follow input ---- */
/* Five summary cards on six tracks: three above two, both rows full width. */
@container workspace (max-width: 1100px) {
  .ob-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ob-kpi { grid-column: span 2; }
  .ob-kpi:nth-last-child(-n + 2) { grid-column: span 3; }
}
@container workspace (max-width: 880px) {
  .ob-detail-sections { gap: var(--ob-space-lg); }
}
@container workspace (width < 600px) {
  .ob-kpi-grid { grid-template-columns: 1fr; gap: var(--ob-space-sm); }
  .ob-kpi, .ob-kpi:nth-last-child(-n + 2) { grid-column: auto; }
  .ob-kpi { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--ob-space-md); min-height: var(--ob-kpi-compact-min-height); padding: var(--ob-space-sm) var(--ob-space-md); }
  .ob-kpi-head { min-width: 0; }
  .ob-kpi-count { flex: none; margin: 0; }
  .ob-kpi-count strong { font-size: var(--ob-kpi-count-font-size-small); }
  .ob-kpi-unit { display: none; }
}
@media (min-width: 1601px) {
  body { background: var(--ob-color-surface); }
  .ob-main { border-left: var(--ob-border-width-xs) solid var(--ob-color-border); border-right: var(--ob-border-width-xs) solid var(--ob-color-border); }
}
@media (max-width: 1200px) {
  /* Content reaches the viewport edge here, so the floating button keeps only its icon; the label needs the free surface beyond the workspace cap. */
  .ob-back-to-top { width: var(--ob-touch-target); padding: 0; }
  .ob-back-to-top span:last-child { display: none; }
}
@media (max-width: 1200px) and (min-width: 961px) {
  .ob-kpi-grid { gap: var(--ob-space-md); }
  .ob-kpi { padding: var(--ob-space-md); }
  .ob-kpi-head { align-items: flex-start; }
  .ob-detail-sections { gap: var(--ob-space-lg); }
}
@media (max-width: 960px) {
  .ob-detail-sections { gap: var(--ob-space-lg); }
  html.ob-navigation-open, html.ob-navigation-open body { overflow: hidden; }
  .ob-header-bar { padding: 0 var(--ob-space-sm) 0 var(--ob-space-default); }
  .ob-navigation-bar, #header-tools > #help-host, #header-tools > #language-host, .ob-avatar { display: none; }
  .ob-header-tools { padding-left: var(--ob-space-sm); }
  .ob-navigation-toggle.ob-button { display: inline-flex; }
  #header-search-field { position: fixed; top: var(--ob-header-height); left: 0; right: 0; width: 100%; padding: var(--ob-space-sm) var(--ob-space-default); border-bottom: var(--ob-border-width-xs) solid var(--ob-color-border); box-shadow: var(--ob-shadow-md); }
  .ob-workspace, .ob-workspace.is-collapsed { display: block; }
  .ob-sidebar-slot { border: 0; }
  .ob-sidebar-resizer { display: none; }
  .ob-sidebar-slot--global { display: block; }
  .ob-sidebar-slot--global .ob-drawer-tools { margin-top: auto; }
  .ob-tree-panel { display: none; }
  .ob-tree-panel.is-mobile-open { display: flex; position: fixed; inset: 0 auto 0 0; z-index: calc(var(--ob-z-overlay) + 1); width: min(var(--ob-drawer-width), calc(100vw - var(--ob-space-3xl))); height: 100dvh; max-height: none; padding: 0; box-shadow: var(--ob-shadow-lg); }
  .ob-drawer-header { display: flex; flex: none; align-items: center; justify-content: space-between; height: var(--ob-drawer-header-height); padding: 0 var(--ob-space-sm) 0 var(--ob-space-default); border-bottom: var(--ob-border-width-xs) solid var(--ob-color-border); }
  .ob-drawer-header h2 { font-size: var(--ob-font-size-md); }
  .ob-drawer-header .ob-button { width: var(--ob-touch-target); height: var(--ob-touch-target); }
  /* Only the drawer header and tools stay pinned; navigation and tree scroll as one region. */
  .ob-tree-panel.is-mobile-open .ob-drawer-body { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .ob-drawer-nav { display: flex; flex: none; padding: 0 var(--ob-space-xs); border-bottom: var(--ob-border-width-xs) solid var(--ob-color-border); }
  .ob-drawer-nav .ob-main-nav-item { padding: var(--ob-space-sm) var(--ob-space-md); min-height: var(--ob-touch-target); } /* 44px including the 3px marker, label at x=16 like the drawer title */
  /* The active navigation tab already names the section; the tree needs no overline in the drawer. */
  .ob-tree-panel.is-mobile-open > .ob-drawer-body > .ob-sidebar-heading, .ob-tree-panel.is-mobile-open .ob-icon-rail, .ob-sidebar-flyout { display: none; }
  .ob-tree-panel.is-mobile-open > .ob-drawer-body > .ob-sidebar-tree { display: block; flex: none; overflow: visible; padding-top: var(--ob-space-sm); } /* also after a collapsed desktop sidebar */
  .ob-tree-panel.is-mobile-open { --ob-tree-indent: var(--ob-space-md); } /* narrower steps keep level-3 labels readable in the 272–320px drawer */
  .ob-tree-toggle, .ob-tree-link { min-height: var(--ob-touch-target); }
  .ob-tree-row { grid-template-columns: var(--ob-touch-target) minmax(0, 1fr); }
  .ob-tree-row--chapter { grid-template-columns: minmax(0, 1fr); padding-left: var(--ob-space-default); }
  .ob-tree-toggle { width: var(--ob-touch-target); }
  .ob-drawer-tools { display: flex; flex: none; align-items: center; gap: var(--ob-space-sm); padding: var(--ob-space-sm) var(--ob-space-default) max(var(--ob-space-sm), env(safe-area-inset-bottom)); border-top: var(--ob-border-width-xs) solid var(--ob-color-border); }
  .ob-drawer-tools .ob-button { min-height: var(--ob-touch-target); }
  .ob-drawer-tools .ob-menu { top: auto; bottom: calc(100% + var(--ob-menu-offset)); left: 0; right: auto; max-height: calc(100dvh - var(--ob-touch-target) - var(--ob-space-lg) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
  .ob-drawer-tools .ob-popover { position: fixed; top: calc(var(--ob-drawer-header-height) + var(--ob-touch-target) + var(--ob-space-sm)); bottom: calc(var(--ob-touch-target) + var(--ob-space-lg) + env(safe-area-inset-bottom)); left: var(--ob-space-sm); width: min(calc(var(--ob-drawer-width) - var(--ob-space-default)), calc(100vw - var(--ob-space-3xl) - 2 * var(--ob-space-sm))); }
  .ob-drawer-tools .ob-popover-arrow { display: none; }
  .ob-drawer-backdrop { display: block; position: fixed; inset: 0; z-index: var(--ob-z-overlay); width: 100%; border: 0; background: var(--ob-color-backdrop); cursor: pointer; }
  .ob-tabs-frame::after { content: ''; position: absolute; top: 0; right: 0; bottom: var(--ob-border-width-xs); width: var(--ob-space-lg); pointer-events: none; background: linear-gradient(to right, transparent, var(--ob-color-bg)); }
  .ob-tab { min-height: var(--ob-touch-target); }
  .ob-kpi-grid { gap: var(--ob-space-sm); }
}
@media (max-width: 600px) {
  .ob-breadcrumb { margin-bottom: var(--ob-space-sm); }
  /* The title keeps the full width; Drucken and the export menu move to their own right-aligned row only when they do not fit beside it. */
  .ob-title-row { flex-wrap: wrap; gap: var(--ob-space-md) var(--ob-space-sm); }
  .ob-page-actions { margin-left: auto; }
  .ob-export-label, .ob-export-chevron { display: none; }
  .ob-export-icon { width: var(--ob-icon-size-xl); height: var(--ob-icon-size-xl); }
  .ob-actions-menu > .ob-button { width: var(--ob-touch-target); height: var(--ob-touch-target); padding: 0; } /* icon-only, same outline as Drucken */
  .ob-view-header { padding-bottom: var(--ob-space-md); }
  .ob-pager-range { flex-basis: 100%; margin: 0; }
  .ob-footer-links { gap: var(--ob-space-sm) var(--ob-space-default); }
  .ob-footer-end { flex-basis: 100%; justify-content: flex-start; margin-left: 0; gap: var(--ob-space-sm) var(--ob-space-default); } /* both rows share the left edge */
  .ob-back-to-top, .ob-toast-region { right: var(--ob-space-default); }
  .ob-toast-region { max-width: calc(100vw - var(--ob-space-xl)); }
  .ob-swagger .swagger-ui .opblock .opblock-summary { flex-wrap: wrap; }
  .ob-swagger .swagger-ui .opblock .opblock-summary-path-description-wrapper { min-width: 0; }
  .ob-swagger .swagger-ui .opblock-tag { font-size: var(--ob-font-size-xl); }
}
@media (any-pointer: coarse) {
  .ob-tree-toggle, .ob-tree-link, .ob-tab { min-height: var(--ob-touch-target); }
  .ob-tree-toggle { min-width: var(--ob-touch-target); }
  .ob-tree-row { grid-template-columns: var(--ob-touch-target) minmax(0, 1fr); }
  .ob-tree-row--chapter { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 430px) {
  .ob-tab { padding-inline: var(--ob-space-sm); } /* four profile tabs need the width; the count stays part of the label */
}
@media (max-width: 360px) {
  .ob-tree-panel.is-mobile-open { width: calc(100vw - var(--ob-space-2xl)); } /* a 40px backdrop strip still closes the drawer */
}
@media (any-pointer: coarse), (max-width: 960px) {
  .ob-suggest-option, .ob-suggest-all, .ob-popover-link, .ob-table-sort { min-height: var(--ob-touch-target); }
  .ob-breadcrumb ol { row-gap: var(--ob-space-xs); }
  .ob-breadcrumb a { padding-block: var(--ob-space-2xs); } /* 24px rows with 4px separation when the trail wraps */
  /* Footer links become 44px targets in a 60px band whose right corner is reserved for the docked back-to-top button. */
  .ob-footer-inner { padding-block: var(--ob-space-sm); padding-right: calc(var(--ob-touch-target) + var(--ob-space-lg)); }
  .ob-footer a { min-height: var(--ob-touch-target); }
  .ob-back-to-top, .ob-toast-region { bottom: var(--ob-space-default); }
  .ob-back-to-top:not([hidden]) + .ob-toast-region { bottom: calc(var(--ob-space-default) + var(--ob-touch-target) + var(--ob-space-sm)); }
  .ob-swagger .swagger-ui :is(button, input:not([type=checkbox]), select, textarea) { min-height: var(--ob-touch-target); }
  .ob-swagger .swagger-ui button { min-width: var(--ob-touch-target); }
  .ob-swagger .swagger-ui :is(input, select, textarea) { font-size: var(--ob-font-size-input); }
}
@media (max-height: 500px) {
  .ob-detail-rows th { position: static; }
}

/* ---- Print ------------------------------------------------------------------- */
@media print {
  .ob-detail-sections .ob-facts[hidden], .ob-system-facts .ob-facts[hidden] { display: grid !important; }
  #ob-access-options-content[hidden] { display: block !important; }
  .ob-access-options .ob-facts[hidden] { display: grid !important; }
  .ob-detail-section-toggle { min-height: 0; padding: 0; background: transparent; }
  .ob-detail-section-toggle > .ob-icon { display: none; }
  .ob-page-search { display: none; }
  #search-options-host, .ob-search-answer > button { display: none; }
  .ob-collection-controls, .ob-detail-controls { display: none; }
  body { background: var(--ob-white); color: var(--ob-black); font-size: 11pt; }
  .ob-header-tools, .ob-main-nav, .ob-breadcrumb, .ob-toolbar, .ob-tree-panel, .ob-footer, .ob-back-to-top, .ob-toast-region,
  .ob-tabs-frame, .ob-pager, .ob-skip-link, .ob-mobile-navigation, .ob-drawer-backdrop, .ob-page-actions, .ob-actions-menu { display: none !important; }
  .ob-main { max-width: none; padding: 0; }
  .ob-workspace, .ob-workspace.is-collapsed { display: block; }
  .ob-sidebar-slot { display: none; }
  .ob-header { position: static; }
  .prototype-banner { background: none; color: var(--ob-black); }
  .ob-detail-rows th { position: static; }
  .ob-content { width: 100%; padding: var(--ob-space-default) 0; }
  .ob-table-scroll-hint { display: none !important; }
  .ob-table-scroll::before, .ob-table-scroll::after { content: none; }
  .ob-table-wrap { overflow: visible; }
  .ob-table { min-width: 0 !important; } /* the page, not a scroller, decides the printed width */
  .ob-relations-list, .ob-relations-view.is-diagram .ob-relations-list { display: block; }
  .ob-relations-diagram, .ob-relations-view.is-diagram .ob-relations-diagram { display: none; }
  .ob-table thead tr { background: var(--ob-secondary-100) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ob-table tbody tr:nth-child(even) { background: var(--ob-secondary-50) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ob-chip, .ob-badge { border: var(--ob-border-width-xs) solid var(--ob-black); color: var(--ob-black) !important; background: none !important; }
  .ob-group, .ob-kpi, .ob-tile { break-inside: avoid; }
  .ob-graph { height: auto; overflow: visible; }
  .ob-groups--table .ob-group { width: 100%; }
  a { color: var(--ob-black); text-decoration: none; }
  .ob-print-only { display: block !important; }
}
.ob-print-only { display: none; }

.ob-load-error-detail { margin-top: var(--ob-space-sm); color: var(--ob-color-text-secondary); }

/* System colors keep mask icons, focus and selection visible in high contrast.
   These overrides follow contextual styles; shadows are suppressed by the OS. */
@media (forced-colors: active) {
  .ob-icon, .ob-disclosure > summary::before { forced-color-adjust: none; background-color: currentColor; }
  .ob-table-scroll::before, .ob-table-scroll::after { content: none; } /* the hint text and the focusable region remain */
  .ob-card, .ob-badge, .ob-chip { outline: var(--ob-border-width-xs) solid CanvasText; outline-offset: -1px; }
  .ob-tree-panel.is-mobile-open { border-right: var(--ob-border-width-xs) solid CanvasText; }
  .ob-footer { border-top: var(--ob-border-width-xs) solid CanvasText; }
  :focus-visible, .ob-swagger .swagger-ui :focus-visible { outline: var(--ob-focus-width) solid Highlight; outline-offset: var(--ob-border-width-sm); box-shadow: none; }
  .ob-main-nav-item:focus-visible, .ob-tab:focus-visible, .ob-tree-link:focus-visible, .ob-tree-toggle:focus-visible, .ob-table-sort:focus-visible, .ob-suggest-option:focus-visible, .ob-menu-item:focus-visible, .ob-rail-item:focus-visible, .ob-disclosure > summary:focus-visible { outline-offset: calc(-1 * var(--ob-focus-width)); }
  .ob-sidebar-resizer:focus-visible { outline: none; } /* its single line remains the indicator */
  .ob-main-nav-item, .ob-tab { border-bottom-color: Canvas; }
  .ob-main-nav-item[aria-current="page"], .ob-tab[aria-selected=true] { border-bottom-color: Highlight; }
  .ob-tree-row, .ob-rail-item, .ob-menu-item { border-left-color: Canvas; }
  .ob-tree-row.is-active, .ob-rail-item.is-active, .ob-menu-item.is-active, .ob-menu-item:hover:not(:disabled) { border-left-color: Highlight; }
}