/* ---------- Docs (site_docs.py) ---------- */
.dx{--m1:color-mix(in srgb, var(--accent) 42%, var(--paper)); --m2:color-mix(in srgb, var(--accent) 61%, var(--paper));
  --m3:color-mix(in srgb, var(--accent) 78%, var(--paper)); --m4:var(--accent); --lw:150px}
.dx code{background:none; padding:0}
.dx p code, .dx li code, .dx td code, .dx .dx-st code{background:var(--rule-2); padding:.08em .35em; border-radius:2px}
.dx pre code{background:none; padding:0}
.dx th{text-transform:none; letter-spacing:normal}
.dx thead th{font:600 13px/1.35 "IBM Plex Sans", sans-serif; color:var(--ink-2)}
.dx-toc a{grid-template-columns:12px minmax(0,1fr) auto}
.dx-toc a small{font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.dx-toc a.cur small{color:var(--ink)}
.dx-toc .grp{text-transform:none; letter-spacing:.01em; font:600 12px/1.3 "Chakra Petch", sans-serif; padding:12px 6px 3px}
.dx-toc .grp:first-child{padding-top:0}
.dx-cats a{padding-top:4px; padding-bottom:4px; font-size:13.5px}
/* .dx-crumb is in build_site's CSS: the guides carry the same breadcrumb */
/* a long name breaks where it must: ui_events' sub ("UIListBox/Button/Scrollbar/Tab/Tree/EditBox", no break
   opportunity) made that page 376 px wide on a 360 px phone */
.dx .hero h1, .dx .hero-sub{overflow-wrap:anywhere}
.dx-lead{font-size:15px; color:var(--ink-2)}
.dx-use{font-size:14px; color:var(--ink-2); margin-top:14px}
.dx .section > h3{margin:24px 0 10px}

/* the hub's doc set card: its builds as two plain links */
.dx-setb{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:4px}
.dx-setb a{display:inline-flex; gap:10px; align-items:baseline; padding:7px 12px; border-radius:2px; background:var(--paper); color:var(--ink); text-decoration:none; font:500 14px/1.2 "IBM Plex Mono", monospace; box-shadow:inset 0 0 0 1px var(--rule)}
.dx-setb a span{font:400 12.5px/1.2 "IBM Plex Sans", sans-serif; color:var(--ink-2)}
.dx-setb a:hover{box-shadow:inset 0 0 0 1px var(--accent)} .dx-setb a:hover span{color:var(--ink)}
.dx-setb .dx-soon{display:inline-flex; gap:10px; align-items:baseline; padding:7px 12px; border-radius:2px; color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--rule-2); cursor:default}
.dx-setb .dx-soon span{font:400 12.5px/1.2 "IBM Plex Sans", sans-serif; color:var(--ink-2)}
.dx-gl a, .dx-gl .dx-soon{font:500 14px/1.2 "IBM Plex Sans", sans-serif}
.dx .card p{max-width:68ch}
.dx-trust .feat span{display:block}
.dx .step > div{min-width:0}
.dx .step pre{margin:8px 0 10px}
.dx pre.dx-prompt{white-space:pre-wrap; overflow-wrap:anywhere}

/* key/value and reference tables */
.dx-kv th[scope="row"]{white-space:nowrap; font-weight:500}
.dx-nw{white-space:nowrap}
.dx-kv td:last-child{color:var(--ink-2)}
.dx-bin td code{overflow-wrap:anywhere; font-size:12.5px}
.dx-bin th{width:190px}

/* ---- the address map ---- */
.dx-map{margin:8px 0 0}
.dx-ro{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 16px; min-height:44px; margin:0 0 4px; max-width:none; padding:0 0 0 calc(var(--lw) + 14px);
  font:400 12.5px/20px "IBM Plex Mono", monospace; color:var(--ink-2)}
