/* API Hub. Built on the Raya design system like Gaam and Zaman: colours, radii and shadows come from the rayatheme
   app's --ds-* tokens, with Nextcloud's own variables as fallback, so light/dark/high-contrast work without it too.
   Spacing is a 4px grid, controls are 32px, tree rows 32px, list rows 44px, the page header 56px.

   Nextcloud core styles every <button>, <input> and <select> (hover/focus rules with specificity up to 0,4,1), so the
   few state rules that must win carry !important. Inputs get their font from rayatheme (Latin digits): never set
   font-family on them here. */

/* The modal, menus and toasts are appended to <body>, outside .apihub, so they get the tokens too. */
.apihub, .ah-layer, .ah-toasts {
	--ah-1: 4px;
	--ah-2: 8px;
	--ah-3: 12px;
	--ah-4: 16px;
	--ah-5: 20px;
	--ah-6: 24px;
	--ah-8: 32px;
	--ah-10: 40px;

	--ah-text-xs: 12px;
	--ah-text-sm: 13px;
	--ah-text-base: 14px;
	--ah-text-md: 15px;
	--ah-text-lg: 17px;
	--ah-text-xl: 20px;
	--ah-text-2xl: 24px;

	--ah-control: 32px;
	--ah-control-sm: 28px;
	--ah-row: 32px;
	--ah-list-row: 44px;
	--ah-header: 56px;
	--ah-nav-w: 288px;

	--ah-bg: var(--ds-background, var(--color-main-background, #fff));
	--ah-fg: var(--ds-foreground, var(--color-main-text, #222));
	--ah-muted: var(--ds-muted-foreground, var(--color-text-maxcontrast, #767676));
	--ah-subtle: var(--ds-muted, var(--color-background-hover, #f5f5f5));
	--ah-hover: var(--ds-accent, var(--color-background-hover, #f5f5f5));
	--ah-active: var(--ds-accent-hover, var(--color-background-dark, #ededed));
	--ah-card: var(--ds-card, var(--color-main-background, #fff));
	--ah-pop: var(--ds-popover, var(--color-main-background, #fff));
	--ah-pop-fg: var(--ds-popover-foreground, var(--color-main-text, #222));
	--ah-border: var(--ds-border, var(--color-border, #ddd));
	--ah-border-strong: var(--ds-border-strong, var(--color-border-dark, #ccc));
	--ah-input: var(--ds-input, var(--color-border-maxcontrast, #949494));
	--ah-input-hover: var(--ds-input-hover, var(--color-main-text, #222));
	--ah-ring: var(--ds-ring, rgba(0, 130, 201, .25));
	--ah-focus: var(--ds-focus, var(--color-primary-element, #0082c9));
	--ah-primary: var(--ds-primary, var(--color-primary-element, #0082c9));
	--ah-primary-hover: var(--ds-primary-hover, var(--color-primary-element-hover, #0073b3));
	--ah-primary-fg: var(--ds-primary-foreground, var(--color-primary-element-text, #fff));
	--ah-side: var(--ds-sidebar, var(--color-main-background, #fff));
	--ah-side-accent: var(--ds-sidebar-accent, var(--color-background-hover, #f0f0f0));
	--ah-side-hover: var(--ds-sidebar-accent-hover, var(--color-background-hover, #f5f5f5));
	--ah-side-border: var(--ds-sidebar-border, var(--color-border, #ddd));

	--ah-success: var(--ds-success, #00843a);
	--ah-success-soft: var(--ds-success-soft, #d8f9dd);
	--ah-success-text: var(--ds-success-text, #0b5d2a);
	--ah-warning: var(--ds-warning, #aa6000);
	--ah-warning-soft: var(--ds-warning-soft, #fff0c5);
	--ah-warning-text: var(--ds-warning-text, #784900);
	--ah-info: var(--ds-info, #0078bd);
	--ah-info-soft: var(--ds-info-soft, #d7f3ff);
	--ah-info-text: var(--ds-info-text, #005b95);
	--ah-danger: var(--ds-destructive, #df2225);
	--ah-danger-soft: var(--ds-destructive-soft, #ffe5e0);
	--ah-danger-text: var(--ds-destructive-text, #9e1618);
	--ah-violet: #7c5cd6;
	--ah-violet-soft: #ece7fb;

	/* HTTP methods, as in Apidog/Postman */
	--ah-get: var(--ah-success);
	--ah-post: var(--ah-warning);
	--ah-put: var(--ah-info);
	--ah-patch: var(--ah-violet);
	--ah-delete: var(--ah-danger);
	--ah-other: var(--ah-muted);

	--ah-radius-sm: var(--ds-radius-sm, 6px);
	--ah-radius: var(--ds-radius-md, 8px);
	--ah-radius-lg: var(--ds-radius-lg, 10px);
	--ah-radius-xl: var(--ds-radius-xl, 14px);
	--ah-shadow-xs: var(--ds-shadow-xs, 0 1px 2px rgba(0, 0, 0, .05));
	--ah-shadow-sm: var(--ds-shadow-sm, 0 1px 3px rgba(0, 0, 0, .08));
	--ah-shadow-md: var(--ds-shadow-md, 0 4px 12px rgba(0, 0, 0, .12));
	--ah-shadow-lg: var(--ds-shadow-lg, 0 12px 28px rgba(0, 0, 0, .16));
	--ah-mono: var(--ds-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace);
	/* data people type or copy keeps Latin digits on Persian pages («v3», «200»), like file names in rayatheme */
	--ah-data-font: var(--ds-font-input, inherit);
}
/* dark: the soft violet would glow */
body[data-themes*=dark] :is(.apihub, .ah-layer) { --ah-violet: #a48df0; --ah-violet-soft: #2a2340; }

#content.app-apihub { display: flex; }

.apihub {
	display: flex;
	width: 100%;
	height: 100%;
	min-height: 0;
	position: relative;
	color: var(--ah-fg);
	background: var(--ah-bg);
	font-size: var(--ah-text-base);
	line-height: 1.5;
}
.apihub *, .ah-layer * { box-sizing: border-box; }
.apihub-loading { margin: 80px auto; width: 40px; height: 40px; }
.apihub h1, .apihub h2, .apihub h3, .apihub h4, .ah-layer h2 { margin: 0; font-weight: 600; line-height: 1.3; }
.ah-spacer { flex: 1; }
/* User text (names, titles) carries dir="auto": it keeps its own direction, so English truncates at its own end, but
   lines up with the page like the rest of the UI (Gaam's rule). text-align: match-parent would say exactly this, but
   Chromium drops it as invalid, so the side comes from the page direction. */
:is(.apihub, .ah-layer):dir(ltr) [dir=auto] { text-align: left; }
:is(.apihub, .ah-layer):dir(rtl) [dir=auto] { text-align: right; }
:is(.apihub, .ah-layer) .ah-md[dir=auto] { text-align: start; }
.ah-muted { color: var(--ah-muted); }
.ah-hint { color: var(--ah-muted); font-size: var(--ah-text-xs); }
.ah-hint--box { display: flex; gap: var(--ah-2); align-items: flex-start; padding: var(--ah-2) var(--ah-3); margin: var(--ah-3) 0 0; border-radius: var(--ah-radius); background: var(--ah-subtle); font-size: var(--ah-text-sm); }
.ah-hint--box .ah-svg { margin-top: 2px; }
.ah-pad { padding: var(--ah-4); margin: 0; }
.ah-ltr { direction: ltr; unicode-bidi: isolate; font-family: var(--ah-data-font); }
.ah-svg { flex-shrink: 0; display: block; }
.ah-loading { display: flex; justify-content: center; padding: 64px 0; }
.ah-loading .icon-loading { width: 32px; height: 32px; }
body.ah-resizing { cursor: row-resize; user-select: none; }
body.ah-resizing:has(.ah-editor.cols) { cursor: col-resize; }

/* ================================================================ buttons */

:is(.apihub, .ah-layer) .ah-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ah-2);
	width: auto;
	height: var(--ah-control);
	min-height: var(--ah-control);
	padding: 0 var(--ah-3);
	margin: 0;
	border: 1px solid var(--ah-border);
	border-radius: var(--ah-radius);
	background: var(--ah-bg);
	color: var(--ah-fg);
	font: inherit;
	font-size: var(--ah-text-sm);
	font-weight: 500;
	line-height: 20px;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--ah-shadow-xs);
	transition: background-color .12s, border-color .12s, box-shadow .12s, color .12s;
}
:is(.apihub, .ah-layer) .ah-btn:not(:disabled):hover { background-color: var(--ah-hover) !important; border-color: var(--ah-border) !important; color: var(--ah-fg) !important; }
:is(.apihub, .ah-layer) .ah-btn:focus-visible { outline: none !important; box-shadow: 0 0 0 1px var(--ah-focus), 0 0 0 4px var(--ah-ring) !important; }
:is(.apihub, .ah-layer) .ah-btn:disabled { opacity: .5; cursor: default; background: var(--ah-bg); color: var(--ah-fg); }
/* labels never clip (Persian letters reach far above and below the line); only width-limited ones truncate */
:is(.apihub, .ah-layer) .ah-btn .ah-btn__label { display: block; line-height: 20px; }
:is(.apihub, .ah-layer) :is(.ah-envbtn, .ah-select-btn) .ah-btn__label { overflow: hidden; text-overflow: ellipsis; padding-block: 2px; line-height: 18px; }
:is(.apihub, .ah-layer) .ah-btn--primary { background: var(--ah-primary); border-color: var(--ah-primary); color: var(--ah-primary-fg); }
:is(.apihub, .ah-layer) .ah-btn--primary:not(:disabled):hover { background-color: var(--ah-primary-hover) !important; border-color: var(--ah-primary-hover) !important; color: var(--ah-primary-fg) !important; }
:is(.apihub, .ah-layer) .ah-btn--primary:disabled { background: var(--ah-primary); color: var(--ah-primary-fg); }
:is(.apihub, .ah-layer) .ah-btn--danger { background: var(--ah-danger); border-color: var(--ah-danger); color: var(--ds-destructive-foreground, #fff); }
:is(.apihub, .ah-layer) .ah-btn--danger:not(:disabled):hover { background-color: color-mix(in oklab, var(--ah-danger) 88%, #000) !important; border-color: transparent !important; color: var(--ds-destructive-foreground, #fff) !important; }
:is(.apihub, .ah-layer) .ah-btn--ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--ah-muted); }
:is(.apihub, .ah-layer) .ah-btn--ghost:not(:disabled):hover { background-color: var(--ah-hover) !important; border-color: transparent !important; color: var(--ah-fg) !important; }
:is(.apihub, .ah-layer) .ah-btn--sm { height: var(--ah-control-sm); min-height: var(--ah-control-sm); padding: 0 var(--ah-2); gap: 6px; font-size: var(--ah-text-xs); }
:is(.apihub, .ah-layer) .ah-btn--icon { width: var(--ah-control); padding: 0; }
:is(.apihub, .ah-layer) .ah-btn--icon.ah-btn--sm { width: var(--ah-control-sm); }
.ah-kbd {
	display: inline-flex; align-items: center; min-width: 18px; height: 18px; padding: 0 5px;
	border: 1px solid var(--ah-border); border-radius: var(--ah-radius-sm); background: var(--ah-subtle);
	color: var(--ah-muted); font: 500 11px/1 var(--ah-data-font); direction: ltr;
}
.ah-btn--primary .ah-kbd { background: transparent; border-color: color-mix(in oklab, var(--ah-primary-fg) 35%, transparent); color: inherit; opacity: .8; }

/* every button of ours: page font, sane line height (UA buttons use their own font and line metrics) */
:is(.apihub, .ah-layer) button[class^="vs__ah"] { font-family: inherit; line-height: 20px; }

/* ================================================================ inputs */

:is(.apihub, .ah-layer) .ah-input {
	display: block;
	width: 100%;
	height: var(--ah-control);
	min-height: var(--ah-control);
	margin: 0;
	padding: 0 var(--ah-3);
	border: 1px solid var(--ah-input);
	border-radius: var(--ah-radius);
	background: var(--ah-bg);
	color: var(--ah-fg);
	font-size: var(--ah-text-sm);
	line-height: 20px;
	box-shadow: var(--ah-shadow-xs);
	transition: border-color .12s, box-shadow .12s;
}
:is(.apihub, .ah-layer) .ah-input:hover:not(:focus):not([readonly]) { border-color: var(--ah-input-hover); }
:is(.apihub, .ah-layer) .ah-input:focus { border-color: var(--ah-focus) !important; outline: none; box-shadow: 0 0 0 3px var(--ah-ring) !important; }
:is(.apihub, .ah-layer) .ah-input--sm { height: var(--ah-control-sm); min-height: var(--ah-control-sm); font-size: var(--ah-text-sm); padding: 0 var(--ah-2); }
:is(.apihub, .ah-layer) .ah-textarea { height: auto; padding: var(--ah-2) var(--ah-3); line-height: 1.6; resize: vertical; }
:is(.apihub, .ah-layer) .ah-mono { font-family: var(--ah-mono); font-size: var(--ah-text-sm); }
:is(.apihub, .ah-layer) input[type=search].ah-input { -webkit-appearance: none; }

.ah-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--ah-4); min-width: 0; }
.ah-field__label { font-size: var(--ah-text-sm); font-weight: 500; color: var(--ah-fg); }
.ah-field__row { display: flex; align-items: center; gap: var(--ah-2); }
.ah-form { max-width: 560px; margin-top: var(--ah-4); }
.ah-input-wrap { position: relative; display: block; }
.ah-input-wrap .ah-input { padding-inline-end: 36px; }
:is(.apihub, .ah-layer) .ah-input-addon { position: absolute; inset-inline-end: 2px; top: 2px; }
.ah-inline { display: flex; gap: var(--ah-2); align-items: center; }
.ah-inline > .ah-input { flex: 1; min-width: 0; }

/* custom checkbox: core forces native ones to 34px */
:is(.apihub, .ah-layer) input.ah-check {
	-webkit-appearance: none;
	appearance: none;
	width: 16px !important;
	height: 16px !important;
	min-height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: none;
	border: 1px solid var(--ah-input-hover);
	border-radius: 4px;
	background: var(--ah-bg) no-repeat center / 12px;
	cursor: pointer;
	box-shadow: none;
}
:is(.apihub, .ah-layer) input.ah-check:checked {
	border-color: var(--ah-primary);
	background-color: var(--ah-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
body[data-themes*=dark] :is(.apihub, .ah-layer) input.ah-check:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
:is(.apihub, .ah-layer) input.ah-check:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ah-ring); }
:is(.apihub, .ah-layer) input.ah-check:disabled { opacity: .5; cursor: default; }

/* ================================================================ segmented control (tabs) */

.ah-seg {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border-radius: var(--ah-radius-lg);
	background: var(--ds-segment-track, var(--ah-subtle));
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	flex-shrink: 0;
}
.ah-seg::-webkit-scrollbar { display: none; }
:is(.apihub, .ah-layer) .ah-seg__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	min-height: 26px;
	width: auto;
	margin: 0;
	padding: 0 var(--ah-3);
	border: 1px solid transparent;
	border-radius: var(--ah-radius);
	background: transparent;
	color: var(--ah-muted);
	font: inherit;
	font-size: var(--ah-text-sm);
	font-weight: 500;
	line-height: 20px;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
}
:is(.apihub, .ah-layer) .ah-seg__item:not(:disabled):hover { background-color: transparent !important; border-color: transparent !important; color: var(--ah-fg) !important; }
:is(.apihub, .ah-layer) .ah-seg__item.active,
:is(.apihub, .ah-layer) .ah-seg__item.active:not(:disabled):hover {
	background-color: var(--ds-segment-active, var(--ah-bg)) !important;
	border-color: var(--ds-segment-active-border, var(--ah-border)) !important;
	color: var(--ah-fg) !important;
	box-shadow: var(--ds-segment-shadow, var(--ah-shadow-xs));
}
:is(.apihub, .ah-layer) .ah-seg__item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ah-ring) !important; }
.ah-seg__count {
	min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
	background: var(--ah-active); color: var(--ah-fg);
	font: 600 11px/18px var(--ah-data-font); text-align: center;
}
.ah-seg__item.active .ah-seg__count { background: var(--ah-subtle); }
.ah-seg--sm { padding: 2px; }
:is(.apihub, .ah-layer) .ah-seg--sm .ah-seg__item { height: 24px; min-height: 24px; padding: 0 10px; font-size: var(--ah-text-xs); }
.ah-seg--wrap { flex-wrap: wrap; overflow: visible; }

/* ================================================================ method / status badges */

.ah-method {
	display: inline-block;
	min-width: 38px;
	font: 700 10.5px/1 var(--ah-mono);
	letter-spacing: .02em;
	text-align: start;
	color: var(--ah-other);
	flex-shrink: 0;
	direction: ltr;
}
.ah-m-get { color: var(--ah-get) !important; }
.ah-m-post { color: var(--ah-post) !important; }
.ah-m-put { color: var(--ah-put) !important; }
.ah-m-patch { color: var(--ah-patch) !important; }
.ah-m-delete { color: var(--ah-delete) !important; }
.ah-mbg-get { background: var(--ah-get); }
.ah-mbg-post { background: var(--ah-post); }
.ah-mbg-put { background: var(--ah-put); }
.ah-mbg-patch { background: var(--ah-patch); }
.ah-mbg-delete { background: var(--ah-delete); }
.ah-mbg-head, .ah-mbg-options, .ah-mbg-trace { background: var(--ah-other); }

.ah-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ah-muted); }
.ah-dot.st-designing, .st-bg-designing { background: var(--ah-muted); }
.ah-dot.st-developing, .st-bg-developing { background: var(--ah-info); }
.ah-dot.st-testing, .st-bg-testing { background: var(--ah-violet); }
.ah-dot.st-released, .st-bg-released { background: var(--ah-success); }
.ah-dot.st-deprecated, .st-bg-deprecated { background: var(--ah-danger); }

.ah-code-pill {
	display: inline-flex; align-items: center; height: 22px; padding: 0 var(--ah-2);
	border-radius: 11px; background: var(--ah-subtle); color: var(--ah-muted);
	font: 600 var(--ah-text-xs)/1 var(--ah-data-font); white-space: nowrap; direction: ltr; flex-shrink: 0;
}
.ah-code-pill.s2 { background: var(--ah-success-soft); color: var(--ah-success-text); }
.ah-code-pill.s3 { background: var(--ah-info-soft); color: var(--ah-info-text); }
.ah-code-pill.s4 { background: var(--ah-warning-soft); color: var(--ah-warning-text); }
.ah-code-pill.s5, .ah-code-pill.s0 { background: var(--ah-danger-soft); color: var(--ah-danger-text); }
.ah-code-pill.sm { height: 20px; padding: 0 6px; font-size: 11px; }

.ah-badge {
	display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--ah-2);
	border: 1px solid var(--ah-border); border-radius: 11px; background: var(--ah-bg);
	color: var(--ah-muted); font-size: var(--ah-text-xs); font-weight: 500; white-space: nowrap; flex-shrink: 0;
}
.ah-badge.ok { border-color: transparent; background: var(--ah-success-soft); color: var(--ah-success-text); }
.ah-badge.warn { border-color: transparent; background: var(--ah-warning-soft); color: var(--ah-warning-text); }

.ah-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--ah-subtle); color: var(--ah-fg); font-weight: 600; font-size: 12px; }
.ah-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ah-stack { display: inline-flex; }
.ah-stack .ah-avatar { box-shadow: 0 0 0 2px var(--ah-bg); }
.ah-stack .ah-avatar + .ah-avatar { margin-inline-start: -6px; }
.ah-pavatar {
	--h: 210;
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	border-radius: var(--ah-radius); font-weight: 700; line-height: 1;
	background: hsl(var(--h) 70% 92%); color: hsl(var(--h) 55% 32%);
}
body[data-themes*=dark] .ah-pavatar { background: hsl(var(--h) 35% 22%); color: hsl(var(--h) 70% 80%); }
.ah-pavatar--empty { width: 28px; height: 28px; background: var(--ah-primary); color: var(--ah-primary-fg); }

/* ================================================================ navigation column */

.ah-nav {
	flex: 0 0 var(--ah-nav-w);
	width: var(--ah-nav-w);
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--ah-2);
	padding-bottom: 0;
	border-inline-end: 1px solid var(--ah-side-border);
	background: var(--ah-side);
	overflow: hidden;
}
.ah-nav__top { margin-bottom: var(--ah-2); }
.apihub .ah-switcher {
	display: flex; align-items: center; gap: var(--ah-2);
	width: 100%; height: 48px; min-height: 48px; margin: 0; padding: 0 var(--ah-2);
	border: 0; border-radius: var(--ah-radius-lg); background: transparent; color: var(--ah-fg);
	text-align: start; cursor: pointer; box-shadow: none;
}
.apihub .ah-switcher:not(:disabled):hover, .apihub .ah-switcher[aria-expanded=true] { background-color: var(--ah-side-hover) !important; border-color: transparent !important; color: var(--ah-fg) !important; }
.apihub .ah-switcher:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ah-ring) !important; }
.ah-switcher > .ah-svg { color: var(--ah-muted); }
.ah-switcher__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ah-switcher__name { font-weight: 600; font-size: var(--ah-text-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-switcher__meta { font-size: var(--ah-text-xs); color: var(--ah-muted); font-weight: 400; }

.ah-nav__actions { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--ah-3); }
.apihub .ah-nav__new, .apihub .ah-nav__find { width: 100%; justify-content: flex-start; }
.apihub .ah-nav__new .ah-kbd, .apihub .ah-nav__find .ah-kbd { margin-inline-start: auto; }
.apihub .ah-nav__find { color: var(--ah-muted); font-weight: 400; background: var(--ah-bg); }

.ah-nav__pages { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--ah-3); }
.apihub .ah-navitem {
	display: flex; align-items: center; gap: var(--ah-3);
	width: 100%; height: 36px; min-height: 36px; margin: 0; padding: 0 var(--ah-3);
	border: 0; border-radius: var(--ah-radius); background: transparent; color: var(--ah-fg);
	font-size: var(--ah-text-base); font-weight: 500; text-align: start; cursor: pointer; box-shadow: none;
}
.apihub .ah-navitem:not(:disabled):hover { background-color: var(--ah-side-hover) !important; border-color: transparent !important; color: var(--ah-fg) !important; }
.apihub .ah-navitem.active, .apihub .ah-navitem.active:not(:disabled):hover { background-color: var(--ah-side-accent) !important; font-weight: 600; }
.apihub .ah-navitem:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ah-focus) !important; }
.ah-navitem__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ah-navitem__count { color: var(--ah-muted); font: 500 var(--ah-text-xs) var(--ah-data-font); }

.ah-nav__caption {
	display: flex; align-items: center; gap: 6px;
	padding-inline: var(--ah-3) var(--ah-1);
	min-height: 32px; color: var(--ah-muted); font-size: var(--ah-text-xs); font-weight: 600;
}
.ah-nav__count { font-family: var(--ah-data-font); font-weight: 500; }
.ah-tree-filter { position: relative; margin: 0 0 var(--ah-2); }
.ah-tree-filter > .ah-svg { position: absolute; inset-inline-start: 9px; top: 6px; color: var(--ah-muted); pointer-events: none; }
.apihub .ah-tree-filter .ah-input { padding-inline-start: 32px; background: var(--ah-bg); }

.ah-tree { flex: 1; overflow: auto; margin: 0 calc(-1 * var(--ah-2)); padding: 0 var(--ah-2) var(--ah-4); scrollbar-width: thin; }
.ah-row {
	--depth: 0;
	display: flex;
	align-items: center;
	gap: var(--ah-2);
	height: var(--ah-row);
	padding-inline: calc(var(--ah-2) + var(--depth) * 16px) var(--ah-1);
	border-radius: var(--ah-radius);
	cursor: pointer;
	user-select: none;
	position: relative;
	color: var(--ah-fg);
	font-size: var(--ah-text-sm);
	outline: none;
}
.ah-row:hover { background: var(--ah-side-hover); }
.ah-row:focus-visible { box-shadow: inset 0 0 0 2px var(--ah-focus); }
.ah-row.active { background: var(--ah-side-accent); font-weight: 600; }
.ah-row.drop, .ah-tree__root-drop.drop { box-shadow: inset 0 0 0 2px var(--ah-focus); background: var(--ah-side-hover); }
.ah-row > .ah-svg { color: var(--ah-muted); }
.ah-row--folder { font-weight: 500; }
.ah-row--endpoint { padding-inline-start: calc(var(--ah-2) + 22px + var(--depth) * 16px); }
.ah-row--endpoint.deprecated .ah-row__name { text-decoration: line-through; color: var(--ah-muted); }
.ah-row__caret { display: inline-flex; color: var(--ah-muted); transition: transform .15s; }
.ah-row__caret.open { transform: rotate(90deg); }
.apihub:dir(rtl) .ah-row__caret:not(.open) { transform: scaleX(-1); }
.ah-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ah-data-font); }
.ah-row__count { color: var(--ah-muted); font: 400 var(--ah-text-xs) var(--ah-data-font); padding-inline-end: var(--ah-1); }
.ah-row .ah-row__more { display: none; }
.ah-row:hover .ah-row__more, .ah-row:focus-within .ah-row__more, .ah-row .ah-row__more[aria-expanded=true] { display: inline-flex; }
.ah-row:hover .ah-row__count, .ah-row:focus-within .ah-row__count { display: none; }
.ah-row__dirty { width: 7px; height: 7px; border-radius: 50%; background: var(--ah-warning); flex-shrink: 0; margin-inline-end: var(--ah-2); }
.ah-tree__empty { padding: var(--ah-6) var(--ah-3); color: var(--ah-muted); font-size: var(--ah-text-sm); text-align: center; }
.ah-tree__empty-actions { display: flex; gap: var(--ah-2); justify-content: center; margin-top: var(--ah-3); }
.ah-tree__root-drop { margin-top: var(--ah-2); padding: var(--ah-2); border: 1px dashed transparent; border-radius: var(--ah-radius); color: transparent; font-size: var(--ah-text-xs); text-align: center; }
.ah-tree:has(.ah-row[draggable]:active) .ah-tree__root-drop, .ah-tree__root-drop.drop { border-color: var(--ah-border-strong); color: var(--ah-muted); }

/* tree: selection (keyboard focus), cut items, indent guides, inline rename, filter matches */
.ah-row { outline: none; }
.ah-row.selected:not(.active) { background: color-mix(in oklab, var(--ah-side-accent) 60%, transparent); }
.ah-row:focus-visible, .ah-row.selected:focus { box-shadow: inset 0 0 0 1.5px var(--ah-focus); }
.ah-row.cut { opacity: .45; }
.ah-row.cut .ah-row__name { text-decoration: line-through dashed; }
.ah-row__guide { position: absolute; top: 0; bottom: 0; inset-inline-start: calc(var(--ah-2) + 7px + var(--g) * 16px); width: 1px; background: var(--ah-border); pointer-events: none; }
.ah-row.active .ah-row__guide, .ah-row:hover .ah-row__guide { background: var(--ah-border-strong); }
.ah-row--empty { cursor: default; color: var(--ah-muted); font-size: var(--ah-text-xs); padding-inline-start: calc(var(--ah-2) + 22px + var(--depth) * 16px); font-style: italic; }
.ah-row--empty:hover { background: transparent; }
.apihub .ah-row__rename {
	flex: 1; min-width: 0; width: auto; height: 24px; min-height: 0; margin: 0; padding: 0 6px;
	border: 1px solid var(--ah-focus) !important; border-radius: var(--ah-radius-sm); background: var(--ah-bg) !important;
	box-shadow: 0 0 0 3px var(--ah-ring) !important; color: var(--ah-fg); font-size: var(--ah-text-sm); line-height: 20px; outline: none;
}
.ah-row mark, .ad mark { background: color-mix(in oklab, var(--ah-warning) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.ah-row.selected .ah-row__more { display: inline-flex; }
.ah-row.selected .ah-row__count { display: none; }
@media (hover: none) and (pointer: coarse) { .ah-row--endpoint .ah-row__more, .ah-row--folder .ah-row__more { display: inline-flex; } .ah-row__count { display: none; } }
.ah-clipbar {
	display: flex; align-items: center; gap: var(--ah-2);
	margin: 0 calc(-1 * var(--ah-2)); padding: var(--ah-2) var(--ah-3);
	border-top: 1px solid var(--ah-side-border); background: var(--ah-bg); font-size: var(--ah-text-xs);
}
.ah-clipbar > .ah-svg { color: var(--ah-muted); }
.ah-clipbar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.ah-clipbar__text strong { font-weight: 500; font-size: var(--ah-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ah-data-font); }
.ah-clipbar__text small { color: var(--ah-muted); }
.ah-menu__item .ah-kbd { margin-inline-start: auto; }

.ah-nav-scrim { display: none; }

/* drag handle on the navigation column's edge */
.ah-nav-resize {
	position: absolute; z-index: 5; top: 0; bottom: 0;
	inset-inline-start: calc(var(--ah-nav-w) - 3px); width: 6px;
	cursor: col-resize; touch-action: none; outline: none;
}
.ah-nav-resize::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 2px; width: 2px; background: transparent; transition: background-color .12s; }
.ah-nav-resize:hover::after, .ah-nav-resize.dragging::after, .ah-nav-resize:focus-visible::after { background: var(--ah-focus); }
body.ah-resizing-x { cursor: col-resize; user-select: none; }
body.ah-resizing-x * { cursor: col-resize !important; }

/* ================================================================ main column + header */

.ah-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ah-header {
	display: flex;
	align-items: center;
	gap: var(--ah-3);
	min-height: var(--ah-header);
	padding: var(--ah-2) var(--ah-6);
	border-bottom: 1px solid var(--ah-border);
	background: var(--ah-bg);
	flex-shrink: 0;
}
.ah-header__title { display: flex; align-items: center; gap: var(--ah-2); min-width: 0; }
.ah-header__title > .ah-svg { color: var(--ah-fg); }
.ah-header__title h1 { font-size: var(--ah-text-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-header__project { display: flex; align-items: center; gap: var(--ah-2); min-width: 0; }
.ah-header__project > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.ah-header__sub { color: var(--ah-muted); font-size: var(--ah-text-xs); white-space: nowrap; }
.ah-header__actions { display: flex; align-items: center; gap: var(--ah-2); flex-shrink: 0; }
.apihub .ah-header__toggle { display: none; }

.ah-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ah-crumb__folder { flex-shrink: 0; color: var(--ah-muted); font-size: var(--ah-text-sm); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; font-family: var(--ah-data-font); }
.ah-crumb__sep { color: var(--ah-border-strong); }
.apihub .ah-title-input {
	width: 100%;
	min-width: 80px;
	max-width: 420px;
	height: var(--ah-control);
	min-height: var(--ah-control);
	margin: 0;
	padding: 0 6px;
	border: 1px solid transparent;
	border-radius: var(--ah-radius);
	background: transparent;
	color: var(--ah-fg);
	font-size: var(--ah-text-md);
	font-weight: 600;
	box-shadow: none;
	field-sizing: content;
}
.apihub .ah-title-input:not([readonly]):hover { border-color: var(--ah-border) !important; }
.apihub .ah-title-input:focus { border-color: var(--ah-focus) !important; box-shadow: 0 0 0 3px var(--ah-ring) !important; outline: none; }
.apihub .ah-title-input[readonly] { cursor: default; }
.apihub .ah-title-input--lg { font-size: var(--ah-text-lg); max-width: none; }
.apihub .ah-statusbtn { gap: 6px; color: var(--ah-fg); }
.apihub .ah-statusbtn:disabled { opacity: 1; border-color: transparent; box-shadow: none; }
.apihub .ah-save { position: relative; }
.apihub .ah-save.dirty::after {
	content: ""; position: absolute; top: -3px; inset-inline-end: -3px;
	width: 9px; height: 9px; border-radius: 50%; background: var(--ah-warning); box-shadow: 0 0 0 2px var(--ah-bg);
}
.apihub .ah-envbtn { max-width: 200px; gap: 6px; }
.ah-envbtn__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ah-success); flex-shrink: 0; }
.ah-envbtn.none .ah-envbtn__dot, .ah-envs__item .ah-envbtn__dot:not(.on) { background: var(--ah-border-strong); }
.ah-envbtn .ah-btn__label { font-family: var(--ah-data-font); }
.apihub .ah-sharebtn { gap: 6px; }

.ah-body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.ah-body--endpoint, .ah-body--history { overflow: hidden; display: flex; flex-direction: column; }

/* ================================================================ menus */

.ah-menu {
	position: fixed;
	z-index: 10010;
	min-width: 200px;
	max-width: min(360px, calc(100vw - 16px));
	max-height: min(420px, calc(100vh - 16px));
	overflow: auto;
	padding: var(--ah-1);
	border: 1px solid var(--ah-border);
	border-radius: var(--ah-radius-lg);
	background: var(--ah-pop);
	color: var(--ah-pop-fg);
	box-shadow: var(--ah-shadow-lg);
	animation: ah-pop .12s ease-out;
}
@keyframes ah-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.ah-menu__list { display: flex; flex-direction: column; }
.ah-layer .ah-menu__item {
	display: flex; align-items: center; gap: var(--ah-2);
	width: 100%; min-height: 32px; height: auto; margin: 0; padding: 6px var(--ah-2);
	border: 0; border-radius: var(--ah-radius-sm); background: transparent; color: var(--ah-pop-fg);
	font-size: var(--ah-text-sm); font-weight: 400; text-align: start; cursor: pointer; box-shadow: none;
}
.ah-layer .ah-menu__item:not(:disabled):hover, .ah-layer .ah-menu__item:focus { background-color: var(--ah-hover) !important; border-color: transparent !important; color: var(--ah-pop-fg) !important; outline: none; box-shadow: none !important; }
.ah-layer .ah-menu__item.danger, .ah-layer .ah-menu__item.danger:not(:disabled):hover { color: var(--ah-danger-text) !important; }
.ah-layer .ah-menu__item > .ah-svg { color: var(--ah-muted); }
.ah-layer .ah-menu__item.danger > .ah-svg { color: inherit; }
.ah-menu__check { width: 18px; display: inline-flex; justify-content: center; flex-shrink: 0; }
.ah-menu__label { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.ah-menu__label small { color: var(--ah-muted); font-size: var(--ah-text-xs); }
.ah-menu__item.checked { font-weight: 500; }
.ah-menu__item.checked > .ah-svg:last-child { color: var(--ah-fg); }
.ah-menu__divider { height: 1px; margin: var(--ah-1) calc(-1 * var(--ah-1)); background: var(--ah-border); }
.ah-menu__caption { padding: 6px var(--ah-2) 2px; color: var(--ah-muted); font-size: var(--ah-text-xs); font-weight: 600; }
.ah-menu--methods { min-width: 140px; }
.ah-menu--methods .ah-menu__label { display: none; }
.ah-menu--methods .ah-method { font-size: 12px; min-width: 64px; }

/* ================================================================ dialogs */

.ah-overlay {
	position: fixed; inset: 0; z-index: 10000;
	display: flex; align-items: flex-start; justify-content: center;
	padding: 10vh var(--ah-4) var(--ah-4);
	overflow: auto;
	background: rgba(0, 0, 0, .5);
	animation: ah-fade .12s ease-out;
}
@keyframes ah-fade { from { opacity: 0; } }
.ah-modal {
	display: flex; flex-direction: column;
	width: 100%; max-width: 520px; max-height: 84vh;
	border: 1px solid var(--ah-border);
	border-radius: var(--ah-radius-xl);
	background: var(--ah-pop);
	color: var(--ah-pop-fg);
	box-shadow: var(--ah-shadow-lg);
	animation: ah-pop .15s ease-out;
	outline: none;
}
.ah-modal--sm { max-width: 420px; }
.ah-modal--lg { max-width: 760px; }
.ah-modal--finder { max-width: 600px; }
.ah-modal--finder .ah-modal__header { display: none; }
.ah-modal--finder .ah-modal__body { padding: 0; }
.ah-modal__header { display: flex; align-items: flex-start; gap: var(--ah-3); padding: var(--ah-5) var(--ah-6) var(--ah-3); }
.ah-modal__titles { flex: 1; min-width: 0; }
.ah-modal__titles h2 { font-size: var(--ah-text-lg); font-weight: 600; }
.ah-modal__titles p { margin: 4px 0 0; color: var(--ah-muted); font-size: var(--ah-text-sm); overflow-wrap: anywhere; }
.ah-modal__header .ah-btn { margin-top: -4px; margin-inline-end: -8px; }
.ah-modal__body { padding: var(--ah-2) var(--ah-6) var(--ah-4); overflow: auto; }
.ah-modal__text { margin: 0; line-height: 1.6; color: var(--ah-muted); }
.ah-modal__footer { display: flex; gap: var(--ah-2); align-items: center; padding: var(--ah-4) var(--ah-6) var(--ah-5); border-top: 1px solid var(--ah-border); }

/* ================================================================ empty states, cards, alerts */

.ah-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 72px var(--ah-6); max-width: 520px; margin: 0 auto; }
.ah-empty h2 { font-size: var(--ah-text-lg); margin: var(--ah-4) 0 var(--ah-1); }
.ah-empty p { margin: 0; color: var(--ah-muted); line-height: 1.6; }
.ah-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--ah-radius-xl); background: var(--ah-subtle); color: var(--ah-muted); border: 1px solid var(--ah-border); flex-shrink: 0; }
.ah-empty__actions { display: flex; gap: var(--ah-2); margin-top: var(--ah-5); flex-wrap: wrap; justify-content: center; }
.ah-card .ah-empty { padding: var(--ah-8) var(--ah-4); }

.ah-page { max-width: 1040px; margin: 0 auto; padding: var(--ah-6); display: flex; flex-direction: column; gap: var(--ah-4); }
.ah-page--wide { max-width: 1200px; }
.ah-page__intro { display: flex; align-items: center; gap: var(--ah-4); margin-bottom: var(--ah-2); }
.ah-page__intro h1 { font-size: var(--ah-text-2xl); }
.ah-page__intro p { margin: 4px 0 0; font-size: var(--ah-text-sm); }

.ah-card { border: 1px solid var(--ah-border); border-radius: var(--ah-radius-xl); background: var(--ah-card); padding: var(--ah-4) var(--ah-5); min-width: 0; }
.ah-card--flush { padding: 0; overflow: hidden; }
.ah-card--flush > .ah-card__head { padding: var(--ah-3) var(--ah-5); margin: 0; border-bottom: 1px solid var(--ah-border); }
.ah-card__head { display: flex; align-items: center; gap: var(--ah-2); margin-bottom: var(--ah-3); min-height: 28px; }
.ah-card__head h2 { font-size: var(--ah-text-base); }
.ah-actions-row { display: flex; align-items: center; gap: var(--ah-2); margin-top: var(--ah-3); }
.ah-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ah-4); }

.ah-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ah-3); }
.apihub .ah-stat {
	display: flex; align-items: center; gap: var(--ah-3);
	width: auto; height: auto; min-height: 0; margin: 0; padding: var(--ah-4);
	border: 1px solid var(--ah-border); border-radius: var(--ah-radius-xl); background: var(--ah-card);
	color: var(--ah-fg); text-align: start; box-shadow: none; font-weight: 400;
}
.apihub button.ah-stat { cursor: pointer; }
.apihub button.ah-stat:not(:disabled):hover { background-color: var(--ah-subtle) !important; border-color: var(--ah-border-strong) !important; color: var(--ah-fg) !important; }
.ah-stat__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--ah-radius-lg); flex-shrink: 0; }
.tone-info { background: var(--ah-info-soft); color: var(--ah-info-text); }
.tone-warning { background: var(--ah-warning-soft); color: var(--ah-warning-text); }
.tone-success { background: var(--ah-success-soft); color: var(--ah-success-text); }
.tone-violet { background: var(--ah-violet-soft); color: var(--ah-violet); }
.ah-stat__text { display: flex; flex-direction: column; min-width: 0; }
.ah-stat__label { color: var(--ah-muted); font-size: var(--ah-text-xs); }
.ah-stat__value { font-size: var(--ah-text-xl); font-weight: 600; line-height: 1.3; }

.ah-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--ah-subtle); }
.ah-bar__seg { min-width: 4px; }
.ah-legend { display: flex; flex-wrap: wrap; gap: var(--ah-2) var(--ah-5); margin-top: var(--ah-4); }
.ah-legend__item { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--ah-text-sm); }
.ah-legend__item .ah-method { min-width: 0; }
.ah-legend__item strong { font-family: var(--ah-data-font); font-weight: 600; }
.ah-legend__item small { color: var(--ah-muted); font-size: var(--ah-text-xs); }
.ah-statuslist { display: flex; flex-direction: column; gap: var(--ah-2); }
.ah-statuslist__row { display: flex; align-items: center; gap: var(--ah-2); font-size: var(--ah-text-sm); }
.ah-statuslist__row strong { min-width: 24px; text-align: end; font-weight: 600; }
.ah-statuslist__bar { width: 40%; height: 6px; border-radius: 3px; background: var(--ah-subtle); overflow: hidden; }
.ah-statuslist__bar > span { display: block; height: 100%; border-radius: 3px; }

/* lists (recent endpoints, history) */
.ah-list { display: flex; flex-direction: column; }
.apihub .ah-list__row {
	display: flex; align-items: center; gap: var(--ah-3);
	width: 100%; height: auto; min-height: var(--ah-list-row); margin: 0; padding: var(--ah-2) var(--ah-5);
	border: 0; border-bottom: 1px solid var(--ah-border); border-radius: 0; background: transparent;
	color: var(--ah-fg); text-align: start; font-weight: 400; font-size: var(--ah-text-sm); cursor: pointer; box-shadow: none;
}
.apihub .ah-list__row:last-child { border-bottom: 0; }
.apihub .ah-list__row:not(:disabled):hover { background-color: var(--ah-subtle) !important; border-color: var(--ah-border) !important; color: var(--ah-fg) !important; }
.apihub .ah-list__row.active, .apihub .ah-list__row.active:not(:disabled):hover { background-color: var(--ah-active) !important; }
.apihub .ah-list__row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ah-focus) !important; }
.ah-list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ah-list__title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ah-data-font); }
.ah-list__sub { color: var(--ah-muted); font-size: var(--ah-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-list__time { color: var(--ah-muted); font-size: var(--ah-text-xs); white-space: nowrap; min-width: 72px; text-align: end; }
.ah-list__row .ah-badge { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

.ah-alert { display: flex; gap: var(--ah-3); align-items: flex-start; padding: var(--ah-3) var(--ah-4); border-radius: var(--ah-radius-lg); border: 1px solid var(--ah-border); }
.ah-alert p { margin: 2px 0 0; overflow-wrap: anywhere; }
.ah-alert strong { font-weight: 600; }
.ah-alert > .ah-svg { margin-top: 1px; }
.ah-alert--error { background: var(--ah-danger-soft); border-color: color-mix(in oklab, var(--ah-danger) 30%, transparent); color: var(--ah-danger-text); }
.ah-alert--ok { background: var(--ah-success-soft); border-color: color-mix(in oklab, var(--ah-success) 30%, transparent); color: var(--ah-success-text); }

/* ================================================================ endpoint editor */

.ah-editor {
	--split: .5;
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-rows: minmax(160px, calc(var(--split) * 100%)) 9px minmax(140px, 1fr);
	grid-template-columns: minmax(0, 1fr);
}
.ah-editor.cols { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(320px, calc(var(--split) * 100%)) 9px minmax(280px, 1fr); }
.ah-req { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: var(--ah-4) var(--ah-6) 0; }
.ah-reqline {
	display: flex; align-items: stretch;
	height: 40px;
	border: 1px solid var(--ah-input);
	border-radius: var(--ah-radius-lg);
	background: var(--ah-bg);
	box-shadow: var(--ah-shadow-xs);
	direction: ltr;
	flex-shrink: 0;
	transition: border-color .12s, box-shadow .12s;
}
.ah-reqline:focus-within { border-color: var(--ah-focus); box-shadow: 0 0 0 3px var(--ah-ring); }
.apihub .ah-methodbtn {
	display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
	width: 112px; height: 100%; min-height: 0; margin: 0; padding: 0 var(--ah-2) 0 var(--ah-3);
	border: 0; border-right: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg) 0 0 var(--ah-radius-lg);
	background: transparent; font: 700 var(--ah-text-sm)/1 var(--ah-mono); cursor: pointer; box-shadow: none;
}
.apihub .ah-methodbtn:not(:disabled):hover { background-color: var(--ah-hover) !important; border-color: var(--ah-border) !important; }
.apihub .ah-methodbtn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ah-focus) !important; }
.apihub .ah-methodbtn .ah-svg { color: var(--ah-muted); }
.apihub .ah-methodbtn:disabled { opacity: 1; cursor: default; }
.apihub .ah-reqline__url {
	flex: 1; min-width: 0; width: auto; height: 100%; min-height: 0; margin: 0; padding: 0 var(--ah-3);
	border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important;
	color: var(--ah-fg); font: 400 var(--ah-text-base) var(--ah-mono); outline: none; text-align: left !important;
}
.apihub .ah-send { min-height: 0; border-radius: 0 var(--ah-radius-lg) var(--ah-radius-lg) 0; margin: -1px -1px -1px 0; height: calc(100% + 2px); padding: 0 var(--ah-5); box-shadow: none; }
.ah-preview { display: flex; align-items: center; gap: 6px; min-height: 24px; padding: 6px 2px 0; color: var(--ah-muted); font: var(--ah-text-xs) var(--ah-mono); direction: ltr; overflow: hidden; flex-shrink: 0; }
.ah-preview__url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ah-preview__warn { display: inline-flex; align-items: center; gap: 4px; color: var(--ah-warning-text); white-space: nowrap; font-family: var(--ah-data-font); }
.ah-tabbar { padding: var(--ah-3) 0; flex-shrink: 0; overflow: hidden; }
.ah-tabbody { flex: 1; min-height: 0; overflow: auto; padding-bottom: var(--ah-4); scrollbar-width: thin; }
.ah-tabempty { display: flex; align-items: center; gap: var(--ah-2); padding: var(--ah-4); border: 1px dashed var(--ah-border-strong); border-radius: var(--ah-radius-lg); color: var(--ah-muted); font-size: var(--ah-text-sm); }

.ah-splitter { position: relative; cursor: row-resize; background: transparent; outline: none; }
.ah-splitter::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--ah-border); }
.ah-splitter::after { content: ""; position: absolute; left: 50%; top: 2px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--ah-border-strong); opacity: 0; transition: opacity .12s; }
.ah-splitter:hover::after, .ah-splitter:focus-visible::after { opacity: 1; }
.ah-splitter:focus-visible::before { background: var(--ah-focus); }
.ah-editor.cols .ah-splitter { cursor: col-resize; }
.ah-editor.cols .ah-splitter::before { left: 4px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
.ah-editor.cols .ah-splitter::after { left: 2px; top: 50%; width: 5px; height: 36px; margin: -18px 0 0; }

.ah-res { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: var(--ah-2) var(--ah-6) 0; }
.ah-res__head { display: flex; align-items: center; gap: var(--ah-2); min-height: 40px; flex-wrap: wrap; flex-shrink: 0; }
.ah-res__head h2 { font-size: var(--ah-text-sm); font-weight: 600; margin-inline-end: var(--ah-2); }
.ah-res__meta { display: inline-flex; align-items: center; gap: 4px; color: var(--ah-muted); font: var(--ah-text-xs) var(--ah-data-font); white-space: nowrap; direction: ltr; }
.ah-res__body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: var(--ah-2) 0 var(--ah-4); }
.ah-res__body > * { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
.ah-res__body > .ah-scrollbox { border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); }
.ah-res__body > .ah-scrollbox > .ah-table { border: 0; border-radius: 0; }
.ah-res__body > .ah-img { flex: none; align-self: flex-start; max-height: 100%; object-fit: contain; }

/* JSON viewer: folding, line numbers from a CSS counter (hidden lines are not counted) */
.ah-jv { margin: 0; padding: var(--ah-2) 0; border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); background: var(--ah-subtle); font: 12.5px/1.65 var(--ah-mono); color: var(--ah-fg); direction: ltr; text-align: left; counter-reset: ln; }
.ah-jv.wrap .ah-jv-line { white-space: pre-wrap; word-break: break-word; }
.ah-jv-line { position: relative; padding-left: calc(56px + var(--d, 0) * 2ch); padding-right: var(--ah-4); white-space: pre; counter-increment: ln; min-height: 1.65em; }
.ah-jv-line::before { content: counter(ln); position: absolute; left: 0; width: 40px; padding-right: 8px; text-align: right; color: var(--ah-muted); opacity: .6; user-select: none; }
.ah-jv-line:hover { background: color-mix(in oklab, var(--ah-fg) 4%, transparent); }
.apihub .ah-jv-caret { position: absolute; left: calc(40px + var(--d, 0) * 2ch); top: 0; width: 16px; height: 1.65em; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ah-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; }
.apihub .ah-jv-caret:hover { color: var(--ah-fg); }
.ah-jv-caret .ah-svg { transition: transform .12s; transform: rotate(90deg); }
.ah-jv-node.closed > .ah-jv-line .ah-jv-caret .ah-svg { transform: none; }
.ah-jv-node.closed > .ah-jv-children, .ah-jv-node.closed > .ah-jv-close { display: none; }
.ah-jv-sum { display: none; color: var(--ah-muted); cursor: pointer; }
.ah-jv-node.closed > .ah-jv-line .ah-jv-sum { display: inline; }
.ah-jv-sum:hover { color: var(--ah-fg); text-decoration: underline; }
.ah-jv .j-k { color: #a2378c; }
.ah-jv .j-s { color: #1f7a35; }
.ah-jv .j-d { color: #1565c0; }
.ah-jv .j-b, .ah-jv .j-n { color: #c2185b; font-weight: 600; }
body[data-themes*=dark] .ah-jv .j-k { color: #e09ad4; }
body[data-themes*=dark] .ah-jv .j-s { color: #8fd694; }
body[data-themes*=dark] .ah-jv .j-d { color: #82b8f5; }
body[data-themes*=dark] :is(.ah-jv .j-b, .ah-jv .j-n) { color: #f48fb1; }
.ah-res__body > .ah-code { margin: 0; }
.ah-res__tools { display: inline-flex; gap: 2px; }
.ah-res__state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ah-2); color: var(--ah-muted); text-align: center; padding: var(--ah-6); }
.ah-res__state p { margin: 0; }
.ah-keys { display: inline-flex; align-items: center; gap: 4px; direction: ltr; }
.ah-res__state .icon-loading { width: 28px; height: 28px; }
.ah-res__timer { font: 500 var(--ah-text-lg) var(--ah-data-font); color: var(--ah-fg); direction: ltr; }
.ah-res .ah-alert { margin-top: var(--ah-2); }

/* key/value grid */
.ah-kv { --cols: 36px minmax(120px, 1fr) minmax(140px, 1.3fr) minmax(120px, 1fr) 32px; border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); overflow: hidden; background: var(--ah-bg); }
.ah-kv.with-type { --cols: 36px minmax(110px, 1fr) minmax(130px, 1.3fr) 84px minmax(110px, 1fr) 32px; }
.ah-kv.no-toggle { --cols: minmax(120px, 1fr) minmax(140px, 1.3fr) minmax(120px, 1fr) 32px; }
.ah-kv.env { --cols: 36px minmax(140px, 1fr) minmax(180px, 2fr) 40px 32px; }
.ah-kv__row { display: grid; grid-template-columns: var(--cols); align-items: stretch; min-height: 36px; border-top: 1px solid var(--ah-border); }
.ah-kv__row:first-child { border-top: 0; }
.ah-kv__row > * { min-width: 0; border-inline-start: 1px solid var(--ah-border); }
.ah-kv__row > :first-child { border-inline-start: 0; }
.ah-kv__row.head { min-height: 32px; background: var(--ah-subtle); color: var(--ah-muted); font-size: var(--ah-text-xs); font-weight: 500; }
.ah-kv__row.head > span { display: flex; align-items: center; padding: 0 var(--ah-3); }
.ah-kv__row.head > span:empty, .ah-kv__row > span:empty { padding: 0; }
.ah-kv__row.off .ah-kv__input { color: var(--ah-muted); text-decoration: line-through; }
.ah-kv__row.ghost .ah-kv__input::placeholder { color: color-mix(in oklab, var(--ah-muted) 70%, transparent); }
.ah-kv__check { display: flex !important; align-items: center; justify-content: center; padding: 0 !important; }
:is(.apihub, .ah-layer) .ah-kv__input {
	display: block; width: 100%; height: 100%; min-height: 36px; margin: 0; padding: 0 var(--ah-3);
	border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important;
	color: var(--ah-fg); font-size: var(--ah-text-sm); line-height: 20px; outline: none;
}
:is(.apihub, .ah-layer) .ah-kv__input:focus { box-shadow: inset 0 0 0 2px var(--ah-focus) !important; background: var(--ah-bg) !important; }
:is(.apihub, .ah-layer) .ah-kv__input[readonly]:focus { box-shadow: none !important; }
.ah-kv__input::placeholder { color: var(--ah-muted); }
.apihub .ah-kv__del { margin: auto; opacity: 0; }
.ah-kv__row:hover .ah-kv__del, .apihub .ah-kv__del:focus-visible { opacity: 1; }
.apihub .ah-kv__type {
	display: flex; align-items: center; justify-content: space-between; gap: 4px;
	width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0 var(--ah-2) 0 var(--ah-3);
	border: 0; border-radius: 0; background: transparent; color: var(--ah-fg); font-size: var(--ah-text-xs); box-shadow: none; cursor: pointer;
}
.apihub .ah-kv__type:not(:disabled):hover { background-color: var(--ah-hover) !important; border-color: transparent !important; }
.ah-kv__file { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 var(--ah-3); color: var(--ah-muted); font-size: var(--ah-text-xs); cursor: pointer; overflow: hidden; white-space: nowrap; }
.ah-kv__file:hover { color: var(--ah-fg); background: var(--ah-hover); }
.ah-kv__file span { overflow: hidden; text-overflow: ellipsis; }
.apihub .ah-kv__file-input { position: absolute; width: 1px !important; height: 1px !important; min-height: 0 !important; opacity: 0; pointer-events: none; }
.ah-kv__foot { display: flex; align-items: center; gap: var(--ah-2); padding-inline: var(--ah-3) var(--ah-1); min-height: 36px; border-top: 1px solid var(--ah-border); background: var(--ah-subtle); }
.apihub .ah-kv > .ah-textarea { border: 0; border-radius: 0; box-shadow: none !important; min-height: 160px; }
.apihub .ah-kv > .ah-textarea:focus { box-shadow: inset 0 0 0 2px var(--ah-focus) !important; }
.ah-bodytab > .ah-kv__foot { border: 1px solid var(--ah-border); border-top: 0; border-radius: 0 0 var(--ah-radius-lg) var(--ah-radius-lg); }

/* body / code editor */
.ah-bodytab__modes { margin-bottom: var(--ah-3); }
.ah-code-edit__box { display: flex; border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg) var(--ah-radius-lg) 0 0; background: var(--ah-subtle); overflow: hidden; direction: ltr; }
.ah-code-edit__box:focus-within { border-color: var(--ah-focus); box-shadow: 0 0 0 3px var(--ah-ring); }
.ah-code-edit__gutter { padding: var(--ah-3) var(--ah-2); min-width: 40px; text-align: right; color: var(--ah-muted); font: 12.5px/1.6 var(--ah-mono); white-space: pre; overflow: hidden; user-select: none; border-right: 1px solid var(--ah-border); opacity: .7; }
:is(.apihub, .ah-layer) .ah-code-edit {
	display: block; flex: 1; width: 100%; min-height: 220px; height: auto; margin: 0; padding: var(--ah-3);
	border: 0 !important; border-radius: 0; background: var(--ah-bg) !important; box-shadow: none !important;
	color: var(--ah-fg); font: 12.5px/1.6 var(--ah-mono); resize: vertical; white-space: pre; tab-size: 2; outline: none; direction: ltr; text-align: left;
}
:is(.apihub, .ah-layer) .ah-code-edit--plain { border: 1px solid var(--ah-border) !important; border-radius: var(--ah-radius) !important; min-height: 140px; }
:is(.apihub, .ah-layer) .ah-code-edit--plain:focus { border-color: var(--ah-focus) !important; box-shadow: 0 0 0 3px var(--ah-ring) !important; }
.ah-codestatus { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ah-text-xs); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ah-codestatus.ok { color: var(--ah-success-text); }
.ah-codestatus.bad { color: var(--ah-warning-text); }

.ah-docsedit { max-width: 860px; }
.ah-mdbox { padding: var(--ah-3) var(--ah-4); border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); min-height: 120px; }

.ah-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ah-docsedit .ah-tags { min-height: var(--ah-control); padding: 3px var(--ah-2); border: 1px solid var(--ah-input); border-radius: var(--ah-radius); background: var(--ah-bg); }
.ah-docsedit .ah-tags:focus-within { border-color: var(--ah-focus); box-shadow: 0 0 0 3px var(--ah-ring); }
.ah-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 var(--ah-2); border-radius: 11px; background: var(--ah-subtle); border: 1px solid var(--ah-border); font-size: var(--ah-text-xs); font-family: var(--ah-data-font); }
.apihub .ah-tag__x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; min-height: 0; margin: 0; margin-inline-end: -4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ah-muted); cursor: pointer; box-shadow: none; }
.apihub .ah-tag__x:not(:disabled):hover { background-color: var(--ah-active) !important; color: var(--ah-fg) !important; border-color: transparent !important; }
.apihub .ah-tags__input { flex: 1; min-width: 100px; width: auto; height: 24px; min-height: 0; margin: 0; padding: 0 4px; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: var(--ah-text-sm); outline: none; }

.ah-examples { display: flex; flex-direction: column; gap: var(--ah-2); align-items: flex-start; }
.ah-example { width: 100%; border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); background: var(--ah-bg); }
.ah-example summary { display: flex; align-items: center; gap: var(--ah-2); padding: var(--ah-2) var(--ah-3); cursor: pointer; list-style: none; font-weight: 500; font-size: var(--ah-text-sm); }
.ah-example summary::-webkit-details-marker { display: none; }
.ah-example summary > .ah-svg { color: var(--ah-muted); transition: transform .15s; }
.ah-example[open] summary > .ah-svg { transform: rotate(90deg); }
.apihub:dir(rtl) .ah-example:not([open]) summary > .ah-svg { transform: scaleX(-1); }
.ah-example[open] summary { border-bottom: 1px solid var(--ah-border); }
.ah-example > :not(summary) { margin: var(--ah-3); }
.ah-example__fields { display: grid; grid-template-columns: 90px 1fr 1fr 28px; gap: var(--ah-2); align-items: center; }
.ah-example > .ah-code { margin: 0; border: 0; border-radius: 0 0 var(--ah-radius-lg) var(--ah-radius-lg); }

/* code blocks / JSON */
.ah-code {
	margin: 0;
	padding: var(--ah-3) var(--ah-4);
	border-radius: var(--ah-radius-lg);
	background: var(--ah-subtle);
	border: 1px solid var(--ah-border);
	font: 12.5px/1.6 var(--ah-mono);
	white-space: pre-wrap;
	word-break: break-word;
	direction: ltr;
	text-align: left;
	overflow: auto;
	color: var(--ah-fg);
}
.ah-code--block { max-height: 52vh; margin-top: var(--ah-3); white-space: pre; }
.ah-json .j-k { color: #a2378c; }
.ah-json .j-s { color: #1f7a35; }
.ah-json .j-d { color: #1565c0; }
.ah-json .j-b, .ah-json .j-n { color: #c2185b; font-weight: 600; }
body[data-themes*=dark] .ah-json .j-k { color: #e09ad4; }
body[data-themes*=dark] .ah-json .j-s { color: #8fd694; }
body[data-themes*=dark] .ah-json .j-d { color: #82b8f5; }
body[data-themes*=dark] .ah-json .j-b, body[data-themes*=dark] .ah-json .j-n { color: #f48fb1; }
.ah-img { max-width: 100%; border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); }

/* core sets white-space: nowrap on every table */
.ah-table { width: 100%; white-space: normal; border-collapse: separate; border-spacing: 0; font-size: var(--ah-text-sm); border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); overflow: hidden; }
.ah-table th, .ah-table td { text-align: start; padding: 7px var(--ah-3); border-top: 1px solid var(--ah-border); vertical-align: top; overflow-wrap: anywhere; }
.ah-table tr:first-child > * { border-top: 0; }
.ah-table thead th { background: var(--ah-subtle); color: var(--ah-muted); font-weight: 500; font-size: var(--ah-text-xs); }
.ah-table thead + tbody tr:first-child > * { border-top: 1px solid var(--ah-border); }
.ah-table--kv { table-layout: fixed; }
.ah-table--kv td { word-break: break-all; }
.ah-table--kv th { width: 34%; font-weight: 500; color: var(--ah-muted); font-family: var(--ah-mono); font-size: var(--ah-text-xs); text-align: left; }
.ah-table--kv td { font-family: var(--ah-mono); font-size: var(--ah-text-xs); text-align: left; }
.ah-table code { font-family: var(--ah-mono); font-size: var(--ah-text-xs); padding: 1px 6px; border-radius: 4px; background: var(--ah-subtle); }

/* markdown */
.ah-md { line-height: 1.7; }
.ah-md :is(p, li, h3, h4, h5, h6) { unicode-bidi: plaintext; text-align: start; }
.ah-md p { margin: 6px 0; }
.ah-md h3 { font-size: var(--ah-text-md); margin: var(--ah-3) 0 var(--ah-1); }
.ah-md h4, .ah-md h5, .ah-md h6 { font-size: var(--ah-text-base); margin: var(--ah-3) 0 var(--ah-1); }
.ah-md ul { list-style: disc; padding-inline-start: 20px; margin: 6px 0; }
.ah-md code { font-family: var(--ah-mono); background: var(--ah-subtle); border: 1px solid var(--ah-border); padding: 0 4px; border-radius: 4px; font-size: .88em; }
.ah-md a { color: var(--ah-info-text); text-decoration: underline; text-underline-offset: 2px; }
.ah-md .ah-code { margin: var(--ah-2) 0; }

/* ================================================================ history (list + detail) */

.ah-master { flex: 1; display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); min-height: 0; }
.ah-master__list { display: flex; flex-direction: column; min-height: 0; border-inline-end: 1px solid var(--ah-border); }
.ah-master__toolbar { display: flex; flex-direction: column; gap: 6px; padding: var(--ah-3) var(--ah-4); border-bottom: 1px solid var(--ah-border); }
.ah-master__list .ah-list { flex: 1; overflow: auto; scrollbar-width: thin; }
.apihub .ah-master__list .ah-list__row { padding-inline: var(--ah-4); }
.ah-master__detail { min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.ah-master .ah-empty { grid-column: 1 / -1; }
.ah-hdetail { padding: var(--ah-5) var(--ah-6); display: flex; flex-direction: column; gap: var(--ah-3); }
.ah-hdetail__head { display: flex; align-items: center; gap: var(--ah-2); }
.ah-hdetail__url { flex: 1; min-width: 0; font: var(--ah-text-sm) var(--ah-mono); overflow-wrap: anywhere; }
.apihub .ah-hdetail__close { display: none; }
.ah-hdetail__meta { display: flex; align-items: center; gap: var(--ah-3); flex-wrap: wrap; padding-bottom: var(--ah-3); border-bottom: 1px solid var(--ah-border); }
.ah-hdetail h3 { font-size: var(--ah-text-sm); margin-top: var(--ah-2); }

/* ================================================================ environments */

.ah-envs { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--ah-5); align-items: start; }
.ah-envs__list { display: flex; flex-direction: column; gap: 2px; }
.apihub .ah-envs__item {
	display: grid; grid-template-columns: 8px 1fr auto; grid-template-rows: auto auto; column-gap: var(--ah-3); align-items: center;
	width: 100%; height: auto; min-height: 52px; margin: 0; padding: var(--ah-2) var(--ah-3);
	border: 1px solid transparent; border-radius: var(--ah-radius-lg); background: transparent; color: var(--ah-fg);
	text-align: start; font-weight: 400; cursor: pointer; box-shadow: none;
}
.apihub .ah-envs__item:not(:disabled):hover { background-color: var(--ah-hover) !important; border-color: transparent !important; color: var(--ah-fg) !important; }
.apihub .ah-envs__item.active, .apihub .ah-envs__item.active:not(:disabled):hover { background-color: var(--ah-card) !important; border-color: var(--ah-border) !important; box-shadow: var(--ah-shadow-xs); }
.ah-envs__item .ah-envbtn__dot { grid-row: 1 / span 2; }
.ah-envs__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ah-data-font); }
.ah-envs__count { grid-column: 2; color: var(--ah-muted); font-size: var(--ah-text-xs); }
.ah-envs__item .ah-badge { grid-column: 3; grid-row: 1 / span 2; }
.ah-envs__editor { display: flex; flex-direction: column; gap: var(--ah-3); }
.ah-envs__editor .ah-card__head { margin-bottom: 0; }
.ah-envs__editor > .ah-hint { margin: 0; line-height: 2; }
.ah-hint code, .ah-vars code { font: 11.5px var(--ah-mono); padding: 1px 6px; border-radius: 4px; background: var(--ah-subtle); border: 1px solid var(--ah-border); color: var(--ah-fg); white-space: nowrap; }

/* ================================================================ finder, import, export, share */

.ah-finder__field { display: flex; align-items: center; gap: var(--ah-3); padding: 0 var(--ah-5); border-bottom: 1px solid var(--ah-border); color: var(--ah-muted); }
.ah-layer .ah-finder__input { flex: 1; width: auto; height: 56px; min-height: 0; margin: 0; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--ah-fg); font-size: var(--ah-text-md); outline: none; -webkit-appearance: none; }
.ah-finder__list { max-height: 50vh; overflow: auto; padding: var(--ah-2); }
.ah-layer .ah-finder__item {
	display: flex; align-items: center; gap: var(--ah-3);
	width: 100%; height: auto; min-height: 40px; margin: 0; padding: var(--ah-2) var(--ah-3);
	border: 0; border-radius: var(--ah-radius); background: transparent; color: var(--ah-fg);
	text-align: start; font-weight: 400; cursor: pointer; box-shadow: none;
}
.ah-layer .ah-finder__item:not(:disabled):hover { background-color: transparent !important; border-color: transparent !important; color: var(--ah-fg) !important; }
.ah-layer .ah-finder__item.active, .ah-layer .ah-finder__item.active:not(:disabled):hover { background-color: var(--ah-hover) !important; }
.ah-finder__item > .ah-svg { color: var(--ah-muted); }
.ah-finder__name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--ah-data-font); }
.ah-finder__sub { flex: 1; min-width: 0; color: var(--ah-muted); font: var(--ah-text-xs) var(--ah-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: end; }
.ah-finder__foot { display: flex; align-items: center; gap: 6px; padding: var(--ah-2) var(--ah-5); border-top: 1px solid var(--ah-border); color: var(--ah-muted); font-size: var(--ah-text-xs); }
.ah-finder__foot .ah-kbd + * { margin-inline-end: var(--ah-3); }

.ah-import { display: flex; flex-direction: column; gap: var(--ah-4); }
.ah-import .ah-field { margin: 0; }
.ah-import__source { min-height: 150px; }
.ah-layer .ah-import__source .ah-textarea { min-height: 180px; }
.ah-drop {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	min-height: 150px; padding: var(--ah-5); border: 1.5px dashed var(--ah-border-strong); border-radius: var(--ah-radius-xl);
	background: var(--ah-subtle); color: var(--ah-fg); text-align: center; cursor: pointer; transition: border-color .12s, background-color .12s;
}
.ah-drop:hover, .ah-drop.over { border-color: var(--ah-focus); background: var(--ah-hover); }
.ah-drop .ah-empty__icon { width: 44px; height: 44px; margin-bottom: var(--ah-1); background: var(--ah-bg); }
.ah-drop strong { font-weight: 500; font-size: var(--ah-text-sm); }
.ah-drop__name { font: 500 var(--ah-text-sm) var(--ah-data-font); color: var(--ah-success-text); }
.ah-layer .ah-drop__input { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; cursor: pointer; }
.ah-import__status:empty { display: none; }
.ah-import__help summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ah-muted); font-size: var(--ah-text-sm); list-style: none; }
.ah-import__help summary::-webkit-details-marker { display: none; }
.ah-import__help[open] summary { margin-bottom: var(--ah-3); }
.ah-import__help .ah-hint { margin: var(--ah-3) 0 0; display: block; line-height: 1.6; }
.ah-layer .ah-select-btn { width: 100%; justify-content: flex-start; }
.ah-layer .ah-select-btn > .ah-svg:last-child { margin-inline-start: auto; color: var(--ah-muted); }

.ah-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ah-2); }
.ah-layer .ah-choice {
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
	width: auto; height: auto; min-height: 0; margin: 0; padding: var(--ah-3) var(--ah-4);
	border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); background: var(--ah-bg);
	color: var(--ah-fg); text-align: start; font-weight: 400; cursor: pointer; box-shadow: none;
}
.ah-layer .ah-choice > .ah-svg { color: var(--ah-muted); margin-bottom: var(--ah-2); }
.ah-layer .ah-choice strong { font-weight: 600; font-size: var(--ah-text-sm); }
.ah-layer .ah-choice span { color: var(--ah-muted); font-size: var(--ah-text-xs); }
.ah-layer .ah-choice:not(:disabled):hover { background-color: var(--ah-subtle) !important; border-color: var(--ah-border-strong) !important; color: var(--ah-fg) !important; }
.ah-layer .ah-choice.active, .ah-layer .ah-choice.active:not(:disabled):hover { border-color: var(--ah-focus) !important; box-shadow: 0 0 0 1px var(--ah-focus) !important; background-color: var(--ah-bg) !important; }
.ah-layer .ah-choice.active > .ah-svg { color: var(--ah-fg); }

.ah-share { display: flex; flex-direction: column; gap: var(--ah-3); }
.ah-share__caption { font-size: var(--ah-text-xs); font-weight: 600; color: var(--ah-muted); margin-top: var(--ah-2); }
.ah-members { display: flex; flex-direction: column; }
.ah-member { display: flex; align-items: center; gap: var(--ah-3); min-height: 52px; border-bottom: 1px solid var(--ah-border); }
.ah-member:last-child { border-bottom: 0; }
.ah-member__name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--ah-text-sm); font-weight: 500; }
.ah-member__name small { color: var(--ah-muted); font-weight: 400; font-size: var(--ah-text-xs); text-align: start; }
.ah-suggest { display: flex; flex-direction: column; margin-top: var(--ah-1); border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); padding: var(--ah-1); }
.ah-suggest:empty { display: none; }
.ah-layer .ah-suggest__item {
	display: flex; align-items: center; gap: var(--ah-2);
	width: 100%; height: auto; min-height: 36px; margin: 0; padding: 4px var(--ah-2);
	border: 0; border-radius: var(--ah-radius-sm); background: transparent; color: var(--ah-fg); text-align: start; font-weight: 400; cursor: pointer; box-shadow: none;
}
.ah-layer .ah-suggest__item:not(:disabled):hover { background-color: var(--ah-hover) !important; border-color: transparent !important; color: var(--ah-fg) !important; }
.ah-suggest__item small { color: var(--ah-muted); margin-inline-start: auto; }

/* people: users and groups */
.ah-groupicon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background: var(--ah-violet-soft); color: var(--ah-violet); }
.ah-picker { display: flex; flex-direction: column; }
.apihub .ah-rolebtn, .ah-layer .ah-rolebtn { color: var(--ah-fg); }
.ah-members--compact .ah-member { min-height: 44px; }
.ah-members--compact .ah-hint { margin: var(--ah-2) 0 0; }
.ah-ownerrow { display: flex; align-items: center; gap: var(--ah-3); min-height: 40px; padding: var(--ah-1) var(--ah-1) var(--ah-1) var(--ah-3); padding-inline: var(--ah-3) var(--ah-1); border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); }
.ah-ownerrow:has(.ah-picker) { display: block; padding: 0; border: 0; }
.ah-ownerrow__name { font-size: var(--ah-text-sm); font-weight: 500; }
.ah-ownerrow__name small { color: var(--ah-muted); font-weight: 400; }
.ah-newproject .ah-field { margin-bottom: var(--ah-5); }
.ah-newproject .ah-field:last-child { margin-bottom: 0; }
.ah-newproject .ah-picker + .ah-members { margin-top: var(--ah-2); }

/* settings */
.ah-card__text { margin: calc(-1 * var(--ah-1)) 0 var(--ah-3); line-height: 1.6; }
.ah-stack-col { display: flex; flex-direction: column; gap: var(--ah-4); min-width: 0; }
.ah-card .ah-members { margin-bottom: var(--ah-3); }
.ah-plist__row { display: flex; align-items: center; gap: var(--ah-3); min-height: 56px; padding: var(--ah-2) var(--ah-5); border-bottom: 1px solid var(--ah-border); }
.ah-plist__row:last-child { border-bottom: 0; }
.ah-plist__row:hover { background: var(--ah-subtle); }
.apihub .ah-plist__main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ah-fg); font-size: var(--ah-text-sm); text-align: start; cursor: pointer; box-shadow: none; }
.apihub .ah-plist__main:hover .ah-list__title { text-decoration: underline; text-underline-offset: 2px; }
.apihub .ah-plist__main:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ah-ring); border-radius: var(--ah-radius-sm); }
.ah-plist__stat { display: inline-flex; align-items: center; gap: 4px; min-width: 44px; color: var(--ah-muted); font: var(--ah-text-xs) var(--ah-data-font); }
.ah-checkrow { display: flex; align-items: flex-start; gap: var(--ah-3); cursor: pointer; }
.ah-checkrow input.ah-check { margin-top: 3px !important; }
.ah-checkrow > span { display: flex; flex-direction: column; gap: 4px; }
.ah-checkrow strong { font-weight: 500; font-size: var(--ah-text-sm); }
.ah-checkrow small { color: var(--ah-muted); font-size: var(--ah-text-xs); line-height: 1.6; }

/* environments: save state, the variables on top of the environment menu */
.ah-savestate { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ah-text-xs); color: var(--ah-muted); white-space: nowrap; }
.ah-savestate.saved { color: var(--ah-success-text); }
.ah-savestate.pending { color: var(--ah-warning-text); }
.ah-savestate.error { color: var(--ah-danger-text); }
.ah-savestate .icon-loading-small { width: 14px; height: 14px; }
.ah-envpeek { padding: var(--ah-2) var(--ah-2) var(--ah-3); margin: 0 calc(-1 * var(--ah-1)) var(--ah-1); border-bottom: 1px solid var(--ah-border); }
.ah-envpeek__title { display: flex; align-items: center; gap: var(--ah-2); margin-bottom: var(--ah-2); font-size: var(--ah-text-sm); }
.ah-envpeek__title .ah-hint { margin-inline-start: auto; }
.ah-envpeek__vars { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow: auto; }
.ah-envpeek__row { display: grid; grid-template-columns: minmax(80px, 40%) 1fr; gap: var(--ah-2); font: 12px/1.7 var(--ah-mono); }
.ah-envpeek__row code { color: var(--ah-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-envpeek__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-envpeek__row span.empty { color: var(--ah-warning-text); font-family: var(--ah-data-font); }
.ah-envpeek__row.off { opacity: .5; text-decoration: line-through; }
.ah-alert__actions { display: flex; gap: var(--ah-2); margin-top: var(--ah-3); flex-wrap: wrap; }

/* public documentation link */
.ah-publink { display: flex; flex-direction: column; gap: var(--ah-4); }
.ah-publink .ah-field { margin: 0; }
.ah-publink__intro { display: flex; gap: var(--ah-4); align-items: flex-start; }
.ah-publink__intro strong { font-weight: 600; }
.ah-publink__intro p { margin: 4px 0 0; line-height: 1.6; }
.ah-publink__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ah-4); }
.ah-publink__grid .ah-hint { line-height: 1.6; }
.ah-publink__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: var(--ah-text-sm); }
.ah-publink__list li { position: relative; padding-inline-start: 22px; line-height: 1.6; }
.ah-publink__list li::before { position: absolute; inset-inline-start: 0; top: 0; font-weight: 700; }
.ah-publink__list li.yes::before { content: "✓"; color: var(--ah-success-text); }
.ah-publink__list li.no::before { content: "✕"; color: var(--ah-danger-text); }
.ah-layer a.ah-btn { text-decoration: none; }
:is(.apihub, .ah-layer) .ah-btn--danger-text { color: var(--ah-danger-text); }
:is(.apihub, .ah-layer) .ah-btn--danger-text:not(:disabled):hover { color: var(--ah-danger-text) !important; background-color: var(--ah-danger-soft) !important; }
.ah-badge--inline { height: 18px; padding: 0 6px; margin-inline-start: var(--ah-2); vertical-align: 1px; font-size: 11px; gap: 4px; }

/* ================================================================ API reference (js/docs.js) */
/* three columns: navigation · content · code; the code column has its own dark «terminal» look in both themes */

.ad {
	--ad-nav-w: 272px;
	--ad-code-bg: #0e1117;
	--ad-code-fg: #e6e8ec;
	--ad-code-muted: #8b93a1;
	--ad-code-border: #232833;
	--ad-code-tab: #1a1f29;
	display: grid;
	grid-template-columns: var(--ad-nav-w) minmax(0, 1fr);
	min-height: 100%;
	position: relative;
}
.ad-nav {
	position: sticky; top: 0; align-self: start;
	height: var(--ad-h, 100vh);
	display: flex; flex-direction: column;
	border-inline-end: 1px solid var(--ah-border);
	background: var(--ah-side);
}
.ad-nav__head { padding: var(--ah-4) var(--ah-3) var(--ah-2); }
.ad-nav__field { position: relative; display: flex; align-items: center; }
.ad-nav__field > .ah-svg { position: absolute; z-index: 1; inset-inline-start: 9px; color: var(--ah-muted); pointer-events: none; }
:is(.apihub, .ah-layer) .ad-nav__search { padding-inline: 32px 8px; background: var(--ah-bg); }
.ad-nav__list { flex: 1; overflow: auto; padding: var(--ah-1) var(--ah-2) var(--ah-6); scrollbar-width: thin; }
.ad-nav__link {
	display: flex; align-items: center; gap: var(--ah-2);
	min-height: 30px; padding: 4px var(--ah-2); margin: 1px 0;
	border-radius: var(--ah-radius); color: var(--ah-fg); font-size: var(--ah-text-sm); text-decoration: none;
	border-inline-start: 2px solid transparent;
}
.ad-nav__link:hover { background: var(--ah-side-hover); }
.ad-nav__link.active { background: var(--ah-side-accent); font-weight: 600; border-inline-start-color: var(--ah-primary); }
.ad-nav__link > .ah-svg { color: var(--ah-muted); }
.ad-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ah-data-font); }
.ad-nav__group { margin-top: var(--ah-2); }
.apihub .ad-nav__folder, .ad-nav__folder {
	display: flex; align-items: center; gap: 6px; width: 100%; height: auto; min-height: 28px; margin: 0; padding: 4px var(--ah-2);
	border: 0; border-radius: var(--ah-radius); background: transparent; color: var(--ah-muted);
	font-size: var(--ah-text-xs); font-weight: 600; text-transform: none; text-align: start; cursor: pointer; box-shadow: none; line-height: 20px;
}
.ad-nav__folder:hover { color: var(--ah-fg); background: var(--ah-side-hover); }
.ad-nav__folder .ah-svg { transition: transform .12s; flex-shrink: 0; }
.apihub:dir(rtl) .ad-nav__folder[aria-expanded=false] .ah-svg { transform: scaleX(-1); }
.ad-nav__folder[aria-expanded=true] .ah-svg { transform: rotate(90deg); }
.ad-nav__folder > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ah-data-font); }
.ad-nav__count { font-weight: 500; font-family: var(--ah-data-font); }
.ad-nav__kids { padding-inline-start: var(--ah-3); margin-inline-start: 9px; border-inline-start: 1px solid var(--ah-border); }
.ad-nav__empty { padding: var(--ah-4); color: var(--ah-muted); font-size: var(--ah-text-sm); }

