/* IXXO Hub docs portal. Extends assets/enterprise.css, introduces no new tokens. */

body.docs { background: var(--bg-alt); color: var(--slate-500); font-family: var(--body); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 60; background: var(--white); padding: 10px 14px;
	border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--ink); }

/* ---------- slim header ---------- */

.dbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px;
	height: 58px; padding: 0 20px; background: var(--white);
	border-bottom: 1px solid var(--border); }
.dbar-menu { display: none; background: none; border: 0; padding: 6px; color: var(--slate-700); cursor: pointer; }
.dbar-menu svg { width: 22px; height: 22px; }
.dbar-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.dbar-brand img { display: block; height: 24px; width: auto; }
.dbar-brand span { font-family: var(--display); font-weight: 600; font-size: var(--fs-sm);
	color: var(--slate-500); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.dbar-search { position: relative; flex: 1; max-width: 460px; margin: 0 auto; }
.dbar-search-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
	color: var(--slate-400); pointer-events: none; }
.dbar-search-ico svg { width: 16px; height: 16px; display: block; }
.dbar-search input { width: 100%; height: 36px; padding: 0 34px 0 34px; font: inherit;
	font-size: var(--fs-sm); color: var(--ink); background: var(--bg-alt);
	border: 1px solid var(--border); border-radius: var(--radius); }
.dbar-search input:focus { outline: none; border-color: var(--accent); background: var(--white); }
.dbar-search kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
	font-family: var(--body); font-size: 0.7rem; color: var(--slate-400);
	border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 1px 5px; }
.dbar-site, .dbar-signin { font-size: var(--fs-sm); text-decoration: none; flex: none; }
.dbar-site { color: var(--slate-500); }
.dbar-site:hover { color: var(--accent-dark); }

.results { position: absolute; left: 0; right: 0; top: 42px; background: var(--white);
	border: 1px solid var(--border-strong); border-radius: var(--radius);
	box-shadow: var(--shadow-md); max-height: 60vh; overflow-y: auto; padding: 6px; }
.results a { display: block; padding: 8px 10px; border-radius: var(--radius);
	text-decoration: none; color: var(--ink); font-size: var(--fs-sm); }
.results a:hover, .results a.on { background: var(--bg-soft); }
.results a small { display: block; color: var(--slate-400); font-size: 0.78rem; }
.results .empty { padding: 10px; color: var(--slate-400); font-size: var(--fs-sm); }

/* ---------- three column shell ---------- */

/* Left aligned, not centred: the sidebar sits against the left edge and the
   content column absorbs the remaining width. The sheet carries its own cap so
   the reading measure stays sane on very wide screens. */
.dlayout { display: grid; grid-template-columns: 264px minmax(0, 1fr) 236px;
	gap: 36px; align-items: start;
	max-width: 1680px; margin: 0; padding: 26px 32px 60px 24px; }
.dlayout > * { min-width: 0; }

.sidebar { position: sticky; top: 78px; max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 6px; }
.sb-plugin + .sb-plugin { margin-top: 22px; }
.sb-plugin-name { display: block; font-family: var(--display); font-weight: 600;
	font-size: var(--fs-base); color: var(--ink); text-decoration: none; margin-bottom: 10px; }
.sb-plugin-name.active { color: var(--accent-dark); }
.sb-section { font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase;
	letter-spacing: var(--tracking-label); color: var(--slate-400); margin: 16px 0 6px; }
.sb-list { list-style: none; margin: 0; padding: 0; }
.sb-list a { display: block; padding: 5px 10px; margin-left: -10px; font-size: var(--fs-sm);
	line-height: 1.45; color: var(--slate-500); text-decoration: none;
	border-left: 2px solid transparent; border-radius: 0 var(--radius) var(--radius) 0;
	overflow-wrap: break-word; }
.sb-list a:hover { color: var(--ink); background: var(--bg-soft); }
.sb-list a.active { color: var(--accent-dark); font-weight: 600;
	border-left-color: var(--accent); background: var(--accent-tint); }

.dcontent { min-width: 0; }
.dsheet { background: var(--white); border: 1px solid var(--border);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
	padding: 34px 40px 40px; max-width: 1120px; }

.toc { position: sticky; top: 78px; max-height: calc(100vh - 100px); overflow-y: auto; }
.toc-title { font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase;
	letter-spacing: var(--tracking-label); color: var(--slate-400); margin-bottom: 8px; }
.toc-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.toc-list a { display: block; padding: 4px 12px; font-size: 0.82rem; line-height: 1.45;
	color: var(--slate-400); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; }
.toc-list a:hover { color: var(--ink); }
.toc-list a.on { color: var(--accent-dark); border-left-color: var(--accent); }
.toc-list .lv3 a { padding-left: 24px; }

/* ---------- page furniture ---------- */