.dx-ro b{color:var(--ink); font-weight:500} .dx-ro .me{color:var(--ink)} .dx-ro a{font-family:"IBM Plex Sans", sans-serif; font-size:13.5px}
.dx-tracks{position:relative; touch-action:pan-y}
.dx-tr{display:grid; grid-template-columns:var(--lw) minmax(0,1fr); gap:0 14px; align-items:center; height:20px}
.dx-axr{height:24px; align-items:end}
.dx-tn{font-size:13.5px; line-height:20px; color:var(--ink); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:1px}
.dx-tn:hover, .dx-tr.on .dx-tn{color:var(--accent-ink); text-decoration:underline; text-decoration-thickness:1px}
.dx-ts{display:block; height:12px; background:var(--canvas); border-radius:1px; cursor:crosshair}
.dx-tr.on .dx-ts{box-shadow:0 0 0 1px var(--rule)}
.dx-sv{display:block; width:100%; height:100%}
.dx-sv .l1, .dx-key .l1{fill:var(--m1); background:var(--m1)} .dx-sv .l2, .dx-key .l2{fill:var(--m2); background:var(--m2)}
.dx-sv .l3, .dx-key .l3{fill:var(--m3); background:var(--m3)} .dx-sv .l4, .dx-key .l4{fill:var(--m4); background:var(--m4)}
.dx-tg{font:600 13px/1 "Chakra Petch", sans-serif; letter-spacing:.02em; color:var(--ink-2); padding:14px 0 5px}
.dx-axr + .dx-tg{padding-top:8px}
.dx-cur{position:absolute; top:24px; bottom:0; width:1px; margin-left:-.5px; background:var(--ink); pointer-events:none}
.dx-ax{position:relative; height:24px}
.dx-ax span{position:absolute; bottom:0; height:5px; border-left:1px solid var(--ink-2)}
.dx-ax b{position:absolute; bottom:6px; left:4px; display:none; font:400 11px/1 "IBM Plex Mono", monospace; color:var(--ink-2); white-space:nowrap}
.dx-ax .a2, .dx-ax .a4, .dx-ax .a8{height:18px}
.dx-ax .a2 b, .dx-ax .a4 b, .dx-ax .a8 b{display:block}
.dx-ax{overflow:hidden}
.dx-key{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:14px 0 0; padding-left:calc(var(--lw) + 14px); font-size:12.5px; color:var(--ink-2)}
.dx-key span{margin-right:6px}
.dx-key i{display:inline-block; width:18px; height:10px; border-radius:1px; margin-left:8px}
.dx-out{margin:16px 0 0 calc(var(--lw) + 14px); font-size:14px; color:var(--ink-2)}
.dx-out summary{cursor:pointer; color:var(--ink)} .dx-out p{margin:8px 0}
.dx-ot{font-size:13px} .dx-ot th, .dx-ot td{padding:5px 8px} .dx-ot tbody th{font:400 12.5px "IBM Plex Mono", monospace}
.dx-ot td:nth-child(3){font-family:"IBM Plex Mono", monospace; overflow-wrap:anywhere}

/* ---- the categories table ---- */
.dx-ct{table-layout:fixed}
.dx-ct .c1{width:170px} .dx-ct .c2{width:96px} .dx-ct .c3{width:84px}
.dx-ct th, .dx-ct td{padding:9px 10px}
.dx-ct tbody th{font-weight:500; font-size:15px}
.dx-ct thead th:nth-child(2), .dx-ct thead th:nth-child(3){text-align:right}
.dx-ct td:nth-of-type(1), .dx-ct td:nth-of-type(2){text-align:right; font:400 13px/1.7 "IBM Plex Mono", monospace; font-variant-numeric:tabular-nums}
.dx-ct td:nth-of-type(2){color:var(--ink-2)}
.dx-ct td:nth-of-type(3){font-size:14px; color:var(--ink-2); overflow-wrap:anywhere}
.dx-g th{font:600 16px/1.2 "Chakra Petch", sans-serif !important; letter-spacing:.01em; color:var(--ink) !important; padding:24px 10px 8px}
.dx-ct tbody:first-of-type .dx-g th{padding-top:8px}

/* ---- find a function ---- */
.dx-ql{display:block; margin:0 0 10px; font-size:15px; color:var(--ink-2)}
.dx-q{display:block; width:100%; padding:12px 14px; border:1px solid var(--rule); border-radius:2px; background:var(--canvas); color:var(--ink);
  font:400 16px/1.3 "IBM Plex Mono", monospace; -webkit-appearance:none; appearance:none}