.ad-method { display: inline-block; flex-shrink: 0; min-width: 34px; font: 700 10px/1 var(--ah-mono); letter-spacing: .02em; color: var(--ah-other); direction: ltr; text-align: start; }
.ad-m-get { color: var(--ah-get); }
.ad-m-post { color: var(--ah-post); }
.ad-m-put { color: var(--ah-put); }
.ad-m-patch { color: var(--ah-patch); }
.ad-m-delete { color: var(--ah-delete); }

.ad-main { min-width: 0; padding: var(--ah-8) clamp(var(--ah-5), 3.5vw, 56px) var(--ah-10); container-type: inline-size; container-name: admain; }
.ad-intro { padding-bottom: var(--ah-8); border-bottom: 1px solid var(--ah-border); max-width: 980px; scroll-margin-top: var(--ah-4); }
.ad-intro__eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 11px; background: var(--ah-subtle); color: var(--ah-muted); font-size: var(--ah-text-xs); font-weight: 500; }
.ad-intro h1 { font-size: 32px; letter-spacing: -.02em; margin: var(--ah-3) 0 var(--ah-2); }
.ad-intro .ah-md { color: var(--ah-muted); font-size: var(--ah-text-md); max-width: 760px; }
.ad-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--ah-3); margin-top: var(--ah-6); }
.ad-fact { display: flex; flex-direction: column; gap: 6px; padding: var(--ah-3) var(--ah-4); border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); background: var(--ah-card); min-width: 0; }
.ad-fact--wide { grid-column: 1 / -1; }
.ad-fact__label { display: flex; align-items: center; gap: var(--ah-2); color: var(--ah-muted); font-size: var(--ah-text-xs); font-weight: 500; }
.ad-fact__value { font-size: var(--ah-text-base); font-weight: 600; font-family: var(--ah-data-font); }
.ad-fact__url { display: flex; align-items: center; gap: var(--ah-2); }
.ad-fact__url code { flex: 1; min-width: 0; font: 500 var(--ah-text-base) var(--ah-mono); overflow-wrap: anywhere; }
.ad-intro__actions { display: flex; flex-wrap: wrap; gap: var(--ah-2); margin-top: var(--ah-5); }

