/* The /docs pages (docs.html, js/docs.js). Colours come from the app's theme variables in style.css, so the docs
   follow the visitor's chosen theme and each site's own colours. Fonts as in the app: Press Start 2P for headings
   and labels, VT323 for text. Everything is scoped to body.docs or .dx-* classes. */
body.docs{font-size:20px; line-height:1.4; overflow-x:hidden;}
body.docs ::selection{background:var(--accent-amber); color:var(--on-accent);}
.docs a{color:var(--accent-amber); text-decoration:none;}
.docs a:hover{text-decoration:underline;}
.docs :focus-visible{outline:2px solid var(--accent-cyan); outline-offset:2px;}
.docs button{font:inherit; color:inherit;}
.dx-skip{position:absolute; left:-9999px; top:0; z-index:20; background:var(--bg-panel); padding:8px 12px; border:1px solid var(--border);}
.dx-skip:focus{left:8px; top:8px;}

/* ---- top bar ---- */
.dx-top{position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:14px; padding:10px 16px; min-height:57px;
  background:color-mix(in srgb, var(--bg) 94%, transparent); border-bottom:1px solid var(--border); backdrop-filter:blur(6px);}
.dx-brand{display:flex; align-items:center; gap:10px; flex:none; color:var(--text-primary) !important; text-decoration:none !important; min-width:0;}
.dx-brand img{width:34px; height:34px; border-radius:6px; object-fit:cover; image-rendering:auto;}
.dx-word{font-size:11px; line-height:1; color:var(--text-primary); white-space:nowrap;}
.dx-word b{color:var(--accent-amber); font-weight:400;}
.dx-brand em{font-size:8px; line-height:1; color:var(--text-muted); font-style:normal; border:1px solid var(--border); padding:4px 6px;}
.dx-search{flex:1; max-width:420px; min-width:0; position:relative;}
.dx-search input{width:100%; background:var(--bg-panel); border:1px solid var(--border); color:var(--text-primary); padding:7px 10px 7px 34px; font:18px 'VT323',monospace; border-radius:0;}
.dx-search input::placeholder{color:var(--text-muted);}
.dx-search svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-muted);}
.dx-res{position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--bg-panel); border:1px solid var(--border); padding:4px; display:flex; flex-direction:column; z-index:12;}
.dx-res[hidden]{display:none;}
.dx-res a{color:var(--text-primary); padding:6px 10px; display:block;}
.dx-res a:hover,.dx-res a:focus-visible,.dx-res a.on{background:var(--bg-panel-alt); text-decoration:none;}
.dx-res small{display:block; color:var(--text-muted); font-size:15px;}
.dx-res p{margin:6px 10px; color:var(--text-muted);}
.dx-launch{font-size:9px; line-height:1; background:var(--accent-amber); color:var(--on-accent) !important; padding:10px 12px; flex:none; white-space:nowrap;}
.dx-launch:hover{text-decoration:none !important; filter:brightness(1.12);}
.dx-menu{display:none; background:none; border:1px solid var(--border); color:var(--text-primary); padding:4px 9px; cursor:pointer; font-size:18px; line-height:1;}

/* ---- three columns ---- */
.dx-shell{display:grid; grid-template-columns:260px minmax(0,1fr) 210px; max-width:1360px; margin:0 auto; position:relative; z-index:2;}
.dx-side{border-right:1px solid var(--border); padding:18px 12px 40px; position:sticky; top:57px; height:calc(100vh - 57px); overflow:auto; background:color-mix(in srgb, var(--bg-panel) 55%, transparent);}
.dx-grp{font:8px/1.6 'Press Start 2P',monospace; color:var(--text-muted); letter-spacing:.06em; margin:18px 10px 6px;}
.dx-grp:first-child{margin-top:0;}
.dx-side a{display:flex; width:100%; align-items:center; gap:8px; color:var(--text-muted); padding:4px 10px; font-size:19px; line-height:1.25;}
.dx-side a:hover{background:var(--bg-panel); color:var(--text-primary); text-decoration:none;}
.dx-side a[aria-current="page"]{background:var(--bg-panel-alt); color:var(--text-primary); box-shadow:inset 3px 0 0 var(--accent-amber);}
.dx-pill{font:7px/1 'Press Start 2P',monospace; padding:3px 5px; margin-left:auto; flex:none;}
.dx-pill.new{background:var(--success); color:var(--on-accent);}
.dx-pill.soon{background:var(--accent-magenta); color:var(--on-accent);}
.dx-sites{margin:22px 10px 0; padding-top:12px; border-top:1px solid var(--border); font-size:17px; color:var(--text-muted);}
.dx-sites a{padding:2px 0; font-size:17px;}