.dx-q::placeholder{color:var(--ink-2); opacity:.8}
.dx-q:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.dx-q[hidden]{display:none}
.dx-st{min-height:24px; margin:10px 0; font-size:14.5px; color:var(--ink-2); max-width:none}
.dx-st b{color:var(--ink); font-family:"IBM Plex Mono", monospace; font-weight:500; font-size:.95em}
.dx .dx-hits{list-style:none; margin:0; padding:0; max-width:none}
.dx .dx-hits li{margin:0}
.dx .dx-hits code{background:none; padding:0; border-radius:0}
.dx-hits:not(:empty){border-top:1px solid var(--rule)}
.dx-hits a{display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:2px 14px; padding:9px 10px; border-bottom:1px solid var(--rule-2); color:var(--ink); text-decoration:none}
.dx-hits a:hover{background:var(--rule-2)}
.dx-hits .a{font-size:12.5px; line-height:20px; color:var(--ink-2)}
.dx-hits .n{font-size:13.5px; line-height:20px; color:var(--accent-ink); overflow-wrap:anywhere}
.dx-hits .c{font-size:12.5px; line-height:20px; color:var(--ink-2); white-space:nowrap; text-align:right}
.dx-hits .c b{font:500 12px "IBM Plex Mono", monospace; color:var(--ink)}
.dx-hits .d{grid-column:2 / -1; font-size:14px; line-height:1.5; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.dx-hits li.in a{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.dx-hits mark{background:color-mix(in srgb, var(--accent) 30%, transparent); color:inherit; border-radius:1px}
.dx-more{margin:14px 0 0; padding:7px 14px; border:1px solid var(--rule); border-radius:2px; background:transparent; color:var(--ink); font:500 13.5px/1.2 "IBM Plex Sans", sans-serif; cursor:pointer}
.dx-more:hover{border-color:var(--accent); background:var(--accent-soft)}

/* ---- a category: the sticky bar (filter + the strip) and the function table ---- */
.dx-bar{position:sticky; top:56px; z-index:3; margin:0 -36px; padding:12px 36px 10px; height:86px; background:var(--paper); border-bottom:1px solid var(--rule)}
.dx-barrow{display:flex; align-items:center; gap:10px 16px}
.dx-barrow .dx-q{flex:0 1 360px; padding:8px 12px; font-size:14px}
.dx-cnt{font:400 13px/1.3 "IBM Plex Mono", monospace; color:var(--ink); white-space:nowrap}
.dx-tip{margin-left:auto; font-size:13px; color:var(--ink-2); text-align:right}
.dx-vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.dx-mini{position:relative; height:16px; margin:12px 0 0; background:var(--canvas); border-radius:1px; cursor:crosshair; touch-action:pan-y}
.dx-mini .dx-sv, .dx-mk{position:absolute; inset:0; width:100%; height:100%; display:block}
.dx-mk path{fill:var(--ink)}
.dx-mini.f .dx-sv{opacity:.35}
.dx-win{position:absolute; top:-3px; bottom:-3px; min-width:2px; border:1px solid var(--ink); border-radius:1px; pointer-events:none}
.dx-mini .dx-cur{top:-3px; bottom:-3px}
.dx-mini .dx-ro{position:absolute; top:100%; left:0; z-index:4; display:block; min-height:0; margin:6px 0 0; padding:4px 8px; transform:translateX(-12px);
  background:var(--code-bg); color:var(--code-ink); border-radius:2px; white-space:nowrap; pointer-events:none; box-shadow:var(--shadow)}
.dx-mini .dx-ro.r{transform:translateX(calc(-100% + 12px))}
.dx-mini .dx-ro[hidden], .dx-win[hidden], .dx-cur[hidden]{display:none}
.dx-mini .dx-ro b{color:var(--code-ink)} .dx-mini .dx-ro code{color:var(--code-ink); background:none}
/* the function list reads like a disassembler listing: address, size and name on one line, the description
   under the name like a comment, so neither is squeezed into a column */
.dx-ft, .dx-ft thead, .dx-ft tbody{display:block}
.dx-ft{font-size:14px} .dx-ft colgroup{display:none}
.dx-ft tr{display:grid; grid-template-columns:106px 62px minmax(0,1fr); border-bottom:1px solid var(--rule-2)}
.dx-ft tbody tr{padding:7px 0 8px}
.dx-ft tbody tr[hidden]{display:none}
/* 17,000 rows: the browser lays out only the ones near the screen; they stay in the page for find and crawlers */
.dx-ft tbody tr{content-visibility:auto; contain-intrinsic-size:auto 62px}
.dx-ft th, .dx-ft td{padding:0 10px; border:0}
.dx-ft thead{position:sticky; top:142px; z-index:2; background:var(--paper)}
.dx-ft thead tr{grid-template-columns:106px 62px auto minmax(0,1fr); padding:8px 0; border-bottom-color:var(--rule)}
.dx-ft thead th:nth-child(2){text-align:right}
.dx-ft thead th:nth-child(4){font-weight:400}
.dx-ft tbody th{font:400 12.5px/20px "IBM Plex Mono", monospace; color:var(--ink-2); cursor:pointer}
.dx-ft tbody th:hover{color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px}
.dx-ft td:nth-of-type(1){text-align:right; font:400 12.5px/20px "IBM Plex Mono", monospace; color:var(--ink-2); font-variant-numeric:tabular-nums}
.dx-ft td:nth-of-type(2){font:500 13px/20px "IBM Plex Mono", monospace; overflow-wrap:anywhere}
.dx-ft td:nth-of-type(3){grid-column:3; line-height:1.5; color:var(--ink-2); padding-top:2px; overflow-wrap:anywhere}
.dx-ft tbody tr:hover{background:var(--rule-2)} .dx-ft tbody tr:hover td:nth-of-type(3){color:var(--ink)}
.dx-ft tr{scroll-margin-top:190px}
.dx-ft tr:target, .dx-ft tr.dx-hit{background:var(--accent-soft)}
.dx-ft tr:target th, .dx-ft tr.dx-hit th{box-shadow:inset 3px 0 0 var(--accent); color:var(--ink)}
.dx-none{margin:18px 0; font-size:15px}
/* a category in parts: the parts as chips under the title, and the way on at the end of the list */
.dx-parts{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 18px}
.dx-parts-l{font:400 12.5px/1.4 "IBM Plex Mono", monospace; color:var(--ink-2); margin-right:4px}
.dx-parts a, .dx-parts span[aria-current]{display:inline-flex; gap:10px; align-items:baseline; padding:7px 12px; border-radius:2px; font:500 14px/1.2 "IBM Plex Sans", sans-serif; text-decoration:none}
.dx-parts a{color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule)} .dx-parts a:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.dx-parts span[aria-current]{color:var(--ink); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent)}
.dx-parts small{font:400 12px/1.2 "IBM Plex Mono", monospace; color:var(--ink-2)}
.dx-next{margin:18px 0 0; font-size:15px}