.ad-group { margin-top: var(--ah-2); }
.ad-group__head { padding-top: var(--ah-10); }
.ad-group__head h2 { font-size: 22px; letter-spacing: -.01em; }
.ad-group__head h3 { font-size: 18px; color: var(--ah-muted); }
.ad-group__head .ah-md { color: var(--ah-muted); max-width: 760px; }

.ad-op {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 44%); gap: var(--ah-8);
	padding: var(--ah-8) 0; border-bottom: 1px solid var(--ah-border); scroll-margin-top: var(--ah-2);
}
.ad-op__main { min-width: 0; display: flex; flex-direction: column; gap: var(--ah-4); }
.ad-op__title { display: flex; align-items: center; gap: var(--ah-2); }
.ad-op__title h3 { font-size: 20px; letter-spacing: -.01em; }
.ad-op__title .ad-anchor { opacity: 0; }
.ad-op:hover .ad-anchor, .ad-anchor:focus-visible { opacity: 1; }
.ad-url { display: flex; align-items: center; gap: var(--ah-3); padding: 6px 6px 6px var(--ah-3); border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); background: var(--ah-subtle); }
.ad-url .ad-method { font-size: 11.5px; }
.ad-url code { flex: 1; min-width: 0; font: 500 var(--ah-text-base) var(--ah-mono); overflow-wrap: anywhere; color: var(--ah-fg); }
.ad .ah-md { line-height: 1.75; }
.ad-auth { display: flex; gap: var(--ah-3); align-items: flex-start; padding: var(--ah-3) var(--ah-4); border: 1px solid color-mix(in oklab, var(--ah-warning) 28%, var(--ah-border)); border-radius: var(--ah-radius-lg); background: color-mix(in oklab, var(--ah-warning) 6%, var(--ah-bg)); }
.ad-auth > .ah-svg { color: var(--ah-warning-text); margin-top: 2px; }
.ad-auth strong { font-weight: 600; font-size: var(--ah-text-sm); }
.ad-auth__how { margin-top: 2px; color: var(--ah-muted); font-size: var(--ah-text-sm); }
.ad-auth__how code { font: var(--ah-text-xs) var(--ah-mono); padding: 1px 6px; border-radius: 4px; background: var(--ah-subtle); border: 1px solid var(--ah-border); color: var(--ah-fg); }
.ad-params h4 { display: flex; align-items: center; gap: var(--ah-2); font-size: var(--ah-text-sm); font-weight: 600; margin: 0 0 var(--ah-2); padding-bottom: var(--ah-2); border-bottom: 1px solid var(--ah-border); }
.ad-ct { font: var(--ah-text-xs) var(--ah-mono); color: var(--ah-muted); font-weight: 400; }
.ad-params__list { display: flex; flex-direction: column; }
.ad-param { padding: var(--ah-3) 0; border-bottom: 1px dashed var(--ah-border); }
.ad-param:last-child { border-bottom: 0; }
.ad-param__head { display: flex; align-items: baseline; gap: var(--ah-2); }
.ad-param__name { font: 600 var(--ah-text-sm) var(--ah-mono); color: var(--ah-fg); }
.ad-param__type { color: var(--ah-muted); font-size: var(--ah-text-xs); font-family: var(--ah-mono); }
.ad-param__desc { margin-top: 4px; color: var(--ah-muted); font-size: var(--ah-text-sm); line-height: 1.6; }
.ad-param__example { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--ah-text-xs); color: var(--ah-muted); }
.ad-param__example code { font: var(--ah-text-xs) var(--ah-mono); padding: 1px 6px; border-radius: 4px; background: var(--ah-subtle); border: 1px solid var(--ah-border); color: var(--ah-fg); overflow-wrap: anywhere; }
.ad-pre { margin: 0; padding: var(--ah-3) var(--ah-4); border-radius: var(--ah-radius-lg); background: var(--ah-subtle); border: 1px solid var(--ah-border); font: 12.5px/1.6 var(--ah-mono); white-space: pre-wrap; word-break: break-word; direction: ltr; text-align: left; max-height: 420px; overflow: auto; }
.ad-resps { display: flex; flex-direction: column; gap: 6px; }
.ad-resp { display: flex; align-items: center; gap: var(--ah-2); font-size: var(--ah-text-sm); }