.dx-main{padding:28px 40px 80px; min-width:0; outline:none;}
.dx-crumb{font:8px/1.6 'Press Start 2P',monospace; color:var(--text-muted); margin-bottom:10px;}
.dx-main h1{font:20px/1.4 'Press Start 2P',monospace; margin:0 0 14px; color:var(--text-primary); overflow-wrap:anywhere;}
.dx-main h2{font:13px/1.5 'Press Start 2P',monospace; margin:34px 0 10px; padding-top:6px; scroll-margin-top:72px; color:var(--text-primary);}
.dx-main h3{font:22px/1.3 'VT323',monospace; margin:20px 0 4px; color:var(--accent-amber);}
.dx-main p,.dx-main li{max-width:70ch; color:var(--text-primary); opacity:.92;}
.dx-main p{margin:8px 0;}
.dx-main li{margin:4px 0;}
.dx-main b{color:var(--text-primary); font-weight:400; text-shadow:0 0 1px currentColor;}
.dx-lead{font-size:23px; opacity:1 !important;}
.dx-main ul,.dx-main ol{padding-left:24px;}
.dx-main code{font:inherit; font-size:.95em; background:var(--bg-panel-alt); border:1px solid var(--border); padding:0 5px; overflow-wrap:anywhere;}
.dx-muted{color:var(--text-muted) !important;}
.dx-hero{border:1px solid var(--border); margin:4px 0 18px; max-width:900px;}
.dx-hero img{display:block; width:100%; height:auto;}
.dx-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin:14px 0;}
.dx-card{background:var(--bg-panel); border:1px solid var(--border); padding:14px; color:var(--text-primary) !important; display:flex; flex-direction:column; gap:4px;}
.dx-card:hover{border-color:var(--accent-amber); text-decoration:none !important;}
.dx-card b{font:9px/1.5 'Press Start 2P',monospace; text-shadow:none;}
.dx-card span{color:var(--text-muted); font-size:18px;}
.dx-call{border:1px solid var(--border); border-left:3px solid var(--accent-amber); background:var(--bg-panel); padding:10px 14px; margin:16px 0; max-width:72ch;}
.dx-call.tip{border-left-color:var(--success);}
.dx-call.new{border-left-color:var(--success);}
.dx-call.soon{border-left-color:var(--accent-magenta);}
.dx-call p{margin:4px 0;}
.dx-scroll{overflow-x:auto; margin:12px 0; max-width:100%;}
.docs .dx-main table{border-collapse:collapse; width:100%; font-size:19px; font-variant-numeric:tabular-nums;}
.docs .dx-main th,.docs .dx-main td{border-bottom:1px solid var(--border); padding:7px 10px; text-align:left; vertical-align:top;}
.docs .dx-main th{font:8px/1.6 'Press Start 2P',monospace; color:var(--text-muted); background:var(--bg-panel);}
.docs .dx-main tbody th{font:19px 'VT323',monospace; color:var(--text-primary); width:34%;}
.docs .dx-main td{color:var(--text-primary);}
.dx-addr{overflow-wrap:anywhere; word-break:break-all;}
.dx-live{font:7px/1 'Press Start 2P',monospace; background:var(--success); color:var(--on-accent); padding:3px 5px; margin-left:6px; vertical-align:middle; white-space:nowrap;}