@media (max-width: 900px){
  .dx-bar{position:static; height:auto; margin:0 -18px; padding:12px 18px}
  .dx-ft thead th{position:static}
}
@media (max-width: 640px){
  .dx{--lw:92px}
  .dx-tn{font-size:12.5px}
  .dx-ax .a2 b{display:none} .dx-ax .a2{height:5px} .dx-ax b{font-size:10px}
  .dx-ro{padding-left:0; min-height:64px}
  .dx-key{padding-left:0} .dx-out{margin-left:0}
  .dx-ct .c1{width:auto} .dx-ct .c3, .dx-ct thead th:nth-child(3), .dx-ct td:nth-of-type(2){display:none}
  .dx-ct, .dx-ct tbody{display:block} .dx-ct thead, .dx-ct colgroup{display:none}
  .dx-ct tr{display:grid; grid-template-columns:minmax(0,1fr) auto; border-bottom:1px solid var(--rule)}
  .dx-ct th, .dx-ct td{border:0; padding:8px 0 2px} .dx-ct td:nth-of-type(3){grid-column:1 / -1; padding:0 0 10px}
  .dx-ct .dx-g{display:block} .dx-ct .dx-g th{display:block; padding:22px 0 6px}
  .dx-hits a{grid-template-columns:minmax(0,1fr) auto; padding:9px 6px}
  .dx-hits .n{grid-column:1 / -1; grid-row:2} .dx-hits .d{grid-column:1 / -1}
  .dx-barrow{flex-wrap:wrap} .dx-barrow .dx-q{flex:1 1 100%} .dx-tip{margin-left:0; text-align:left}
  .dx-ft thead{display:none}
  .dx-ft tr, .dx-ft tbody tr{grid-template-columns:auto minmax(0,1fr); gap:0 12px; padding:9px 0}
  .dx-ft tbody tr{contain-intrinsic-size:auto 104px}
  .dx-ft th, .dx-ft td{padding:0}
  .dx-ft td:nth-of-type(1){text-align:left}
  .dx-ft td:nth-of-type(1)::after{content:" bytes"}
  .dx-ft td:nth-of-type(2), .dx-ft td:nth-of-type(3){grid-column:1 / -1}
  .dx-ft td:nth-of-type(2){margin-top:2px}
  .dx-bin th{width:auto; white-space:normal}
  .dx-kv th[scope="row"]{white-space:normal}
}
@media (max-width: 340px){
  .dx-ax .a4 b{display:none} .dx-ax .a4{height:5px}
}
@media (max-width: 640px){
  /* 2.6 Phones (owner 2026-10-27; pass 2026-10-31): body text and inputs 16 px, small print 14 px, every tap
     target 48 x 48 px with 8 px between. Phones only: the desktop look does not move. */
  .dx-q, .dx-barrow .dx-q{font-size:16px; min-height:48px}
  .dx-lead, .dx-use, .dx-st, .dx-none, .dx-next, .dx-out, .dx-hits .d, .dx-kv td, .dx-ct td:nth-of-type(3), .dx-ft td:nth-of-type(3){font-size:16px}
  .dx-toc a small, .dx-toc .grp, .dx-cats a, .dx thead th, .dx-kv th, .dx-bin td code, .dx-ro, .dx-ro a, .dx-key, .dx-tg, .dx-tn,
  .dx-cnt, .dx-tip, .dx-parts-l, .dx-parts small, .dx-setb a span, .dx-setb .dx-soon span, .dx-hits .a, .dx-hits .n, .dx-hits .c,
  .dx-hits .c b, .dx-ot, .dx-ot tbody th, .dx-ft tbody th, .dx-ft td:nth-of-type(1), .dx-ft td:nth-of-type(2), .dx-ct td:nth-of-type(1),
  .dx-mini .dx-ro, .dx-ax b{font-size:14px}
  /* the axis keeps the labels that fit at 14 px: every 8 MB */
  .dx-ax .a4 b{display:none} .dx-ax .a4{height:5px}
  /* the address map: each category's row is a 48 px band, name and strip, 8 px apart */
  .dx{--lw:112px}
  .dx-tr:not(.dx-axr){height:48px; margin:0 0 8px}
  .dx-tn{line-height:48px}
  .dx-ts{height:48px}
  .dx-mini{height:48px}
  .dx-ct tbody th a{display:flex; align-items:center; min-height:48px}
  .dx-ct td:nth-of-type(1){align-self:center; padding:0}
  .dx-ot tbody th a{display:block; line-height:48px}
  .dx-setb a, .dx-setb .dx-soon, .dx-parts a, .dx-parts span[aria-current]{min-height:48px; align-items:center}
  /* (2026-11-01) a part button's address range stays off phones: six of them with ranges stacked one per row,
     about 350 px; the page's header names this part's range */
  .dx-parts small{display:none}
  .dx-hits li + li{margin-top:8px}
  .dx-more{min-height:48px}
  .dx-next a{display:inline-flex; align-items:center; min-height:48px}
  .dx-out summary{padding:12px 0}
  /* a link that is a table's whole row head (the hub's AGENTS.md): no sentence around it, so a full target */
  .dx-kv th a{display:inline-flex; align-items:center; min-height:48px; min-width:48px}
}