.ad-op__code { min-width: 0; }
.ad-op__sticky { position: sticky; top: var(--ah-4); display: flex; flex-direction: column; gap: var(--ah-4); }
.ad-card { border: 1px solid var(--ad-code-border); border-radius: var(--ah-radius-xl); background: var(--ad-code-bg); color: var(--ad-code-fg); overflow: hidden; box-shadow: var(--ah-shadow-md); }
.ad-card__head { display: flex; align-items: center; gap: var(--ah-2); padding: var(--ah-2) var(--ah-2) var(--ah-2) var(--ah-4); padding-inline: var(--ah-4) var(--ah-2); border-bottom: 1px solid var(--ad-code-border); min-height: 40px; }
.ad-card__title { font-size: var(--ah-text-xs); font-weight: 600; color: var(--ad-code-muted); letter-spacing: .02em; }
.ad-card__meta { font-size: var(--ah-text-xs); color: var(--ad-code-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ad-card .ad-m-get { color: #4ade80; } .ad-card .ad-m-post { color: #fbbf24; } .ad-card .ad-m-put { color: #60a5fa; } .ad-card .ad-m-patch { color: #c4b5fd; } .ad-card .ad-m-delete { color: #f87171; }
.apihub .ad-card .ah-btn--ghost, .ad-card .ah-btn--ghost { color: var(--ad-code-muted); }
.apihub .ad-card .ah-btn--ghost:not(:disabled):hover { background-color: var(--ad-code-tab) !important; color: var(--ad-code-fg) !important; }
.ad-copy.copied { color: #4ade80 !important; }
.ad-langs { display: flex; gap: 2px; padding: 6px var(--ah-2); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--ad-code-border); direction: ltr; }
.ad-langs::-webkit-scrollbar { display: none; }
.apihub .ad-lang, .ad-lang {
	flex: none; height: 26px; min-height: 0; margin: 0; padding: 0 10px; border: 0; border-radius: var(--ah-radius);
	background: transparent; color: var(--ad-code-muted); font: 500 var(--ah-text-xs)/26px var(--ah-data-font); cursor: pointer; box-shadow: none;
}
.apihub .ad-lang:hover { color: var(--ad-code-fg); background: var(--ad-code-tab); }
.apihub .ad-lang.active { color: var(--ad-code-fg); background: var(--ad-code-tab); box-shadow: inset 0 -2px 0 #60a5fa; }
.apihub .ad-lang.ad-lang--status { font-family: var(--ah-mono); }
.ad-lang--status.s2 { color: #4ade80 !important; } .ad-lang--status.s3 { color: #60a5fa !important; } .ad-lang--status.s4 { color: #fbbf24 !important; } .ad-lang--status.s5 { color: #f87171 !important; }
.ad-code { margin: 0; padding: var(--ah-4); max-height: 460px; overflow: auto; font: 12.5px/1.7 var(--ah-mono); color: var(--ad-code-fg); white-space: pre; direction: ltr; text-align: left; tab-size: 2; scrollbar-width: thin; scrollbar-color: #2c3340 transparent; }
.ad-code .j-k { color: #93c5fd; } .ad-code .j-s { color: #86efac; } .ad-code .j-d { color: #fca5a5; } .ad-code .j-b, .ad-code .j-n { color: #f9a8d4; } .ad-code .j-kw { color: #c4b5fd; } .ad-code .j-c { color: #6b7280; font-style: italic; }
.ad-code__empty { color: var(--ad-code-muted); font-style: italic; }
.ad .ad-pre .j-k { color: #a2378c; } .ad .ad-pre .j-s { color: #1f7a35; } .ad .ad-pre .j-d { color: #1565c0; } .ad .ad-pre .j-b, .ad .ad-pre .j-n { color: #c2185b; }
body[data-themes*=dark] .ad .ad-pre .j-k { color: #e09ad4; } body[data-themes*=dark] .ad .ad-pre .j-s { color: #8fd694; } body[data-themes*=dark] .ad .ad-pre .j-d { color: #82b8f5; }
.ad-foot { padding: var(--ah-8) 0 0; color: var(--ah-muted); font-size: var(--ah-text-xs); }
/* the mobile «Contents» button and its scrim: .ah-btn's display would otherwise win */
.apihub .ad .ad-navtoggle, .ad .ad-scrim { display: none; }
/* explicit places, so nothing else can take a grid cell */
.ad > .ad-nav { grid-column: 1; grid-row: 1; }
.ad > .ad-main { grid-column: 2; grid-row: 1; }

/* in the app the view sits in the scrolling body; on the public page it fills Nextcloud's fixed #content and scrolls itself */
.ah-docsview { min-height: 100%; }
/* the public page is its own scrolling area (no Nextcloud layout around it) */
.apihub.apihub--public { display: block; height: auto; min-height: 0; overflow: auto; background: var(--ah-bg); scrollbar-width: thin; }

/* code beside the text only when the content column itself is wide enough (in the app, two sidebars share the width) */
@container admain (max-width: 1000px) {
	.ad-op { grid-template-columns: minmax(0, 1fr); gap: var(--ah-5); }
	.ad-op__sticky { position: static; }
}
@media (max-width: 900px) {
	.ad { grid-template-columns: minmax(0, 1fr); }
	.ad > .ad-nav { position: fixed; z-index: 40; inset-block: 0; inset-inline-start: 0; width: min(var(--ad-nav-w), 86vw); height: auto; transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--ah-shadow-lg); }
	.apihub:dir(rtl) .ad-nav, [dir=rtl] .ad-nav { transform: translateX(105%); }
	.nav-open .ad-nav { transform: none; }
	.nav-open .ad-scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .35); }
	.ad > .ad-main { grid-column: 1; grid-row: 2; }
	.apihub .ad .ad-navtoggle { display: inline-flex; grid-column: 1; grid-row: 1; position: sticky; top: var(--ah-2); z-index: 30; margin: var(--ah-2) var(--ah-4) 0; justify-self: start; }
	.ad-main { padding: var(--ah-4); }
	.ad-intro h1 { font-size: 26px; }
}

/* project image */
.ah-pavatar--img { background: var(--ah-subtle); overflow: hidden; border: 1px solid var(--ah-border); }
.ah-pavatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apihub .ah-logobtn { position: relative; display: inline-flex; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: var(--ah-radius); background: transparent; cursor: pointer; box-shadow: none; }
.apihub .ah-logobtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ah-ring); }
.ah-logobtn__edit { position: absolute; inset-inline-end: -6px; bottom: -6px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ah-bg); border: 1px solid var(--ah-border); color: var(--ah-muted); box-shadow: var(--ah-shadow-sm); opacity: 0; transition: opacity .12s; }
.ah-logobtn:hover .ah-logobtn__edit, .ah-logobtn:focus-visible .ah-logobtn__edit { opacity: 1; }
.ad-intro__title { display: flex; align-items: center; gap: var(--ah-4); margin: var(--ah-3) 0 var(--ah-2); }
.ad-intro__title h1 { margin: 0; }
.ad-intro__logo { width: 56px; height: 56px; border-radius: var(--ah-radius-xl); object-fit: cover; border: 1px solid var(--ah-border); flex-shrink: 0; }

/* custom domain in the link dialog */
.ah-domain .ah-field__label { display: flex; align-items: center; gap: var(--ah-2); }
.ah-domain__dns { flex-direction: row; }
.ah-domain__dns p { margin: 0 0 var(--ah-2); line-height: 1.6; }
.ah-domain__dns .ah-table { margin-bottom: var(--ah-2); background: var(--ah-bg); }

/* the public page: own header (project image, name, language), Nextcloud's chrome is not used (base layout) */
#body-base:has(.apihub--public) { background: var(--ah-bg); }
.apihub--public { position: fixed; inset: 0; }
/* The base layout has no body[data-themes], so the theme's font rules (rayatheme base.css) don't reach the page:
   the same stacks here. English: Inter, then Yekan Bakh for Persian; Persian: Persian digits like in the app. */
.apihub--public {
	--ds-font-input: "Inter", "YekanBakh", ui-sans-serif, system-ui, sans-serif;
	--font-face: "Inter", "YekanBakh", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
	font-family: var(--font-face);
}
.apihub--public:lang(fa) { --font-face: "InterLetters", "YekanBakhFaNum", "YekanBakh", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; }
.adp-top {
	position: sticky; top: 0; z-index: 20;
	display: flex; align-items: center; gap: var(--ah-4);
	height: 60px; padding: 0 clamp(var(--ah-4), 3vw, var(--ah-8));
	border-bottom: 1px solid var(--ah-border);
	background: color-mix(in oklab, var(--ah-bg) 88%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
}
.adp-brand { display: flex; align-items: center; gap: var(--ah-3); min-width: 0; flex: 1; }
.adp-logo { width: 34px; height: 34px; border-radius: var(--ah-radius-lg); object-fit: cover; border: 1px solid var(--ah-border); flex-shrink: 0; }
.adp-logo--letter { display: inline-flex; align-items: center; justify-content: center; background: var(--ah-primary); color: var(--ah-primary-fg); font-weight: 700; border: 0; }
.adp-titles { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.adp-titles strong { font-size: var(--ah-text-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adp-titles span { color: var(--ah-muted); font-size: var(--ah-text-xs); }
.adp-langs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--ah-radius-lg); background: var(--ah-subtle); flex-shrink: 0; }
.apihub .adp-lang { height: 28px; min-height: 0; margin: 0; padding: 0 var(--ah-3); border: 1px solid transparent; border-radius: var(--ah-radius); background: transparent; color: var(--ah-muted); font: 500 var(--ah-text-sm)/26px var(--ah-data-font); cursor: pointer; box-shadow: none; }
.apihub .adp-lang[lang=fa] { font-family: inherit; }
.apihub .adp-lang:hover { color: var(--ah-fg); }
.apihub .adp-lang.active { background: var(--ah-bg); color: var(--ah-fg); border-color: var(--ah-border); box-shadow: var(--ah-shadow-xs); }
.apihub--public .ad-nav { top: 60px; height: calc(var(--ad-h, 100vh) - 60px); }
.apihub--public .ad-op__sticky { top: 76px; }
.apihub--public .ad-op, .apihub--public .ad-intro { scroll-margin-top: 68px; }
.apihub--public .ad-main { padding-bottom: var(--ah-10); }
.apihub--public .ad-nav__list { padding-bottom: var(--ah-6); }
.apihub--public .ad-navtoggle { top: 68px !important; }

/* fallback toasts (when OCP.Toast is missing) */
.ah-toasts { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 10011; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.ah-toast {
	--ah-tone: var(--ah-info);
	padding: 12px 16px; border: 1px solid color-mix(in oklab, var(--ah-tone) 18%, var(--ah-border)); border-inline-start: 3px solid var(--ah-tone);
	border-radius: 14px; background: color-mix(in oklab, var(--ah-tone) 4%, var(--ah-pop)); color: var(--ah-pop-fg);
	box-shadow: var(--ah-shadow-lg); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere;
}
.ah-toast.error { --ah-tone: var(--ah-danger); }
.ah-toast.warning { --ah-tone: var(--ah-warning); }
.ah-toast.success { --ah-tone: var(--ah-success); }

/* ================================================================ responsive */

@media (max-width: 1280px) {
	.ah-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
	.ah-master { grid-template-columns: minmax(0, 1fr); }
	.ah-master.has-detail .ah-master__list { display: none; }
	.ah-master:not(.has-detail) .ah-master__detail { display: none; }
	.ah-master__list { border-inline-end: 0; }
	.apihub .ah-hdetail__close { display: inline-flex; }
	.ah-editor.cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(160px, calc(var(--split) * 100%)) 9px minmax(140px, 1fr); }
	.ah-editor.cols .ah-splitter { cursor: row-resize; }
	.ah-editor.cols .ah-splitter::before { left: 0; right: 0; top: 4px; bottom: auto; width: auto; height: 1px; }
	.ah-editor.cols .ah-splitter::after { left: 50%; top: 2px; width: 36px; height: 5px; margin: 0 0 0 -18px; }
	.apihub .ah-layoutbtn { display: none; }
	.ah-hide-sm { display: none !important; }
}
@media (max-width: 900px) {
	.ah-nav {
		position: absolute; z-index: 30; inset-block: 0; inset-inline-start: 0;
		width: min(var(--ah-nav-w), 86vw);
		box-shadow: var(--ah-shadow-lg);
		transform: translateX(-105%);
		transition: transform .2s ease;
	}
	.apihub:dir(rtl) .ah-nav { transform: translateX(105%); }
	.apihub.nav-open .ah-nav { transform: none; }
	.ah-nav-resize { display: none; }
	.apihub.nav-open .ah-nav-scrim { display: block; position: absolute; inset: 0; z-index: 25; background: rgba(0, 0, 0, .35); }
	.apihub .ah-header__toggle { display: inline-flex; margin-inline-start: calc(-1 * var(--ah-2)); }
	.ah-header { padding-inline: var(--ah-4); gap: var(--ah-2); flex-wrap: wrap; }
	/* the title keeps at least half the row; the actions wrap below it when they don't fit */
	.ah-header__title { flex: 1 1 auto; min-width: 55%; }
	.ah-header__title > .ah-statusbtn { flex-shrink: 0; }
	.ah-header__actions { margin-inline-start: auto; }
	.ah-header__sub { display: none; }
	.ah-header__actions { gap: 6px; }
	.apihub .ah-header__actions .ah-btn:not(.ah-btn--icon) .ah-btn__label { display: none; }
	.apihub .ah-header__actions .ah-btn:not(.ah-btn--icon) { padding: 0 var(--ah-2); }
	.apihub .ah-header__actions .ah-btn.ah-envbtn:not(.ah-btn--icon) .ah-btn__label { display: inline; max-width: 110px; }
	.ah-page { padding: var(--ah-4); }
	.ah-grid2, .ah-envs, .ah-publink__grid { grid-template-columns: minmax(0, 1fr); }
	.ah-req, .ah-res { padding-inline: var(--ah-4); }
	.ah-kv { overflow-x: auto; }
	.ah-kv__row { min-width: 520px; }
	.ah-choices { grid-template-columns: 1fr; }
	.ah-list__row .ah-badge { display: none; }
	.ah-plist__stat { display: none; }
	.ah-plist__row { padding-inline: var(--ah-4); }
}
@media (max-width: 560px) {
	.ah-stats { grid-template-columns: 1fr 1fr; gap: var(--ah-2); }
	.apihub .ah-stat { padding: var(--ah-3); }
	.ah-stat__icon { width: 32px; height: 32px; }
	.apihub .ah-methodbtn { width: 88px; }
	.apihub .ah-send { padding: 0 var(--ah-3); }
	.apihub .ah-send .ah-btn__label { display: none; }
	.ah-crumb__folder, .ah-crumb__sep { display: none; }
	.ah-res__head h2 { display: none; }
	.ah-modal__header, .ah-modal__body, .ah-modal__footer { padding-inline: var(--ah-4); }
	.ah-overlay { padding-top: 4vh; }
}

/* ================================================================ 2.0: markdown extras */

.ah-md ol { list-style: decimal; padding-inline-start: 22px; margin: 6px 0; }
.ah-md li { margin: 2px 0; }
.ah-md h1 { font-size: var(--ah-text-xl); margin: var(--ah-4) 0 var(--ah-2); }
.ah-md h2 { font-size: var(--ah-text-lg); margin: var(--ah-4) 0 var(--ah-2); }
.ah-md blockquote { margin: var(--ah-2) 0; padding: var(--ah-1) var(--ah-3); border-inline-start: 3px solid var(--ah-border-strong); color: var(--ah-muted); }
.ah-md hr { border: 0; border-top: 1px solid var(--ah-border); margin: var(--ah-4) 0; }
.ah-md em { font-style: italic; }
.ah-md__table { overflow-x: auto; margin: var(--ah-2) 0; }
.ah-md table { border-collapse: collapse; font-size: var(--ah-text-sm); white-space: normal; }
.ah-md th, .ah-md td { border: 1px solid var(--ah-border); padding: 6px 10px; text-align: start; vertical-align: top; }
.ah-md th { background: var(--ah-subtle); font-weight: 600; }
.ah-md pre { white-space: pre-wrap; }

/* ================================================================ 2.0: typed parameters, inherited headers */

.ah-kv.typed { --cols: 36px minmax(110px, 1fr) minmax(120px, 1.2fr) 96px 34px minmax(110px, 1fr) 32px; }
.ah-kv.typed.no-toggle { --cols: minmax(110px, 1fr) minmax(120px, 1.2fr) 96px 34px minmax(110px, 1fr) 32px; }
.ah-kv__row.head > span[title] { justify-content: center; }
.ah-kv__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ah-primary); flex-shrink: 0; }
.apihub .ah-kv__type { font-family: var(--ah-mono); }
.ah-menu__form { display: flex; flex-direction: column; gap: var(--ah-2); padding: var(--ah-2) var(--ah-3) var(--ah-1); border-bottom: 1px solid var(--ah-border); }
.ah-menu__form .ah-field { margin: 0; gap: 4px; }
.ah-menu__form .ah-field__label { font-size: var(--ah-text-xs); }
.ah-inherited { margin-top: var(--ah-4); padding: var(--ah-3) var(--ah-4); border: 1px dashed var(--ah-border-strong); border-radius: var(--ah-radius-lg); }
.ah-inherited__title { display: flex; align-items: center; gap: 6px; font-size: var(--ah-text-sm); font-weight: 500; color: var(--ah-muted); margin-bottom: var(--ah-2); }
.ah-inherited .ah-table td.ah-muted { font-family: inherit; font-size: var(--ah-text-xs); }

/* ================================================================ 2.0: schema editor */

.ah-schema { display: flex; flex-direction: column; border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); background: var(--ah-bg); overflow: hidden; }
.ah-schema__bar { display: flex; align-items: center; gap: var(--ah-2); padding: 6px var(--ah-2) 6px var(--ah-3); background: var(--ah-subtle); border-bottom: 1px solid var(--ah-border); flex-wrap: wrap; }
.ah-schema__root { display: inline-flex; align-items: center; gap: var(--ah-2); }
.ah-schema__root strong { font-size: var(--ah-text-sm); font-weight: 600; }
.ah-schema__fields { display: flex; flex-direction: column; padding: var(--ah-1) 0; }
.ah-schema__row {
	--depth: 0;
	display: grid; grid-template-columns: minmax(110px, 1fr) auto auto minmax(120px, 1.4fr) minmax(90px, .9fr) 28px 28px;
	align-items: center; gap: 6px; padding: 3px var(--ah-2) 3px calc(var(--ah-3) + var(--depth) * 20px);
	position: relative;
}
.ah-schema__row:hover { background: var(--ah-hover); }
.ah-schema__row::before { content: ''; position: absolute; inset-inline-start: calc(var(--ah-3) + var(--depth) * 20px - 11px); top: 0; bottom: 0; border-inline-start: 1px solid var(--ah-border); display: var(--guide, none); }
.ah-schema__row[style*="--depth: 1"], .ah-schema__row[style*="--depth: 2"], .ah-schema__row[style*="--depth: 3"], .ah-schema__row[style*="--depth: 4"] { --guide: block; }
.ah-schema__row--items { grid-template-columns: minmax(110px, 1fr) auto 1fr; }
:is(.apihub, .ah-layer) .ah-schema input {
	height: 28px; min-height: 28px; margin: 0; padding: 0 8px; border: 1px solid transparent; border-radius: var(--ah-radius-sm);
	background: transparent; color: var(--ah-fg); font-size: var(--ah-text-sm); box-shadow: none; min-width: 0; width: 100%;
}
:is(.apihub, .ah-layer) .ah-schema input:not([readonly]):hover { border-color: var(--ah-border); }
:is(.apihub, .ah-layer) .ah-schema input:focus { border-color: var(--ah-focus); background: var(--ah-bg); outline: none; box-shadow: 0 0 0 2px var(--ah-ring); }
.ah-schema__name { font-weight: 600; }
.ah-schema__items { color: var(--ah-muted); font-size: var(--ah-text-xs); padding-inline-start: 8px; }
.apihub .ah-schema__type, .ah-layer .ah-schema__type {
	display: inline-flex; align-items: center; gap: 4px; height: 24px; min-height: 0; margin: 0; padding: 0 6px 0 8px;
	border: 1px solid var(--ah-border); border-radius: 12px; background: var(--ah-bg); color: var(--ah-info-text);
	font: 500 var(--ah-text-xs) var(--ah-mono); white-space: nowrap; cursor: pointer; box-shadow: none;
}
.apihub .ah-schema__type.t-object, .apihub .ah-schema__type.t-array { color: var(--ah-violet); }
.apihub .ah-schema__type.t-ref { color: var(--ah-success-text); background: var(--ah-success-soft); border-color: transparent; }
.apihub .ah-schema__type.t-integer, .apihub .ah-schema__type.t-number { color: var(--ah-warning-text); }
.apihub .ah-schema__type:disabled { cursor: default; }
.ah-schema__req { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ah-text-xs); color: var(--ah-muted); cursor: pointer; white-space: nowrap; }
.ah-schema__add { padding: 2px var(--ah-2) 2px calc(var(--ah-2) + var(--depth, 0) * 20px); }
.ah-schema .ah-code-edit { border: 0; border-radius: 0; min-height: 200px; }
.ah-schema > .ah-kv__foot { border-top: 1px solid var(--ah-border); }
.ah-schemapanel { display: flex; flex-direction: column; gap: var(--ah-2); }
.ah-schemapanel > .ah-kv__foot { border: 0; background: none; padding: 0; }
.ah-tabempty--col { flex-direction: column; align-items: flex-start; }
.ah-tabempty--col p { margin: 0; line-height: 1.6; }
.ah-example__pane { display: flex; flex-direction: column; gap: var(--ah-2); }
.ah-example__pane > .ah-seg { align-self: flex-start; }
.ah-bodytab__modes { display: flex; align-items: center; gap: var(--ah-2); flex-wrap: wrap; }
@media (max-width: 900px) {
	.ah-schema__row { grid-template-columns: minmax(90px, 1fr) auto auto 28px 28px; }
	.ah-schema__row .ah-schema__desc, .ah-schema__row .ah-schema__ex { display: none; }
}

/* ================================================================ 2.0: tests, rules, results */

.ah-teststab { display: flex; flex-direction: column; gap: var(--ah-5); }
.ah-subsection { display: flex; flex-direction: column; gap: var(--ah-2); }
.ah-subsection h3 { display: flex; align-items: center; gap: var(--ah-2); font-size: var(--ah-text-base); font-weight: 600; }
.ah-subsection h3 .ah-svg { color: var(--ah-muted); }
.ah-subsection__head { display: flex; align-items: center; gap: var(--ah-2); }
.ah-subsection > .ah-hint { margin: 0; line-height: 1.6; }
.ah-subhead { font-size: var(--ah-text-sm); font-weight: 600; margin: var(--ah-4) 0 var(--ah-2) !important; }
.ah-rules { display: flex; flex-direction: column; border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); overflow: hidden; }
.ah-rules > .ah-muted { margin: 0; padding: var(--ah-3) var(--ah-4); font-size: var(--ah-text-sm); }
.ah-rule { display: flex; align-items: center; gap: var(--ah-2); padding: 6px var(--ah-2) 6px var(--ah-3); border-top: 1px solid var(--ah-border); flex-wrap: wrap; }
.ah-rule:first-child { border-top: 0; }
.ah-rule.off > :not(input) { opacity: .55; }
.ah-rule > .ah-input { width: auto; flex: 1 1 140px; max-width: 260px; }
.ah-rule__braces { color: var(--ah-muted); font: var(--ah-text-sm) var(--ah-mono); margin: 0 -4px; }
.ah-rule__from { color: var(--ah-muted); font-size: var(--ah-text-sm); }
.ah-rule__res { display: inline-flex; }
.ah-rule__res.ok, .ah-testres__row.ok > .ah-svg, .ah-runrow.ok .ah-runrow__icon, .ah-runbadge.ok { color: var(--ah-success); }
.ah-rule__res.bad, .ah-testres__row.bad > .ah-svg, .ah-runrow.bad .ah-runrow__icon, .ah-runbadge.bad { color: var(--ah-danger); }
.apihub .ah-pick { max-width: 240px; }
.apihub .ah-pick .ah-btn__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-testres { display: flex; flex-direction: column; }
.ah-testres__row { display: flex; align-items: flex-start; gap: var(--ah-2); padding: var(--ah-2) var(--ah-3); border-bottom: 1px solid var(--ah-border); font-size: var(--ah-text-sm); }
.ah-testres__row > .ah-svg { margin-top: 1px; }
.ah-testres__text { flex: 1; min-width: 0; line-height: 1.6; }
.ah-testres__text code { font: var(--ah-text-xs) var(--ah-mono); padding: 1px 5px; border-radius: 4px; background: var(--ah-subtle); border: 1px solid var(--ah-border); }
.ah-testres__actual { color: var(--ah-danger-text); font: var(--ah-text-xs) var(--ah-mono); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-res__head .ah-badge .ah-svg { margin-inline-end: 2px; }

/* ================================================================ 2.0: review, comments, history */

.apihub .ah-reviewbtn { gap: 6px; }
.apihub .ah-reviewbtn.st-requested { color: var(--ah-info-text); border-color: color-mix(in oklab, var(--ah-info) 40%, var(--ah-border)); background: var(--ah-info-soft); }
.apihub .ah-reviewbtn.st-approved { color: var(--ah-success-text); border-color: transparent; background: var(--ah-success-soft); }
.apihub .ah-reviewbtn.st-changes { color: var(--ah-warning-text); border-color: transparent; background: var(--ah-warning-soft); }
.ah-countbtn__n { margin-inline-start: -10px; margin-top: -16px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ah-primary); color: var(--ah-primary-fg); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; pointer-events: none; z-index: 1; }
.ah-overlay:has(.ah-modal--drawer) { padding: 0; justify-content: flex-end; }
.ah-modal--drawer { max-width: 480px; height: 100%; max-height: 100vh; border-radius: 0; border-block: 0; border-inline-end: 0; animation: ah-slide .18s ease-out; }
[dir=rtl] .ah-modal--drawer, :dir(rtl) .ah-modal--drawer { animation-name: ah-slide-rtl; }
@keyframes ah-slide { from { transform: translateX(24px); opacity: .6; } }
@keyframes ah-slide-rtl { from { transform: translateX(-24px); opacity: .6; } }
.ah-modal--drawer .ah-modal__body { flex: 1; display: flex; flex-direction: column; padding-bottom: 0; min-height: 0; }
.ah-activity { flex: 1; display: flex; flex-direction: column; gap: var(--ah-3); min-height: 0; }
.ah-activity__tabs { align-self: flex-start; }
.ah-activity__pane { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ah-comments { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: var(--ah-4); padding-bottom: var(--ah-3); scrollbar-width: thin; }
.ah-comment { display: flex; gap: var(--ah-3); }
.ah-comment__body { flex: 1; min-width: 0; }
.ah-comment__meta { display: flex; align-items: center; gap: 6px; font-size: var(--ah-text-xs); }
.ah-comment__meta strong { font-size: var(--ah-text-sm); font-weight: 600; }
.ah-comment__text { margin-top: 4px; padding: var(--ah-2) var(--ah-3); border-radius: 0 var(--ah-radius-lg) var(--ah-radius-lg) var(--ah-radius-lg); background: var(--ah-subtle); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--ah-text-sm); }
:dir(rtl) .ah-comment__text { border-radius: var(--ah-radius-lg) 0 var(--ah-radius-lg) var(--ah-radius-lg); }
.ah-mention { color: var(--ah-info-text); background: var(--ah-info-soft); border-radius: 4px; padding: 0 3px; font-weight: 500; }
.ah-composer { position: sticky; bottom: 0; padding: var(--ah-3) 0 var(--ah-4); background: var(--ah-pop); border-top: 1px solid var(--ah-border); }
.ah-composer .ah-actions-row { margin-top: var(--ah-2); }
.ah-timeline { display: flex; flex-direction: column; overflow: auto; scrollbar-width: thin; }
.apihub .ah-timeline__item, .ah-layer .ah-timeline__item {
	display: flex; align-items: flex-start; gap: var(--ah-3); width: 100%; min-height: 0; margin: 0; padding: var(--ah-2) var(--ah-2);
	border: 0; border-radius: var(--ah-radius); background: transparent; color: var(--ah-fg); text-align: start; cursor: pointer; box-shadow: none; font-weight: 400;
}
.ah-timeline__item:hover { background: var(--ah-hover) !important; }
.ah-timeline__dot { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--ah-muted); flex-shrink: 0; box-shadow: 0 0 0 3px var(--ah-bg); }
.a-create .ah-timeline__dot { background: var(--ah-success); }
.a-delete .ah-timeline__dot { background: var(--ah-danger); }
.a-restore .ah-timeline__dot { background: var(--ah-violet); }
.a-sync .ah-timeline__dot { background: var(--ah-info); }
.a-update .ah-timeline__dot { background: var(--ah-warning); }
.ah-timeline__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--ah-text-sm); line-height: 1.5; }
.ah-timeline__main .ah-muted { font-size: var(--ah-text-xs); }
.ah-timeline__day { padding: var(--ah-4) var(--ah-2) var(--ah-1); font-size: var(--ah-text-xs); font-weight: 600; color: var(--ah-muted); }
.ah-timeline--project { border: 1px solid var(--ah-border); border-radius: var(--ah-radius-xl); padding: var(--ah-2); background: var(--ah-card); }
.ah-timeline .ah-list__time { display: inline-flex; gap: 6px; align-items: center; }
.ah-revision { display: flex; flex-direction: column; gap: var(--ah-3); }
.ah-diff { display: flex; flex-direction: column; gap: var(--ah-4); }
.ah-diff__part h4 { font-size: var(--ah-text-sm); font-weight: 600; margin-bottom: var(--ah-1); }
.ah-diff__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ah-2); }
.ah-diff__label { display: block; font-size: var(--ah-text-xs); color: var(--ah-muted); margin-bottom: 2px; }
.ah-diff__cols .ah-code { max-height: 260px; overflow: auto; font-size: 12px; margin: 0; }
.ah-diff__cols .ah-code.old { border-color: color-mix(in oklab, var(--ah-danger) 30%, var(--ah-border)); }
.ah-diff__cols .ah-code.new { border-color: color-mix(in oklab, var(--ah-success) 30%, var(--ah-border)); }
.ah-tag--task { padding: 0 !important; }
.ah-tag--task a { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; color: inherit; text-decoration: none; max-width: 320px; }
.ah-tag--task a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-tag--task strong { font: 600 var(--ah-text-xs) var(--ah-mono); }
.ah-picker { display: flex; flex-direction: column; gap: var(--ah-3); }
.ah-list--picker { max-height: 50vh; overflow: auto; border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); }