/* ---- media kit ---- */
.dx-kit{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; margin:12px 0;}
.dx-asset{background:var(--bg-panel); border:1px solid var(--border); overflow:hidden; display:flex; flex-direction:column; min-width:0;}
.dx-asset.wide{grid-column:span 2;}
.dx-asset .im{background:#000; display:flex; align-items:center; justify-content:center; aspect-ratio:4/5; overflow:hidden;}
.dx-asset .im.sq{aspect-ratio:1;}
.dx-asset .im.wide{aspect-ratio:16/5;}
.dx-asset img{width:100%; height:100%; object-fit:cover; display:block;}
.dx-asset .meta{padding:8px 10px; display:flex; flex-direction:column; gap:6px;}
.dx-asset .meta b{font-size:20px;}
.dx-asset .meta span{font-size:16px; color:var(--text-muted);}
.dx-dl{display:flex; gap:6px; flex-wrap:wrap;}
.dx-dl a{font:7px/1 'Press Start 2P',monospace; border:1px solid var(--border); color:var(--text-primary); padding:6px 7px;}
.dx-dl a:hover{border-color:var(--accent-amber); text-decoration:none;}
.dx-sw{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin:12px 0;}
.dx-sw div{border:1px solid var(--border); overflow:hidden; font-size:16px; color:var(--text-muted); background:var(--bg-panel);}
.dx-sw i{display:block; height:46px; border-bottom:1px solid var(--border);}
.dx-sw p{margin:0 !important; padding:6px 8px; color:var(--text-muted) !important;}
.dx-sw p b{display:block;}
.dx-copy{background:var(--bg-panel); border:1px solid var(--border); padding:10px 14px; margin:10px 0; max-width:72ch;}
.dx-copy-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px;}
.dx-copy-head small{color:var(--text-muted); font:8px/1.6 'Press Start 2P',monospace;}
.dx-copy p{margin:0 !important; white-space:pre-line;}
.dx-btn{font:7px/1 'Press Start 2P',monospace !important; background:var(--bg-panel-alt); border:1px solid var(--border); color:var(--text-primary); padding:7px 8px; cursor:pointer; flex:none;}
.dx-btn:hover{border-color:var(--accent-amber);}

/* ---- prev / next ---- */
.dx-next{display:flex; justify-content:space-between; gap:12px; margin-top:40px; border-top:1px solid var(--border); padding-top:16px;}
.dx-next a{background:var(--bg-panel); border:1px solid var(--border); padding:10px 14px; color:var(--text-primary); min-width:0; max-width:48%;}
.dx-next a:hover{border-color:var(--accent-amber); text-decoration:none;}
.dx-next a.r{text-align:right; margin-left:auto;}
.dx-next small{display:block; color:var(--text-muted); font:7px/1.6 'Press Start 2P',monospace;}

.dx-toc{padding:28px 14px; position:sticky; top:57px; height:calc(100vh - 57px); overflow:auto;}
.dx-toc b{font:8px/1.6 'Press Start 2P',monospace; color:var(--text-muted); display:block; margin-bottom:8px;}
.dx-toc a{display:block; color:var(--text-muted); font-size:18px; padding:2px 0 2px 10px; border-left:1px solid var(--border);}
.dx-toc a:hover{color:var(--text-primary); border-left-color:var(--accent-amber); text-decoration:none;}

@media (max-width:1100px){ .dx-shell{grid-template-columns:240px minmax(0,1fr);} .dx-toc{display:none;} }
@media (max-width:760px){
  .dx-shell{grid-template-columns:minmax(0,1fr);}
  .dx-side{position:fixed; inset:57px 0 0 0; height:auto; z-index:9; display:none; border-right:0; background:var(--bg);}
  .dx-side.open{display:block;}
  .dx-menu{display:block;}
  .dx-brand em{display:none;}
  .dx-top{gap:8px; padding:10px 12px;}
  .dx-main{padding:22px 16px 60px;}
  .dx-main h1{font-size:16px;}
  .dx-launch{padding:9px 8px; font-size:7px;}
  .dx-asset.wide{grid-column:auto;}
  .dx-kit{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
}
@media (max-width:480px){ .dx-word{display:none;} }