.crumbs { display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
	font-size: var(--fs-sm); color: var(--slate-400); margin-bottom: 16px; }
.crumbs a { color: var(--slate-500); text-decoration: none; }
.crumbs a:hover { color: var(--accent-dark); }
.crumbs .sep { color: var(--border-strong); }

.dsheet h1 { font-family: var(--display); font-weight: 600; font-size: 1.9rem;
	line-height: 1.22; color: var(--ink); margin: 0 0 10px; overflow-wrap: break-word; }
.lede { font-size: var(--fs-lg); line-height: 1.6; color: var(--slate-500);
	margin: 0 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }

.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px;
	padding-top: 22px; border-top: 1px solid var(--border); }
.pager a { flex: 1; max-width: 48%; padding: 12px 14px; border: 1px solid var(--border);
	border-radius: var(--radius); text-decoration: none; color: var(--ink);
	font-size: var(--fs-sm); font-weight: 600; background: var(--white); }
.pager a:hover { border-color: var(--border-strong); background: var(--bg-alt); }
.pager a span { display: block; font-size: var(--fs-eyebrow); font-weight: 600;
	text-transform: uppercase; letter-spacing: var(--tracking-label);
	color: var(--slate-400); margin-bottom: 3px; }
.pager .next { text-align: right; }

/* ---------- index cards ---------- */

.gsec { margin-top: 30px; }
.gsec h2 { font-family: var(--display); font-size: var(--fs-eyebrow); font-weight: 600;
	text-transform: uppercase; letter-spacing: var(--tracking-label);
	color: var(--slate-400); margin: 0 0 12px; }
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.gcards > * { min-width: 0; }
.gcard { display: block; padding: 15px 16px; background: var(--white);
	border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; }
.gcard:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.gcard-t { display: block; font-family: var(--display); font-weight: 600;
	font-size: var(--fs-base); color: var(--ink); margin-bottom: 5px; overflow-wrap: break-word; }
.gcard-s { display: block; font-size: var(--fs-sm); line-height: 1.55; color: var(--slate-500); }
.gcard-n { display: block; margin-top: 9px; font-size: var(--fs-eyebrow); font-weight: 600;
	text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--accent-dark); }

/* ---------- prose ---------- */

.docs-prose { font-size: var(--fs-base); line-height: 1.72; color: var(--slate-500); }
.docs-prose h2 { font-family: var(--display); font-size: var(--fs-h3); line-height: 1.3;
	color: var(--ink); margin: 34px 0 12px; scroll-margin-top: 80px; overflow-wrap: break-word; }
.docs-prose h3 { font-family: var(--display); font-size: 1.05rem; color: var(--ink);
	margin: 24px 0 8px; scroll-margin-top: 80px; overflow-wrap: break-word; }
.docs-prose p { margin: 0 0 14px; overflow-wrap: break-word; }
.docs-prose a { color: var(--accent-dark); text-decoration: underline;
	text-underline-offset: 2px; overflow-wrap: break-word; }
.docs-prose strong { color: var(--ink); font-weight: 600; }
.docs-prose ul, .docs-prose ol { margin: 0 0 16px 0; padding-left: 22px; }
.docs-prose li { margin-bottom: 7px; overflow-wrap: break-word; }
.docs-prose code { font-size: 0.88em; background: var(--bg-soft); padding: 1px 5px;
	border-radius: var(--radius); color: var(--ink); overflow-wrap: break-word; }
.docs-prose kbd { font-family: var(--body); font-size: 0.8em; border: 1px solid var(--border-strong);
	border-bottom-width: 2px; border-radius: var(--radius); padding: 1px 6px; color: var(--ink); background: var(--white); }

.docs-prose h2 .anchor, .docs-prose h3 .anchor { opacity: 0; margin-left: 8px;
	color: var(--slate-400); text-decoration: none; font-weight: 400; }
.docs-prose h2:hover .anchor, .docs-prose h3:hover .anchor,
.docs-prose .anchor:focus { opacity: 1; }

/* numbered steps get an accent chip instead of a browser numeral */
.docs-prose ol { list-style: none; counter-reset: step; padding-left: 0; }
.docs-prose ol > li { counter-increment: step; position: relative; padding-left: 38px; margin-bottom: 11px; }
.docs-prose ol > li::before { content: counter(step); position: absolute; left: 0; top: 1px;
	width: 25px; height: 25px; display: grid; place-items: center;
	font-family: var(--display); font-size: 0.8rem; font-weight: 600;
	color: var(--accent-dark); background: var(--accent-soft); border-radius: var(--radius); }
.docs-prose ol ol, .docs-prose ol ul { margin-top: 8px; }
.docs-prose ul { list-style: disc; }

.tablewrap { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--border);
	border-radius: var(--radius); }