/* ================================================================ 2.0: pages (models, guides, settings, runs, versions) */

.ah-modeledit { padding: var(--ah-5) var(--ah-6); gap: var(--ah-4); }
.ah-modeledit__head { display: flex; align-items: center; gap: var(--ah-2); }
.ah-modeledit__head > .ah-svg { color: var(--ah-muted); }
.ah-modeledit__head .ah-title-input { flex: 1; min-width: 0; }
.ah-modeledit .ah-textarea { min-height: 0; }
.ah-guiderow { cursor: pointer; }
.ah-guiderow__n { width: 22px; height: 22px; border-radius: 11px; background: var(--ah-subtle); color: var(--ah-muted); font-size: var(--ah-text-xs); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ah-guiderow__move { display: inline-flex; opacity: 0; }
.ah-guiderow:hover .ah-guiderow__move, .ah-guiderow.active .ah-guiderow__move { opacity: 1; }
.ah-guideedit { padding: var(--ah-5) var(--ah-6); gap: var(--ah-4); }
.ah-guideedit__body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.apihub .ah-guideedit__text { flex: 1; min-height: 420px; font-family: var(--ah-data-font); line-height: 1.7; }
.ah-guideedit .ah-mdbox { max-width: 820px; }
.ah-copyfield { display: flex; align-items: center; gap: var(--ah-2); padding: 6px 6px 6px var(--ah-3); border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); background: var(--ah-subtle); margin: var(--ah-2) 0; }
.ah-copyfield code { flex: 1; min-width: 0; font: var(--ah-text-sm) var(--ah-mono); overflow-wrap: anywhere; }
.ah-copyfield a { flex: 1; color: var(--ah-fg); font-weight: 500; }
.ah-list-plain { margin: var(--ah-2) 0; padding-inline-start: 20px; list-style: disc; line-height: 1.7; }
.ah-checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--ah-2) var(--ah-4); margin: var(--ah-2) 0; }
.ah-checkgrid .ah-checkrow > span { font-size: var(--ah-text-sm); }
.ah-hint--box.warn { background: var(--ah-warning-soft); color: var(--ah-warning-text); }
.ah-hint--box p { margin: 0 0 4px; }
.ah-progress { height: 6px; border-radius: 3px; background: var(--ah-subtle); overflow: hidden; margin-bottom: var(--ah-2); }
.ah-progress__bar { display: block; height: 100%; width: 0; background: var(--ah-primary); transition: width .2s; }
.ah-runsum { font-size: var(--ah-text-sm); color: var(--ah-muted); margin-bottom: var(--ah-2); }
.ah-runtable { display: flex; flex-direction: column; border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); overflow: hidden; }
.ah-runtable:empty { display: none; }
.ah-runrow { border-top: 1px solid var(--ah-border); }
.ah-runrow:first-child { border-top: 0; }
div.ah-runrow, .ah-runrow > summary { display: flex; align-items: center; gap: var(--ah-2); padding: var(--ah-2) var(--ah-3); font-size: var(--ah-text-sm); }
.ah-runrow > summary { cursor: pointer; list-style: none; }
.ah-runrow > summary::-webkit-details-marker { display: none; }
.ah-runrow > summary:hover { background: var(--ah-hover); }
.ah-runrow__icon { display: inline-flex; width: 18px; justify-content: center; }
.ah-runrow__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-runrow__meta { display: inline-flex; align-items: center; gap: var(--ah-3); color: var(--ah-muted); font-size: var(--ah-text-xs); }
.ah-runrow__err { color: var(--ah-danger-text); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-runrow__detail { display: flex; flex-direction: column; gap: var(--ah-2); padding: 0 var(--ah-4) var(--ah-3) calc(var(--ah-4) + 26px); }
.ah-runrow__detail .ah-testres { border: 1px solid var(--ah-border); border-radius: var(--ah-radius); }
.ah-runrow__detail > .ah-btn { align-self: flex-start; }
.ah-runrow__url { font: var(--ah-text-xs) var(--ah-mono); color: var(--ah-muted); overflow-wrap: anywhere; }
.ah-runhead { display: flex; align-items: center; gap: var(--ah-4); margin-bottom: var(--ah-4); flex-wrap: wrap; }
.ah-runhead h2 { font-size: var(--ah-text-lg); }
.ah-runhead p { margin: 2px 0 0; font-size: var(--ah-text-sm); }
.ah-runbadge { display: inline-flex; }
.ah-runstats { display: flex; gap: var(--ah-5); }
.ah-runstats > div { display: flex; flex-direction: column; align-items: center; }
.ah-runstats strong { font-size: var(--ah-text-xl); font-weight: 600; }
.ah-runstats strong.ok { color: var(--ah-success); }
.ah-runstats strong.bad { color: var(--ah-danger); }
.ah-runstats span { font-size: var(--ah-text-xs); color: var(--ah-muted); }
.ah-runreport { display: flex; flex-direction: column; gap: var(--ah-3); }
.ah-changelog { display: flex; flex-direction: column; gap: var(--ah-4); margin-top: var(--ah-4); }
.ah-changelog > .ah-btn { align-self: center; }
.ah-relrow { align-items: center; }
.ah-relrow__tag { display: inline-flex; align-items: center; gap: 6px; min-width: 88px; padding: 2px 10px; border-radius: 12px; background: var(--ah-info-soft); color: var(--ah-info-text); font: 600 var(--ah-text-sm) var(--ah-mono); }
.ah-relrow__actions { display: inline-flex; gap: var(--ah-1); align-items: center; }
.ah-diffview { display: flex; flex-direction: column; gap: var(--ah-4); }
.ah-diffsec h3 { display: flex; align-items: center; gap: var(--ah-2); font-size: var(--ah-text-base); margin-bottom: var(--ah-2); }
.ah-diffsec.add h3 { color: var(--ah-success-text); }
.ah-diffsec.chg h3 { color: var(--ah-warning-text); }
.ah-diffsec.del h3 { color: var(--ah-danger-text); }
.ah-diffsec .ah-list { border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); }

