/* Documentation shares the homepage's paper, ink and locally hosted IBM Plex fonts. */
.d-body { font-size: 16px; line-height: 1.7; }
.d-header { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
.d-header-inner { display: flex; align-items: center; gap: 26px; max-width: 1456px; min-height: 77px; margin: auto; padding: 0 40px; }
.d-docs-label { padding-left: 26px; border-left: 1px solid var(--line-strong); color: var(--accent); font: 400 13px/1.4 var(--mono); }
.d-header-end { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.d-search-trigger { display: none; align-items: center; gap: 10px; width: 230px; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--muted); font-size: 13px; text-align: left; }
.d-js .d-search-trigger { display: flex; }
.d-search-trigger svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.d-search-trigger kbd { margin-left: auto; font: 12px/1 var(--mono); }
.d-languages { position: relative; font: 12px/1.4 var(--mono); white-space: nowrap; }
.d-languages > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; }
.d-languages > summary::-webkit-details-marker { display: none; }
.d-languages > nav { position: absolute; top: calc(100% + 8px); right: 0; width: 220px; max-height: 70vh; overflow-y: auto; padding: 7px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--paper); box-shadow: 0 8px 24px #0002; }
.d-languages a { display: flex; align-items: center; min-height: 36px; padding: 5px 10px; border-radius: 3px; }
.d-languages a:hover { background: var(--inset); }
.d-languages a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.d-github { font: 12px/1.4 var(--mono); white-space: nowrap; }
.d-github:hover, .d-footer a:hover { color: var(--accent); }
.d-layout { display: grid; grid-template-columns: 224px minmax(0, 760px) 168px; gap: 48px; max-width: 1456px; min-height: calc(100vh - 170px); margin: auto; padding: 0 40px; }
.d-sidebar { position: sticky; top: 77px; align-self: start; max-height: calc(100vh - 77px); padding: 37px 20px 38px 0; overflow-y: auto; scrollbar-width: thin; border-right: 1px solid var(--line); }
.d-nav-disclosure > summary { display: none; }
.d-navigation { display: grid; gap: 26px; }
.d-nav-group { display: grid; gap: 2px; }
.d-nav-group > p { margin: 0 0 7px 12px; color: var(--ink); font: 500 11px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.d-nav-group a { padding: 7px 12px; border-left: 2px solid transparent; border-radius: 0 3px 3px 0; font-size: 13px; line-height: 1.55; }
.d-nav-group a:hover { color: var(--ink); background: var(--inset); }
.d-nav-group a[aria-current] { border-left-color: var(--accent); background: #e7ebdf; color: var(--ink); font-weight: 500; }
.d-nav-children { display: grid; gap: 2px; margin: 5px 0 0 12px; border-left: 1px solid var(--line); }
.d-nav-children a { font-size: 12px; }
.d-main { min-width: 0; padding: 44px 0 50px; }
.d-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font: 11px/1.5 var(--mono); }
.d-eyebrow > span { letter-spacing: .05em; text-transform: uppercase; }
.d-copy-page { display: none; align-items: center; gap: 8px; min-height: 36px; padding: 4px 0 4px 8px; border: 0; background: transparent; color: var(--muted); font: 11px/1.4 var(--mono); white-space: nowrap; }
.d-js .d-copy-page { display: inline-flex; }
.d-copy-page:hover { color: var(--accent); }
.d-article h1 { margin-top: 17px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.18; letter-spacing: -.035em; text-wrap: pretty; }
.d-lead { margin-top: 20px; color: var(--text); font-size: 18px; line-height: 1.65; text-wrap: pretty; }
.d-availability { margin-top: 22px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.d-case-breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; color: var(--muted); font: 10px/1.5 var(--mono); }
.d-case-breadcrumb a { color: var(--accent); }
.d-case-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.d-preview { margin-top: 26px; padding: 14px 17px; border: 1px solid #cdd7c3; border-radius: 3px; background: #edf0e5; color: #4a5845; font-size: 12px; line-height: 1.65; }
.d-preview strong { color: #394c35; font-size: 11px; letter-spacing: .02em; }
.d-preview p { margin-top: 4px; }
.d-section { margin-top: 44px; scroll-margin-top: 108px; }
.d-prose h2 { margin: 0 0 18px; font-size: 24px; line-height: 1.3; letter-spacing: -.025em; }
.d-prose h2 a { display: inline; }
.d-anchor { margin-left: 9px; color: var(--muted); font-size: 17px; opacity: 0; }
.d-prose h2 a:hover .d-anchor, .d-prose h2 a:focus-visible .d-anchor { opacity: 1; }
.d-prose h3 { font-size: 17px; line-height: 1.4; }
.d-prose h3 + ul { margin-top: 12px; }
.d-prose ul + h3 { margin-top: 25px; }
.d-prose p + p { margin-top: 16px; }
.d-prose strong { color: var(--ink); font-weight: 500; }
.d-prose p a, .d-prose li a { color: var(--accent); text-decoration: underline; text-decoration-color: #aabdc5; text-underline-offset: 3px; }
.d-prose p a:hover, .d-prose li a:hover { text-decoration-color: currentColor; }
.d-prose :not(pre) > code { padding: 2px 4px; border: 1px solid #dfe1d6; border-radius: 3px; background: #eeeee6; color: #35432f; font-size: .82em; overflow-wrap: anywhere; }
.d-prose ul { padding-left: 22px; }
.d-prose ul li + li { margin-top: 10px; }
.d-steps { display: grid; gap: 15px; padding-left: 26px; }
.d-steps li { padding-left: 6px; }
.d-steps li::marker { color: var(--accent); font: 500 12px/1 var(--mono); }
.d-callout { margin-top: 24px; padding: 17px 20px; border-left: 2px solid #8a9a77; background: #eeeee5; border-radius: 0 3px 3px 0; font-size: 14px; }
.d-callout > strong { color: var(--ink); font-size: 13px; font-weight: 500; }
.d-callout p { margin-top: 5px; }
.d-primary { display: inline-flex; align-items: center; gap: 24px; margin-top: 20px; padding: 11px 17px; border: 1px solid var(--ink); border-radius: 3px; background: var(--ink); color: var(--surface); font-size: 14px; }
.d-primary:hover { background: #3b4537; }
.d-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.d-card { min-width: 0; padding: 20px; border: 1px solid var(--line-strong); border-radius: 3px; background: #f8f7f1; transition: border-color 120ms, background 120ms; }
.d-card:hover { border-color: #8e9e84; background: #eef0e5; }
.d-card-num { display: flex; justify-content: space-between; margin-bottom: 23px; color: var(--muted); font: 11px/1 var(--mono); }
.d-card h3 { color: var(--ink); font-size: 16px; font-weight: 500; }
.d-card p { margin-top: 8px; font-size: 13px; line-height: 1.65; }
.d-case-card-meta { display: block; margin-top: 18px; color: var(--muted); font: 10px/1.5 var(--mono); }
.d-prose .d-case-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 24px; padding: 0; list-style: none; counter-reset: case-flow; }
.d-prose .d-case-flow li { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 94px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 3px; background: #eef0e6; color: var(--ink); font-size: 13px; line-height: 1.55; counter-increment: case-flow; }
.d-case-flow li::before { content: counter(case-flow, decimal-leading-zero); color: var(--muted); font: 10px/1.4 var(--mono); }
.d-code { max-width: 100%; margin-top: 22px; overflow: hidden; border: 1px solid #cfd6c5; border-radius: 4px; background: #eef0e6; }
.d-code-bar { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 16px; border-bottom: 1px solid #d8dece; color: #626f58; font: 11px/1.4 var(--mono); }
.d-code-copy { display: none; align-items: center; min-height: 38px; padding: 5px 0 5px 16px; border: 0; background: transparent; color: #4d6943; font: inherit; }
.d-js .d-code-copy { display: inline-flex; }
.d-code-copy:hover { color: var(--ink); }
.d-code pre { margin: 0; padding: 20px; overflow-x: auto; color: #35432f; font: 12px/1.8 var(--mono); tab-size: 2; }
.d-code pre code { font: inherit; }
.d-code + p { margin-top: 19px; }
.d-token-key { color: #405d70; }
.d-token-string { color: #526d34; }
.d-token-value { color: #8a593a; }
.d-table-wrap { max-width: 100%; margin-top: 22px; overflow-x: auto; border: 1px solid var(--line); border-radius: 3px; }
.d-table-wrap + p { margin-top: 18px; }
.d-prose table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.7; text-align: left; }
.d-prose th { color: var(--ink); background: #edeee5; font-weight: 500; }
.d-prose th, .d-prose td { padding: 13px 15px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.d-prose tr:last-child td { border-bottom: 0; }
.d-prose td:first-child { min-width: 120px; color: var(--ink); }
.d-prose td code { border: 0; background: transparent; padding: 0; font-size: .9em; }
.d-icon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.d-icon-choice { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; padding: 18px 7px 14px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); }
.d-icon-choice:hover { border-color: var(--accent); }
.d-prose .d-icon-choice code { padding: 0; border: 0; background: transparent; font-size: 10px; }
.d-toc { position: sticky; top: 124px; align-self: start; padding-top: 5px; }
.d-toc > p { margin-bottom: 14px; color: var(--ink); font: 11px/1.5 var(--mono); }
.d-toc nav { display: grid; gap: 0; border-left: 1px solid var(--line); }
.d-toc a { margin-left: -1px; padding: 7px 0 7px 14px; border-left: 1px solid transparent; font-size: 12px; line-height: 1.55; }
.d-toc a:hover, .d-toc a[aria-current] { color: var(--accent); border-left-color: var(--accent); }
.d-article-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font: 10px/1.6 var(--mono); }
.d-article-end a:hover { color: var(--accent); }
.d-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.d-pager-link { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 3px; }
.d-pager-link:hover { border-color: var(--line-strong); background: var(--surface); }
.d-pager-link > span { color: var(--muted); font: 10px/1.4 var(--mono); }
.d-pager-link strong { color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.6; }
.d-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; max-width: 1376px; margin: 0 auto; padding: 22px 0; border-top: 1px solid var(--line); color: var(--muted); font: 11px/1.6 var(--mono); }
.d-footer > a:first-child { color: var(--ink); }
.d-footer > a:last-child { margin-left: auto; }
.d-search-dialog { width: min(640px, calc(100% - 32px)); max-height: min(78vh, 730px); margin: 12vh auto auto; padding: 22px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--paper); color: var(--text); box-shadow: 0 24px 90px #22261f33; }
.d-search-dialog::backdrop { background: #22261f77; }
.d-search-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.d-search-top h2 { font-size: 18px; }
.d-search-top button { width: 36px; min-height: 36px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--text); }
.d-search-dialog input { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink); font: 14px/1.5 var(--sans); }
.d-search-status { margin-top: 13px; color: var(--muted); font-size: 12px; }
.d-search-status button { margin-left: 10px; padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 3px; background: transparent; color: var(--accent); font: inherit; }
.d-search-results { display: grid; gap: 5px; max-height: 45vh; margin-top: 14px; overflow-y: auto; }
.d-search-result { display: grid; gap: 4px; padding: 12px; border-radius: 3px; background: var(--surface); }
.d-search-result:hover, .d-search-result:focus-visible { background: #e7ebdf; }
.d-search-result strong { color: var(--ink); font-size: 14px; font-weight: 500; }
.d-search-result span { color: var(--accent); font: 10px/1.5 var(--mono); }
.d-search-result p { color: var(--text); font-size: 12px; line-height: 1.6; }
.d-search-hint { margin-top: 17px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.d-toast { position: fixed; z-index: 50; right: 22px; bottom: 22px; max-width: calc(100vw - 44px); padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink); box-shadow: 0 4px 20px #22261f12; font-size: 12px; }
.d-toast:empty { display: none; }
.d-copy-buffer { position: fixed; left: -10000px; top: 0; }
@media (max-width: 1300px) {
  .d-layout { grid-template-columns: 204px minmax(0, 760px); gap: 40px; }
  .d-toc { display: none; }
  .d-footer { margin-inline: 40px; }
}
@media (max-width: 900px) {
  .d-header-inner { padding-inline: 24px; gap: 18px; }
  .d-header-end { gap: 16px; }
  .d-search-trigger { width: 180px; }
  .d-docs-label { padding-left: 18px; }
  .d-layout { display: block; max-width: 808px; padding-inline: 24px; }
  .d-sidebar { position: static; max-height: none; padding: 0; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .d-nav-disclosure > summary { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 10px 0; color: var(--ink); font: 12px/1.5 var(--mono); cursor: pointer; list-style: none; }
  .d-nav-disclosure > summary::-webkit-details-marker { display: none; }
  .d-nav-disclosure[open] > summary span { transform: rotate(180deg); }
  .d-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding-bottom: 24px; }
  .d-nav-disclosure:not([open]) > .d-navigation { display: none; }
  .d-main { padding-top: 30px; }
  .d-article h1 { font-size: 38px; }
  .d-footer { margin-inline: 24px; }
}
@media (max-width: 620px) {
  .d-header-inner { flex-wrap: wrap; min-height: 0; padding: 15px 20px 12px; gap: 10px 16px; }
  .d-header .brand { font-size: 18px; }
  .d-docs-label { padding-left: 16px; font-size: 12px; }
  .d-header-end { flex-basis: 100%; justify-content: space-between; gap: 14px; }
  .d-search-trigger { width: auto; flex: 1; min-width: 0; }
  .d-search-trigger kbd { display: none; }
  .d-github { font-size: 11px; }
  .d-languages { font-size: 11px; }
  .d-layout { padding-inline: 20px; }
  .d-main { padding-top: 25px; }
  .d-article h1 { margin-top: 17px; font-size: 32px; line-height: 1.23; }
  .d-lead { margin-top: 16px; font-size: 16px; }
  .d-eyebrow { font-size: 10px; }
  .d-section { margin-top: 34px; scroll-margin-top: 146px; }
  .d-prose h2 { margin-bottom: 15px; font-size: 22px; }
  .d-prose p, .d-prose li { font-size: 15px; }
  .d-preview { padding: 12px 14px; font-size: 11px; }
  .d-card-grid { gap: 10px; }
  .d-card { padding: 15px; }
  .d-card-num { margin-bottom: 18px; }
  .d-card h3 { font-size: 15px; }
  .d-card p { font-size: 12px; }
  .d-prose .d-case-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-prose .d-case-flow li { min-height: 83px; }
  .d-code pre { padding: 16px; font-size: 11px; }
  .d-prose th, .d-prose td { padding: 11px; }
  .d-icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .d-icon-choice { padding: 15px 4px 12px; }
  .d-icon-choice img { width: 32px; height: 32px; }
  .d-prose .d-icon-choice code { font-size: 9px; }
  .d-pager { gap: 10px; }
  .d-pager-link { padding: 13px; }
  .d-pager-link strong { font-size: 12px; }
  .d-footer { gap: 12px; margin-inline: 20px; font-size: 10px; }
  .d-footer p { flex-basis: 100%; order: 1; }
  .d-search-dialog { margin-top: 5vh; padding: 17px; }
}
@media (max-width: 359px) {
  .d-card-grid { grid-template-columns: minmax(0, 1fr); }
  .d-header-inner, .d-layout { padding-inline: 16px; }
  .d-search-trigger { font-size: 12px; }
  .d-header-end { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .d-card { transition: none; } }