.tablewrap table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tablewrap th, .tablewrap td { text-align: left; padding: 10px 13px;
	border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: break-word; }
.tablewrap th { background: var(--bg-soft); color: var(--ink); font-weight: 600; white-space: normal; }
.tablewrap tr:last-child td { border-bottom: 0; }

.callout { display: flex; gap: 12px; padding: 14px 16px; margin: 0 0 18px;
	border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius); }
.callout-ico svg { width: 18px; height: 18px; display: block; }
.callout-body { flex: 1; min-width: 0; }
.callout-body p:last-child { margin-bottom: 0; }
.callout-label { display: block; font-family: var(--display); font-size: var(--fs-sm);
	font-weight: 600; margin-bottom: 4px; }
.callout.tip { background: var(--c-blue-bg); border-color: var(--c-blue-bd); border-left-color: var(--c-blue); }
.callout.tip .callout-ico, .callout.tip .callout-label { color: var(--c-blue); }
.callout.warn { background: var(--c-rose-bg); border-color: var(--c-rose-bd); border-left-color: var(--c-rose); }
.callout.warn .callout-ico, .callout.warn .callout-label { color: var(--c-rose); }
.docs-prose blockquote { margin: 0 0 18px; padding: 4px 0 4px 16px;
	border-left: 3px solid var(--border-strong); color: var(--slate-500); }

/* Screenshots are capped by height so a tall or very wide capture does not
   dominate the page. Click opens the full size in the lightbox below. */
.shot { margin: 0 0 20px; }
/* width:100% + height:auto is what lets the width/height attributes reserve the
   right box BEFORE the lazy image loads. Cap the width, never the height, or an
   unloaded image collapses and the page jumps when it arrives. */
.shot img { display: block; width: 100%; height: auto; max-width: 620px;
	cursor: zoom-in;
	border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.shot img:hover { border-color: var(--accent); }
.shot img:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- lightbox ---------- */

.lightbox { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center;
	justify-content: center; padding: 28px; background: rgba(22, 39, 63, 0.82); }
.lightbox img { max-width: 94vw; max-height: 90vh; width: auto; height: auto;
	border-radius: var(--radius); box-shadow: var(--shadow-md); cursor: zoom-out; }
.lightbox-close { position: absolute; top: 16px; right: 20px; width: 38px; height: 38px;
	display: grid; place-items: center; cursor: pointer;
	color: var(--ink); background: var(--white);
	border: 1px solid var(--border-strong); border-radius: var(--radius); }
.lightbox-close svg { width: 18px; height: 18px; }
.lightbox-cap { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center;
	padding: 0 28px; font-size: var(--fs-sm); color: var(--white); }
body.lightbox-open { overflow: hidden; }

.vid { display: flex; align-items: center; gap: 13px; margin: 0 0 20px; padding: 14px 16px;
	background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
	cursor: pointer; }
.vid:hover { border-color: var(--accent); }
.vid:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vid-play { width: 34px; height: 34px; flex: none; display: grid; place-items: center;
	color: var(--white); background: var(--accent); border-radius: var(--radius); }
.vid-play svg { width: 15px; height: 15px; }
.vid-label { font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }
.vid video { width: 100%; border-radius: var(--radius); display: block; }
.vid.playing { display: block; padding: 0; background: none; border-color: var(--border); }

/* ---------- footer ---------- */

.dfoot { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
	align-items: center; max-width: 1680px; margin: 0; padding: 20px 32px 20px 24px;
	border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--slate-400); }
.dfoot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.dfoot a { color: var(--slate-500); text-decoration: none; }
.dfoot a:hover { color: var(--accent-dark); }

/* ---------- responsive ---------- */

@media (max-width: 1200px) {
	.dlayout { grid-template-columns: 240px minmax(0, 1fr); gap: 26px; }
	.toc { display: none; }
}

@media (max-width: 900px) {
	.dlayout { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 48px; }
	.dbar-menu { display: block; }
	.dbar-site, .dbar-signin { display: none; }
	.dsheet { padding: 22px 18px 28px; }
	.sidebar { position: fixed; inset: 58px auto 0 0; width: 280px; max-height: none; height: calc(100vh - 58px);
		background: var(--white); border-right: 1px solid var(--border);
		padding: 18px 16px; transform: translateX(-100%); transition: transform .2s ease; z-index: 45; }
	body.nav-open .sidebar { transform: none; }
	body.nav-open::after { content: ''; position: fixed; inset: 58px 0 0 0;
		background: rgba(22, 39, 63, .34); z-index: 40; }
	.dsheet h1 { font-size: 1.55rem; }
	.pager { flex-direction: column; }
	.pager a { max-width: none; }
	.pager .next { text-align: left; }
}

[data-lang="de"] .docs-prose { hyphens: auto; }

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