/* public link dialog */
.ah-publink__tabs { align-self: flex-start; }
.ah-swatches { display: flex; align-items: center; gap: var(--ah-2); flex-wrap: wrap; }
.apihub .ah-swatch, .ah-layer .ah-swatch { width: 28px; height: 28px; min-height: 0; padding: 0; margin: 0; border-radius: 50%; border: 2px solid var(--ah-bg); box-shadow: 0 0 0 1px var(--ah-border); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ah-layer .ah-swatch.active { box-shadow: 0 0 0 2px var(--ah-fg); }
.ah-layer .ah-swatch--none { background: var(--ah-subtle); color: var(--ah-muted); }
.ah-layer .ah-color { width: 36px; height: 28px; padding: 0; border: 1px solid var(--ah-border); border-radius: var(--ah-radius-sm); background: none; cursor: pointer; }
.ah-stats--3 { grid-template-columns: repeat(3, 1fr); }
.ah-chart { display: flex; align-items: flex-end; gap: 3px; height: 120px; margin-top: var(--ah-4); padding: var(--ah-2); border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); }
.ah-chart__col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.ah-chart__bar { width: 100%; min-height: 2px; display: flex; align-items: flex-end; border-radius: 3px 3px 0 0; background: color-mix(in oklab, var(--ah-primary) 35%, transparent); }
.ah-chart__bar2 { width: 100%; border-radius: 3px 3px 0 0; background: var(--ah-primary); }
.ah-chart__axis { display: flex; justify-content: space-between; font-size: var(--ah-text-xs); color: var(--ah-muted); margin-top: 4px; }

/* ================================================================ 2.0: docs view (schemas, guides, models, try it, versions) */

.ad-type { font: var(--ah-text-xs) var(--ah-mono); color: var(--ah-info-text); }
a.ad-type--model { color: var(--ah-success-text); text-decoration: none; border-bottom: 1px dashed currentColor; }
.ad-req { font-size: 11px; font-weight: 600; color: var(--ah-danger-text); text-transform: lowercase; }
.ad-opt { font-size: 11px; color: var(--ah-muted); }
.ad-param__example code + code { margin-inline-start: -2px; }
.ad-schema { display: flex; flex-direction: column; border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); padding: var(--ah-1) var(--ah-3); margin-bottom: var(--ah-2); }
.ad-schema__root { padding: 6px 0; border-bottom: 1px solid var(--ah-border); }
.ad-schema__row { --depth: 0; padding: var(--ah-2) 0 var(--ah-2) calc(var(--depth) * 18px); border-bottom: 1px dashed var(--ah-border); }
:dir(rtl) .ad-schema__row { padding: var(--ah-2) calc(var(--depth) * 18px) var(--ah-2) 0; }
.ad-schema__row:last-child { border-bottom: 0; }
.ad-schema__row[style*="--depth: 1"], .ad-schema__row[style*="--depth: 2"], .ad-schema__row[style*="--depth: 3"] { border-inline-start: 2px solid var(--ah-border); padding-inline-start: calc(var(--depth) * 18px); }
.ad-details > summary { cursor: pointer; font-size: var(--ah-text-sm); color: var(--ah-muted); margin: var(--ah-2) 0; }
.ad-resp--schema > summary { display: flex; align-items: center; gap: var(--ah-2); cursor: pointer; list-style: none; }
.ad-resp--schema > summary::-webkit-details-marker { display: none; }
.ad-resp--schema > summary .ah-svg { transition: transform .15s; }
:dir(rtl) .ad-resp--schema > summary .ah-svg { transform: rotate(180deg); }
.ad-resp--schema[open] > summary .ah-svg { transform: rotate(90deg); }
.ad-resp--schema .ad-schema { margin: var(--ah-2) 0 var(--ah-2) 22px; }
.ad-resp--schema { display: block; }
.ad-guide { padding: var(--ah-8) 0; border-bottom: 1px solid var(--ah-border); max-width: 820px; scroll-margin-top: var(--ah-2); }
.ad-guide__title { font-size: 24px; letter-spacing: -.01em; margin-bottom: var(--ah-2) !important; }
.ad-guide .ah-md { font-size: var(--ah-text-md); }
.ad-model { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 40%); gap: var(--ah-8); padding: var(--ah-6) 0; border-bottom: 1px solid var(--ah-border); scroll-margin-top: var(--ah-2); }
.ad-model__main { min-width: 0; display: flex; flex-direction: column; gap: var(--ah-3); }
.ad-model__name { display: flex; align-items: center; gap: var(--ah-2); font: 600 18px var(--ah-mono); }
.ad-model__name .ah-svg { color: var(--ah-success); }
.ad-nav__group--models { margin-top: var(--ah-3); padding-top: var(--ah-2); border-top: 1px solid var(--ah-side-border); }
.ad-version__wrap { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: var(--ah-2); }
.apihub select.ad-version { height: 24px; min-height: 0; padding: 0 22px 0 6px; margin: 0; font-size: var(--ah-text-xs); border-radius: 12px; width: auto; }
.ad-intro__eyebrow { flex-wrap: wrap; }
.ad-vernote { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: var(--ah-3); padding: var(--ah-2) var(--ah-3); border-radius: var(--ah-radius-lg); background: var(--ah-info-soft); color: var(--ah-info-text); font-size: var(--ah-text-sm); }
.ad-vernote strong { display: inline-flex; align-items: center; gap: 4px; }
.ad-vernote details { flex-basis: 100%; }
.ad-vernote summary { cursor: pointer; }
.ad-vernote .ah-md { color: var(--ah-fg); font-size: var(--ah-text-sm); }
.ad-try { border: 1px solid color-mix(in oklab, var(--ah-primary) 35%, var(--ah-border)); border-radius: var(--ah-radius-lg); background: color-mix(in oklab, var(--ah-primary) 4%, var(--ah-bg)); }
.ad-try[hidden] { display: none; }
.ad-try__box { display: flex; flex-direction: column; gap: var(--ah-3); padding: var(--ah-4); }
.ad-try__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ah-2); }
.ad-try__grid h5 { margin: var(--ah-2) 0 0; font-size: var(--ah-text-xs); font-weight: 600; color: var(--ah-muted); text-transform: uppercase; letter-spacing: .03em; }
.ad-try__field { display: grid; grid-template-columns: minmax(100px, 28%) minmax(0, 1fr); align-items: center; gap: var(--ah-2); font: var(--ah-text-xs) var(--ah-mono); }
.ad-try__field > span { overflow: hidden; text-overflow: ellipsis; color: var(--ah-fg); }
.ad-try__q { display: flex; align-items: center; gap: var(--ah-2); }
.ad-try__q .ad-try__field { flex: 1; }
.apihub .ad-try__body { min-height: 90px; font-size: 12.5px; }
.ad-try__actions { display: flex; align-items: center; gap: var(--ah-3); flex-wrap: wrap; }
.ad-try__out:empty { display: none; }
.ad-try__out { border-top: 1px solid var(--ah-border); padding-top: var(--ah-3); display: flex; flex-direction: column; gap: var(--ah-2); }
.ad-try__meta { display: flex; align-items: center; gap: var(--ah-3); font-size: var(--ah-text-xs); color: var(--ah-muted); }
.ad-try__res { max-height: 420px; overflow: auto; border-radius: var(--ah-radius-lg); padding: var(--ah-3); margin: 0; background: var(--ad-code-bg); color: var(--ad-code-fg); border: 1px solid var(--ad-code-border); }
.ad-try__err { display: flex; gap: var(--ah-2); align-items: flex-start; color: var(--ah-danger-text); font-size: var(--ah-text-sm); }
.ad-try__err p { margin: 4px 0; color: var(--ah-fg); line-height: 1.6; }
.ad-try__err code { font: var(--ah-text-xs) var(--ah-mono); overflow-wrap: anywhere; color: var(--ah-muted); }
.ad-try__state { display: flex; align-items: center; gap: var(--ah-2); color: var(--ah-muted); font-size: var(--ah-text-sm); }
.apihub .ad-trybtn[aria-expanded=true] { background: var(--ah-primary); color: var(--ah-primary-fg); border-color: transparent; }
@container admain (max-width: 1000px) {
	.ad-model { grid-template-columns: minmax(0, 1fr); gap: var(--ah-4); }
}

/* public page: accent colour, password */
.apihub--public[data-accent] { --ah-primary-hover: color-mix(in oklab, var(--ah-primary) 85%, black); --ah-ring: color-mix(in oklab, var(--ah-primary) 30%, transparent); }
.apihub--public[data-accent] .adp-top { border-bottom-color: color-mix(in oklab, var(--ah-primary) 35%, var(--ah-border)); }
.apihub--public[data-accent] .adp-lang.active { color: var(--ah-primary); }
.adp-lock { display: flex; justify-content: center; padding: 12vh var(--ah-4) var(--ah-8); }
.adp-lock__card { width: 100%; max-width: 380px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--ah-2); }
.adp-lock__icon { width: 56px; height: 56px; border-radius: 28px; background: var(--ah-subtle) center / 26px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23767676' d='M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z'/%3E%3C/svg%3E"); }
.adp-lock__card h1 { font-size: var(--ah-text-xl); margin-top: var(--ah-2) !important; }
.adp-lock__card > p { margin: 0; color: var(--ah-muted); }
.adp-lock__form { display: flex; gap: var(--ah-2); width: 100%; margin-top: var(--ah-3); }
.adp-lock__form .ah-input { flex: 1; }
.adp-lock__error { color: var(--ah-danger-text); font-size: var(--ah-text-sm); min-height: 1.5em; }
.ah-card__head h2 { display: flex; align-items: center; gap: var(--ah-2); }
.ah-card__head h2 > .ah-svg { color: var(--ah-muted); }
.ah-card > .ah-hint, .ah-card > p.ah-hint { margin: 0 0 var(--ah-3); line-height: 1.7; font-size: var(--ah-text-sm); }
.ah-page > .ah-hint:empty { display: none; }
.ah-card .ah-grid2 .ah-field { margin-bottom: var(--ah-3); }
@media (max-width: 700px) {
	/* typed tables scroll sideways instead of squeezing every column */
	.ah-kv.typed { overflow-x: auto; scrollbar-width: thin; }
	.ah-kv.typed > .ah-kv__row { min-width: 620px; }
	.ah-kv.typed > .ah-kv__foot { position: sticky; inset-inline-start: 0; }
	.ah-rule > .ah-input { max-width: none; }
	.ad-try__field { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ================================================================ 2.1: docs viewer (js/docs.js) — one page at a time */

.dx {
	--dx-nav-w: 280px;
	--dx-top: 0px;
	--ad-code-bg: #0e1117;
	--ad-code-fg: #e6e8ec;
	--ad-code-muted: #8b93a1;
	--ad-code-border: #232833;
	--ad-code-tab: #1a1f29;
	display: grid;
	grid-template-columns: var(--dx-nav-w) minmax(0, 1fr);
	min-height: 100%;
	position: relative;
}
.apihub--public .dx { --dx-top: 64px; }
.dx-nav {
	position: sticky; top: var(--dx-top); align-self: start;
	height: calc(var(--ad-h, 100vh) - var(--dx-top));
	display: flex; flex-direction: column;
	border-inline-end: 1px solid var(--ah-side-border);
	background: var(--ah-side);
}
.dx-nav__head { padding: var(--ah-4) var(--ah-3) var(--ah-2); }
.apihub .dx-searchbtn {
	display: flex; align-items: center; gap: var(--ah-2); width: 100%; height: 36px; min-height: 0; margin: 0; padding: 0 var(--ah-3);
	border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); background: var(--ah-bg); color: var(--ah-muted);
	font: inherit; font-size: var(--ah-text-sm); cursor: pointer; box-shadow: var(--ah-shadow-xs); text-align: start;
}
.apihub .dx-searchbtn:hover { border-color: var(--ah-border-strong); color: var(--ah-fg); }
.dx-searchbtn span { flex: 1; }
.dx kbd, .dx-palette kbd, .adp-top kbd { font: 500 11px/1 var(--ah-mono); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--ah-border); background: var(--ah-subtle); color: var(--ah-muted); }
.dx-nav__list { flex: 1; overflow: auto; padding: var(--ah-1) var(--ah-2) var(--ah-6); scrollbar-width: thin; }
.dx-nav__foot { padding: var(--ah-3) var(--ah-4); border-top: 1px solid var(--ah-side-border); font-size: var(--ah-text-xs); color: var(--ah-muted); }
.dx-nav__sep { height: 1px; margin: var(--ah-2) var(--ah-2); background: var(--ah-side-border); }
.dx-nav__link {
	display: flex; align-items: center; gap: var(--ah-2); min-height: 34px; padding: 4px var(--ah-2) 4px var(--ah-3);
	border-radius: var(--ah-radius); color: var(--ah-fg); text-decoration: none; font-size: var(--ah-text-sm); line-height: 1.35;
}
.dx-nav__link:hover { background: var(--ah-side-hover); }
.dx-nav__link.active { background: color-mix(in oklab, var(--ah-primary) 12%, transparent); color: var(--ah-primary); font-weight: 600; }
[data-theme=dark] .dx-nav__link.active { background: color-mix(in oklab, var(--ah-primary) 22%, transparent); }
.dx-nav__link > .ah-svg { color: var(--ah-muted); flex-shrink: 0; }
.dx-nav__link.active > .ah-svg { color: inherit; }
.dx-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ah-data-font); }
.dx-nav__ep .ad-method { min-width: 0; font-size: 9.5px; padding: 2px 5px; border-radius: 4px; background: color-mix(in oklab, currentColor 12%, transparent); }
.dx-nav__ep.deprecated .dx-nav__label { text-decoration: line-through; color: var(--ah-muted); }
.dx-nav__group { margin-top: 2px; }
.dx-nav__grouphead { display: flex; align-items: center; gap: 2px; }
.apihub .dx-nav__chev { width: 22px; height: 28px; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--ah-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ah-radius-sm); box-shadow: none; flex-shrink: 0; }
.apihub .dx-nav__chev:hover { background: var(--ah-side-hover); color: var(--ah-fg); }
.dx-nav__chev .ah-svg { transition: transform .15s; }
:dir(rtl) .dx-nav__chev .ah-svg { transform: rotate(180deg); }
.dx-nav__chev[aria-expanded=true] .ah-svg { transform: rotate(90deg); }
.dx-nav__folder { flex: 1; min-width: 0; padding-inline-start: 4px; font-weight: 600; font-size: var(--ah-text-sm); }
.dx-nav__caption { display: flex; align-items: center; gap: var(--ah-2); color: var(--ah-fg); padding-block: 6px; }
.dx-nav__count { font-size: 11px; color: var(--ah-muted); padding-inline: 6px; font-family: var(--ah-data-font); }
.dx-nav__kids { margin-inline-start: 11px; padding-inline-start: 6px; border-inline-start: 1px solid var(--ah-side-border); }

.dx-main { min-width: 0; padding: var(--ah-8) clamp(var(--ah-5), 4vw, 64px) var(--ah-10); container-type: inline-size; container-name: dxmain; }
.dx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 44%); gap: clamp(var(--ah-6), 3.5vw, 56px); max-width: 1440px; margin: 0 auto; align-items: start; }
[data-kind=intro] .dx-grid, [data-kind=folder] .dx-grid { grid-template-columns: minmax(0, 1fr); max-width: 1040px; }
[data-kind=intro] .dx-side, [data-kind=folder] .dx-side { display: none; }
[data-kind=guide] .dx-grid { grid-template-columns: minmax(0, 1fr) 220px; max-width: 1120px; }
[data-kind=model] .dx-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 40%); }
.dx-page { min-width: 0; display: flex; flex-direction: column; gap: var(--ah-4); animation: dx-in .18s ease-out; }
@keyframes dx-in { from { opacity: 0; transform: translateY(4px); } }
.dx-side { min-width: 0; position: sticky; top: calc(var(--dx-top) + var(--ah-6)); align-self: start; }
.dx-sticky { display: flex; flex-direction: column; gap: var(--ah-4); max-height: calc(var(--ad-h, 100vh) - var(--dx-top) - 48px); overflow: auto; scrollbar-width: none; border-radius: var(--ah-radius-xl); }
.dx-codecard .ad-code { max-height: 380px; margin: 0; }
.dx-muted { color: var(--ah-muted); margin: 0; font-size: var(--ah-text-sm); }

/* page parts */
.dx-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--ah-text-sm); color: var(--ah-muted); }
.dx-crumbs a { color: var(--ah-muted); text-decoration: none; }
.dx-crumbs a:hover { color: var(--ah-primary); }
.dx-crumbs__sep { opacity: .5; }
.dx-title { display: flex; align-items: center; gap: var(--ah-3); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.dx-title > .ah-svg { color: var(--ah-muted); }
.dx-title--model { font-family: var(--ah-mono); font-size: 26px; }
.dx-title--model > .ah-svg { color: var(--ah-success); }
.dx-ephead { display: flex; align-items: center; gap: var(--ah-3); flex-wrap: wrap; }
.dx-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 12px; font-size: var(--ah-text-xs); background: var(--ah-subtle); color: var(--ah-muted); }
.dx-badge.st-deprecated { background: var(--ah-danger-soft); color: var(--ah-danger-text); }
.dx-copybar { display: inline-flex; }
.dx-copybar .dx-copypage { border-start-end-radius: 0; border-end-end-radius: 0; }
.dx-copybar .dx-copylink { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -1px; }
.ah-btn.copied, .dx-copybar .copied { color: var(--ah-success) !important; }
.dx-url {
	display: flex; align-items: center; gap: var(--ah-2); padding: 6px 6px 6px var(--ah-2);
	border: 1px solid var(--ah-border); border-radius: var(--ah-radius-xl); background: var(--ah-subtle); min-height: 48px;
}
.dx-url__method { flex-shrink: 0; padding: 4px 10px; border-radius: var(--ah-radius); font: 700 12px/1.2 var(--ah-mono); background: color-mix(in oklab, currentColor 13%, transparent); }
.dx-url__host { color: var(--ah-muted); font: var(--ah-text-sm) var(--ah-mono); max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; }
.dx-url__path { flex: 1; min-width: 0; font: 500 var(--ah-text-md) var(--ah-mono); color: var(--ah-fg); overflow-wrap: anywhere; }
.dx-url__param { color: var(--ah-violet); background: color-mix(in oklab, var(--ah-violet) 12%, transparent); border-radius: 4px; padding: 0 2px; }
.apihub .dx-trybtn { flex-shrink: 0; gap: 6px; }
.dx-desc .ah-md { font-size: var(--ah-text-md); line-height: 1.75; }
.dx-block { display: flex; flex-direction: column; gap: var(--ah-2); }
.dx-block__title { display: flex; align-items: center; gap: var(--ah-2); font-size: var(--ah-text-base); font-weight: 600; margin: var(--ah-2) 0 0 !important; padding-bottom: var(--ah-2); border-bottom: 1px solid var(--ah-border); }
.dx-block__title--big { font-size: var(--ah-text-lg); border: 0; margin-top: var(--ah-5) !important; padding: 0; }
.dx-ct { font: 400 var(--ah-text-xs) var(--ah-mono); color: var(--ah-muted); padding: 2px 8px; border-radius: 10px; background: var(--ah-subtle); }
.dx-auth { display: flex; gap: var(--ah-3); align-items: flex-start; padding: var(--ah-3) var(--ah-4); border: 1px solid color-mix(in oklab, var(--ah-warning) 30%, var(--ah-border)); border-radius: var(--ah-radius-lg); background: color-mix(in oklab, var(--ah-warning) 7%, var(--ah-bg)); }
.dx-auth > .ah-svg { color: var(--ah-warning-text); margin-top: 2px; }
.dx-auth strong { font-size: var(--ah-text-sm); font-weight: 600; }
.dx-auth__how { margin-top: 4px; color: var(--ah-muted); font-size: var(--ah-text-sm); }
.dx-auth__how code, .dx-fact code { font: var(--ah-text-xs) var(--ah-mono); padding: 1px 6px; border-radius: 4px; background: var(--ah-subtle); border: 1px solid var(--ah-border); color: var(--ah-fg); overflow-wrap: anywhere; }

/* schema tree and parameter lists */
.dx-schema { display: flex; flex-direction: column; }
.dx-schema__root { display: flex; align-items: center; gap: var(--ah-2); padding: 6px 0 var(--ah-2); color: var(--ah-muted); font-size: var(--ah-text-sm); }
.dx-field { padding: 10px 0; border-bottom: 1px dashed var(--ah-border); }
.dx-fieldwrap:last-child > .dx-field, .dx-schema--flat > .dx-field:last-child { border-bottom: 0; }
.dx-field__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.dx-field__name { font: 600 var(--ah-text-sm) var(--ah-mono); color: var(--ah-fg); }
.dx-type { font: var(--ah-text-xs) var(--ah-mono); color: var(--ah-info-text); }
a.dx-type--model { color: var(--ah-success-text); text-decoration: none; border-bottom: 1px dashed currentColor; }
a.dx-type--model:hover { border-bottom-style: solid; }
.dx-req { font-size: 11px; font-weight: 600; color: var(--ah-danger-text); }
.dx-opt { font-size: 11px; color: var(--ah-muted); }
.dx-field__desc { margin-top: 4px; color: var(--ah-muted); font-size: var(--ah-text-sm); line-height: 1.65; }
.dx-field__facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.dx-fact { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: var(--ah-text-xs); color: var(--ah-muted); }
.apihub .dx-field__toggle { width: 20px; height: 20px; min-height: 0; margin: 0 -4px 0 -2px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--ah-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; }
.apihub .dx-field__toggle:hover { background: var(--ah-hover); color: var(--ah-fg); }
.dx-field__toggle .ah-svg { transition: transform .15s; }
:dir(rtl) .dx-field__toggle .ah-svg { transform: rotate(180deg); }
.dx-field__toggle[aria-expanded=true] .ah-svg { transform: rotate(90deg); }
.dx-field__kids { margin-inline-start: 7px; padding-inline-start: var(--ah-4); border-inline-start: 2px solid var(--ah-border); }
.dx-field__kids[hidden] { display: none; }

/* tabs inside blocks, responses */
.dx-switch { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--ah-2); }
.apihub .dx-switch__tab { display: inline-flex; align-items: center; gap: 6px; height: 30px; min-height: 0; margin: 0; padding: 0 var(--ah-3); border: 1px solid var(--ah-border); border-radius: 15px; background: var(--ah-bg); color: var(--ah-muted); font: inherit; font-size: var(--ah-text-sm); cursor: pointer; box-shadow: none; }
.apihub .dx-switch__tab:hover { color: var(--ah-fg); border-color: var(--ah-border-strong); }
.apihub .dx-switch__tab.active { color: var(--ah-fg); background: var(--ah-subtle); border-color: var(--ah-border-strong); font-weight: 600; }
.dx-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ah-mono); }
.dx-status__name { font-family: var(--ah-data-font); font-weight: 400; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-status--card { font-size: var(--ah-text-xs); color: var(--ad-code-fg); }
.dx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ah-muted); flex-shrink: 0; }
.dx-dot.s2 { background: var(--ah-success); } .dx-dot.s3 { background: var(--ah-info); } .dx-dot.s4 { background: var(--ah-warning); } .dx-dot.s5 { background: var(--ah-danger); }
.dx-resp { display: flex; flex-direction: column; gap: var(--ah-2); }
.dx-resp__meta { display: flex; align-items: center; gap: var(--ah-2); font-size: var(--ah-text-sm); }
.dx-pre { max-height: 420px; overflow: auto; margin: 0; }

/* introduction */
.dx-hero { display: flex; flex-direction: column; gap: var(--ah-3); padding-bottom: var(--ah-2); }
.dx-hero__eyebrow { display: flex; align-items: center; gap: var(--ah-2); color: var(--ah-muted); font-size: var(--ah-text-sm); font-weight: 500; }
.dx-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px; background: var(--ah-info-soft); color: var(--ah-info-text); font: 600 var(--ah-text-xs) var(--ah-mono); }
.dx-hero__title { display: flex; align-items: center; gap: var(--ah-4); }
.dx-hero__title h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 750; letter-spacing: -.025em; line-height: 1.15; }
.dx-hero__logo { width: 60px; height: 60px; border-radius: 16px; object-fit: cover; border: 1px solid var(--ah-border); box-shadow: var(--ah-shadow-sm); }
.dx-hero > .ah-md { font-size: var(--ah-text-md); color: var(--ah-muted); max-width: 780px; line-height: 1.8; }
.dx-vernote { padding: var(--ah-2) var(--ah-3); border-radius: var(--ah-radius-lg); background: var(--ah-info-soft); color: var(--ah-info-text); font-size: var(--ah-text-sm); }
.dx-vernote summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.dx-vernote .ah-md { color: var(--ah-fg); }
.dx-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--ah-3); }
.dx-fact.dx-fact--wide { grid-column: 1 / -1; }
.dx-facts > .dx-fact { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: var(--ah-3) var(--ah-4); border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); background: var(--ah-card); font-size: var(--ah-text-sm); }
.dx-fact__label { display: flex; align-items: center; gap: var(--ah-2); color: var(--ah-muted); font-size: var(--ah-text-xs); }
.dx-facts strong { font-size: var(--ah-text-md); color: var(--ah-fg); }
.dx-fact__url { display: flex; align-items: center; gap: var(--ah-2); }
.dx-fact__url code { flex: 1; font: 500 var(--ah-text-md) var(--ah-mono); color: var(--ah-fg); background: none; border: 0; padding: 0; overflow-wrap: anywhere; }
.dx-section { display: flex; flex-direction: column; gap: var(--ah-3); margin-top: var(--ah-4); }
.dx-section > h2 { font-size: var(--ah-text-lg); font-weight: 650; }
.dx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--ah-3); }
.dx-card {
	display: flex; flex-direction: column; gap: 6px; padding: var(--ah-4); border: 1px solid var(--ah-border); border-radius: var(--ah-radius-xl);
	background: var(--ah-card); color: var(--ah-fg); text-decoration: none; transition: border-color .12s, box-shadow .12s, transform .12s;
}
.dx-card:hover { border-color: color-mix(in oklab, var(--ah-primary) 45%, var(--ah-border)); box-shadow: var(--ah-shadow-md); transform: translateY(-1px); }
.dx-card__icon { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; background: color-mix(in oklab, var(--ah-primary) 10%, var(--ah-subtle)); color: var(--ah-primary); margin-bottom: 4px; }
.dx-card strong { font-size: var(--ah-text-base); font-weight: 600; }
.dx-card__text { color: var(--ah-muted); font-size: var(--ah-text-sm); line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dx-card__methods { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.dx-card__methods .ad-method { min-width: 0; font-size: 9.5px; padding: 2px 5px; border-radius: 4px; background: color-mix(in oklab, currentColor 12%, transparent); }
.dx-card__count { margin-inline-start: auto; font-size: var(--ah-text-xs); color: var(--ah-muted); }
.dx-chips { display: flex; flex-wrap: wrap; gap: var(--ah-2); }
.dx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 16px; border: 1px solid var(--ah-border); color: var(--ah-fg); text-decoration: none; font: var(--ah-text-sm) var(--ah-mono); }
.dx-chip:hover { border-color: var(--ah-primary); color: var(--ah-primary); }
.dx-chip .ah-svg { color: var(--ah-success); }
.dx-eplist { display: flex; flex-direction: column; border: 1px solid var(--ah-border); border-radius: var(--ah-radius-xl); overflow: hidden; background: var(--ah-card); }
.dx-eprow { display: flex; align-items: center; gap: var(--ah-3); padding: var(--ah-3) var(--ah-4); border-top: 1px solid var(--ah-border); color: var(--ah-fg); text-decoration: none; }
.dx-eprow:first-child { border-top: 0; }
.dx-eprow:hover { background: var(--ah-hover); }
.dx-eprow > .ah-svg { color: var(--ah-muted); }
:dir(rtl) .dx-eprow > .ah-svg { transform: rotate(180deg); }
.dx-eprow .ad-method { min-width: 50px; }
.dx-eprow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dx-eprow__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-eprow__path { font: var(--ah-text-xs) var(--ah-mono); color: var(--ah-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-eprow.deprecated .dx-eprow__name { text-decoration: line-through; color: var(--ah-muted); }
.dx-downloads { display: flex; flex-wrap: wrap; gap: var(--ah-2); }

/* guide: prose and outline */
.dx-prose { font-size: var(--ah-text-md); line-height: 1.85; }
.dx-prose h1, .dx-prose h2 { font-size: 22px; margin: var(--ah-6) 0 var(--ah-2); scroll-margin-top: calc(var(--dx-top) + 16px); }
.dx-prose h3 { font-size: 18px; margin: var(--ah-5) 0 var(--ah-2); scroll-margin-top: calc(var(--dx-top) + 16px); }
.dx-prose .ad-pre, .dx-prose pre { background: var(--ad-code-bg); color: var(--ad-code-fg); border-radius: var(--ah-radius-lg); padding: var(--ah-3) var(--ah-4); overflow: auto; font: 13px/1.6 var(--ah-mono); }
.dx-toc { display: flex; flex-direction: column; gap: 2px; padding-inline-start: var(--ah-3); border-inline-start: 1px solid var(--ah-border); font-size: var(--ah-text-sm); }
.dx-toc strong { font-size: var(--ah-text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ah-muted); margin-bottom: var(--ah-2); }
.dx-toc a { color: var(--ah-muted); text-decoration: none; padding: 3px 0; line-height: 1.4; }
.dx-toc a:hover { color: var(--ah-primary); }
.dx-toc__h3 { padding-inline-start: var(--ah-3) !important; font-size: var(--ah-text-xs); }

/* footer: previous / next */
.dx-foot { margin-top: var(--ah-8); display: flex; flex-direction: column; gap: var(--ah-4); }
.dx-pns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ah-3); }
.dx-pn { display: flex; flex-direction: column; gap: 4px; padding: var(--ah-3) var(--ah-4); border: 1px solid var(--ah-border); border-radius: var(--ah-radius-lg); color: var(--ah-fg); text-decoration: none; }
.dx-pn:hover { border-color: var(--ah-primary); }
.dx-pn--next { text-align: end; align-items: flex-end; }
.dx-pn__dir { font-size: var(--ah-text-xs); color: var(--ah-muted); }
.dx-pn__title { display: inline-flex; align-items: center; gap: var(--ah-2); font-weight: 600; font-size: var(--ah-text-sm); max-width: 100%; overflow: hidden; }
.dx-foot__meta { display: flex; align-items: center; gap: var(--ah-3); padding-top: var(--ah-3); border-top: 1px solid var(--ah-border); color: var(--ah-muted); font-size: var(--ah-text-xs); }

/* Try it console */
.dx-console { display: flex; flex-direction: column; gap: var(--ah-3); padding: var(--ah-4); border: 1px solid color-mix(in oklab, var(--ah-primary) 40%, var(--ah-border)); border-radius: var(--ah-radius-xl); background: var(--ah-card); box-shadow: var(--ah-shadow-md); }
.dx-console__head { display: flex; align-items: center; gap: var(--ah-2); }
.dx-console__head strong { font-size: var(--ah-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apihub .dx-console__send { align-self: flex-start; }
.dx-sticky--console { overflow: auto; scrollbar-width: thin; }

/* search palette */
.dx-palette { position: fixed; inset: 0; z-index: 10050; display: flex; justify-content: center; align-items: flex-start; padding: 12vh var(--ah-4) var(--ah-4); background: rgba(10, 12, 16, .45); backdrop-filter: blur(2px); animation: ah-fade .1s ease-out; }
.dx-palette__box { width: 100%; max-width: 640px; max-height: 70vh; display: flex; flex-direction: column; border: 1px solid var(--ah-border); border-radius: 16px; background: var(--ah-pop); color: var(--ah-pop-fg); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); overflow: hidden; }
.dx-palette__field { display: flex; align-items: center; gap: var(--ah-3); padding: 0 var(--ah-4); border-bottom: 1px solid var(--ah-border); color: var(--ah-muted); }
.ah-layer .dx-palette__input, .apihub .dx-palette__input { flex: 1; height: 56px !important; min-height: 0; margin: 0; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--ah-fg); font: inherit; font-size: var(--ah-text-md); outline: none; }
.dx-palette__list { flex: 1; overflow: auto; padding: var(--ah-2); scrollbar-width: thin; }
.ah-layer .dx-hit, .apihub .dx-hit { display: flex; align-items: center; gap: var(--ah-3); width: 100%; min-height: 0; margin: 0; padding: var(--ah-2) var(--ah-3); border: 0; border-radius: var(--ah-radius-lg); background: none; color: var(--ah-fg); text-align: start; cursor: pointer; font: inherit; box-shadow: none; }
.ah-layer .dx-hit.active, .apihub .dx-hit.active { background: color-mix(in oklab, var(--ah-primary) 12%, transparent); }
.dx-hit .ad-method { min-width: 44px; }
.dx-hit > .ah-svg { color: var(--ah-muted); }
.dx-hit__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dx-hit__title { font-weight: 500; font-size: var(--ah-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-hit__sub { font: var(--ah-text-xs) var(--ah-mono); color: var(--ah-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-hit__folder { font-size: var(--ah-text-xs); color: var(--ah-muted); max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-palette__empty { padding: var(--ah-6); text-align: center; color: var(--ah-muted); margin: 0; }
.dx-palette__foot { display: flex; gap: var(--ah-4); padding: var(--ah-2) var(--ah-4); border-top: 1px solid var(--ah-border); color: var(--ah-muted); font-size: var(--ah-text-xs); }
.dx-palette__foot kbd { margin-inline-end: 2px; }

/* narrow content: one column; narrow window: the navigation is a drawer */
@container dxmain (max-width: 980px) {
	.dx-grid, [data-kind=guide] .dx-grid, [data-kind=model] .dx-grid { grid-template-columns: minmax(0, 1fr); }
	.dx-side { position: static; }
	.dx-sticky { max-height: none; overflow: visible; }
	[data-kind=guide] .dx-side { display: none; }
}
.apihub .dx-navtoggle { display: none; }
@media (max-width: 900px) {
	.dx { grid-template-columns: minmax(0, 1fr); }
	.dx-nav { position: fixed; z-index: 40; top: var(--dx-top); bottom: 0; inset-inline-start: 0; height: auto; width: min(320px, 86vw); transform: translateX(-105%); transition: transform .2s; box-shadow: var(--ah-shadow-lg); }
	:dir(rtl) .dx-nav { transform: translateX(105%); }
	.nav-open .dx-nav { transform: none; }
	.nav-open .dx-scrim { display: block; position: fixed; inset: var(--dx-top) 0 0 0; z-index: 35; background: rgba(0, 0, 0, .35); }
	.dx-main { padding: var(--ah-5) var(--ah-4) var(--ah-8); }
	.ah-docsview .dx-navtoggle { display: inline-flex; position: sticky; top: var(--ah-2); z-index: 30; margin: var(--ah-2) var(--ah-4) 0; justify-self: start; }
	.dx-url { flex-wrap: wrap; }
	.dx-url__host { display: none; }
	.dx-pns { grid-template-columns: 1fr; }
}
.dx-scrim { display: none; }

/* ================================================================ 2.1: public page header and dark theme */

.apihub--public .adp-top { height: 64px; gap: var(--ah-3); padding: 0 clamp(var(--ah-3), 2.5vw, var(--ah-6)); z-index: 45; }
.apihub--public .adp-brand { flex: 0 1 auto; color: var(--ah-fg); text-decoration: none; min-width: 0; }
.apihub .adp-search {
	flex: 1; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: var(--ah-2); height: 38px; min-height: 0; padding: 0 var(--ah-3);
	border: 1px solid var(--ah-border); border-radius: 19px; background: var(--ah-subtle); color: var(--ah-muted); font: inherit; font-size: var(--ah-text-sm); cursor: pointer; box-shadow: none;
}
.apihub .adp-search:hover { border-color: var(--ah-border-strong); color: var(--ah-fg); }
.adp-search span { flex: 1; text-align: start; }
.adp-tools { display: flex; align-items: center; gap: var(--ah-2); flex-shrink: 0; }
.apihub .adp-icon { width: 36px; height: 36px; min-height: 0; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--ah-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none; }
.apihub .adp-icon:hover { background: var(--ah-subtle); color: var(--ah-fg); }
.apihub .adp-menu { display: none; }
.apihub .adp-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; min-height: 0; margin: 0; padding: 0 10px; border: 1px solid var(--ah-border); border-radius: 16px; background: var(--ah-bg); color: var(--ah-fg); font: 600 var(--ah-text-xs) var(--ah-mono); cursor: pointer; box-shadow: none; }
.adp-pop { position: absolute; z-index: 60; min-width: 200px; padding: 6px; border: 1px solid var(--ah-border); border-radius: 12px; background: var(--ah-pop); box-shadow: var(--ah-shadow-lg); display: flex; flex-direction: column; }
.apihub .adp-pop__item { display: block; width: 100%; min-height: 0; height: 34px; margin: 0; padding: 0 var(--ah-3); border: 0; border-radius: 8px; background: none; color: var(--ah-fg); font: inherit; font-size: var(--ah-text-sm); text-align: start; cursor: pointer; box-shadow: none; }
.apihub .adp-pop__item:hover { background: var(--ah-hover); }
.apihub .adp-pop__item.active { color: var(--ah-primary); font-weight: 600; }
.apihub--public .adp-langs { padding: 2px; }
.apihub--public .adp-lang { height: 28px; padding: 0 10px; font-size: var(--ah-text-xs); }
@media (max-width: 900px) {
	.apihub .adp-menu { display: inline-flex; }
	.adp-titles span { display: none; }
	.apihub .adp-search { max-width: none; width: 38px; flex: 0 0 38px; padding: 0; justify-content: center; margin-inline-start: auto; }
	.adp-search span, .adp-search kbd { display: none; }
	.apihub .adp-pill span { display: none; }
}
@media (max-width: 520px) {
	.adp-brand .adp-titles { display: none; }
	.adp-tools { gap: 2px; }
}

.apihub--public[data-theme=dark] {
	--ah-bg: #0d0f13; --ah-fg: #e7e9ee; --ah-muted: #98a1ae; --ah-subtle: #161a20; --ah-hover: #1b2028; --ah-active: #222833;
	--ah-card: #12151a; --ah-pop: #161a20; --ah-pop-fg: #e7e9ee; --ah-border: #252a33; --ah-border-strong: #353c47;
	--ah-input: #3b424e; --ah-input-hover: #5a6372; --ah-side: #0b0d10; --ah-side-accent: #1a1f27; --ah-side-hover: #151920; --ah-side-border: #1f242c;
	--ah-success: #34d07a; --ah-success-soft: #10291b; --ah-success-text: #6ee7a3;
	--ah-warning: #f2b23a; --ah-warning-soft: #2f2410; --ah-warning-text: #f7c96a;
	--ah-info: #4aa8ff; --ah-info-soft: #0f2235; --ah-info-text: #85c3ff;
	--ah-danger: #ff6464; --ah-danger-soft: #331415; --ah-danger-text: #ff9a9a;
	--ah-violet: #a48df0; --ah-violet-soft: #2a2340;
	--ah-primary: #e7e9ee; --ah-primary-hover: #ffffff; --ah-primary-fg: #0d0f13; --ah-focus: #85c3ff; --ah-ring: rgba(133, 195, 255, .3);
	--ah-shadow-md: 0 4px 16px rgba(0, 0, 0, .45); --ah-shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
	color-scheme: dark;
}
#body-base:has(.apihub--public[data-theme=dark]) { background: #0d0f13; }
.apihub--public[data-theme=dark] .ah-input { background: var(--ah-subtle) !important; border-color: var(--ah-border-strong) !important; color: var(--ah-fg) !important; }
.apihub--public[data-theme=dark] .ah-btn { background-color: var(--ah-subtle); border-color: var(--ah-border-strong); color: var(--ah-fg); }
.apihub--public[data-theme=dark] .ah-btn--primary { background-color: var(--ah-primary); color: var(--ah-primary-fg); border-color: transparent; }
.apihub--public[data-theme=dark] .ah-md code { background: var(--ah-subtle); border-color: var(--ah-border); }
.apihub--public[data-theme=dark] .adp-top { background: color-mix(in oklab, var(--ah-bg) 85%, transparent); }
.dx :is(h1, h2, h3, h4, h5, h6) { color: var(--ah-fg); }
.dx-prose blockquote { color: var(--ah-muted); }